@alfalab/core-components 37.2.1 → 37.3.0-beta.10

package/tabs/modern/responsive.js

@@ -14,10 +14,10 @@ import '../../picker-button/modern/desktop';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-72ecd616.js';
+import './index.module-a40a00d4.js';
 import './components/primary-tablist/Component.mobile.js';
 import '../../tag/modern';
-import './index.module-5206ca02.js';
+import './index.module-8eccc1a1.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/Component.js';

package/tabs/modern/{typings-85892853.d.ts → typings-ac481e66.d.ts}

@@ -22,6 +22,10 @@ type OptionShape = {
      * Дополнительные данные
      */
     value?: any;
+    /**
+     * Уникальный id, необходим в случае, если нужно фильтровать / сортировать options
+     */
+    id?: number;
 };
 type GroupShape = {
     /**
@@ -39,6 +43,16 @@ type BaseSelectChangePayload = {
     initiator: OptionShape | null;
     name?: string;
 };
+type FilterProps = {
+    /**
+     * Фильтр функция для переданных options
+     */
+    filterFunction?: (options: Array<OptionShape | GroupShape>, filterValue: string) => Array<OptionShape | GroupShape>;
+    /**
+     * Поисковая строка для фильтра
+     */
+    filterValue?: string;
+};
 type BaseSelectProps = {
     /**
      * Идентификатор для систем автоматизированного тестирования
@@ -244,6 +258,10 @@ type BaseSelectProps = {
      * Показывать OptionsList, если он пустой
      */
     showEmptyOptionsList?: boolean;
+    /**
+     * Возможность фильтровать options внутри select
+     */
+    filterProps?: FilterProps;
 };
 type FieldProps = {
     /**
@@ -441,6 +459,11 @@ type OptionsListProps = {
      * Обработчик отмены изменений
      */
     onClear?: () => void;
+    /**
+     * Использовать поле id из OptionShape в качестве индекса option в OptionList
+     * Необходимо для корректной работы option после сортировки / фильтрации массива options
+     */
+    useOptionsIds?: boolean;
 };
 type OptgroupProps = {
     /**
@@ -550,4 +573,4 @@ type CheckmarkProps = {
      */
     icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 };
