@alfalab/core-components 35.2.0 → 36.0.0

package/picker-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-febb5e29.js');
+require('./tslib.es6-5d4a402c.js');
 require('react');
 require('../select');
 require('classnames');

package/picker-button/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-febb5e29.js');
+require('./tslib.es6-5d4a402c.js');
 require('react');
 require('../select');
 require('classnames');

package/picker-button/modern/Component.js

@@ -10,7 +10,7 @@ import './utils/index.js';
 import { Field } from './field/Component.js';
 import { Option } from './option/Component.js';
 
-var styles = {"container":"picker-button__container_1ylf1","optionsPopover":"picker-button__optionsPopover_1ylf1","sideGap":"picker-button__sideGap_1ylf1","optionsListContainer":"picker-button__optionsListContainer_1ylf1","option":"picker-button__option_1ylf1"};
+var styles = {"container":"picker-button__container_5wf1s","optionsPopover":"picker-button__optionsPopover_5wf1s","sideGap":"picker-button__sideGap_5wf1s","optionsListContainer":"picker-button__optionsListContainer_5wf1s","option":"picker-button__option_5wf1s"};
 require('./index.css');
 
 const SIDE_POSITIONS = ['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import cn from 'classnames';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -7,7 +7,7 @@ import '@alfalab/icons-glyph/MoreSIcon';
 import { Button } from '../../../button/modern';
 import { getIcon } from '../utils/index.js';
 
-var styles = {"iconContainer":"picker-button__iconContainer_1hetr","open":"picker-button__open_1hetr"};
+var styles = {"iconContainer":"picker-button__iconContainer_1d40t","addonsContainer":"picker-button__addonsContainer_1d40t","open":"picker-button__open_1d40t"};
 require('./index.css');
 
 const Field = ({ buttonSize = 'm', buttonVariant = 'default', view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, setSelectedItems, toggleMenu, valueRenderer, ...restProps }) => {
@@ -18,8 +18,10 @@ const Field = ({ buttonSize = 'm', buttonVariant = 'default', view, label, open,
         ...restInnerProps,
     };
     return (React.createElement("div", { ref: ref },
-        React.createElement(Button, { ...buttonProps, rightAddons: rightAddons ?? (React.createElement("span", { className: cn(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
-                React.createElement(Icon, { "data-test-id": 'picker-button-icon' }))), block: true, view: view, size: buttonSize, className: cn(styles.component, view === 'primary' && styles.primary, className) }, buttonVariant !== 'compact' && label)));
+        React.createElement(Button, { ...buttonProps, rightAddons: React.createElement(Fragment, null,
+                rightAddons && (React.createElement("span", { className: styles.addonsContainer }, rightAddons)),
+                React.createElement("span", { className: cn(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
+                    React.createElement(Icon, { "data-test-id": 'picker-button-icon' }))), block: true, view: view, size: buttonSize, className: cn(styles.component, view === 'primary' && styles.primary, className) }, buttonVariant !== 'compact' && label)));
 };
 
 export { Field };

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

@@ -1,4 +1,4 @@
-/* hash: 1mzdu */
+/* hash: 2w1yh */
 :root {
 
     /* Hard */
@@ -7,13 +7,20 @@
 
     /* Hard up */
 }
+:root {
+    --gap-2xs: 4px;
+}
 :root {
     --arrow-transform: rotate(180deg);
 }
-.picker-button__iconContainer_1hetr {
+.picker-button__iconContainer_1d40t {
     display: flex;
     transition: transform 0.15s ease-in-out;
 }
-.picker-button__open_1hetr {
+.picker-button__addonsContainer_1d40t {
+    display: flex;
+    margin-right: var(--gap-2xs);
+}
+.picker-button__open_1d40t {
     transform: var(--arrow-transform);
 }

package/picker-button/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1roal */
+/* hash: bjeku */
 :root {
 
     /* Hard */
@@ -15,22 +15,22 @@
 :root {
     --border-radius-m: 8px;
 }
-.picker-button__container_1ylf1 {
+.picker-button__container_5wf1s {
     min-width: auto;
 }
-.cc-picker-button.picker-button__optionsPopover_1ylf1 {
+.cc-picker-button.picker-button__optionsPopover_5wf1s {
         padding: var(--gap-2xs) 0
     }
-.cc-picker-button.picker-button__optionsPopover_1ylf1.picker-button__sideGap_1ylf1 {
+.cc-picker-button.picker-button__optionsPopover_5wf1s.picker-button__sideGap_5wf1s {
             padding: 0 var(--gap-xs);
         }
-.cc-picker-button .picker-button__optionsListContainer_1ylf1 {
+.cc-picker-button .picker-button__optionsListContainer_5wf1s {
         border-radius: var(--border-radius-m);
     }
-.cc-picker-button .picker-button__option_1ylf1 {
+.cc-picker-button .picker-button__option_5wf1s {
         padding: 0 var(--gap-m)
     }
-.cc-picker-button .picker-button__option_1ylf1:before {
+.cc-picker-button .picker-button__option_5wf1s:before {
             /* Удаляем разделители у опций выпадающего списка. */
             display: none;
         }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Option as Option$1 } from '../../../select/modern';
 
-var styles = {"container":"picker-button__container_r7z74","icon":"picker-button__icon_r7z74","content":"picker-button__content_r7z74"};
+var styles = {"container":"picker-button__container_xk390","icon":"picker-button__icon_xk390","content":"picker-button__content_xk390"};
 require('./index.css');
 
 const Option = ({ option, children, ...restProps }) => {

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

@@ -1,4 +1,4 @@
-/* hash: ulnbs */
+/* hash: 1dhvd */
 :root {
 
     /* Hard */
@@ -10,15 +10,15 @@
 :root {
     --gap-s: 12px;
 }
-.picker-button__container_r7z74 {
+.picker-button__container_xk390 {
     display: flex;
     align-items: center;
 }
-.picker-button__icon_r7z74 {
+.picker-button__icon_xk390 {
     display: flex;
     margin-right: var(--gap-s);
 }
-.picker-button__content_r7z74 {
+.picker-button__content_xk390 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;

package/picker-button/option/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-febb5e29.js');
+var tslib_es6 = require('../tslib.es6-5d4a402c.js');
 var React = require('react');
 var coreComponentsSelect = require('../../select');
 
@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"container":"picker-button__container_r7z74","icon":"picker-button__icon_r7z74","content":"picker-button__content_r7z74"};
+var styles = {"container":"picker-button__container_xk390","icon":"picker-button__icon_xk390","content":"picker-button__content_xk390"};
 require('./index.css');
 
 var Option = function (_a) {

package/picker-button/option/index.css

@@ -1,4 +1,4 @@
-/* hash: ulnbs */
+/* hash: 1dhvd */
 :root {
 
     /* Hard */
@@ -10,15 +10,15 @@
 :root {
     --gap-s: 12px;
 }
-.picker-button__container_r7z74 {
+.picker-button__container_xk390 {
     display: flex;
     align-items: center;
 }
-.picker-button__icon_r7z74 {
+.picker-button__icon_xk390 {
     display: flex;
     margin-right: var(--gap-s);
 }
-.picker-button__content_r7z74 {
+.picker-button__content_xk390 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;

package/picker-button/option/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../tslib.es6-febb5e29.js');
+require('../tslib.es6-5d4a402c.js');
 require('react');
 require('../../select');
 var option_Component = require('./Component.js');

package/picker-button/typings-56379e19.d.ts

@@ -124,7 +124,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" |
      */
     dataTestId?: string;
 };
-declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "type" | "value" | "enterKeyHint"> & {
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     block?: boolean | undefined;

package/plate/Component.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var coreComponentsButton = require('../button');
+var coreComponentsIconButton = require('../icon-button');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
+var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
 var hooks = require('@alfalab/hooks');
 var components_buttonList_component = require('./components/button-list/component.js');
 
@@ -13,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"plate__component_kdyoa","foldable":"plate__foldable_kdyoa","focused":"plate__focused_kdyoa","inner":"plate__inner_kdyoa","rounded":"plate__rounded_kdyoa","noBorder":"plate__noBorder_kdyoa","shadow":"plate__shadow_kdyoa","common":"plate__common_kdyoa","negative":"plate__negative_kdyoa","positive":"plate__positive_kdyoa","attention":"plate__attention_kdyoa","custom":"plate__custom_kdyoa","rect":"plate__rect_kdyoa","isHidden":"plate__isHidden_kdyoa","leftAddons":"plate__leftAddons_kdyoa","rightAddons":"plate__rightAddons_kdyoa","subAddons":"plate__subAddons_kdyoa","bold":"plate__bold_kdyoa","light":"plate__light_kdyoa","content":"plate__content_kdyoa","isFolded":"plate__isFolded_kdyoa","contentContainer":"plate__contentContainer_kdyoa","withoutTitle":"plate__withoutTitle_kdyoa","limitWidth":"plate__limitWidth_kdyoa","description":"plate__description_kdyoa","footer":"plate__footer_kdyoa","closer":"plate__closer_kdyoa","folder":"plate__folder_kdyoa","button":"plate__button_kdyoa"};
+var styles = {"component":"plate__component_663cw","foldable":"plate__foldable_663cw","focused":"plate__focused_663cw","inner":"plate__inner_663cw","rounded":"plate__rounded_663cw","noBorder":"plate__noBorder_663cw","shadow":"plate__shadow_663cw","common":"plate__common_663cw","negative":"plate__negative_663cw","positive":"plate__positive_663cw","attention":"plate__attention_663cw","custom":"plate__custom_663cw","rect":"plate__rect_663cw","isHidden":"plate__isHidden_663cw","leftAddons":"plate__leftAddons_663cw","rightAddons":"plate__rightAddons_663cw","subAddons":"plate__subAddons_663cw","bold":"plate__bold_663cw","light":"plate__light_663cw","content":"plate__content_663cw","isFolded":"plate__isFolded_663cw","contentContainer":"plate__contentContainer_663cw","withoutTitle":"plate__withoutTitle_663cw","limitWidth":"plate__limitWidth_663cw","description":"plate__description_663cw","footer":"plate__footer_663cw","closer":"plate__closer_663cw","folder":"plate__folder_663cw","button":"plate__button_663cw"};
 require('./index.css');
 
 /* eslint-disable complexity */
@@ -94,9 +96,10 @@ var Plate = React.forwardRef(function (_a, ref) {
                 foldable && (React__default['default'].createElement("div", { className: styles.rightAddons },
                     React__default['default'].createElement("div", { className: cn__default['default'](styles.folder, (_f = {},
                             _f[styles.isFolded] = folded,
-                            _f)) }))),
+                            _f)) },
+                        React__default['default'].createElement(ChevronDownMIcon.ChevronDownMIcon, null)))),
                 hasCloser && !foldable && (React__default['default'].createElement("div", { className: styles.rightAddons },
-                    React__default['default'].createElement(coreComponentsButton.Button, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))))));
+                    React__default['default'].createElement(coreComponentsIconButton.IconButton, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon.CrossMIcon, size: 'xxs', onClick: handleClose })))))));
 });
 /* eslint-enable complexity */
 /**

package/plate/cssm/Component.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var coreComponentsButton = require('../../button/cssm');
+var coreComponentsIconButton = require('../../icon-button/cssm');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
+var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
 var hooks = require('@alfalab/hooks');
 var components_buttonList_component = require('./components/button-list/component.js');
 var styles = require('./index.module.css');
@@ -93,9 +95,10 @@ var Plate = React.forwardRef(function (_a, ref) {
                 foldable && (React__default['default'].createElement("div", { className: styles__default['default'].rightAddons },
                     React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].folder, (_f = {},
                             _f[styles__default['default'].isFolded] = folded,
-                            _f)) }))),
+                            _f)) },
+                        React__default['default'].createElement(ChevronDownMIcon.ChevronDownMIcon, null)))),
                 hasCloser && !foldable && (React__default['default'].createElement("div", { className: styles__default['default'].rightAddons },
-                    React__default['default'].createElement(coreComponentsButton.Button, { className: styles__default['default'].closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))))));
+                    React__default['default'].createElement(coreComponentsIconButton.IconButton, { className: styles__default['default'].closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon.CrossMIcon, size: 'xxs', onClick: handleClose })))))));
 });
 /* eslint-enable complexity */
 /**

package/plate/cssm/index.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('react-merge-refs');
 require('classnames');
-require('../../button/cssm');
+require('../../icon-button/cssm');
+require('@alfalab/icons-glyph/CrossMIcon');
+require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('@alfalab/hooks');
 require('./components/button-list/component.js');
 require('./index.module.css');

package/plate/cssm/index.module.css

@@ -8,8 +8,8 @@
     --color-light-bg-attention-muted: #fff3e0;
     --color-light-bg-negative-muted: #feebea;
     --color-light-bg-positive-muted: #ebf9f1;
-    --color-light-bg-secondary: #f3f4f5;
     --color-light-border-link: #007aff;
+    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05);
     --color-light-text-primary: #0b1f35;
 }
 :root {
@@ -49,10 +49,6 @@
     --plate-background: transparent;
     --plate-border-color: var(--color-static-status-grey);
     --plate-box-shadow: var(--shadow-s);
-
-    /* icons */
-    --plate-closer-icon: url('https://alfabank.servicecdn.ru/icons/glyph_cross_m.svg');
-    --plate-arrow-icon: url('https://alfabank.servicecdn.ru/icons/glyph_chevron-down_m.svg');
 }
 .component {
     position: relative;
@@ -98,7 +94,7 @@
     box-shadow: var(--plate-box-shadow);
 }
 .common {
-    background-color: var(--color-light-bg-secondary);
+    background-color: var(--color-light-specialbg-secondary-transparent);
     box-shadow: var(--plate-border) var(--color-static-status-grey)
 }
 .common:before {
@@ -217,11 +213,7 @@
 .closer:active, .folder:active {
         opacity: 0.5;
     }
-.closer {
-    background: var(--plate-closer-icon) center no-repeat;
-}
 .folder {
-    background: var(--plate-arrow-icon) center no-repeat;
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }

package/plate/esm/Component.js

@@ -1,11 +1,13 @@
 import React, { forwardRef, useRef, useState, useCallback } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { Button } from '../../button/esm';
+import { IconButton } from '../../icon-button/esm';
+import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
+import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 import { useFocus } from '@alfalab/hooks';
 import { ButtonList } from './components/button-list/component.js';
 
-var styles = {"component":"plate__component_kdyoa","foldable":"plate__foldable_kdyoa","focused":"plate__focused_kdyoa","inner":"plate__inner_kdyoa","rounded":"plate__rounded_kdyoa","noBorder":"plate__noBorder_kdyoa","shadow":"plate__shadow_kdyoa","common":"plate__common_kdyoa","negative":"plate__negative_kdyoa","positive":"plate__positive_kdyoa","attention":"plate__attention_kdyoa","custom":"plate__custom_kdyoa","rect":"plate__rect_kdyoa","isHidden":"plate__isHidden_kdyoa","leftAddons":"plate__leftAddons_kdyoa","rightAddons":"plate__rightAddons_kdyoa","subAddons":"plate__subAddons_kdyoa","bold":"plate__bold_kdyoa","light":"plate__light_kdyoa","content":"plate__content_kdyoa","isFolded":"plate__isFolded_kdyoa","contentContainer":"plate__contentContainer_kdyoa","withoutTitle":"plate__withoutTitle_kdyoa","limitWidth":"plate__limitWidth_kdyoa","description":"plate__description_kdyoa","footer":"plate__footer_kdyoa","closer":"plate__closer_kdyoa","folder":"plate__folder_kdyoa","button":"plate__button_kdyoa"};
+var styles = {"component":"plate__component_663cw","foldable":"plate__foldable_663cw","focused":"plate__focused_663cw","inner":"plate__inner_663cw","rounded":"plate__rounded_663cw","noBorder":"plate__noBorder_663cw","shadow":"plate__shadow_663cw","common":"plate__common_663cw","negative":"plate__negative_663cw","positive":"plate__positive_663cw","attention":"plate__attention_663cw","custom":"plate__custom_663cw","rect":"plate__rect_663cw","isHidden":"plate__isHidden_663cw","leftAddons":"plate__leftAddons_663cw","rightAddons":"plate__rightAddons_663cw","subAddons":"plate__subAddons_663cw","bold":"plate__bold_663cw","light":"plate__light_663cw","content":"plate__content_663cw","isFolded":"plate__isFolded_663cw","contentContainer":"plate__contentContainer_663cw","withoutTitle":"plate__withoutTitle_663cw","limitWidth":"plate__limitWidth_663cw","description":"plate__description_663cw","footer":"plate__footer_663cw","closer":"plate__closer_663cw","folder":"plate__folder_663cw","button":"plate__button_663cw"};
 require('./index.css');
 
 /* eslint-disable complexity */
@@ -86,9 +88,10 @@ var Plate = forwardRef(function (_a, ref) {
                 foldable && (React.createElement("div", { className: styles.rightAddons },
                     React.createElement("div", { className: cn(styles.folder, (_f = {},
                             _f[styles.isFolded] = folded,
-                            _f)) }))),
+                            _f)) },
+                        React.createElement(ChevronDownMIcon, null)))),
                 hasCloser && !foldable && (React.createElement("div", { className: styles.rightAddons },
-                    React.createElement(Button, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', view: 'ghost', onClick: handleClose })))))));
+                    React.createElement(IconButton, { className: styles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon, size: 'xxs', onClick: handleClose })))))));
 });
 /* eslint-enable complexity */
 /**

package/plate/esm/index.css

@@ -9,8 +9,8 @@
     --color-light-bg-attention-muted: #fff3e0;
     --color-light-bg-negative-muted: #feebea;
     --color-light-bg-positive-muted: #ebf9f1;
-    --color-light-bg-secondary: #f3f4f5;
     --color-light-border-link: #007aff;
+    --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05);
     --color-light-text-primary: #0b1f35;
 }
 :root {
@@ -50,12 +50,8 @@
     --plate-background: transparent;
     --plate-border-color: var(--color-static-status-grey);
     --plate-box-shadow: var(--shadow-s);
-
-    /* icons */
-    --plate-closer-icon: url('https://alfabank.servicecdn.ru/icons/glyph_cross_m.svg');
-    --plate-arrow-icon: url('https://alfabank.servicecdn.ru/icons/glyph_chevron-down_m.svg');
 }
