@alfalab/core-components 42.0.0-beta.1 → 42.0.0-beta.2

package/tag/components/base-tag/index.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseTag_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('react-merge-refs');
+require('classnames');
+require('@alfalab/hooks');
+
+
+
+exports.BaseTag = components_baseTag_Component.BaseTag;

package/tag/components/base-tag/inverted.css

@@ -0,0 +1,90 @@
+/* hash: 1nvh6 */
+:root {
+} /* deprecated */ :root {
+    --color-light-border-key-inverted: #fff;
+    --color-light-border-primary-inverted: #2b2b2e;
+    --color-light-border-underline-inverted: #464649;
+    --color-light-text-primary: #0e0e0e;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-tertiary-inverted: rgba(235, 235, 245, 0.32); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-bg-primary-alpha-15: rgba(255, 255, 255, 0.15);
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* inverted */
+
+    /* border */
+    --tag-inverted-border-color: var(--color-light-border-underline-inverted);
+    --tag-inverted-filled-border-color: transparent;
+    --tag-inverted-border-color-hover: var(--color-light-border-key-inverted);
+    --tag-inverted-border-color-active: var(--color-light-border-key-inverted);
+    --tag-inverted-border-color-disabled: var(--color-light-border-primary-inverted);
+    --tag-inverted-border-color-checked-disabled: transparent;
+
+    /* background-color outlined */
+    --tag-inverted-outlined-background-color: transparent;
+    --tag-inverted-outlined-background-color-hover: transparent;
+    --tag-inverted-outlined-background-color-disabled: transparent;
+    --tag-inverted-outlined-background-color-active: var(--color-light-bg-primary-alpha-15);
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+    --tag-inverted-text-color: var(--color-light-text-primary-inverted);
+    --tag-inverted-text-color-checked: var(--color-light-text-primary);
+    --tag-inverted-text-color-disabled: var(--color-light-text-tertiary-inverted);
+    --tag-inverted-text-color-checked-disabled: var(--color-light-text-primary);
+
+    /* mobile */
+
+    /* mobile inverted */
+} .tag__component_ov6f3.tag__outlined_ov6f3 {
+        color: var(--tag-inverted-text-color);
+        border-color: var(--tag-inverted-border-color);
+        background-color: var(--tag-inverted-outlined-background-color)
+    } .tag__component_ov6f3.tag__outlined_ov6f3: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);
+        } @media (hover: hover) {
+            .tag__component_ov6f3.tag__outlined_ov6f3:hover:not(:disabled) {
+                border-color: var(--tag-inverted-border-color-hover);
+                background-color: var(--tag-inverted-outlined-background-color-hover);
+            }
+        } .tag__component_ov6f3.tag__outlined_ov6f3:active:not(:disabled) {
+            border-color: var(--tag-inverted-border-color-active);
+            background-color: var(--tag-inverted-outlined-background-color-active);
+        } .tag__component_ov6f3.tag__filled_ov6f3 {
+        color: var(--tag-inverted-text-color);
+        border-color: var(--tag-inverted-filled-border-color)
+    } .tag__component_ov6f3.tag__filled_ov6f3:disabled {
+            color: var(--tag-inverted-text-color-disabled);
+        } .tag__component_ov6f3.tag__checked_ov6f3 {
+        color: var(--tag-inverted-text-color-checked)
+    } .tag__component_ov6f3.tag__checked_ov6f3:disabled {
+            border-color: var(--tag-inverted-border-color-checked-disabled);
+            color: var(--tag-inverted-text-color-checked-disabled);
+        }

package/tag/cssm/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseTagProps } from "./components/base-tag/index";
+type TagDesktopProps = Omit<BaseTagProps, 'styles'>;
+declare const TagDesktop: React.ForwardRefExoticComponent<TagDesktopProps & React.RefAttributes<HTMLButtonElement>>;
+export { TagDesktopProps, TagDesktop };

package/tag/cssm/Component.desktop.js

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_baseTag_Component = require('./components/base-tag/Component.js');
+var defaultColors = require('./default.desktop.module.css');
+var styles = require('./desktop.module.css');
+var invertedColors = require('./inverted.desktop.module.css');
+require('react-merge-refs');
+require('classnames');
+require('@alfalab/hooks');
+require('./components/base-tag/default.module.css');
+require('./components/base-tag/index.module.css');
+require('./components/base-tag/inverted.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
+};
+var TagDesktop = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_baseTag_Component.BaseTag, tslib.__assign({}, restProps, { colorStylesMap: colorStyles, ref: ref, styles: styles__default.default }))); });
+
+exports.TagDesktop = TagDesktop;

package/tag/cssm/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseTagProps } from "./components/base-tag/index";
+type TagMobileProps = Omit<BaseTagProps, 'styles'>;
+declare const TagMobile: React.ForwardRefExoticComponent<TagMobileProps & React.RefAttributes<HTMLButtonElement>>;
+export { TagMobileProps, TagMobile };

