@alfalab/core-components-pure-cell 4.8.1 → 4.10.0

package/cssm/{component-063660c0.js → component-e3105fca.js}

@@ -39,10 +39,35 @@ var styles__default$9 = /*#__PURE__*/_interopDefaultCompat(styles$9);
 var styles__default$a = /*#__PURE__*/_interopDefaultCompat(styles$a);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
+var ADDON_COMPONENT = {
+    button: 'button',
+    section: 'section',
+};
 var Addon = function (_a) {
-    var children = _a.children, _b = _a.verticalAlign, verticalAlign = _b === void 0 ? 'top' : _b, _c = _a.addonPadding, addonPadding = _c === void 0 ? 'default' : _c, dataTestId = _a.dataTestId;
+    var _b;
+    var children = _a.children, _c = _a.verticalAlign, verticalAlign = _c === void 0 ? 'top' : _c, _d = _a.addonPadding, addonPadding = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId, onClick = _a.onClick;
     var pureCellContext = React.useContext(PureCellContext);
-    return (React__default.default.createElement("section", { className: cn__default.default(styles__default.default.component, styles__default.default[addonPadding], styles__default.default[verticalAlign]), "data-test-id": coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'addon') }, children));
+    var Component = onClick ? ADDON_COMPONENT.button : ADDON_COMPONENT.section;
+    var onMouseEvents = {
+        onClick: function (e) {
+            e.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        },
+        onMouseEnter: function () {
+            var _a;
+            (_a = pureCellContext.unsetMainHover) === null || _a === void 0 ? void 0 : _a.call(pureCellContext);
+        },
+        onMouseLeave: function () {
+            var _a;
+            (_a = pureCellContext.setMainHover) === null || _a === void 0 ? void 0 : _a.call(pureCellContext);
+        },
+        onMouseDown: function (e) {
+            e.stopPropagation();
+        },
+    };
+    return (React__default.default.createElement(Component, tslib.__assign({ className: cn__default.default(styles__default.default.component, styles__default.default[addonPadding], styles__default.default[verticalAlign], (_b = {},
+            _b[styles__default.default.button] = onClick,
+            _b)), "data-test-id": coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'addon') }, (onClick && onMouseEvents)), children));
 };
 
 var Amount = function (_a) {
@@ -56,7 +81,7 @@ var AmountTitle = function (_a) {
     var minority = _a.minority, _b = _a.minorUnits, minorUnits = _b === void 0 ? 100 : _b, className = _a.className, _c = _a.color, color = _c === void 0 ? 'primary' : _c, dataTestId = _a.dataTestId, _d = _a.titleProps, titleProps = _d === void 0 ? {} : _d, restProps = tslib.__rest(_a, ["minority", "minorUnits", "className", "color", "dataTestId", "titleProps"]);
     var pureCellContext = React.useContext(PureCellContext);
     var titleDefaultProps = tslib.__assign({ tag: 'h4', view: 'small', color: color }, titleProps);
-    return (React__default.default.createElement(coreComponentsTypography.Typography.Title, tslib.__assign({}, titleDefaultProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'amount-title'), className: cn__default.default(styles__default$2.default.component, titleProps.className) }),
+    return (React__default.default.createElement(coreComponentsTypography.Typography.TitleResponsive, tslib.__assign({}, titleDefaultProps, { dataTestId: coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'amount-title'), className: cn__default.default(styles__default$2.default.component, titleProps.className) }),
         React__default.default.createElement(coreComponentsAmount.Amount, tslib.__assign({ minority: minority || minorUnits, className: cn__default.default(styles__default$2.default.weight, className), dataTestId: coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'core-amount-title') }, restProps, { bold: 'none' }))));
 };
 
