@alfalab/core-components 47.24.1 → 47.26.0-beta.0

package/picker-button/packages/picker-button/src/utils/index.d.ts

@@ -0,0 +1,4 @@
+import { ComponentType, SVGProps } from 'react';
+import { PickerButtonVariant } from '../types';
+export declare const getCompactIcon: (size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;
+export declare const getIcon: (variant: PickerButtonVariant, size: string, Icon?: ComponentType<SVGProps<SVGSVGElement>>) => ComponentType<SVGProps<SVGSVGElement>>;

package/plate/Component.responsive.js

@@ -3,8 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
-require('@alfalab/hooks');
-require('./PortalContext-3d2a6916.js');
+var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -12,30 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var isClient = function () { return typeof window !== 'undefined'; };
-
-/* eslint-disable vars-on-top, no-var, @typescript-eslint/no-namespace */
-var defaultComponentBreakpoint = 1024;
-var getCSSCustomBreakpoint = function () {
-    var _a;
-    // проверяем глобальный css custom property
-    var breakpoint = isClient() &&
-        ((_a = window === null || window === void 0 ? void 0 : window.getComputedStyle(document.documentElement)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--global-breakpoint-desktop'));
-    return breakpoint ? parseFloat(breakpoint) : null;
-};
-function getComponentBreakpoint() {
-    var cssCustomBreakpoint = getCSSCustomBreakpoint();
-    if (cssCustomBreakpoint) {
-        return cssCustomBreakpoint;
-    }
-    if (globalThis.globalBreakpointDesktop) {
-        return globalThis.globalBreakpointDesktop;
-    }
-    return defaultComponentBreakpoint;
-}
-
 var Plate = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["children", "breakpoint", "defaultMatchMediaValue"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["children", "breakpoint", "defaultMatchMediaValue"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue)[0];
     var Component = isDesktop ? desktop_Component_desktop.PlateDesktop : mobile_Component_mobile.PlateMobile;

package/plate/components/base-plate/Component.js

@@ -5,7 +5,7 @@ var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsIconButton = require('../../../icon-button');
-var PortalContext = require('../../PortalContext-3d2a6916.js');
+var coreComponentsShared = require('../../../shared');
 var hooks = require('@alfalab/hooks');
 var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
 var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
@@ -17,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var commonStyles = {"component":"plate__component_7tohz","foldable":"plate__foldable_7tohz","focused":"plate__focused_7tohz","inner":"plate__inner_7tohz","rounded":"plate__rounded_7tohz","noBorder":"plate__noBorder_7tohz","shadow":"plate__shadow_7tohz","common":"plate__common_7tohz","negative":"plate__negative_7tohz","positive":"plate__positive_7tohz","attention":"plate__attention_7tohz","custom":"plate__custom_7tohz","rect":"plate__rect_7tohz","isHidden":"plate__isHidden_7tohz","leftAddons":"plate__leftAddons_7tohz","rightAddons":"plate__rightAddons_7tohz","subAddons":"plate__subAddons_7tohz","rowReverse":"plate__rowReverse_7tohz","bold":"plate__bold_7tohz","light":"plate__light_7tohz","content":"plate__content_7tohz","isFolded":"plate__isFolded_7tohz","contentContainer":"plate__contentContainer_7tohz","withoutTitle":"plate__withoutTitle_7tohz","limitWidth":"plate__limitWidth_7tohz","description":"plate__description_7tohz","closer":"plate__closer_7tohz","folder":"plate__folder_7tohz","containerButton":"plate__containerButton_7tohz","button":"plate__button_7tohz","rowLimit1":"plate__rowLimit1_7tohz","rowLimit2":"plate__rowLimit2_7tohz","rowLimit3":"plate__rowLimit3_7tohz"};
+var commonStyles = {"component":"plate__component_9pw67","foldable":"plate__foldable_9pw67","focused":"plate__focused_9pw67","inner":"plate__inner_9pw67","rounded":"plate__rounded_9pw67","noBorder":"plate__noBorder_9pw67","shadow":"plate__shadow_9pw67","common":"plate__common_9pw67","negative":"plate__negative_9pw67","positive":"plate__positive_9pw67","attention":"plate__attention_9pw67","custom":"plate__custom_9pw67","rect":"plate__rect_9pw67","isHidden":"plate__isHidden_9pw67","leftAddons":"plate__leftAddons_9pw67","rightAddons":"plate__rightAddons_9pw67","subAddons":"plate__subAddons_9pw67","rowReverse":"plate__rowReverse_9pw67","bold":"plate__bold_9pw67","light":"plate__light_9pw67","content":"plate__content_9pw67","isFolded":"plate__isFolded_9pw67","contentContainer":"plate__contentContainer_9pw67","withoutTitle":"plate__withoutTitle_9pw67","limitWidth":"plate__limitWidth_9pw67","description":"plate__description_9pw67","closer":"plate__closer_9pw67","folder":"plate__folder_9pw67","containerButton":"plate__containerButton_9pw67","button":"plate__button_9pw67","rowLimit1":"plate__rowLimit1_9pw67","rowLimit2":"plate__rowLimit2_9pw67","rowLimit3":"plate__rowLimit3_9pw67"};
 require('./index.css');
 
 /* eslint-disable complexity */
@@ -74,9 +74,11 @@ var BasePlate = React.forwardRef(function (_a, ref) {
             _b[commonStyles.isHidden] = hasCloser && isHidden,
             _b[commonStyles.isFolded] = foldable && folded,
             _b[commonStyles.rounded] = rounded,
+            _b[styles.rounded] = rounded,
             _b[commonStyles.rect] = !rounded,
             _b[commonStyles.noBorder] = !border,
             _b[commonStyles.shadow] = shadow,
+            _b[styles.shadow] = shadow,
             _b), className), style: tslib.__assign({}, (view === 'custom' && { background: background, borderColor: borderColor })), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default.default([plateRef, ref]), 
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
         tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
@@ -86,7 +88,7 @@ var BasePlate = React.forwardRef(function (_a, ref) {
                     _c[commonStyles.withoutTitle] = !title && hasAnyAddons,
                     _c[commonStyles.limitWidth] = limitContentWidth,
                     _c)) },
-                title && (React__default.default.createElement("div", { "data-test-id": PortalContext.getDataTestId(dataTestId, 'title'), className: cn__default.default(commonStyles[titleView], (_d = {},
+                title && (React__default.default.createElement("div", { "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'title'), className: cn__default.default(commonStyles[titleView], (_d = {},
                         _d[styles[titleView]] = Boolean(styles[titleView]),
                         _d)) }, title)),
                 hasContent && (React__default.default.createElement("div", { ref: contentRef, className: cn__default.default(commonStyles.content, (_e = {},

package/plate/components/base-plate/index.css

@@ -1,4 +1,4 @@
-/* hash: jfz44 */
+/* hash: tf0ib */
 :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 */ /* 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 */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
@@ -22,11 +22,9 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */
-    --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
-    --border-radius-12: var(--border-radius-l);
 } :root {
     --gap-3xs: 2px; /* deprecated */
     --gap-2xs: 4px; /* deprecated */
@@ -47,17 +45,15 @@
     /* border */
     --plate-border-left: 2px;
     --plate-border-width: 1px;
-    --plate-border-radius: var(--border-radius-12);
 
     /* width limit */
-
     --plate-width-limit: 560px;
 
     /* custom view */
     --plate-background: transparent;
     --plate-border-color: var(--color-light-neutral-translucent-700);
     --plate-box-shadow: var(--shadow-s);
-} .plate__component_7tohz {
+} .plate__component_9pw67 {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -66,28 +62,28 @@
     min-height: 56px;
     padding: var(--gap-12);
     outline: none
-} .plate__component_7tohz:before {
+} .plate__component_9pw67:before {
         content: '';
         width: var(--plate-border-left);
         position: absolute;
         height: 100%;
         top: var(--gap-0);
         left: var(--gap-0);
-    } .plate__foldable_7tohz {
+    } .plate__foldable_9pw67 {
     cursor: pointer;
-} .plate__component_7tohz * {
+} .plate__component_9pw67 * {
     box-sizing: border-box;
-} .plate__focused_7tohz {
+} .plate__focused_9pw67 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .plate__inner_7tohz {
+} .plate__inner_9pw67 {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
-} .plate__rounded_7tohz:before, .plate__noBorder_7tohz:before {
+} .plate__rounded_9pw67:before, .plate__noBorder_9pw67:before {
         display: none;
-    } .plate__shadow_7tohz:after {
+    } .plate__shadow_9pw67:after {
     content: '';
     position: absolute;
     top: var(--gap-0);
@@ -99,65 +95,61 @@
     display: block;
     box-shadow: var(--plate-box-shadow);
     pointer-events: none;
-} .plate__rounded_7tohz {
-    border-radius: var(--plate-border-radius)
-} .plate__rounded_7tohz.plate__shadow_7tohz:after {
-        border-radius: var(--plate-border-radius);
-    } .plate__common_7tohz {
+} .plate__common_9pw67 {
     background-color: var(--color-light-neutral-translucent-200);
     border: var(--plate-border-width) solid var(--color-light-neutral-translucent-700)
-} .plate__common_7tohz:before {
+} .plate__common_9pw67:before {
         background-color: var(--color-light-neutral-translucent-700);
-    } .plate__negative_7tohz {
+    } .plate__negative_9pw67 {
     background-color: var(--color-light-status-muted-negative);
     border: var(--plate-border-width) solid var(--color-light-status-negative)
-} .plate__negative_7tohz:before {
+} .plate__negative_9pw67:before {
         background-color: var(--color-light-status-negative);
-    } .plate__positive_7tohz {
+    } .plate__positive_9pw67 {
     background-color: var(--color-light-status-muted-positive);
     border: var(--plate-border-width) solid var(--color-light-status-positive)
-} .plate__positive_7tohz:before {
+} .plate__positive_9pw67:before {
         background-color: var(--color-light-status-positive);
-    } .plate__attention_7tohz {
+    } .plate__attention_9pw67 {
     background-color: var(--color-light-status-muted-attention);
     border: var(--plate-border-width) solid var(--color-light-status-attention)
-} .plate__attention_7tohz:before {
+} .plate__attention_9pw67:before {
         background-color: var(--color-light-status-attention);
-    } .plate__custom_7tohz {
+    } .plate__custom_9pw67 {
     background: var(--plate-background);
     border: var(--plate-border-width) solid var(--plate-border-color)
-} .plate__custom_7tohz:before {
+} .plate__custom_9pw67:before {
         background-color: var(--plate-border-color);
-    } .plate__rect_7tohz,
-.plate__noBorder_7tohz {
+    } .plate__rect_9pw67,
+.plate__noBorder_9pw67 {
     border: none;
-} .plate__isHidden_7tohz {
+} .plate__isHidden_9pw67 {
     display: none;
-} .plate__leftAddons_7tohz,
-.plate__rightAddons_7tohz {
+} .plate__leftAddons_9pw67,
+.plate__rightAddons_9pw67 {
     display: inline-flex;
     padding: var(--gap-4);
-} .plate__leftAddons_7tohz {
+} .plate__leftAddons_9pw67 {
     flex-shrink: 0;
     min-width: 24px;
     margin-right: var(--gap-4);
-} .plate__subAddons_7tohz {
+} .plate__subAddons_9pw67 {
     cursor: default;
     align-self: flex-start;
-} .plate__rowReverse_7tohz {
+} .plate__rowReverse_9pw67 {
     display: flex;
     flex-direction: row-reverse;
-} .plate__bold_7tohz,
-.plate__light_7tohz {
+} .plate__bold_9pw67,
+.plate__light_9pw67 {
     word-break: break-word;
-} .plate__light_7tohz {
+} .plate__light_9pw67 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     padding: 6px var(--gap-12) 6px var(--gap-4);
-} .plate__foldable_7tohz .plate__content_7tohz {
+} .plate__foldable_9pw67 .plate__content_9pw67 {
     max-height: 300vh;
-} .plate__content_7tohz {
+} .plate__content_9pw67 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -165,22 +157,22 @@
     overflow: hidden;
     transition: max-height 2s ease-in-out;
     cursor: default
-} .plate__content_7tohz.plate__isFolded_7tohz.plate__isFolded_7tohz {
+} .plate__content_9pw67.plate__isFolded_9pw67.plate__isFolded_9pw67 {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
-    } .plate__contentContainer_7tohz {
+    } .plate__contentContainer_9pw67 {
     flex: 1;
     margin-right: auto
-} .plate__contentContainer_7tohz.plate__withoutTitle_7tohz {
+} .plate__contentContainer_9pw67.plate__withoutTitle_9pw67 {
         padding-top: var(--gap-2);
-    } .plate__limitWidth_7tohz {
+    } .plate__limitWidth_9pw67 {
     max-width: var(--plate-width-limit);
-} .plate__description_7tohz {
+} .plate__description_9pw67 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
-} .plate__closer_7tohz,
-.plate__folder_7tohz {
+} .plate__closer_9pw67,
+.plate__folder_9pw67 {
     display: block;
     height: 24px;
     width: 24px;
@@ -188,33 +180,33 @@
     transition: opacity 0.2s ease;
     cursor: pointer;
     margin-left: var(--gap-12)
-} .plate__closer_7tohz:hover, .plate__folder_7tohz:hover {
+} .plate__closer_9pw67:hover, .plate__folder_9pw67:hover {
         opacity: 0.7;
-    } .plate__closer_7tohz:active, .plate__folder_7tohz:active {
+    } .plate__closer_9pw67:active, .plate__folder_9pw67:active {
         opacity: 0.5;
-    } .plate__folder_7tohz {
+    } .plate__folder_9pw67 {
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
-} .plate__folder_7tohz.plate__isFolded_7tohz {
+} .plate__folder_9pw67.plate__isFolded_9pw67 {
         transform: rotate(0deg);
-    } .plate__containerButton_7tohz {
+    } .plate__containerButton_9pw67 {
     display: flex;
-} .plate__subAddons_7tohz .plate__button_7tohz:not(:first-child) {
+} .plate__subAddons_9pw67 .plate__button_9pw67:not(:first-child) {
         margin-right: var(--gap-8);
-    } .plate__containerButton_7tohz .plate__button_7tohz:not(:last-child) {
+    } .plate__containerButton_9pw67 .plate__button_9pw67:not(:last-child) {
         margin-right: var(--gap-8);
-    } .plate__rowLimit1_7tohz {
+    } .plate__rowLimit1_9pw67 {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     word-break: break-all;
-} .plate__rowLimit2_7tohz {
+} .plate__rowLimit2_9pw67 {
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .plate__rowLimit3_7tohz {
+} .plate__rowLimit3_9pw67 {
     -webkit-line-clamp: 3;
     display: -webkit-box;
     -webkit-box-orient: vertical;

package/plate/cssm/Component.responsive.js

@@ -3,8 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
-require('@alfalab/hooks');
-require('./PortalContext-6c7d9a95.js');
+var coreComponentsShared = require('../../shared/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -12,30 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var isClient = function () { return typeof window !== 'undefined'; };
-
-/* eslint-disable vars-on-top, no-var, @typescript-eslint/no-namespace */
-var defaultComponentBreakpoint = 1024;
-var getCSSCustomBreakpoint = function () {
-    var _a;
-    // проверяем глобальный css custom property
-    var breakpoint = isClient() &&
-        ((_a = window === null || window === void 0 ? void 0 : window.getComputedStyle(document.documentElement)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--global-breakpoint-desktop'));
-    return breakpoint ? parseFloat(breakpoint) : null;
-};
-function getComponentBreakpoint() {
-    var cssCustomBreakpoint = getCSSCustomBreakpoint();
-    if (cssCustomBreakpoint) {
-        return cssCustomBreakpoint;
-    }
-    if (globalThis.globalBreakpointDesktop) {
-        return globalThis.globalBreakpointDesktop;
-    }
-    return defaultComponentBreakpoint;
-}
-
 var Plate = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["children", "breakpoint", "defaultMatchMediaValue"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["children", "breakpoint", "defaultMatchMediaValue"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue)[0];
     var Component = isDesktop ? desktop_Component_desktop.PlateDesktop : mobile_Component_mobile.PlateMobile;

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

@@ -5,7 +5,7 @@ var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsIconButton = require('../../../../icon-button/cssm');
-var PortalContext = require('../../PortalContext-6c7d9a95.js');
+var coreComponentsShared = require('../../../../shared/cssm');
 var hooks = require('@alfalab/hooks');
 var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
 var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
@@ -73,9 +73,11 @@ var BasePlate = React.forwardRef(function (_a, ref) {
             _b[commonStyles__default.default.isHidden] = hasCloser && isHidden,
             _b[commonStyles__default.default.isFolded] = foldable && folded,
             _b[commonStyles__default.default.rounded] = rounded,
+            _b[styles.rounded] = rounded,
             _b[commonStyles__default.default.rect] = !rounded,
             _b[commonStyles__default.default.noBorder] = !border,
             _b[commonStyles__default.default.shadow] = shadow,
+            _b[styles.shadow] = shadow,
             _b), className), style: tslib.__assign({}, (view === 'custom' && { background: background, borderColor: borderColor })), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default.default([plateRef, ref]), 
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
         tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
@@ -85,7 +87,7 @@ var BasePlate = React.forwardRef(function (_a, ref) {
                     _c[commonStyles__default.default.withoutTitle] = !title && hasAnyAddons,
                     _c[commonStyles__default.default.limitWidth] = limitContentWidth,
                     _c)) },
-                title && (React__default.default.createElement("div", { "data-test-id": PortalContext.getDataTestId(dataTestId, 'title'), className: cn__default.default(commonStyles__default.default[titleView], (_d = {},
+                title && (React__default.default.createElement("div", { "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'title'), className: cn__default.default(commonStyles__default.default[titleView], (_d = {},
                         _d[styles[titleView]] = Boolean(styles[titleView]),
                         _d)) }, title)),
                 hasContent && (React__default.default.createElement("div", { ref: contentRef, className: cn__default.default(commonStyles__default.default.content, (_e = {},

package/plate/cssm/components/base-plate/index.module.css

@@ -21,11 +21,9 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */
-    --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
-    --border-radius-12: var(--border-radius-l);
 } :root {
     --gap-3xs: 2px; /* deprecated */
     --gap-2xs: 4px; /* deprecated */
@@ -46,10 +44,8 @@
     /* border */
     --plate-border-left: 2px;
     --plate-border-width: 1px;
-    --plate-border-radius: var(--border-radius-12);
 
     /* width limit */
-
     --plate-width-limit: 560px;
 
     /* custom view */
@@ -98,11 +94,7 @@
     display: block;
     box-shadow: var(--plate-box-shadow);
     pointer-events: none;
-} .rounded {
-    border-radius: var(--plate-border-radius)
-} .rounded.shadow:after {
-        border-radius: var(--plate-border-radius);
-    } .common {
+} .common {
     background-color: var(--color-light-neutral-translucent-200);
     border: var(--plate-border-width) solid var(--color-light-neutral-translucent-700)
 } .common:before {

package/plate/cssm/components/base-plate/vars.css

@@ -0,0 +1,26 @@
+: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 */ /* 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 */ /* deprecated */ /* deprecated */
+} /* deprecated */ :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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :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 */
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
+} :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 {
+} /* сбрасывает синюю подсветку при нажатии */ :root {
+    /* border */
+
+    /* width limit */
+
+    /* custom view */
+}

package/plate/cssm/desktop/desktop.module.css

@@ -9,9 +9,11 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --border-radius-12: var(--border-radius-l);
 } :root { /* deprecated */
     --gap-2xs: 4px; /* deprecated */
     --gap-xs: 8px; /* deprecated */
@@ -24,7 +26,10 @@
     --gap-12: var(--gap-s);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .bold {
+} /* сбрасывает синюю подсветку при нажатии */ :root {
+    --plate-rounded-border-radius-desktop: var(--border-radius-12);
+    --plate-rounded-shadow-border-radius-desktop: var(--border-radius-12);
+} .bold {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
@@ -33,4 +38,8 @@
     padding: var(--gap-0) var(--gap-12) var(--gap-4) var(--gap-4);
 } .footer {
     padding: var(--gap-8) var(--gap-0) var(--gap-4) var(--gap-4);
-}
+} .rounded {
+    border-radius: var(--plate-rounded-border-radius-desktop)
+} .rounded.shadow:after {
+        border-radius: var(--plate-rounded-shadow-border-radius-desktop);
+    }

package/plate/cssm/mobile/mobile.module.css

@@ -9,9 +9,11 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --border-radius-12: var(--border-radius-l);
 } :root { /* deprecated */
     --gap-2xs: 4px; /* deprecated */
     --gap-xs: 8px; /* deprecated */
@@ -24,7 +26,10 @@
     --gap-12: var(--gap-s);
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .bold {
+} /* сбрасывает синюю подсветку при нажатии */ :root {
+    --plate-rounded-border-radius-mobile: var(--border-radius-12);
+    --plate-rounded-shadow-border-radius-mobile: var(--border-radius-12);
+} .bold {
     font-size: 16px;
     line-height: 20px;
     font-weight: 600;
@@ -33,4 +38,8 @@
     padding: var(--gap-0) var(--gap-12) var(--gap-4) var(--gap-4);
 } .footer {
     padding: var(--gap-8) var(--gap-0) var(--gap-4) var(--gap-4);
-}
+} .rounded {
+    border-radius: var(--plate-rounded-border-radius-mobile)
+} .rounded.shadow:after {
+        border-radius: var(--plate-rounded-shadow-border-radius-mobile);
+    }

package/plate/cssm/packages/plate/src/Component.responsive.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BasePlateProps } from './components/base-plate';
+export declare type PlateProps = Omit<BasePlateProps, 'styles'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+export declare const Plate: React.ForwardRefExoticComponent<Omit<BasePlateProps, "styles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;