package/tag/cssm/Component.mobile.js

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_baseTag_Component = require('./components/base-tag/Component.js');
+var defaultColors = require('./default.mobile.module.css');
+var invertedColors = require('./inverted.mobile.module.css');
+var styles = require('./mobile.module.css');
+require('react-merge-refs');
+require('classnames');
+require('@alfalab/hooks');
+require('./components/base-tag/default.module.css');
+require('./components/base-tag/index.module.css');
+require('./components/base-tag/inverted.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
+};
+var TagMobile = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_baseTag_Component.BaseTag, tslib.__assign({}, restProps, { colorStylesMap: colorStyles, ref: ref, styles: styles__default.default }))); });
+
+exports.TagMobile = TagMobile;

package/tag/cssm/Component.responsive.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseTagProps } from "./components/base-tag/index";
+type TagProps = Omit<BaseTagProps, 'styles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+declare const Tag: React.ForwardRefExoticComponent<Omit<BaseTagProps, "styles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { TagProps, Tag };

package/tag/cssm/Component.responsive.js

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../../mq/cssm');
+var Component_desktop = require('./Component.desktop.js');
+var Component_mobile = require('./Component.mobile.js');
+require('./components/base-tag/Component.js');
+require('react-merge-refs');
+require('classnames');
+require('@alfalab/hooks');
+require('./components/base-tag/default.module.css');
+require('./components/base-tag/index.module.css');
+require('./components/base-tag/inverted.module.css');
+require('./default.desktop.module.css');
+require('./desktop.module.css');
+require('./inverted.desktop.module.css');
+require('./default.mobile.module.css');
+require('./inverted.mobile.module.css');
+require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var Tag = 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 query = "(min-width: ".concat(breakpoint, "px)");
+    var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
+    var Component = isDesktop ? Component_desktop.TagDesktop : Component_mobile.TagMobile;
+    return (React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps), children));
+});
+
+exports.Tag = Tag;

package/tag/cssm/components/base-tag/Component.d.ts

@@ -0,0 +1,151 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonHTMLAttributes, ReactNode, RefObject } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type NativeProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseTagProps = Omit<NativeProps, 'onClick'> & {
+    /**
+     * Отображение кнопки в отмеченном (зажатом) состоянии
+     */
+    checked?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс для обёртки children
+     */
+    childrenClassName?: string;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Обработчик нажатия
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * ref на children
+     */
+    childrenRef?: RefObject<HTMLSpanElement>;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props shape и view
+     * Вариант тега
+     */
+    variant?: 'default' | 'alt';
+    /**
+     * Форма тега
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Стиль тега
+     */
+    view?: 'outlined' | 'filled';
+    /**
+     * Основные стили компонента.
+     */
+    styles?: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap?: StyleColors;
+};
+declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClick"> & {
+    /**
+     * Отображение кнопки в отмеченном (зажатом) состоянии
+     */
+    checked?: boolean | undefined;
+    /**
+     * Размер компонента
+     */
+    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl" | undefined;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс для обёртки children
+     */
+    childrenClassName?: string | undefined;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Обработчик нажатия
+     */
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void) | undefined;
+    /**
+     * ref на children
+     */
+    childrenRef?: React.RefObject<HTMLSpanElement> | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props shape и view
+     * Вариант тега
+     */
+    variant?: "default" | "alt" | undefined;
+    /**
+     * Форма тега
+     */
+    shape?: "rounded" | "rectangular" | undefined;
+    /**
+     * Стиль тега
+     */
+    view?: "outlined" | "filled" | undefined;
+    /**
+     * Основные стили компонента.
+     */
+    styles?: {
+        [key: string]: string;
+    } | undefined;
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap?: StyleColors | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { StyleColors, NativeProps, BaseTagProps, BaseTag };

package/tag/cssm/components/base-tag/Component.js