@@ -85,9 +110,27 @@ var Footer = function (_a) {
 };
 
 var FooterButton = React.forwardRef(function (_a, ref) {
-    var children = _a.children, dataTestId = _a.dataTestId, props = tslib.__rest(_a, ["children", "dataTestId"]);
+    var children = _a.children, dataTestId = _a.dataTestId, onClick = _a.onClick, onMouseDown = _a.onMouseDown, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, props = tslib.__rest(_a, ["children", "dataTestId", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave"]);
     var pureCellContext = React.useContext(PureCellContext);
-    return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, props, { size: 'xxs', dataTestId: coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'button'), className: styles__default$6.default.component, ref: ref }), children));
+    var handleClick = function (e) {
+        e.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    var handleMouseEnter = function (e) {
+        var _a;
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        (_a = pureCellContext.unsetMainHover) === null || _a === void 0 ? void 0 : _a.call(pureCellContext);
+    };
+    var handleMouseLeave = function (e) {
+        var _a;
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        (_a = pureCellContext.setMainHover) === null || _a === void 0 ? void 0 : _a.call(pureCellContext);
+    };
+    var handleMouseDown = function (e) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+        e.stopPropagation();
+    };
+    return (React__default.default.createElement(coreComponentsButton.Button, tslib.__assign({}, props, { size: 'xxs', dataTestId: coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'button'), className: styles__default$6.default.component, ref: ref, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown }), children));
 });
 
 var FooterText = function (_a) {
@@ -96,20 +139,63 @@ var FooterText = function (_a) {
     return (React__default.default.createElement(coreComponentsTypography.Typography.Text, { view: 'primary-small', color: color, "data-test-id": coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'footer-title') }, children));
 };
 
+var GRAPHICS_COMPONENT = {
+    button: 'button',
+    section: 'section',
+};
 var Graphics = function (_a) {
-    var children = _a.children, dataTestId = _a.dataTestId, _b = _a.verticalAlign, verticalAlign = _b === void 0 ? 'top' : _b, graphicPadding = _a.graphicPadding;
+    var _b;
+    var children = _a.children, dataTestId = _a.dataTestId, _c = _a.verticalAlign, verticalAlign = _c === void 0 ? 'top' : _c, graphicPadding = _a.graphicPadding, onClick = _a.onClick;
     var pureCellContext = React.useContext(PureCellContext);
+    var Component = onClick ? GRAPHICS_COMPONENT.button : GRAPHICS_COMPONENT.section;
     var defaultGraphicPadding = pureCellContext.direction === 'horizontal' ? 'airy' : 'default';
-    return (React__default.default.createElement("section", { className: cn__default.default(styles__default$7.default.component, styles__default$7.default[verticalAlign], styles__default$7.default[pureCellContext.direction || 'horizontal'], styles__default$7.default[graphicPadding || defaultGraphicPadding]), "data-test-id": coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'graphics') }, children));
+    var onMouseEvents = {
+        onClick: function (e) {
+            e.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        },
+        onMouseEnter: function () {
+            var _a;
+            (_a = pureCellContext.unsetMainHover) === null || _a === void 0 ? void 0 : _a.call(pureCellContext);
+        },
+        onMouseLeave: function () {
+            var _a;
+            (_a = pureCellContext.setMainHover) === null || _a === void 0 ? void 0 : _a.call(pureCellContext);
+        },
+        onMouseDown: function (e) {
+            e.stopPropagation();
+        },
+    };
+    return (React__default.default.createElement(Component, tslib.__assign({ className: cn__default.default(styles__default$7.default.component, styles__default$7.default[verticalAlign], styles__default$7.default[pureCellContext.direction || 'horizontal'], styles__default$7.default[graphicPadding || defaultGraphicPadding], (_b = {}, _b[styles__default$7.default.button] = onClick, _b)), "data-test-id": coreComponentsShared.getDataTestId(dataTestId || pureCellContext.dataTestId, 'graphics') }, (onClick && onMouseEvents)), children));
 };
 
