@alfalab/core-components 36.4.0 → 36.5.0

package/tabs/modern/components/scrollable-container/index.css

@@ -1,4 +1,4 @@
-/* hash: 1wlue */
+/* hash: ejpz7 */
 :root {
 
     /* Hard */
@@ -36,19 +36,19 @@
 
     /* size xl */
 }
-.tabs__container_2n0dr {
+.tabs__container_1enjq {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scrollbar-width: none
 }
-.tabs__container_2n0dr::-webkit-scrollbar {
+.tabs__container_1enjq::-webkit-scrollbar {
         display: none;
     }
-.tabs__container_2n0dr > * {
+.tabs__container_1enjq > * {
         flex-shrink: 0;
     }
-.tabs__fullWidthScroll_2n0dr {
+.tabs__fullWidthScroll_1enjq {
     margin: 0 var(--gap-m-neg);
 }

package/tabs/modern/components/secondary-tablist/Component.desktop.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-7e5746f2.js';
+import { c as commonStyles } from '../../index.module-5ae8c071.js';
 import 'classnames';
 import '../../../../tag/modern';
 import '../scrollable-container/Component.js';

package/tabs/modern/components/secondary-tablist/Component.mobile.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-7e5746f2.js';
+import { c as commonStyles } from '../../index.module-5ae8c071.js';
 import '../../../../tag/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../../hooks/use-tabs.js';
 
-const mobileStyles = {"title":"tabs__title_1jie6 tabs__title_9ds1d","mobile":"tabs__mobile_1jie6"};
+const mobileStyles = {"title":"tabs__title_180nt tabs__title_1hare","mobile":"tabs__mobile_180nt"};
 require('./mobile.css');
 
 const styles = {

package/tabs/modern/components/secondary-tablist/Component.responsive.js

@@ -6,7 +6,7 @@ import 'classnames';
 import '../../../../tag/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-7e5746f2.js';
+import '../../index.module-5ae8c071.js';
 import './Component.js';
 import '../../hooks/use-tabs.js';
 

package/tabs/modern/components/secondary-tablist/index.css

@@ -1,4 +1,4 @@
-/* hash: 1b98h */
+/* hash: 1oe7a */
 :root {
 
     /* Hard */
@@ -44,35 +44,35 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__component_9ds1d {
+.tabs__component_1hare {
     position: relative;
     display: inline-flex;
 }
-.tabs__fullWidthScroll_9ds1d {
+.tabs__fullWidthScroll_1hare {
     margin: 0 var(--gap-m);
 }
-.tabs__container_9ds1d {
+.tabs__container_1hare {
     overflow: hidden;
 }
-.tabs__title_9ds1d {
+.tabs__title_1hare {
     white-space: nowrap;
 }
 /* sizes */
-.tabs__xxs_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+.tabs__xxs_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-xxs-gaps);
 }
-.tabs__xs_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+.tabs__xs_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-xs-gaps);
 }
-.tabs__s_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+.tabs__s_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-s-gaps);
 }
-.tabs__m_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+.tabs__m_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-m-gaps);
 }
-.tabs__l_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+.tabs__l_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-l-gaps);
 }
-.tabs__xl_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+.tabs__xl_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-xl-gaps);
 }

package/tabs/modern/components/secondary-tablist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1ln9l */
+/* hash: 1o6ti */
 :root {
 }:root {
 }:root {
@@ -49,26 +49,26 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-}.tabs__component_9ds1d {
+}.tabs__component_1hare {
     position: relative;
     display: inline-flex;
-}.tabs__fullWidthScroll_9ds1d {
+}.tabs__fullWidthScroll_1hare {
     margin: 0 var(--gap-m);
-}.tabs__container_9ds1d {
+}.tabs__container_1hare {
     overflow: hidden;
-}.tabs__title_9ds1d {
+}.tabs__title_1hare {
     white-space: nowrap;
-}/* sizes */.tabs__xxs_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+}/* sizes */.tabs__xxs_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-xxs-gaps);
-}.tabs__xs_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+}.tabs__xs_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-xs-gaps);
-}.tabs__s_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+}.tabs__s_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-s-gaps);
-}.tabs__m_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+}.tabs__m_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-m-gaps);
-}.tabs__l_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+}.tabs__l_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-l-gaps);
-}.tabs__xl_9ds1d .tabs__title_9ds1d + .tabs__title_9ds1d {
+}.tabs__xl_1hare .tabs__title_1hare + .tabs__title_1hare {
     margin-left: var(--secondary-tablist-xl-gaps);
 }
 :root {
@@ -885,8 +885,8 @@
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
 }