@@ -0,0 +1,58 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+var defaultColors = require('./default.module.css');
+var commonStyles = 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 commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+
+var colorCommonStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
+};
+var BaseTag = React.forwardRef(function (_a, ref) {
+    var _b;
+    var rightAddons = _a.rightAddons, leftAddons = _a.leftAddons, children = _a.children, _c = _a.size, size = _c === void 0 ? 's' : _c, checked = _a.checked, className = _a.className, dataTestId = _a.dataTestId, name = _a.name, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, onClick = _a.onClick, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, shape = _a.shape, _f = _a.view, view = _f === void 0 ? 'outlined' : _f, childrenClassName = _a.childrenClassName, childrenRef = _a.childrenRef, _g = _a.styles, styles = _g === void 0 ? {} : _g, _h = _a.colorStylesMap, colorStylesMap = _h === void 0 ? { default: {}, inverted: {} } : _h, restProps = tslib.__rest(_a, ["rightAddons", "leftAddons", "children", "size", "checked", "className", "dataTestId", "name", "colors", "onClick", "variant", "shape", "view", "childrenClassName", "childrenRef", "styles", "colorStylesMap"]);
+    var colorStyles = colorStylesMap[colors];
+    var tagRef = React.useRef(null);
+    var focused = hooks.useFocus(tagRef, 'keyboard')[0];
+    var variantClassName = variant === 'default' ? 'rounded' : 'rectangular';
+    var shapeClassName = shape || variantClassName;
+    var tagProps = {
+        className: cn__default.default(commonStyles__default.default.component, colorCommonStyles[colors].component, colorStyles.component, commonStyles__default.default[size], styles[size], colorCommonStyles[colors][view], (_b = {},
+            _b[commonStyles__default.default.checked] = checked,
+            _b[commonStyles__default.default[shapeClassName]] = Boolean(commonStyles__default.default[shapeClassName]),
+            _b[styles[shapeClassName]] = Boolean(styles[shapeClassName]),
+            _b[colorCommonStyles[colors].checked] = checked,
+            _b[colorStyles.checked] = checked && Boolean(colorStyles.checked),
+            _b[colorStyles[view]] = Boolean(colorStyles[view]),
+            _b[commonStyles__default.default.focused] = focused,
+            _b[commonStyles__default.default.withRightAddons] = Boolean(rightAddons),
+            _b[commonStyles__default.default.withLeftAddons] = Boolean(leftAddons),
+            _b), className),
+        'data-test-id': dataTestId,
+    };
+    var handleClick = function (event) {
+        if (onClick) {
+            onClick(event, { name: name, checked: !checked });
+        }
+    };
+    return (React__default.default.createElement("button", tslib.__assign({ ref: mergeRefs__default.default([tagRef, ref]), type: 'button', onClick: handleClick }, tagProps, restProps),
+        leftAddons ? React__default.default.createElement("span", { className: commonStyles__default.default.addons }, leftAddons) : null,
+        children && (React__default.default.createElement("span", { ref: childrenRef, className: childrenClassName }, children)),
+        rightAddons ? React__default.default.createElement("span", { className: commonStyles__default.default.addons }, rightAddons) : null));
+});
+
+exports.BaseTag = BaseTag;

package/tag/cssm/components/base-tag/default.module.css

@@ -0,0 +1,89 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-border-key: #000;
+    --color-light-border-primary: #dcdcdd;
+    --color-light-border-underline: #c5c5c7;
+    --color-light-text-primary: #0e0e0e;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-tertiary: rgba(60, 60, 67, 0.4); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 18, 0.07);
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    /* border */
+    --tag-border-color: var(--color-light-border-underline);
+    --tag-filled-border-color: transparent;
+    --tag-border-color-hover: var(--color-light-border-key);
+    --tag-border-color-active: var(--color-light-border-key);
+    --tag-border-color-disabled: var(--color-light-border-primary);
+    --tag-border-color-checked-disabled: transparent;
+
+    /* background-color outlined */
+    --tag-outlined-background-color: transparent;
+    --tag-outlined-background-color-hover: transparent;
+    --tag-outlined-background-color-active: var(--color-light-bg-primary-inverted-alpha-7);
+    --tag-outlined-background-color-disabled: transparent;
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+    --tag-text-color: var(--color-light-text-primary);
+    --tag-text-color-checked: var(--color-light-text-primary-inverted);
+    --tag-text-color-disabled: var(--color-light-text-tertiary);
+    --tag-text-color-checked-disabled: var(--color-light-text-primary-inverted);
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* mobile */
+
+    /* mobile inverted */
+} .component.outlined {
+        color: var(--tag-text-color);
+        border-color: var(--tag-border-color);
+        background-color: var(--tag-outlined-background-color)
+    } .component.outlined: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) {
+            .component.outlined:hover:not(:disabled) {
+                border-color: var(--tag-border-color-hover);
+                background-color: var(--tag-outlined-background-color-hover);
+            }
+        } .component.outlined:active:not(:disabled) {
+            border-color: var(--tag-border-color-active);
+            background-color: var(--tag-outlined-background-color-active);
+        } .component.filled {
+        color: var(--tag-text-color);
+        border-color: var(--tag-filled-border-color)
+    } .component.filled:disabled {
+            color: var(--tag-text-color-disabled);
+        } .component.checked {
+        color: var(--tag-text-color-checked)
+    } .component.checked:disabled {
+            border-color: var(--tag-border-color-checked-disabled);
+            color: var(--tag-text-color-checked-disabled);
+        }

package/tag/cssm/components/base-tag/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/tag/cssm/components/base-tag/index.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseTag_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('react-merge-refs');
+require('classnames');
+require('@alfalab/hooks');
+require('./default.module.css');
+require('./index.module.css');
+require('./inverted.module.css');
+
+
+
+exports.BaseTag = components_baseTag_Component.BaseTag;