+var MAIN_COMPONENT = {
+    button: 'button',
+    section: 'section',
+};
 var Main = function (_a) {
-    var _b;
-    var children = _a.children, isReverse = _a.isReverse, className = _a.className, dataTestId = _a.dataTestId;
-    var _c = React.useContext(PureCellContext), _d = _c.direction, direction = _d === void 0 ? 'horizontal' : _d, contextDataTestId = _c.dataTestId;
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default$8.default.component, styles__default$8.default[direction], (_b = {},
+    var _b, _c;
+    var children = _a.children, isReverse = _a.isReverse, className = _a.className, dataTestId = _a.dataTestId, onClick = _a.onClick;
+    var _d = React.useContext(PureCellContext), _e = _d.direction, direction = _e === void 0 ? 'horizontal' : _e, contextDataTestId = _d.dataTestId, setMainHover = _d.setMainHover, unsetMainHover = _d.unsetMainHover;
+    var Component = onClick ? MAIN_COMPONENT.button : MAIN_COMPONENT.section;
+    var onMouseEvents = {
+        onClick: function (e) {
+            e.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        },
+        onMouseEnter: function () {
+            unsetMainHover === null || unsetMainHover === void 0 ? void 0 : unsetMainHover();
+        },
+        onMouseLeave: function () {
+            setMainHover === null || setMainHover === void 0 ? void 0 : setMainHover();
+        },
+        onMouseDown: function (e) {
+            e.stopPropagation();
+        },
+    };
+    return (React__default.default.createElement(Component, tslib.__assign({ className: cn__default.default(styles__default$8.default.component, styles__default$8.default[direction], (_b = {},
             _b[styles__default$8.default.reverse] = isReverse,
-            _b), className), "data-test-id": coreComponentsShared.getDataTestId(dataTestId || contextDataTestId, 'main') }, children));
+            _b), (_c = {}, _c[styles__default$8.default.button] = onClick, _c), className), "data-test-id": coreComponentsShared.getDataTestId(dataTestId || contextDataTestId, 'main') }, (onClick && onMouseEvents)), children));
 };
 
 var Text = function (_a) {
@@ -133,12 +219,32 @@ var PureCellComponent = React.forwardRef(function (_a, ref) {
     var className = _a.className, dataTestId = _a.dataTestId, onClick = _a.onClick, href = _a.href, _d = _a.tag, Component = _d === void 0 ? (href && 'a') || (onClick && 'button') || 'section' : _d, children = _a.children, _e = _a.horizontalPadding, horizontalPadding = _e === void 0 ? 'none' : _e, _f = _a.verticalPadding, verticalPadding = _f === void 0 ? 'none' : _f, _g = _a.direction, direction = _g === void 0 ? 'horizontal' : _g, restProps = tslib.__rest(_a, ["className", "dataTestId", "onClick", "href", "tag", "children", "horizontalPadding", "verticalPadding", "direction"]);
     var cellRef = React.useRef(null);
     var focused = hooks.useFocus(cellRef, 'keyboard')[0];
+    var _h = React.useState(false), hoverState = _h[0], setHoverState = _h[1];
+    var _j = React.useState(false), activeState = _j[0], setActiveState = _j[1];
+    var setHover = function () { return setHoverState(true); };
+    var unsetHover = function () { return setHoverState(false); };
+    var setActive = function () { return setActiveState(true); };
+    var unsetActive = function () { return setActiveState(false); };
+    var mouseEvents = {
+        onMouseEnter: setHover,
+        onMouseLeave: unsetHover,
+        onMouseDown: setActive,
+        onMouseUp: unsetActive,
+    };
     var addClasses = (_b = {},
         _b[styles__default$a.default.component] = true,
         _b[styles__default$a.default.focused] = focused,
         _b[styles__default$a.default[direction]] = true,
         _b[styles__default$a.default[horizontalPadding]] = true,
+        _b[styles__default$a.default.hover] = hoverState,
+        _b[styles__default$a.default.active] = activeState,
         _b);
+    var contextState = {
+        direction: direction,
+        dataTestId: dataTestId,
+        setMainHover: setHover,
+        unsetMainHover: unsetHover,
+    };
     if (typeof verticalPadding === 'string') {
         addClasses[styles__default$a.default[verticalPadding]] = typeof verticalPadding === 'string';
     }
@@ -150,15 +256,15 @@ var PureCellComponent = React.forwardRef(function (_a, ref) {
         var target = restProps.target;
         // Для совместимости с react-router-dom, меняем href на to
         var hrefProps = (_c = {}, _c[typeof Component === 'string' ? 'href' : 'to'] = href, _c);
-        return (React__default.default.createElement(Component, tslib.__assign({ rel: target === '_blank' ? 'noreferrer noopener' : undefined }, restProps, hrefProps, { ref: mergeRefs__default.default([cellRef, ref]), className: cn__default.default(styles__default$a.default.link, addClasses, className), "data-test-id": dataTestId, onClick: onClick }),
-            React__default.default.createElement(PureCellContext.Provider, { value: { direction: direction, dataTestId: dataTestId } }, children)));
+        return (React__default.default.createElement(Component, tslib.__assign({ rel: target === '_blank' ? 'noreferrer noopener' : undefined }, restProps, hrefProps, { ref: mergeRefs__default.default([cellRef, ref]), className: cn__default.default(styles__default$a.default.link, addClasses, className), "data-test-id": dataTestId, onClick: onClick }, mouseEvents),
+            React__default.default.createElement(PureCellContext.Provider, { value: contextState }, children)));
     }
     if (onClick) {
-        return (React__default.default.createElement(Component, tslib.__assign({}, restProps, { ref: mergeRefs__default.default([cellRef, ref]), className: cn__default.default(styles__default$a.default.button, addClasses, className), "data-test-id": dataTestId, onClick: onClick }),
-            React__default.default.createElement(PureCellContext.Provider, { value: { direction: direction, dataTestId: dataTestId } }, children)));
+        return (React__default.default.createElement(Component, tslib.__assign({}, restProps, { ref: mergeRefs__default.default([cellRef, ref]), className: cn__default.default(styles__default$a.default.button, addClasses, className), "data-test-id": dataTestId, onClick: onClick }, mouseEvents),
+            React__default.default.createElement(PureCellContext.Provider, { value: contextState }, children)));
     }
     return (React__default.default.createElement(Component, tslib.__assign({}, restProps, { ref: ref, tabIndex: 0, className: cn__default.default(addClasses, className), "data-test-id": dataTestId }),
-        React__default.default.createElement(PureCellContext.Provider, { value: { direction: direction, dataTestId: dataTestId } }, children)));
+        React__default.default.createElement(PureCellContext.Provider, { value: contextState }, children)));
 });
 /**
  * Универсальный конструктор для сборки любой ячейки.

package/cssm/component.js

@@ -8,7 +8,7 @@ require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-comment/cssm');
 require('@alfalab/hooks');
-var components_addon_component = require('./component-063660c0.js');
+var components_addon_component = require('./component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/addon/component.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/core-components-shared/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/addon/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/addon/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/addon/index.module.css

@@ -14,6 +14,9 @@
     --gap-m: 16px;
 } :root {
 } :root {
+} :root {
+    --pure-cell-clickable-area-hover-opacity: 1;
+    --pure-cell-clickable-area-active-opacity: 1;
 } .component {
     display: flex;
     flex-direction: column;
@@ -34,4 +37,26 @@
         align-self: center;
     } .component.bottom {
         align-self: flex-end;
+    } .button {
+    box-sizing: border-box;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+    border: 0;
+    margin: 0;
+    box-shadow: none;
+    border-radius: 0;
+    -webkit-user-select: none;
+            user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    min-width: 0;
+    cursor: pointer;
+    padding: 0;
+    transition: opacity 0.15s ease-in-out
+} .button:hover {
+        opacity: var(--pure-cell-clickable-area-hover-opacity);
+    } .button:active {
+        opacity: var(--pure-cell-clickable-area-active-opacity);
     }

package/cssm/components/amount/component.js

@@ -8,7 +8,7 @@ require('classnames');
 require('@alfalab/core-components-amount/cssm');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/core-components-typography/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/amount/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/amount/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/amount-title/component.js

@@ -8,7 +8,7 @@ require('classnames');
 require('@alfalab/core-components-amount/cssm');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/core-components-typography/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/amount-title/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/amount-title/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/category/component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/core-components-typography/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/category/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/category/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/content/component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('classnames');
 require('@alfalab/core-components-shared/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/content/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/footer/component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('classnames');
 require('@alfalab/core-components-shared/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/footer/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/footer/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/footer-button/component.js

@@ -6,7 +6,7 @@ require('tslib');
 require('react');
 require('@alfalab/core-components-button/cssm');
 require('@alfalab/core-components-shared/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/footer-button/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/footer-text/component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/core-components-typography/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/footer-text/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/graphics/component.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/core-components-shared/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/graphics/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/graphics/index.module.css

@@ -17,6 +17,9 @@
     --gap-m: 16px;
 } :root {
 } :root {
+} :root {
+    --pure-cell-clickable-area-hover-opacity: 1;
+    --pure-cell-clickable-area-active-opacity: 1;
 } .component {
     display: inline-flex;
     flex-basis: auto;
@@ -46,4 +49,27 @@
         margin-bottom: var(--gap-xs);
     } .vertical:not(:last-child).tiny {
         margin-bottom: var(--gap-2xs);
+    } .button {
+    box-sizing: border-box;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+    border: 0;
+    margin: 0;
+    box-shadow: none;
+    border-radius: 0;
+    -webkit-user-select: none;
+            user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    min-width: 0;
+    cursor: pointer;
+    padding: 0;
+    transition: opacity 0.15s ease-in-out;
+    min-width: auto
+} .button:hover {
+        opacity: var(--pure-cell-clickable-area-hover-opacity);
+    } .button:active {
+        opacity: var(--pure-cell-clickable-area-active-opacity);
     }

package/cssm/components/main/component.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/core-components-shared/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/main/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/components/main/index.module.css

@@ -14,6 +14,9 @@
     --gap-3xs: 2px;
 } :root {
 } :root {
+} :root {
+    --pure-cell-clickable-area-hover-opacity: 1;
+    --pure-cell-clickable-area-active-opacity: 1;
 } .component {
     display: flex;
     flex-direction: column;
@@ -30,4 +33,27 @@
         text-align: center;
     } .component.reverse {
         flex-direction: column-reverse;
-    }
+    } .component.button {
+        box-sizing: border-box;
+        background-color: transparent;
+        -webkit-tap-highlight-color: transparent;
+        outline: none;
+        border: 0;
+        margin: 0;
+        box-shadow: none;
+        border-radius: 0;
+        -webkit-user-select: none;
+                user-select: none;
+        vertical-align: middle;
+        appearance: none;
+        text-decoration: none;
+        min-width: 0;
+        cursor: pointer;
+        padding: 0;
+        transition: opacity 0.15s ease-in-out;
+        min-width: auto
+    } .component.button:hover {
+            opacity: var(--pure-cell-clickable-area-hover-opacity);
+        } .component.button:active {
+            opacity: var(--pure-cell-clickable-area-active-opacity);
+        }

package/cssm/components/text/component.js

@@ -6,7 +6,7 @@ require('react');
 require('classnames');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/core-components-typography/cssm');
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 require('./index.module.css');
 
 

package/cssm/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-063660c0";
+export * from "../../component-e3105fca";

package/cssm/components/text/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-063660c0.js');
+var components_addon_component = require('../../component-e3105fca.js');
 
 
 

package/cssm/index.d.ts

@@ -1,2 +1,2 @@
-export { PureCell } from "./component-21d7b687";
-export type { PureCellProps } from "./component-21d7b687";
+export { PureCell } from "./component-6a954af1";
+export type { PureCellProps } from "./component-6a954af1";

package/cssm/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('./component-063660c0.js');
+var components_addon_component = require('./component-e3105fca.js');