-.plate__component_kdyoa {
+.plate__component_663cw {
     position: relative;
     display: inline-flex;
     box-sizing: border-box;
@@ -65,7 +61,7 @@
     padding: var(--gap-s);
     outline: none
 }
-.plate__component_kdyoa:before {
+.plate__component_663cw:before {
         content: '';
         width: var(--plate-border-left);
         position: absolute;
@@ -73,103 +69,103 @@
         top: 0;
         left: 0;
     }
-.plate__foldable_kdyoa {
+.plate__foldable_663cw {
     cursor: pointer;
 }
-.plate__component_kdyoa * {
+.plate__component_663cw * {
     box-sizing: border-box;
 }
-.plate__focused_kdyoa {
+.plate__focused_663cw {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.plate__inner_kdyoa {
+.plate__inner_663cw {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
-.plate__rounded_kdyoa:before, .plate__noBorder_kdyoa:before {
+.plate__rounded_663cw:before, .plate__noBorder_663cw:before {
         display: none;
     }
-.plate__rounded_kdyoa {
+.plate__rounded_663cw {
     border-radius: var(--plate-border-radius);
 }
-.plate__shadow_kdyoa {
+.plate__shadow_663cw {
     box-shadow: var(--plate-box-shadow);
 }
-.plate__common_kdyoa {
-    background-color: var(--color-light-bg-secondary);
+.plate__common_663cw {
+    background-color: var(--color-light-specialbg-secondary-transparent);
     box-shadow: var(--plate-border) var(--color-static-status-grey)
 }
-.plate__common_kdyoa:before {
+.plate__common_663cw:before {
         background-color: var(--color-static-status-grey);
     }
-.plate__negative_kdyoa {
+.plate__negative_663cw {
     background-color: var(--color-light-bg-negative-muted);
     box-shadow: var(--plate-border) var(--color-static-status-red)
 }
-.plate__negative_kdyoa:before {
+.plate__negative_663cw:before {
         background-color: var(--color-static-status-red);
     }
-.plate__positive_kdyoa {
+.plate__positive_663cw {
     background-color: var(--color-light-bg-positive-muted);
     box-shadow: var(--plate-border) var(--color-static-status-green)
 }
-.plate__positive_kdyoa:before {
+.plate__positive_663cw:before {
         background-color: var(--color-static-status-green);
     }
-.plate__attention_kdyoa {
+.plate__attention_663cw {
     background-color: var(--color-light-bg-attention-muted);
     box-shadow: var(--plate-border) var(--color-static-status-orange)
 }
-.plate__attention_kdyoa:before {
+.plate__attention_663cw:before {
         background-color: var(--color-static-status-orange);
     }
-.plate__custom_kdyoa {
+.plate__custom_663cw {
     background: var(--plate-background);
     box-shadow: var(--plate-border) var(--plate-border-color)
 }
-.plate__custom_kdyoa:before {
+.plate__custom_663cw:before {
         background-color: var(--plate-border-color);
     }
-.plate__rect_kdyoa,
-.plate__noBorder_kdyoa {
+.plate__rect_663cw,
+.plate__noBorder_663cw {
     box-shadow: none;
 }
-.plate__isHidden_kdyoa {
+.plate__isHidden_663cw {
     display: none;
 }
-.plate__leftAddons_kdyoa,
-.plate__rightAddons_kdyoa {
+.plate__leftAddons_663cw,
+.plate__rightAddons_663cw {
     padding: var(--gap-2xs);
 }
-.plate__leftAddons_kdyoa {
+.plate__leftAddons_663cw {
     flex-shrink: 0;
     min-width: 24px;
     margin-right: var(--gap-2xs);
 }
-.plate__subAddons_kdyoa {
+.plate__subAddons_663cw {
     cursor: default;
     align-self: flex-start;
 }
-.plate__bold_kdyoa,
-.plate__light_kdyoa {
+.plate__bold_663cw,
+.plate__light_663cw {
     word-break: break-word;
 }
-.plate__bold_kdyoa {
+.plate__bold_663cw {
     font-size: 18px;
     line-height: 22px;
     font-weight: 700;
     padding: 5px var(--gap-s) 5px var(--gap-2xs);
 }
-.plate__light_kdyoa {
+.plate__light_663cw {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     padding: 6px var(--gap-s) 6px var(--gap-2xs);
 }
-.plate__content_kdyoa {
+.plate__content_663cw {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -179,31 +175,31 @@
     transition: max-height 2s ease-in-out;
     cursor: default
 }
-.plate__content_kdyoa.plate__isFolded_kdyoa {
+.plate__content_663cw.plate__isFolded_663cw {
         max-height: 0;
         transition: max-height 1s cubic-bezier(0, 1, 0, 1);
     }
-.plate__contentContainer_kdyoa {
+.plate__contentContainer_663cw {
     flex: 1;
     margin-right: auto
 }
-.plate__contentContainer_kdyoa.plate__withoutTitle_kdyoa {
+.plate__contentContainer_663cw.plate__withoutTitle_663cw {
         padding-top: var(--gap-3xs);
     }
-.plate__limitWidth_kdyoa {
+.plate__limitWidth_663cw {
     max-width: var(--plate-width-limit);
 }
-.plate__description_kdyoa {
+.plate__description_663cw {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
     padding: var(--gap-2xs) var(--gap-s) var(--gap-2xs) var(--gap-2xs);
 }
-.plate__footer_kdyoa {
+.plate__footer_663cw {
     padding: var(--gap-l) 0 var(--gap-2xs) var(--gap-2xs);
 }
-.plate__closer_kdyoa,
-.plate__folder_kdyoa {
+.plate__closer_663cw,
+.plate__folder_663cw {
     display: block;
     height: 24px;
     width: 24px;
@@ -212,23 +208,19 @@
     cursor: pointer;
     margin-left: var(--gap-s)
 }
-.plate__closer_kdyoa:hover, .plate__folder_kdyoa:hover {
+.plate__closer_663cw:hover, .plate__folder_663cw:hover {
         opacity: 0.7;
     }
-.plate__closer_kdyoa:active, .plate__folder_kdyoa:active {
+.plate__closer_663cw:active, .plate__folder_663cw:active {
         opacity: 0.5;
     }
-.plate__closer_kdyoa {
-    background: var(--plate-closer-icon) center no-repeat;
-}
-.plate__folder_kdyoa {
-    background: var(--plate-arrow-icon) center no-repeat;
+.plate__folder_663cw {
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
     transform: var(--arrow-transform)
 }
-.plate__folder_kdyoa.plate__isFolded_kdyoa {
+.plate__folder_663cw.plate__isFolded_663cw {
         transform: rotate(0deg);
     }
-.plate__button_kdyoa:not(:last-child) {
+.plate__button_663cw:not(:last-child) {
         margin-right: var(--gap-xs);
     }

package/plate/esm/index.js

@@ -1,7 +1,9 @@
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
-import '../../button/esm';
+import '../../icon-button/esm';
+import '@alfalab/icons-glyph/CrossMIcon';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/hooks';
 import './components/button-list/component.js';
 export { Plate } from './Component.js';