@alfalab/core-components 22.1.0 → 22.2.0

package/notification-manager/modern/index.css

@@ -5,7 +5,7 @@
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_1q41s {
+.notification-manager__component_15p9q {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_1q41s .notification-manager__notification_1q41s {
+.notification-manager__component_15p9q .notification-manager__notification_15p9q {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_1q41s {
+.notification-manager__enter_15p9q {
     visibility: hidden;
     transform: translate(0, -500px);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__enterActive_1q41s {
+.notification-manager__enterActive_15p9q {
     visibility: visible;
     transform: translate(0);
 }
 
-.notification-manager__exit_1q41s {
+.notification-manager__exit_15p9q {
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
-.notification-manager__exitActive_1q41s {
+.notification-manager__exitActive_15p9q {
     visibility: hidden;
     opacity: 0;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_1q41s {
+    .notification-manager__component_15p9q {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_1q41s .notification-manager__notification_1q41s {
+    .notification-manager__component_15p9q .notification-manager__notification_15p9q {
         width: auto;
     }
 
-    .notification-manager__enter_1q41s {
+    .notification-manager__enter_15p9q {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_1q41s {
+    .notification-manager__enterActive_15p9q {
         transform: translate(0);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "22.1.0",
+  "version": "22.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -68,6 +68,7 @@
     "intersection-observer": "^0.12.0",
     "libphonenumber-js": "^1.8.4",
     "lodash.debounce": "^4.0.8",
+    "popper-max-size-modifier": "^0.2.0",
     "react-focus-lock": "^2.5.0",
     "react-merge-refs": "^1.1.0",
     "react-node-resolver": "^2.0.1",

package/password-input/component.js

@@ -53,7 +53,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"eye":"password-input__eye_zgmch","xl":"password-input__xl_zgmch","input":"password-input__input_zgmch"};
+var styles = {"eye":"password-input__eye_5uin5","xl":"password-input__xl_5uin5","input":"password-input__input_5uin5"};
 require('./index.css');
 
 var PasswordInput = React.forwardRef(function (_a, ref) {

package/password-input/esm/component.js

@@ -44,7 +44,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"eye":"password-input__eye_zgmch","xl":"password-input__xl_zgmch","input":"password-input__input_zgmch"};
+var styles = {"eye":"password-input__eye_5uin5","xl":"password-input__xl_5uin5","input":"password-input__input_5uin5"};
 require('./index.css');
 
 var PasswordInput = forwardRef(function (_a, ref) {

package/password-input/esm/index.css

@@ -1,16 +1,16 @@
 /* hash: clehm */
-.password-input__eye_zgmch:last-child {
+.password-input__eye_5uin5:last-child {
     margin-right: var(--gap-s-neg);
 }
 
-.password-input__xl_zgmch .password-input__eye_zgmch:last-child {
+.password-input__xl_5uin5 .password-input__eye_5uin5:last-child {
         margin-right: var(--gap-m-neg);
     }
 
-.password-input__xl_zgmch .password-input__eye_zgmch {
+.password-input__xl_5uin5 .password-input__eye_5uin5 {
         margin-left: var(--gap-2xs);
     }
 
-.password-input__input_zgmch::-ms-reveal {
+.password-input__input_5uin5::-ms-reveal {
     display: none;
 }

package/password-input/index.css

@@ -1,16 +1,16 @@
 /* hash: clehm */
-.password-input__eye_zgmch:last-child {
+.password-input__eye_5uin5:last-child {
     margin-right: var(--gap-s-neg);
 }
 
-.password-input__xl_zgmch .password-input__eye_zgmch:last-child {
+.password-input__xl_5uin5 .password-input__eye_5uin5:last-child {
         margin-right: var(--gap-m-neg);
     }
 
-.password-input__xl_zgmch .password-input__eye_zgmch {
+.password-input__xl_5uin5 .password-input__eye_5uin5 {
         margin-left: var(--gap-2xs);
     }
 
-.password-input__input_zgmch::-ms-reveal {
+.password-input__input_5uin5::-ms-reveal {
     display: none;
 }

package/password-input/modern/component.js

@@ -5,7 +5,7 @@ import EyeOffMIcon from '@alfalab/icons-glyph/EyeOffMIcon';
 import { Input } from '../../input/modern';
 import { IconButton } from '../../icon-button/modern';
 
-var styles = {"eye":"password-input__eye_zgmch","xl":"password-input__xl_zgmch","input":"password-input__input_zgmch"};
+var styles = {"eye":"password-input__eye_5uin5","xl":"password-input__xl_5uin5","input":"password-input__input_5uin5"};
 require('./index.css');
 
 const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, disabled, colors, rightAddons, size = 's', className, ...restProps }, ref) => {

package/password-input/modern/index.css

@@ -1,16 +1,16 @@
 /* hash: clehm */
-.password-input__eye_zgmch:last-child {
+.password-input__eye_5uin5:last-child {
     margin-right: var(--gap-s-neg);
 }
 
-.password-input__xl_zgmch .password-input__eye_zgmch:last-child {
+.password-input__xl_5uin5 .password-input__eye_5uin5:last-child {
         margin-right: var(--gap-m-neg);
     }
 
-.password-input__xl_zgmch .password-input__eye_zgmch {
+.password-input__xl_5uin5 .password-input__eye_5uin5 {
         margin-left: var(--gap-2xs);
     }
 
-.password-input__input_zgmch::-ms-reveal {
+.password-input__input_5uin5::-ms-reveal {
     display: none;
 }

package/picker-button/{Component-e3262191.d.ts → Component-229467cd.d.ts}

@@ -65,6 +65,10 @@ type PopoverProps = {
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
      */
     preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */

package/picker-button/{Component-e3262191.js → Component-229467cd.js}

@@ -48,7 +48,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"iconContainer":"picker-button__iconContainer_sqjox","open":"picker-button__open_sqjox"};
+var styles = {"iconContainer":"picker-button__iconContainer_i8apw","open":"picker-button__open_i8apw"};
 require('./field/index.css');
 
 var Field = function (_a) {

package/picker-button/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var field_Component = require('./Component-e3262191.js');
+var field_Component = require('./Component-229467cd.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsSelect = require('../select');
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"container":"picker-button__container_120ep"};
+var styles = {"container":"picker-button__container_1j8h9"};
 require('./index.css');
 
 var PickerButton = React.forwardRef(function (_a, ref) {

package/picker-button/cssm/Component-c7d52094.d.ts

@@ -65,6 +65,10 @@ type PopoverProps = {
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
      */
     preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */

package/picker-button/esm/{Component-46562014.d.ts → Component-47d7d9e9.d.ts}

@@ -65,6 +65,10 @@ type PopoverProps = {
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
      */
     preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */

package/picker-button/esm/{Component-46562014.js → Component-47d7d9e9.js}

@@ -43,7 +43,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"iconContainer":"picker-button__iconContainer_sqjox","open":"picker-button__open_sqjox"};
+var styles = {"iconContainer":"picker-button__iconContainer_i8apw","open":"picker-button__open_i8apw"};
 require('./field/index.css');
 
 var Field = function (_a) {

package/picker-button/esm/Component.js

@@ -3,10 +3,10 @@ import cn from 'classnames';
 import '../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-import { _ as __rest, a as __assign, F as Field } from './Component-46562014.js';
+import { _ as __rest, a as __assign, F as Field } from './Component-47d7d9e9.js';
 import { BaseSelect, OptionsList, Optgroup, Option } from '../../select/esm';
 
-var styles = {"container":"picker-button__container_120ep"};
+var styles = {"container":"picker-button__container_1j8h9"};
 require('./index.css');
 
 var PickerButton = forwardRef(function (_a, ref) {

package/picker-button/esm/field/Component.js

@@ -3,4 +3,4 @@ import 'classnames';
 import '../../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-export { F as Field } from '../Component-46562014.js';
+export { F as Field } from '../Component-47d7d9e9.js';

package/picker-button/esm/field/index.css

@@ -10,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_sqjox {
+.picker-button__iconContainer_i8apw {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_sqjox {
+.picker-button__open_i8apw {
     transform: var(--arrow-transform);
 }

package/picker-button/esm/field/index.d.ts

@@ -1 +1 @@
-export * from "../Component-46562014";
+export * from "../Component-47d7d9e9";

package/picker-button/esm/field/index.js

@@ -3,4 +3,4 @@ import 'classnames';
 import '../../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-export { F as Field } from '../Component-46562014.js';
+export { F as Field } from '../Component-47d7d9e9.js';

package/picker-button/esm/index.css

@@ -1,4 +1,4 @@
 /* hash: qs9eo */
-.picker-button__container_120ep {
+.picker-button__container_1j8h9 {
     min-width: auto;
 }

package/picker-button/esm/index.js

@@ -3,6 +3,6 @@ import 'classnames';
 import '../../button/esm';
 import '@alfalab/icons-classic/ArrowDownMIcon';
 import '@alfalab/icons-classic/ArrowDownSIcon';
-import './Component-46562014.js';
+import './Component-47d7d9e9.js';
 import '../../select/esm';
 export { PickerButton } from './Component.js';

package/picker-button/field/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var field_Component = require('../Component-e3262191.js');
+var field_Component = require('../Component-229467cd.js');
 require('react');
 require('classnames');
 require('../../button');

package/picker-button/field/index.css

@@ -10,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_sqjox {
+.picker-button__iconContainer_i8apw {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_sqjox {
+.picker-button__open_i8apw {
     transform: var(--arrow-transform);
 }

package/picker-button/field/index.d.ts

@@ -1 +1 @@
-export * from "../Component-e3262191";
+export * from "../Component-229467cd";

package/picker-button/field/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var field_Component = require('../Component-e3262191.js');
+var field_Component = require('../Component-229467cd.js');
 require('react');
 require('classnames');
 require('../../button');

package/picker-button/index.css

@@ -1,4 +1,4 @@
 /* hash: qs9eo */
-.picker-button__container_120ep {
+.picker-button__container_1j8h9 {
     min-width: auto;
 }

package/picker-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./Component-e3262191.js');
+require('./Component-229467cd.js');
 require('react');
 require('classnames');
 require('../select');

package/picker-button/modern/Component.js

@@ -6,7 +6,7 @@ import { OptionsList, Optgroup, Option, BaseSelect } from '../../select/modern';
 import '../../button/modern';
 import { Field } from './field/Component.js';
 
-var styles = {"container":"picker-button__container_120ep"};
+var styles = {"container":"picker-button__container_1j8h9"};
 require('./index.css');
 
 const PickerButton = forwardRef(({ OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, view, loading, size = 'm', className, leftAddons, ...restProps }, ref) => (React.createElement(BaseSelect, Object.assign({}, restProps, { ref: ref, Option: Option$1, Field: Field, size: size === 'm' ? 'm' : 's', fieldProps: {

package/picker-button/modern/field/Component.d.ts

@@ -34,6 +34,10 @@ type PopoverProps = {
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
      */
     preventOverflow?: boolean;
+    /**
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
      */

package/picker-button/modern/field/Component.js

@@ -4,7 +4,7 @@ import { ArrowDownMIcon } from '@alfalab/icons-classic/ArrowDownMIcon';
 import { ArrowDownSIcon } from '@alfalab/icons-classic/ArrowDownSIcon';
 import { Button } from '../../../button/modern';
 
-var styles = {"iconContainer":"picker-button__iconContainer_sqjox","open":"picker-button__open_sqjox"};
+var styles = {"iconContainer":"picker-button__iconContainer_i8apw","open":"picker-button__open_i8apw"};
 require('./index.css');
 
 const Field = ({ buttonSize = 'm', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, valueRenderer, ...restProps }) => {

package/picker-button/modern/field/index.css

@@ -10,10 +10,10 @@
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_sqjox {
+.picker-button__iconContainer_i8apw {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_sqjox {
+.picker-button__open_i8apw {
     transform: var(--arrow-transform);
 }

package/picker-button/modern/index.css

@@ -1,4 +1,4 @@
 /* hash: qs9eo */
-.picker-button__container_120ep {
+.picker-button__container_1j8h9 {
     min-width: auto;
 }

package/plate/Component.js

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
-var styles = {"component":"plate__component_apw6c","focused":"plate__focused_apw6c","inner":"plate__inner_apw6c","common":"plate__common_apw6c","negative":"plate__negative_apw6c","positive":"plate__positive_apw6c","attention":"plate__attention_apw6c","isHidden":"plate__isHidden_apw6c","leftAddons":"plate__leftAddons_apw6c","title":"plate__title_apw6c","content":"plate__content_apw6c","isFolded":"plate__isFolded_apw6c","contentContainer":"plate__contentContainer_apw6c","withoutTitle":"plate__withoutTitle_apw6c","contentInner":"plate__contentInner_apw6c","closer":"plate__closer_apw6c","folder":"plate__folder_apw6c","buttons":"plate__buttons_apw6c","button":"plate__button_apw6c"};
+var styles = {"component":"plate__component_b53a3","focused":"plate__focused_b53a3","inner":"plate__inner_b53a3","common":"plate__common_b53a3","negative":"plate__negative_b53a3","positive":"plate__positive_b53a3","attention":"plate__attention_b53a3","isHidden":"plate__isHidden_b53a3","leftAddons":"plate__leftAddons_b53a3","title":"plate__title_b53a3","content":"plate__content_b53a3","isFolded":"plate__isFolded_b53a3","contentContainer":"plate__contentContainer_b53a3","withoutTitle":"plate__withoutTitle_b53a3","contentInner":"plate__contentInner_b53a3","closer":"plate__closer_b53a3","folder":"plate__folder_b53a3","buttons":"plate__buttons_b53a3","button":"plate__button_b53a3"};
 require('./index.css');
 
 var Plate = React.forwardRef(function (_a, ref) {

package/plate/esm/Component.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import { useFocus } from '@alfalab/hooks';
 import { Button } from '../../button/esm';
 
-var styles = {"component":"plate__component_apw6c","focused":"plate__focused_apw6c","inner":"plate__inner_apw6c","common":"plate__common_apw6c","negative":"plate__negative_apw6c","positive":"plate__positive_apw6c","attention":"plate__attention_apw6c","isHidden":"plate__isHidden_apw6c","leftAddons":"plate__leftAddons_apw6c","title":"plate__title_apw6c","content":"plate__content_apw6c","isFolded":"plate__isFolded_apw6c","contentContainer":"plate__contentContainer_apw6c","withoutTitle":"plate__withoutTitle_apw6c","contentInner":"plate__contentInner_apw6c","closer":"plate__closer_apw6c","folder":"plate__folder_apw6c","buttons":"plate__buttons_apw6c","button":"plate__button_apw6c"};
+var styles = {"component":"plate__component_b53a3","focused":"plate__focused_b53a3","inner":"plate__inner_b53a3","common":"plate__common_b53a3","negative":"plate__negative_b53a3","positive":"plate__positive_b53a3","attention":"plate__attention_b53a3","isHidden":"plate__isHidden_b53a3","leftAddons":"plate__leftAddons_b53a3","title":"plate__title_b53a3","content":"plate__content_b53a3","isFolded":"plate__isFolded_b53a3","contentContainer":"plate__contentContainer_b53a3","withoutTitle":"plate__withoutTitle_b53a3","contentInner":"plate__contentInner_b53a3","closer":"plate__closer_b53a3","folder":"plate__folder_b53a3","buttons":"plate__buttons_b53a3","button":"plate__button_b53a3"};
 require('./index.css');
 
 var Plate = forwardRef(function (_a, ref) {

package/plate/esm/index.css

@@ -46,7 +46,7 @@
     --plate-closer-icon: url('https://alfabank.st/icons/glyph_cross_m.svg');
     --plate-arrow-icon: url('https://alfabank.st/icons/glyph_chevron-down_m.svg');
 }
-.plate__component_apw6c {
+.plate__component_b53a3 {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -59,51 +59,51 @@
     outline: none;
     cursor: pointer;
 }
-.plate__component_apw6c * {
+.plate__component_b53a3 * {
     box-sizing: border-box;
 }
-.plate__focused_apw6c {
+.plate__focused_b53a3 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.plate__inner_apw6c {
+.plate__inner_b53a3 {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
-.plate__common_apw6c {
+.plate__common_b53a3 {
     background-color: var(--color-light-bg-secondary);
     border-color: var(--color-static-status-grey);
 }
-.plate__negative_apw6c {
+.plate__negative_b53a3 {
     background-color: var(--color-light-bg-negative-muted);
     border-color: var(--color-static-status-red);
 }
-.plate__positive_apw6c {
+.plate__positive_b53a3 {
     background-color: var(--color-light-bg-positive-muted);
     border-color: var(--color-static-status-green);
 }
-.plate__attention_apw6c {
+.plate__attention_b53a3 {
     background-color: var(--color-light-bg-attention-muted);
     border-color: var(--color-static-status-orange);
 }
-.plate__isHidden_apw6c {
+.plate__isHidden_b53a3 {
     display: none;
 }
-.plate__leftAddons_apw6c {
+.plate__leftAddons_b53a3 {
     flex-shrink: 0;
     min-width: 24px;
     margin-right: var(--gap-s);
 }
-.plate__title_apw6c {
+.plate__title_b53a3 {
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
 
     word-break: break-word;
 }
-.plate__content_apw6c {
+.plate__content_b53a3 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -115,23 +115,23 @@
     margin: var(--gap-2xs-neg);
     cursor: default
 }
-.plate__content_apw6c.plate__isFolded_apw6c {
+.plate__content_b53a3.plate__isFolded_b53a3 {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
     }
-.plate__contentContainer_apw6c {
+.plate__contentContainer_b53a3 {
     flex: 1;
     max-width: 586px;
     margin-right: auto
 }
-.plate__contentContainer_apw6c.plate__withoutTitle_apw6c {
+.plate__contentContainer_b53a3.plate__withoutTitle_b53a3 {
         padding-top: var(--gap-3xs);
     }
-.plate__title_apw6c + .plate__content_apw6c > .plate__contentInner_apw6c {
+.plate__title_b53a3 + .plate__content_b53a3 > .plate__contentInner_b53a3 {
     padding-top: var(--gap-xs);
 }
-.plate__closer_apw6c,
-.plate__folder_apw6c {
+.plate__closer_b53a3,
+.plate__folder_b53a3 {
     display: block;
     height: 24px;
     width: 24px;
@@ -140,29 +140,29 @@
     cursor: pointer;
     margin-left: var(--gap-m)
 }
-.plate__closer_apw6c:hover, .plate__folder_apw6c:hover {
+.plate__closer_b53a3:hover, .plate__folder_b53a3:hover {
         opacity: 0.7;
     }
-.plate__closer_apw6c:active, .plate__folder_apw6c:active {
+.plate__closer_b53a3:active, .plate__folder_b53a3:active {
         opacity: 0.5;
     }
-.plate__closer_apw6c {
+.plate__closer_b53a3 {
     background: var(--plate-closer-icon) center no-repeat;
 }
-.plate__folder_apw6c {
+.plate__folder_b53a3 {
     background: var(--plate-arrow-icon) center no-repeat;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }
-.plate__folder_apw6c.plate__isFolded_apw6c {
+.plate__folder_b53a3.plate__isFolded_b53a3 {
         transform: rotate(0deg);
     }
-.plate__buttons_apw6c {
+.plate__buttons_b53a3 {
     margin-top: var(--gap-xl);
 }
-.plate__button_apw6c {
+.plate__button_b53a3 {
     margin-right: var(--gap-s)
 }
-.plate__button_apw6c:last-child {
+.plate__button_b53a3:last-child {
         margin-right: 0;
     }