-.tabs__title_1jie6 {
+.tabs__title_180nt {
 }
-.tabs__mobile_1jie6 .tabs__title_1jie6 + .tabs__title_1jie6 {
+.tabs__mobile_180nt .tabs__title_180nt + .tabs__title_180nt {
         margin-left: var(--secondary-tablist-mobile-gaps);
     }

package/tabs/modern/components/tab/Component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"tabs__component_102bs","hidden":"tabs__hidden_102bs"};
+const styles = {"component":"tabs__component_16cu8","hidden":"tabs__hidden_16cu8"};
 require('./index.css');
 
 const Tab = ({ children, hidden, className, disabled, dataTestId }) => children ? (React.createElement("div", { className: cn(styles.component, {

package/tabs/modern/components/tab/index.css

@@ -1,8 +1,8 @@
-/* hash: 180xi */
-.tabs__component_102bs {
+/* hash: 1y9di */
+.tabs__component_16cu8 {
     outline: none;
 }
 
-.tabs__hidden_102bs {
+.tabs__hidden_16cu8 {
     display: none;
 }

package/tabs/modern/components/tabs/Component.desktop.js

@@ -11,9 +11,9 @@ import '@juggle/resize-observer';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-b659d358.js';
+import '../../index.module-89b0354c.js';
 import '../../../../tag/modern';
-import '../../index.module-7e5746f2.js';
+import '../../index.module-5ae8c071.js';
 import '../primary-tablist/Component.js';
 import '../../hooks/use-tablist-titles.js';
 import '../../hooks/use-collapsible-elements.js';

package/tabs/modern/components/tabs/Component.mobile.js

@@ -11,9 +11,9 @@ import '@juggle/resize-observer';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-b659d358.js';
+import '../../index.module-89b0354c.js';
 import '../../../../tag/modern';
-import '../../index.module-7e5746f2.js';
+import '../../index.module-5ae8c071.js';
 import '../primary-tablist/Component.js';
 import '../../hooks/use-tablist-titles.js';
 import '../../hooks/use-collapsible-elements.js';

package/tabs/modern/components/tabs/Component.responsive.js

@@ -11,10 +11,10 @@ import '@juggle/resize-observer';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-b659d358.js';
+import '../../index.module-89b0354c.js';
 import '../primary-tablist/Component.mobile.js';
 import '../../../../tag/modern';
-import '../../index.module-7e5746f2.js';
+import '../../index.module-5ae8c071.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../primary-tablist/Component.desktop.js';
 import '../primary-tablist/Component.js';

package/tabs/modern/desktop.js

@@ -14,9 +14,9 @@ import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-b659d358.js';
+import './index.module-89b0354c.js';
 import '../../tag/modern';
-import './index.module-7e5746f2.js';
+import './index.module-5ae8c071.js';
 import './components/primary-tablist/Component.js';
 import './hooks/use-tablist-titles.js';
 import './synthetic-events.js';

package/tabs/modern/index-0d7ca9a7.d.ts

@@ -1,27 +1,3 @@
-/// <reference types="react" />
-import React from "react";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { ButtonProps } from "./index-ebda875c";
-import { AdditionalMobileProps } from "./index-3e68f8db";
-import { PickerButtonDesktopProps } from "./Component-0d7ca9a7";
-type PickerButtonMatchMedia = "desktop" | "mobile";
-type PickerButtonProps = PickerButtonDesktopProps & AdditionalMobileProps & {
-    /**
-     * Контрольная точка, с нее начинается desktop версия
-     * @default 1024
-     */
-    breakpoint?: number;
-};
-declare const PickerButton: React.ForwardRefExoticComponent<Omit<import("./index-3e68f8db").BaseSelectProps, "placeholder" | "onFocus" | "size" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "rightAddons" | "leftAddons" | "view" | "loading"> & {
-    options: ((import("./index-3e68f8db").OptionShape | import("./index-3e68f8db").GroupShape) & {
-        icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
-    })[];
-    size?: import("./Component-0d7ca9a7").PickerButtonSize | undefined;
-    variant?: import("./Component-0d7ca9a7").PickerButtonVariant | undefined;
-} & AdditionalMobileProps & {
-    breakpoint?: number | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-type PickerButtonMobileProps = Omit<PickerButtonDesktopProps, "OptionsList" | "Checkmark" | "onScroll"> & AdditionalMobileProps;
-declare const PickerButtonMobile: React.ForwardRefExoticComponent<Omit<PickerButtonDesktopProps, "onScroll" | "OptionsList" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<HTMLInputElement>>;
-export { PickerButtonMatchMedia, PickerButtonProps, PickerButton, PickerButtonMobileProps, PickerButtonMobile };
-export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component-0d7ca9a7";
+export * from "./Component.responsive-0d7ca9a7";
+export { PickerButtonResponsive as PickerButton, PickerButtonResponsiveProps as PickerButtonProps };
+export { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component-0d7ca9a7";

package/tabs/modern/index.js

@@ -13,10 +13,10 @@ import '../../picker-button/modern/desktop';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-b659d358.js';
+import './index.module-89b0354c.js';
 import './components/primary-tablist/Component.mobile.js';
 import '../../tag/modern';
-import './index.module-7e5746f2.js';
+import './index.module-5ae8c071.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/Component.js';

package/tabs/modern/index.module-5ae8c071.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_1hare","fullWidthScroll":"tabs__fullWidthScroll_1hare","container":"tabs__container_1hare","title":"tabs__title_1hare","xxs":"tabs__xxs_1hare","xs":"tabs__xs_1hare","s":"tabs__s_1hare","m":"tabs__m_1hare","l":"tabs__l_1hare","xl":"tabs__xl_1hare"};
+require('./components/secondary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/modern/index.module-89b0354c.js

@@ -0,0 +1,4 @@
+const commonStyles = {"component":"tabs__component_8ensr","fullWidthScroll":"tabs__fullWidthScroll_8ensr","container":"tabs__container_8ensr","title":"tabs__title_8ensr","disabled":"tabs__disabled_8ensr","focused":"tabs__focused_8ensr","collapsed":"tabs__collapsed_8ensr","selected":"tabs__selected_8ensr","line":"tabs__line_8ensr","s":"tabs__s_8ensr","xs":"tabs__xs_8ensr","xxs":"tabs__xxs_8ensr","pickerWrapper":"tabs__pickerWrapper_8ensr","option":"tabs__option_8ensr","m":"tabs__m_8ensr","l":"tabs__l_8ensr","xl":"tabs__xl_8ensr","rightAddons":"tabs__rightAddons_8ensr"};
+require('./components/primary-tablist/index.css');
+
+export { commonStyles as c };

package/tabs/modern/mobile.js

@@ -13,9 +13,9 @@ import '@alfalab/hooks';
 import '@juggle/resize-observer';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
-import './index.module-b659d358.js';
+import './index.module-89b0354c.js';
 import '../../tag/modern';
-import './index.module-7e5746f2.js';
+import './index.module-5ae8c071.js';
 import './components/primary-tablist/Component.js';
 import './hooks/use-tablist-titles.js';
 import './hooks/use-collapsible-elements.js';

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-b659d358.js';
+import './index.module-89b0354c.js';
 import './components/primary-tablist/Component.mobile.js';
 import '../../tag/modern';
-import './index.module-7e5746f2.js';
+import './index.module-5ae8c071.js';
 import './components/secondary-tablist/Component.mobile.js';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/Component.js';

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-b58bcb17.js');
+require('./tslib.es6-97b09e77.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-401dd07b.js');
+require('./index.module-d82ed5a5.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-b800d019.js');
+require('./index.module-383903ec.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-b58bcb17.js');
+var tslib_es6 = require('./tslib.es6-97b09e77.js');
 
 var createSyntheticEvent = function (event) {
     var isDefaultPrevented = false;

package/tag/Component.js

@@ -3,6 +3,12 @@ var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -42,13 +48,13 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"component":"tag__component_gphpa","checked":"tag__checked_gphpa"};
+var defaultColors = {"component":"tag__component_c0bxz","checked":"tag__checked_c0bxz"};
 require('./default.css');
 
-var styles = {"component":"tag__component_ownwt","focused":"tag__focused_ownwt","addons":"tag__addons_ownwt","s":"tag__s_ownwt","m":"tag__m_ownwt","l":"tag__l_ownwt","xl":"tag__xl_ownwt","xxs":"tag__xxs_ownwt","xs":"tag__xs_ownwt","withRightAddons":"tag__withRightAddons_ownwt","withLeftAddons":"tag__withLeftAddons_ownwt","defaultVariant":"tag__defaultVariant_ownwt","alt":"tag__alt_ownwt"};
+var styles = {"component":"tag__component_z7cst","focused":"tag__focused_z7cst","addons":"tag__addons_z7cst","s":"tag__s_z7cst","m":"tag__m_z7cst","l":"tag__l_z7cst","xl":"tag__xl_z7cst","xxs":"tag__xxs_z7cst","xs":"tag__xs_z7cst","withRightAddons":"tag__withRightAddons_z7cst","withLeftAddons":"tag__withLeftAddons_z7cst","defaultVariant":"tag__defaultVariant_z7cst","alt":"tag__alt_z7cst"};
 require('./index.css');
 
-var invertedColors = {"component":"tag__component_3s5vx","checked":"tag__checked_3s5vx"};
+var invertedColors = {"component":"tag__component_1y446","checked":"tag__checked_1y446"};
 require('./inverted.css');
 
 var colorStylesMap = {
@@ -63,7 +69,7 @@ var Tag = React.forwardRef(function (_a, ref) {
     var focused = hooks.useFocus(tagRef, 'keyboard')[0];
     var variantClassName = variant === 'default' ? 'defaultVariant' : variant;
     var tagProps = {
-        className: cn(styles.component, colorStyles.component, styles[size], styles[variantClassName], (_b = {},
+        className: cn__default.default(styles.component, colorStyles.component, styles[size], styles[variantClassName], (_b = {},
             _b[styles.checked] = checked,
             _b[colorStyles.checked] = checked,
             _b[styles.focused] = focused,
@@ -77,10 +83,10 @@ var Tag = React.forwardRef(function (_a, ref) {
             onClick(event, { name: name, checked: !checked });
         }
     };
-    return (React.createElement("button", __assign({ ref: mergeRefs([tagRef, ref]), type: 'button', onClick: handleClick }, tagProps, restProps),
-        leftAddons ? React.createElement("span", { className: styles.addons }, leftAddons) : null,
-        children && React.createElement("span", null, children),
-        rightAddons ? React.createElement("span", { className: styles.addons }, rightAddons) : null));
+    return (React__default.default.createElement("button", __assign({ ref: mergeRefs__default.default([tagRef, ref]), type: 'button', onClick: handleClick }, tagProps, restProps),
+        leftAddons ? React__default.default.createElement("span", { className: styles.addons }, leftAddons) : null,
+        children && React__default.default.createElement("span", null, children),
+        rightAddons ? React__default.default.createElement("span", { className: styles.addons }, rightAddons) : null));
 });
 
 exports.Tag = Tag;

package/tag/cssm/Component.js

@@ -6,6 +6,15 @@ var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -46,8 +55,8 @@ function __rest(s, e) {
 }
 
 var colorStylesMap = {
-    default: defaultColors,
-    inverted: invertedColors,
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
 };
 var Tag = React.forwardRef(function (_a, ref) {
     var _b;
@@ -57,12 +66,12 @@ var Tag = React.forwardRef(function (_a, ref) {
     var focused = hooks.useFocus(tagRef, 'keyboard')[0];
     var variantClassName = variant === 'default' ? 'defaultVariant' : variant;
     var tagProps = {
-        className: cn(styles.component, colorStyles.component, styles[size], styles[variantClassName], (_b = {},
-            _b[styles.checked] = checked,
+        className: cn__default.default(styles__default.default.component, colorStyles.component, styles__default.default[size], styles__default.default[variantClassName], (_b = {},
+            _b[styles__default.default.checked] = checked,
             _b[colorStyles.checked] = checked,
-            _b[styles.focused] = focused,
-            _b[styles.withRightAddons] = Boolean(rightAddons),
-            _b[styles.withLeftAddons] = Boolean(leftAddons),
+            _b[styles__default.default.focused] = focused,
+            _b[styles__default.default.withRightAddons] = Boolean(rightAddons),
+            _b[styles__default.default.withLeftAddons] = Boolean(leftAddons),
             _b), className),
         'data-test-id': dataTestId,
     };
@@ -71,10 +80,10 @@ var Tag = React.forwardRef(function (_a, ref) {
             onClick(event, { name: name, checked: !checked });
         }
     };
-    return (React.createElement("button", __assign({ ref: mergeRefs([tagRef, ref]), type: 'button', onClick: handleClick }, tagProps, restProps),
-        leftAddons ? React.createElement("span", { className: styles.addons }, leftAddons) : null,
-        children && React.createElement("span", null, children),
-        rightAddons ? React.createElement("span", { className: styles.addons }, rightAddons) : null));
+    return (React__default.default.createElement("button", __assign({ ref: mergeRefs__default.default([tagRef, ref]), type: 'button', onClick: handleClick }, tagProps, restProps),
+        leftAddons ? React__default.default.createElement("span", { className: styles__default.default.addons }, leftAddons) : null,
+        children && React__default.default.createElement("span", null, children),
+        rightAddons ? React__default.default.createElement("span", { className: styles__default.default.addons }, rightAddons) : null));
 });
 
 exports.Tag = Tag;

package/tag/default.css

@@ -53,39 +53,39 @@
 
     /* text color */
 }
-.tag__component_gphpa {
+.tag__component_c0bxz {
     color: var(--tag-text-color);
     border-color: var(--tag-border-color);
     background-color: var(--tag-background-color)
 }
-.tag__component_gphpa:disabled {
+.tag__component_c0bxz:disabled {
         border-color: var(--tag-border-color-disabled);
         color: var(--tag-text-color-disabled);
         background-color: var(--tag-background-color-disabled);
     }
-.tag__component_gphpa:hover:not(:disabled) {
+.tag__component_c0bxz:hover:not(:disabled) {
         border-color: var(--tag-border-color-hover);
         background-color: var(--tag-background-color-hover);
     }
-.tag__component_gphpa:active:not(:disabled) {
+.tag__component_c0bxz:active:not(:disabled) {
         border-color: var(--tag-border-color-active);
         background-color: var(--tag-background-color-active);
         color: var(--tag-text-color);
     }
-.tag__checked_gphpa {
+.tag__checked_c0bxz {
     border-color: var(--tag-border-color-checked);
     background-color: var(--tag-background-color-checked);
     color: var(--tag-text-color-checked)
 }
-.tag__checked_gphpa:disabled {
+.tag__checked_c0bxz: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_gphpa:hover:not(:disabled):not(:active) {
+.tag__checked_c0bxz:hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked-hover);
     }
-.tag__checked_gphpa:active:not(:disabled) {
+.tag__checked_c0bxz: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_gphpa","checked":"tag__checked_gphpa"};
+var defaultColors = {"component":"tag__component_c0bxz","checked":"tag__checked_c0bxz"};
 require('./default.css');
 
-var styles = {"component":"tag__component_ownwt","focused":"tag__focused_ownwt","addons":"tag__addons_ownwt","s":"tag__s_ownwt","m":"tag__m_ownwt","l":"tag__l_ownwt","xl":"tag__xl_ownwt","xxs":"tag__xxs_ownwt","xs":"tag__xs_ownwt","withRightAddons":"tag__withRightAddons_ownwt","withLeftAddons":"tag__withLeftAddons_ownwt","defaultVariant":"tag__defaultVariant_ownwt","alt":"tag__alt_ownwt"};
+var styles = {"component":"tag__component_z7cst","focused":"tag__focused_z7cst","addons":"tag__addons_z7cst","s":"tag__s_z7cst","m":"tag__m_z7cst","l":"tag__l_z7cst","xl":"tag__xl_z7cst","xxs":"tag__xxs_z7cst","xs":"tag__xs_z7cst","withRightAddons":"tag__withRightAddons_z7cst","withLeftAddons":"tag__withLeftAddons_z7cst","defaultVariant":"tag__defaultVariant_z7cst","alt":"tag__alt_z7cst"};
 require('./index.css');
 
-var invertedColors = {"component":"tag__component_3s5vx","checked":"tag__checked_3s5vx"};
+var invertedColors = {"component":"tag__component_1y446","checked":"tag__checked_1y446"};
 require('./inverted.css');
 
 var colorStylesMap = {

package/tag/esm/default.css

@@ -53,39 +53,39 @@
 
     /* text color */
 }
-.tag__component_gphpa {
+.tag__component_c0bxz {
     color: var(--tag-text-color);
     border-color: var(--tag-border-color);
     background-color: var(--tag-background-color)
 }
-.tag__component_gphpa:disabled {
+.tag__component_c0bxz:disabled {
         border-color: var(--tag-border-color-disabled);
         color: var(--tag-text-color-disabled);
         background-color: var(--tag-background-color-disabled);
     }
-.tag__component_gphpa:hover:not(:disabled) {
+.tag__component_c0bxz:hover:not(:disabled) {
         border-color: var(--tag-border-color-hover);
         background-color: var(--tag-background-color-hover);
     }
-.tag__component_gphpa:active:not(:disabled) {
+.tag__component_c0bxz:active:not(:disabled) {
         border-color: var(--tag-border-color-active);
         background-color: var(--tag-background-color-active);
         color: var(--tag-text-color);
     }
-.tag__checked_gphpa {
+.tag__checked_c0bxz {
     border-color: var(--tag-border-color-checked);
     background-color: var(--tag-background-color-checked);
     color: var(--tag-text-color-checked)
 }
-.tag__checked_gphpa:disabled {
+.tag__checked_c0bxz: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_gphpa:hover:not(:disabled):not(:active) {
+.tag__checked_c0bxz:hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked-hover);
     }
-.tag__checked_gphpa:active:not(:disabled) {
+.tag__checked_c0bxz:active:not(:disabled) {
         background-color: var(--tag-background-color-checked-active);
         color: var(--tag-text-color-checked);
     }