-export { OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
+export { OptionShape, GroupShape, BaseSelectChangePayload, FilterProps, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };

package/tabs/modern/{utils-85892853.d.ts → utils-ac481e66.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-85892853";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-ac481e66";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {
@@ -10,6 +10,7 @@ declare function processOptions(options: BaseSelectProps['options'], selected?:
     flatOptions: OptionShape[];
     selectedOptions: OptionShape[];
 };
+declare const getFilteredOptions: (options: Array<OptionShape | GroupShape>, filterValue: string, filterFunction: (options: Array<OptionShape | GroupShape>, filterValue: string) => Array<OptionShape | GroupShape>) => Array<OptionShape | GroupShape>;
 type useVisibleOptionsArgs = {
     /**
      * Количество видимых пунктов
@@ -35,4 +36,4 @@ type useVisibleOptionsArgs = {
 declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
 declare function usePrevious<T>(value: T): T | undefined;
 declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
-export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, usePrevious, lastIndexOf };
+export { isGroup, isOptionShape, joinOptions, processOptions, getFilteredOptions, useVisibleOptions, usePrevious, lastIndexOf };

package/tabs/responsive.js

@@ -5,7 +5,7 @@ var components_tab_Component = require('./components/tab/Component.js');
 var components_tabs_Component_responsive = require('./components/tabs/Component.responsive.js');
 var hooks_useTabs = require('./hooks/use-tabs.js');
 var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js');
-require('./tslib.es6-fa6ccd23.js');
+require('./tslib.es6-73852ed9.js');
 require('react');
 require('@alfalab/hooks');
 require('./components/primary-tablist/Component.desktop.js');
@@ -19,12 +19,12 @@ require('@juggle/resize-observer');
 require('./synthetic-events.js');
 require('./components/title/Component.js');
 require('compute-scroll-into-view');
-require('./index.module-4a8c8f91.js');
+require('./index.module-5aa5df6f.js');
 require('./components/primary-tablist/Component.mobile.js');
 require('./components/secondary-tablist/Component.desktop.js');
 require('./components/secondary-tablist/Component.js');
 require('../tag');
-require('./index.module-098b73ec.js');
+require('./index.module-2dc94418.js');
 require('./components/secondary-tablist/Component.mobile.js');
 require('./components/tabs/Component.js');
 

package/tabs/synthetic-events.js

@@ -1,4 +1,4 @@
-var tslib_es6 = require('./tslib.es6-fa6ccd23.js');
+var tslib_es6 = require('./tslib.es6-73852ed9.js');
 
 var createSyntheticEvent = function (event) {
     var isDefaultPrevented = false;

package/tabs/{typings-85892853.d.ts → typings-ac481e66.d.ts}

@@ -22,6 +22,10 @@ type OptionShape = {
      * Дополнительные данные
      */
     value?: any;
+    /**
+     * Уникальный id, необходим в случае, если нужно фильтровать / сортировать options
+     */
+    id?: number;
 };
 type GroupShape = {
     /**
@@ -39,6 +43,16 @@ type BaseSelectChangePayload = {
     initiator: OptionShape | null;
     name?: string;
 };
+type FilterProps = {
+    /**
+     * Фильтр функция для переданных options
+     */
+    filterFunction?: (options: Array<OptionShape | GroupShape>, filterValue: string) => Array<OptionShape | GroupShape>;
+    /**
+     * Поисковая строка для фильтра
+     */
+    filterValue?: string;
+};
 type BaseSelectProps = {
     /**
      * Идентификатор для систем автоматизированного тестирования
@@ -244,6 +258,10 @@ type BaseSelectProps = {
      * Показывать OptionsList, если он пустой
      */
     showEmptyOptionsList?: boolean;
+    /**
+     * Возможность фильтровать options внутри select
+     */
+    filterProps?: FilterProps;
 };
 type FieldProps = {
     /**
@@ -441,6 +459,11 @@ type OptionsListProps = {
      * Обработчик отмены изменений
      */
     onClear?: () => void;
+    /**
+     * Использовать поле id из OptionShape в качестве индекса option в OptionList
+     * Необходимо для корректной работы option после сортировки / фильтрации массива options
+     */
+    useOptionsIds?: boolean;
 };
 type OptgroupProps = {
     /**
@@ -550,4 +573,4 @@ type CheckmarkProps = {
      */
     icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 };
-export { OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
+export { OptionShape, GroupShape, BaseSelectChangePayload, FilterProps, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };

package/tabs/{utils-85892853.d.ts → utils-ac481e66.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-85892853";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-ac481e66";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {
@@ -10,6 +10,7 @@ declare function processOptions(options: BaseSelectProps['options'], selected?:
     flatOptions: OptionShape[];
     selectedOptions: OptionShape[];
 };
+declare const getFilteredOptions: (options: Array<OptionShape | GroupShape>, filterValue: string, filterFunction: (options: Array<OptionShape | GroupShape>, filterValue: string) => Array<OptionShape | GroupShape>) => Array<OptionShape | GroupShape>;
 type useVisibleOptionsArgs = {
     /**
      * Количество видимых пунктов
@@ -35,4 +36,4 @@ type useVisibleOptionsArgs = {
 declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
 declare function usePrevious<T>(value: T): T | undefined;
 declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
-export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, usePrevious, lastIndexOf };
+export { isGroup, isOptionShape, joinOptions, processOptions, getFilteredOptions, useVisibleOptions, usePrevious, lastIndexOf };

package/tag/Component.js

@@ -48,13 +48,13 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"component":"tag__component_16fr2","checked":"tag__checked_16fr2"};
+var defaultColors = {"component":"tag__component_18740","checked":"tag__checked_18740"};
 require('./default.css');
 
-var styles = {"component":"tag__component_uy456","focused":"tag__focused_uy456","addons":"tag__addons_uy456","s":"tag__s_uy456","m":"tag__m_uy456","l":"tag__l_uy456","xl":"tag__xl_uy456","xxs":"tag__xxs_uy456","xs":"tag__xs_uy456","withRightAddons":"tag__withRightAddons_uy456","withLeftAddons":"tag__withLeftAddons_uy456","defaultVariant":"tag__defaultVariant_uy456","alt":"tag__alt_uy456"};
+var styles = {"component":"tag__component_13dwt","focused":"tag__focused_13dwt","addons":"tag__addons_13dwt","s":"tag__s_13dwt","m":"tag__m_13dwt","l":"tag__l_13dwt","xl":"tag__xl_13dwt","xxs":"tag__xxs_13dwt","xs":"tag__xs_13dwt","withRightAddons":"tag__withRightAddons_13dwt","withLeftAddons":"tag__withLeftAddons_13dwt","defaultVariant":"tag__defaultVariant_13dwt","alt":"tag__alt_13dwt"};
 require('./index.css');
 
-var invertedColors = {"component":"tag__component_tif8r","checked":"tag__checked_tif8r"};
+var invertedColors = {"component":"tag__component_v9s7a","checked":"tag__checked_v9s7a"};
 require('./inverted.css');
 
 var colorStylesMap = {

package/tag/default.css

@@ -53,39 +53,39 @@
 
     /* text color */
 }
-.tag__component_16fr2 {
+.tag__component_18740 {
     color: var(--tag-text-color);
     border-color: var(--tag-border-color);
     background-color: var(--tag-background-color)
 }
-.tag__component_16fr2:disabled {
+.tag__component_18740:disabled {
         border-color: var(--tag-border-color-disabled);
         color: var(--tag-text-color-disabled);
         background-color: var(--tag-background-color-disabled);
     }
-.tag__component_16fr2:hover:not(:disabled) {
+.tag__component_18740:hover:not(:disabled) {
         border-color: var(--tag-border-color-hover);
         background-color: var(--tag-background-color-hover);
     }
-.tag__component_16fr2:active:not(:disabled) {
+.tag__component_18740:active:not(:disabled) {
         border-color: var(--tag-border-color-active);
         background-color: var(--tag-background-color-active);
         color: var(--tag-text-color);
     }
-.tag__checked_16fr2 {
+.tag__checked_18740 {
     border-color: var(--tag-border-color-checked);
     background-color: var(--tag-background-color-checked);
     color: var(--tag-text-color-checked)
 }
-.tag__checked_16fr2:disabled {
+.tag__checked_18740: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__checked_16fr2:hover:not(:disabled):not(:active) {
+.tag__checked_18740:hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked-hover);
     }
-.tag__checked_16fr2:active:not(:disabled) {
+.tag__checked_18740:active:not(:disabled) {
         background-color: var(--tag-background-color-checked-active);
         color: var(--tag-text-color-checked);
     }

package/tag/esm/Component.js

@@ -42,13 +42,13 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"component":"tag__component_16fr2","checked":"tag__checked_16fr2"};
+var defaultColors = {"component":"tag__component_18740","checked":"tag__checked_18740"};
 require('./default.css');
 
-var styles = {"component":"tag__component_uy456","focused":"tag__focused_uy456","addons":"tag__addons_uy456","s":"tag__s_uy456","m":"tag__m_uy456","l":"tag__l_uy456","xl":"tag__xl_uy456","xxs":"tag__xxs_uy456","xs":"tag__xs_uy456","withRightAddons":"tag__withRightAddons_uy456","withLeftAddons":"tag__withLeftAddons_uy456","defaultVariant":"tag__defaultVariant_uy456","alt":"tag__alt_uy456"};
+var styles = {"component":"tag__component_13dwt","focused":"tag__focused_13dwt","addons":"tag__addons_13dwt","s":"tag__s_13dwt","m":"tag__m_13dwt","l":"tag__l_13dwt","xl":"tag__xl_13dwt","xxs":"tag__xxs_13dwt","xs":"tag__xs_13dwt","withRightAddons":"tag__withRightAddons_13dwt","withLeftAddons":"tag__withLeftAddons_13dwt","defaultVariant":"tag__defaultVariant_13dwt","alt":"tag__alt_13dwt"};
 require('./index.css');
 
-var invertedColors = {"component":"tag__component_tif8r","checked":"tag__checked_tif8r"};
+var invertedColors = {"component":"tag__component_v9s7a","checked":"tag__checked_v9s7a"};
 require('./inverted.css');
 
 var colorStylesMap = {

package/tag/esm/default.css

@@ -53,39 +53,39 @@
 
     /* text color */
 }
-.tag__component_16fr2 {
+.tag__component_18740 {
     color: var(--tag-text-color);
     border-color: var(--tag-border-color);
     background-color: var(--tag-background-color)
 }
-.tag__component_16fr2:disabled {
+.tag__component_18740:disabled {
         border-color: var(--tag-border-color-disabled);
         color: var(--tag-text-color-disabled);
         background-color: var(--tag-background-color-disabled);
     }
-.tag__component_16fr2:hover:not(:disabled) {
+.tag__component_18740:hover:not(:disabled) {
         border-color: var(--tag-border-color-hover);
         background-color: var(--tag-background-color-hover);
     }
-.tag__component_16fr2:active:not(:disabled) {
+.tag__component_18740:active:not(:disabled) {
         border-color: var(--tag-border-color-active);
         background-color: var(--tag-background-color-active);
         color: var(--tag-text-color);
     }
-.tag__checked_16fr2 {
+.tag__checked_18740 {
     border-color: var(--tag-border-color-checked);
     background-color: var(--tag-background-color-checked);
     color: var(--tag-text-color-checked)
 }
-.tag__checked_16fr2:disabled {
+.tag__checked_18740: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__checked_16fr2:hover:not(:disabled):not(:active) {
+.tag__checked_18740:hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked-hover);
     }
-.tag__checked_16fr2:active:not(:disabled) {
+.tag__checked_18740:active:not(:disabled) {
         background-color: var(--tag-background-color-checked-active);
         color: var(--tag-text-color-checked);
     }

package/tag/esm/index.css

@@ -52,7 +52,7 @@
 
     /* text color */
 }
-.tag__component_uy456 {
+.tag__component_13dwt {
     display: inline-flex;
     justify-content: center;
     align-content: center;
@@ -70,40 +70,40 @@
     cursor: pointer;
     outline: none
 }
-.tag__component_uy456:disabled {
+.tag__component_13dwt:disabled {
         cursor: var(--disabled-cursor);
     }
-.tag__focused_uy456 {
+.tag__focused_13dwt {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.tag__addons_uy456 {
+.tag__addons_13dwt {
     display: flex;
     flex-shrink: 0;
     align-items: center
 }
-.tag__addons_uy456:first-child {
+.tag__addons_13dwt:first-child {
         margin-right: var(--gap-2xs);
     }
-.tag__addons_uy456:last-child {
+.tag__addons_13dwt:last-child {
         margin-left: var(--gap-2xs);
     }
-.tag__addons_uy456:only-child {
+.tag__addons_13dwt:only-child {
         margin: 0;
     }
-.tag__s_uy456 .tag__addons_uy456:first-child, .tag__m_uy456 .tag__addons_uy456:first-child {
+.tag__s_13dwt .tag__addons_13dwt:first-child, .tag__m_13dwt .tag__addons_13dwt:first-child {
         margin-right: var(--gap-xs);
     }
-.tag__s_uy456 .tag__addons_uy456:last-child, .tag__m_uy456 .tag__addons_uy456:last-child {
+.tag__s_13dwt .tag__addons_13dwt:last-child, .tag__m_13dwt .tag__addons_13dwt:last-child {
         margin-left: var(--gap-xs);
     }
-.tag__l_uy456 .tag__addons_uy456:first-child, .tag__xl_uy456 .tag__addons_uy456:first-child {
+.tag__l_13dwt .tag__addons_13dwt:first-child, .tag__xl_13dwt .tag__addons_13dwt:first-child {
         margin-right: var(--gap-s);
     }
-.tag__l_uy456 .tag__addons_uy456:last-child, .tag__xl_uy456 .tag__addons_uy456:last-child {
+.tag__l_13dwt .tag__addons_13dwt:last-child, .tag__xl_13dwt .tag__addons_13dwt:last-child {
         margin-left: var(--gap-s);
     }
-.tag__xxs_uy456 {
+.tag__xxs_13dwt {
     min-width: 60px;
     min-height: var(--size-xs-height);
     padding: 0 var(--gap-m);
@@ -112,13 +112,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xxs_uy456 {
+.tag__xxs_13dwt {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 32px
 }
     }
-.tag__xs_uy456 {
+.tag__xs_13dwt {
     min-width: 72px;
     min-height: 40px;
     padding: 0 var(--gap-l);
@@ -127,13 +127,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xs_uy456 {
+.tag__xs_13dwt {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 40px
 }
     }
-.tag__s_uy456 {
+.tag__s_13dwt {
     min-width: 80px;
     min-height: var(--size-s-height);
     padding: 0 var(--gap-xl);
@@ -142,13 +142,13 @@
     font-weight: normal
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__s_uy456 {
+.tag__s_13dwt {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 48px
 }
     }
-.tag__m_uy456 {
+.tag__m_13dwt {
     font-size: 16px;
     line-height: 20px;
     font-weight: 500;
@@ -157,13 +157,13 @@
     padding: 0 28px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__m_uy456 {
+.tag__m_13dwt {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 56px
 }
     }
-.tag__l_uy456 {
+.tag__l_13dwt {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -172,13 +172,13 @@
     padding: 0 var(--gap-2xl)
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__l_uy456 {
+.tag__l_13dwt {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 64px
 }
     }
-.tag__xl_uy456 {
+.tag__xl_13dwt {
     font-size: 18px;
     line-height: 24px;
     font-weight: 500;
@@ -187,51 +187,51 @@
     padding: 0 36px
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-.tag__xl_uy456 {
+.tag__xl_13dwt {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
         Возможно другое решение - если в будущем у компонента появится обертка, установить ей display: flex / inline-flex */
         height: 72px
 }
     }
-.tag__withRightAddons_uy456.tag__xxs_uy456 {
+.tag__withRightAddons_13dwt.tag__xxs_13dwt {
         padding-right: var(--gap-s);
     }
-.tag__withRightAddons_uy456.tag__xs_uy456 {
+.tag__withRightAddons_13dwt.tag__xs_13dwt {
         padding-right: var(--gap-m);
     }
-.tag__withRightAddons_uy456.tag__s_uy456 {
+.tag__withRightAddons_13dwt.tag__s_13dwt {
         padding-right: var(--gap-l);
     }
-.tag__withRightAddons_uy456.tag__m_uy456 {
+.tag__withRightAddons_13dwt.tag__m_13dwt {
         padding-right: var(--gap-xl);
     }
-.tag__withRightAddons_uy456.tag__l_uy456 {
+.tag__withRightAddons_13dwt.tag__l_13dwt {
         padding-right: 28px;
     }
-.tag__withRightAddons_uy456.tag__xl_uy456 {
+.tag__withRightAddons_13dwt.tag__xl_13dwt {
         padding-right: var(--gap-2xl);
     }
-.tag__withLeftAddons_uy456.tag__xxs_uy456 {
+.tag__withLeftAddons_13dwt.tag__xxs_13dwt {
         padding-left: var(--gap-s);
     }
-.tag__withLeftAddons_uy456.tag__xs_uy456 {
+.tag__withLeftAddons_13dwt.tag__xs_13dwt {
         padding-left: var(--gap-m);
     }
-.tag__withLeftAddons_uy456.tag__s_uy456 {
+.tag__withLeftAddons_13dwt.tag__s_13dwt {
         padding-left: var(--gap-l);
     }
-.tag__withLeftAddons_uy456.tag__m_uy456 {
+.tag__withLeftAddons_13dwt.tag__m_13dwt {
         padding-left: var(--gap-xl);
     }
-.tag__withLeftAddons_uy456.tag__l_uy456 {
+.tag__withLeftAddons_13dwt.tag__l_13dwt {
         padding-left: 28px;
     }
-.tag__withLeftAddons_uy456.tag__xl_uy456 {
+.tag__withLeftAddons_13dwt.tag__xl_13dwt {
         padding-left: var(--gap-2xl);
     }
-.tag__defaultVariant_uy456 {
+.tag__defaultVariant_13dwt {
     border-radius: var(--tag-border-radius);
 }
-.tag__alt_uy456 {
+.tag__alt_13dwt {
     border-radius: var(--tag-alt-border-radius);
 }

package/tag/esm/inverted.css

@@ -54,39 +54,39 @@
     --tag-inverted-text-color-disabled: var(--color-dark-text-tertiary);
     --tag-inverted-text-color-checked-disabled: var(--color-dark-text-primary-inverted);
 }
-.tag__component_tif8r {
+.tag__component_v9s7a {
     color: var(--tag-inverted-text-color);
     border-color: var(--tag-inverted-border-color);
     background-color: var(--tag-inverted-background-color)
 }
-.tag__component_tif8r:disabled {
+.tag__component_v9s7a:disabled {
         border-color: var(--tag-inverted-border-color-disabled);
         color: var(--tag-inverted-text-color-disabled);
         background-color: var(--tag-inverted-background-color-disabled);
     }
-.tag__component_tif8r:hover:not(:disabled) {
+.tag__component_v9s7a:hover:not(:disabled) {
         border-color: var(--tag-inverted-border-color-hover);
         background-color: var(--tag-inverted-background-color-hover);
     }
-.tag__component_tif8r:active:not(:disabled) {
+.tag__component_v9s7a:active:not(:disabled) {
         border-color: var(--tag-inverted-border-color-active);
         background-color: var(--tag-inverted-background-color-active);
         color: var(--tag-inverted-text-color);
     }
-.tag__checked_tif8r {
+.tag__checked_v9s7a {
     border-color: var(--tag-inverted-border-color-checked);
     background-color: var(--tag-inverted-background-color-checked);
     color: var(--tag-inverted-text-color-checked)
 }
-.tag__checked_tif8r:disabled {
+.tag__checked_v9s7a: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__checked_tif8r:hover:not(:disabled):not(:active) {
+.tag__checked_v9s7a:hover:not(:disabled):not(:active) {
         background-color: var(--tag-inverted-background-color-checked-hover);
     }
-.tag__checked_tif8r:active:not(:disabled) {
+.tag__checked_v9s7a:active:not(:disabled) {
         background-color: var(--tag-inverted-background-color-checked-active);
         color: var(--tag-inverted-text-color-checked);
     }