@alfalab/core-components 43.2.0 → 44.1.0

package/select-with-tags/modern/components/tag-list/index.css

@@ -1,4 +1,4 @@
-/* hash: 1sxql */
+/* hash: 1z09l */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
@@ -16,57 +16,59 @@
     /* Hard up */
 } :root {
 } :root {
+    --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-s: 12px;
     --gap-m: 16px;
     --gap-l: 20px;
     --gap-xl: 24px;
-    --gap-2xs-neg: -4px;
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
-} .select-with-tags__component_1vyiq.select-with-tags__xl_1vyiq .select-with-tags__contentWrapper_1vyiq {
-    padding: var(--gap-l) var(--gap-m);
-} .select-with-tags__component_1vyiq.select-with-tags__l_1vyiq .select-with-tags__contentWrapper_1vyiq {
-    padding: var(--gap-m) var(--gap-m);
-} .select-with-tags__component_1vyiq.select-with-tags__m_1vyiq .select-with-tags__contentWrapper_1vyiq {
-    padding: var(--gap-m) var(--gap-s);
-} .select-with-tags__component_1vyiq.select-with-tags__s_1vyiq .select-with-tags__contentWrapper_1vyiq {
-    padding: var(--gap-s) var(--gap-s);
-} .select-with-tags__component_1vyiq.select-with-tags__xl_1vyiq .select-with-tags__contentWrapperVertical_1vyiq {
-    padding-top: var(--gap-l);
-    padding-bottom: var(--gap-l);
-} .select-with-tags__component_1vyiq.select-with-tags__l_1vyiq .select-with-tags__contentWrapperVertical_1vyiq {
-    padding-top: var(--gap-m);
-    padding-bottom: var(--gap-m);
-} .select-with-tags__component_1vyiq.select-with-tags__m_1vyiq .select-with-tags__contentWrapperVertical_1vyiq {
-    padding-top: var(--gap-s);
-    padding-bottom: var(--gap-s);
-} .select-with-tags__component_1vyiq.select-with-tags__s_1vyiq .select-with-tags__contentWrapperVertical_1vyiq {
-    padding-top: var(--gap-xs);
-    padding-bottom: var(--gap-xs);
-} .select-with-tags__component_1vyiq .select-with-tags__contentWrapper_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__xl_dbh43 .select-with-tags__contentWrapper_dbh43 {
+        padding: 18px 14px;
+    } .select-with-tags__component_dbh43.select-with-tags__xl_dbh43 .select-with-tags__placeholder_dbh43 {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__xl_dbh43 .select-with-tags__input_dbh43 {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__l_dbh43 .select-with-tags__contentWrapper_dbh43 {
+        padding: 14px 10px;
+    } .select-with-tags__component_dbh43.select-with-tags__l_dbh43 .select-with-tags__placeholder_dbh43 {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__l_dbh43 .select-with-tags__input_dbh43 {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__m_dbh43 .select-with-tags__contentWrapper_dbh43 {
+        padding: 10px;
+    } .select-with-tags__component_dbh43.select-with-tags__m_dbh43 .select-with-tags__placeholder_dbh43 {
+        padding-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__m_dbh43 .select-with-tags__input_dbh43 {
+        margin-left: var(--gap-3xs);
+    } .select-with-tags__component_dbh43.select-with-tags__s_dbh43 .select-with-tags__contentWrapper_dbh43 {
+        padding: 6px;
+    } .select-with-tags__component_dbh43.select-with-tags__s_dbh43 .select-with-tags__placeholder_dbh43 {
+        padding-left: 6px;
+    } .select-with-tags__component_dbh43.select-with-tags__s_dbh43 .select-with-tags__input_dbh43 {
+        margin-left: 6px;
+    } .select-with-tags__component_dbh43 .select-with-tags__contentWrapper_dbh43 {
     display: flex;
     flex-wrap: wrap;
-    width: 100%;
-    margin: var(--gap-2xs-neg)
-} .select-with-tags__component_1vyiq .select-with-tags__contentWrapper_1vyiq:not(.select-with-tags__contentWrapperVertical_1vyiq):not(.select-with-tags__hasInnerLabel_1vyiq) {
-        padding-top: 0;
-        padding-bottom: 0;
-    } .select-with-tags__component_1vyiq .select-with-tags__contentWrapper_1vyiq.select-with-tags__hasInnerLabel_1vyiq {
+    width: 100%
+} .select-with-tags__component_dbh43 .select-with-tags__contentWrapper_dbh43.select-with-tags__hasInnerLabel_dbh43 {
         margin-top: var(--gap-xs);
         padding-bottom: var(--gap-xs);
-    } .select-with-tags__component_1vyiq .select-with-tags__contentWrapper_1vyiq.select-with-tags__hasTags_1vyiq.select-with-tags__hasInnerLabel_1vyiq {
+    } .select-with-tags__component_dbh43 .select-with-tags__contentWrapper_dbh43.select-with-tags__hasTags_dbh43.select-with-tags__hasInnerLabel_dbh43 {
         margin-top: var(--gap-m);
         padding-bottom: var(--gap-s);
-    } .select-with-tags__component_1vyiq:hover .select-with-tags__addons_1vyiq {
+    } .select-with-tags__component_dbh43:hover .select-with-tags__addons_dbh43 {
     opacity: 0.7;
-} .select-with-tags__field_1vyiq {
+} .select-with-tags__field_dbh43 {
     cursor: pointer;
-} .select-with-tags__input_1vyiq {
+} .select-with-tags__disabled_dbh43 {
+    cursor: not-allowed;
+} .select-with-tags__input_dbh43 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -80,46 +82,50 @@
     border: none;
     font-family: var(--font-family);
     color: var(--color-light-text-primary)
-} .select-with-tags__input_1vyiq:disabled {
-        color: var(--color-light-text-secondary);
-    } .select-with-tags__input_1vyiq::placeholder {
+} .select-with-tags__input_dbh43:disabled,
+    .select-with-tags__input_dbh43:disabled::placeholder {
+        color: var(--color-light-text-tertiary);
+    } .select-with-tags__input_dbh43::placeholder {
         color: var(--color-light-text-secondary);
-    } .select-with-tags__input_1vyiq:focus::placeholder {
+    } .select-with-tags__input_dbh43:focus::placeholder {
         color: var(--color-light-text-tertiary);
-    } .select-with-tags__block_1vyiq {
+    } .select-with-tags__hidden_dbh43 {
+    max-height: 0;
+    margin: 0;
+} .select-with-tags__block_dbh43 {
     min-width: 100%;
-} .select-with-tags__focusVisible_1vyiq {
+} .select-with-tags__focusVisible_dbh43 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .select-with-tags__placeholder_1vyiq {
+} .select-with-tags__placeholder_dbh43 {
     display: flex;
     align-items: center;
     min-height: 28px;
     padding-left: var(--gap-2xs);
-    color: var(--color-light-text-tertiary);
+    color: var(--color-light-text-secondary);
     pointer-events: none;
-} .select-with-tags__addons_1vyiq {
+} .select-with-tags__addons_dbh43 {
     align-self: flex-start;
     padding-top: var(--gap-s);
-} .select-with-tags__addons-size-m_1vyiq {
+} .select-with-tags__addons-size-m_dbh43 {
     padding-top: var(--gap-m);
-} .select-with-tags__addons-size-l_1vyiq {
+} .select-with-tags__addons-size-l_dbh43 {
     padding-top: var(--gap-l);
-} .select-with-tags__addons-size-xl_1vyiq {
+} .select-with-tags__addons-size-xl_dbh43 {
     padding-top: var(--gap-xl);
-} .select-with-tags__component_1vyiq.select-with-tags__s_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__s_dbh43 .select-with-tags__label_dbh43 {
     top: 5px;
     left: 12px;
-} .select-with-tags__component_1vyiq.select-with-tags__m_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__m_dbh43 .select-with-tags__label_dbh43 {
     top: 8px;
     left: 12px;
-} .select-with-tags__component_1vyiq.select-with-tags__l_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__l_dbh43 .select-with-tags__label_dbh43 {
     top: 10px;
     left: 16px;
-} .select-with-tags__component_1vyiq.select-with-tags__xl_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43.select-with-tags__xl_dbh43 .select-with-tags__label_dbh43 {
     top: 14px;
     left: 16px;
-} .select-with-tags__component_1vyiq .select-with-tags__label_1vyiq {
+} .select-with-tags__component_dbh43 .select-with-tags__label_dbh43 {
     top: 14px;
     align-items: flex-start;
     height: auto;

package/select-with-tags/modern/components/tag-list/index.js

@@ -1,9 +1,9 @@
 export { TagList } from './component.js';
 import 'react';
+import 'react-merge-refs';
 import 'classnames';
-import '../../../../form-control/modern';
 import '@alfalab/hooks';
 import '../tag/component.js';
 import '../../../../tag/modern/desktop';
-import '@alfalab/icons-glyph/CrossCompactMIcon';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '../../utils/calculate-collapse-size.js';

package/select-with-tags/modern/desktop/Component.desktop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SelectWithTagsDesktopProps } from "../types";
+declare const SelectWithTagsDesktop: React.ForwardRefExoticComponent<SelectWithTagsDesktopProps & React.RefAttributes<HTMLInputElement>>;
+export { SelectWithTagsDesktop };

package/select-with-tags/modern/desktop/Component.desktop.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormControlDesktop } from '../../../form-control/modern/desktop';
+import { Popover } from '../../../popover/modern';
+import { BaseSelectWithTags } from '../components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../../select/modern/shared';
+import '../components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../components/tag/component.js';
+import '../../../tag/modern/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../utils/match.js';
+import '../utils/calculate-collapse-size.js';
+
+const SelectWithTagsDesktop = React.forwardRef((props, ref) => (React.createElement(BaseSelectWithTags, { ...props, FormControlComponent: FormControlDesktop, Popover: Popover, ref: ref, view: 'desktop' })));
+
+export { SelectWithTagsDesktop };

package/select-with-tags/modern/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectWithTagsDesktop } from "./Component.desktop";
+export { SelectWithTagsDesktopProps } from "../types";

package/select-with-tags/modern/desktop/index.js

@@ -0,0 +1,15 @@
+export { SelectWithTagsDesktop } from './Component.desktop.js';
+import 'react';
+import '../../../form-control/modern/desktop';
+import '../../../popover/modern';
+import '../components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../../select/modern/shared';
+import '../components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../components/tag/component.js';
+import '../../../tag/modern/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../utils/match.js';
+import '../utils/calculate-collapse-size.js';

package/select-with-tags/modern/index.d.ts

@@ -1 +1,2 @@
-export * from "./component";
+export { SelectWithTags } from "./Component.responsive";
+export type { SelectWithTagsProps } from "./types";

package/select-with-tags/modern/index.js

@@ -1,13 +1,18 @@
-export { SelectWithTags } from './component.js';
+export { SelectWithTags } from './Component.responsive.js';
 import 'react';
+import '../../bottom-sheet/modern';
+import '../../form-control/modern/desktop';
+import '../../form-control/modern/mobile';
+import '../../mq/modern';
 import '../../popover/modern';
+import './components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
 import '../../select/modern/shared';
 import './components/tag-list/component.js';
 import 'classnames';
-import '../../form-control/modern';
 import '@alfalab/hooks';
 import './components/tag/component.js';
 import '../../tag/modern/desktop';
-import '@alfalab/icons-glyph/CrossCompactMIcon';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
 import './utils/match.js';
 import './utils/calculate-collapse-size.js';

package/select-with-tags/modern/mobile/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SelectWithTagsMobileProps } from "../types";
+declare const SelectWithTagsMobile: React.ForwardRefExoticComponent<SelectWithTagsMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { SelectWithTagsMobile };

package/select-with-tags/modern/mobile/Component.mobile.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BottomSheet } from '../../../bottom-sheet/modern';
+import { FormControlMobile } from '../../../form-control/modern/mobile';
+import { BaseSelectWithTags } from '../components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../../select/modern/shared';
+import '../components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../components/tag/component.js';
+import '../../../tag/modern/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../utils/match.js';
+import '../utils/calculate-collapse-size.js';
+
+const SelectWithTagsMobile = React.forwardRef((props, ref) => (React.createElement(BaseSelectWithTags, { ...props, ref: ref, FormControlComponent: FormControlMobile, view: 'mobile', BottomSheet: BottomSheet })));
+
+export { SelectWithTagsMobile };

package/select-with-tags/modern/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectWithTagsMobile } from "./Component.mobile";
+export { SelectWithTagsMobileProps } from "../types";

package/select-with-tags/modern/mobile/index.js

@@ -0,0 +1,15 @@
+export { SelectWithTagsMobile } from './Component.mobile.js';
+import 'react';
+import '../../../bottom-sheet/modern';
+import '../../../form-control/modern/mobile';
+import '../components/base-select-with-tags/Component.js';
+import 'react-merge-refs';
+import '../../../select/modern/shared';
+import '../components/tag-list/component.js';
+import 'classnames';
+import '@alfalab/hooks';
+import '../components/tag/component.js';
+import '../../../tag/modern/desktop';
+import '@alfalab/icons-glyph/CrossCircleMIcon';
+import '../utils/match.js';
+import '../utils/calculate-collapse-size.js';

package/select-with-tags/modern/types.d.ts

@@ -61,5 +61,11 @@ type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'mul
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
-export { OptionMatcher, TagProps, TagComponent, SelectWithTagsProps };
+type SelectWithTagsDesktopProps = Omit<SelectWithTagsProps, 'breakpoint' | 'defaultMatchMediaValue'>;
+type SelectWithTagsMobileProps = Omit<SelectWithTagsProps, 'breakpoint' | 'defaultMatchMediaValue'>;
+export { OptionMatcher, TagProps, TagComponent, SelectWithTagsProps, SelectWithTagsDesktopProps, SelectWithTagsMobileProps };

package/select-with-tags/types.d.ts

@@ -61,5 +61,11 @@ type SelectWithTagsProps = Omit<BaseSelectProps, 'Field' | 'nativeSelect' | 'mul
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
 };
-export { OptionMatcher, TagProps, TagComponent, SelectWithTagsProps };
+type SelectWithTagsDesktopProps = Omit<SelectWithTagsProps, 'breakpoint' | 'defaultMatchMediaValue'>;
+type SelectWithTagsMobileProps = Omit<SelectWithTagsProps, 'breakpoint' | 'defaultMatchMediaValue'>;
+export { OptionMatcher, TagProps, TagComponent, SelectWithTagsProps, SelectWithTagsDesktopProps, SelectWithTagsMobileProps };

package/side-panel/Component.responsive.d.ts

@@ -45,6 +45,7 @@ declare const SidePanelResponsive: React.ForwardRefExoticComponent<BaseModalProp
     defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Controls: React.FC<import("./components/controls/index").ControlsProps>;
     Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
     Footer: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
 };

package/side-panel/Component.responsive.js

@@ -4,11 +4,13 @@ var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
 var coreComponentsShared = require('../shared');
+var components_controls_Component = require('./components/controls/Component.js');
 var components_header_Component = require('./components/header/Component.js');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 var ResponsiveContext = require('./ResponsiveContext.js');
 require('classnames');
+require('./layout.module-383ae214.js');
 require('../navigation-bar');
 require('./Context.js');
 require('../base-modal');
@@ -47,6 +49,7 @@ var SidePanelResponsiveComponent = React.forwardRef(function (_a, ref) {
 });
 var SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
     Header: components_header_Component.Header,
+    Controls: components_controls_Component.Controls,
     Content: createResponsive(desktop_Component_desktop.SidePanelDesktop.Content, mobile_Component_mobile.SidePanelMobile.Content),
     Footer: createResponsive(desktop_Component_desktop.SidePanelDesktop.Footer, mobile_Component_mobile.SidePanelMobile.Footer),
 });

package/side-panel/components/content/Component.desktop.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"s":"side-panel__s_cqees"};
+var styles = {"s":"side-panel__s_1p49k"};
 require('./desktop.css');
 
 var ContentDesktop = function (_a) {

package/side-panel/components/content/Component.js

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"content":"side-panel__content_12bco","withHeader":"side-panel__withHeader_12bco","flex":"side-panel__flex_12bco"};
+var styles = {"content":"side-panel__content_1i3qk","withHeader":"side-panel__withHeader_1i3qk","flex":"side-panel__flex_1i3qk"};
 require('./index.css');
 
 var Content = function (_a) {

package/side-panel/components/content/Component.mobile.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"content":"side-panel__content_15i3m"};
+var styles = {"content":"side-panel__content_9wjux"};
 require('./mobile.css');
 
 var ContentMobile = function (_a) {

package/side-panel/components/content/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1cfr7 */
+/* hash: 1dure */
 :root {
 } /* 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 */
 } :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 */
@@ -30,8 +30,8 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__s_cqees {
+} .side-panel__s_1p49k {
     padding: var(--side-panel-s-content-paddings)
-} .side-panel__s_cqees:last-child {
+} .side-panel__s_1p49k:last-child {
         padding-bottom: var(--gap-2xl);
     }

package/side-panel/components/content/index.css

@@ -1,4 +1,4 @@
-/* hash: 1y9mj */
+/* hash: nio5e */
 :root {
 } /* 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 */
 } :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 */
@@ -27,13 +27,13 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__content_12bco {
+} .side-panel__content_1i3qk {
     position: relative;
     box-sizing: border-box;
     width: 100%;
     z-index: 0
-} .side-panel__content_12bco.side-panel__withHeader_12bco {
+} .side-panel__content_1i3qk.side-panel__withHeader_1i3qk {
         padding-top: 0;
-    } .side-panel__flex_12bco {
+    } .side-panel__flex_1i3qk {
     flex: 1 1 auto;
 }

package/side-panel/components/content/mobile.css

@@ -1,4 +1,4 @@
-/* hash: shnyn */
+/* hash: 1bbeb */
 :root {
 } /* 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 */
 } :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 */
@@ -28,8 +28,8 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__content_15i3m {
+} .side-panel__content_9wjux {
     padding: var(--gap-m) var(--gap-m) 0
-} .side-panel__content_15i3m:last-child {
+} .side-panel__content_9wjux:last-child {
         padding-bottom: var(--gap-m);
     }

package/side-panel/components/controls/Component.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+interface ControlsProps {
+    /**
+     * Основной слот
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительный слот
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание элементов футера
+     * @default start
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Выравнивание элементов футера (мобильный view)
+     * @default start
+     */
+    mobileLayout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+}
+declare const Controls: React.FC<ControlsProps>;
+export { ControlsProps, Controls };

package/side-panel/components/controls/Component.js

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var ResponsiveContext = require('../../ResponsiveContext.js');
+var layout_module = require('../../layout.module-383ae214.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"side-panel__component_jnlxk"};
+require('./index.css');
+
+var Controls = function (_a) {
+    var primary = _a.primary, secondary = _a.secondary, _b = _a.gap, gap = _b === void 0 ? 16 : _b, _c = _a.layout, layoutProp = _c === void 0 ? 'start' : _c, _d = _a.mobileLayout, mobileLayout = _d === void 0 ? layoutProp : _d;
+    var context = React.useContext(ResponsiveContext.ResponsiveContext);
+    var _e = (context || {}).view, view = _e === void 0 ? 'desktop' : _e;
+    var layout = view === 'mobile' ? mobileLayout : layoutProp;
+    var shouldReverse = view === 'mobile' && layout !== 'column';
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, layout_module.layoutStyles[layout], gap && layout_module.layoutStyles["gap-".concat(gap)]) }, shouldReverse ? (React__default.default.createElement(React__default.default.Fragment, null,
+        secondary,
+        primary)) : (React__default.default.createElement(React__default.default.Fragment, null,
+        primary,
+        secondary))));
+};
+
+exports.Controls = Controls;

package/side-panel/components/controls/index.css

@@ -0,0 +1,4 @@
+/* hash: 1amh1 */
+.side-panel__component_jnlxk {
+    width: 100%;
+}

package/side-panel/components/controls/index.d.ts

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

package/side-panel/components/controls/index.js

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_controls_Component = require('./Component.js');
+require('react');
+require('classnames');
+require('../../ResponsiveContext.js');
+require('../../layout.module-383ae214.js');
+
+
+
+exports.Controls = components_controls_Component.Controls;

package/side-panel/components/footer/Component.desktop.js

@@ -6,13 +6,14 @@ var cn = require('classnames');
 var components_footer_Component = require('./Component.js');
 require('../../Context.js');
 require('../../../base-modal');
+require('../../layout.module-383ae214.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"sticky":"side-panel__sticky_1bvwv","s":"side-panel__s_1bvwv"};
+var styles = {"sticky":"side-panel__sticky_bjh03","s":"side-panel__s_bjh03"};
 require('./desktop.css');
 
 var FooterDesktop = function (_a) {

package/side-panel/components/footer/Component.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var Context = require('../../Context.js');
+var layout_module = require('../../layout.module-383ae214.js');
 require('../../../base-modal');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -10,12 +11,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"footer":"side-panel__footer_cr8pp","sticky":"side-panel__sticky_cr8pp","highlighted":"side-panel__highlighted_cr8pp"};
+var styles = {"footer":"side-panel__footer_90a4l","sticky":"side-panel__sticky_90a4l","highlighted":"side-panel__highlighted_90a4l"};
 require('./index.css');
 
-var layoutStyles = {"column":"side-panel__column_d8m7q","gap-16":"side-panel__gap-16_d8m7q","gap-24":"side-panel__gap-24_d8m7q","gap-32":"side-panel__gap-32_d8m7q","start":"side-panel__start_d8m7q","center":"side-panel__center_d8m7q","space-between":"side-panel__space-between_d8m7q"};
-require('./layout.css');
-
 var Footer = function (_a) {
     var _b;
     var children = _a.children, className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, gap = _a.gap, dataTestId = _a.dataTestId;
@@ -23,7 +21,7 @@ var Footer = function (_a) {
     React.useEffect(function () {
         setHasFooter(true);
     }, [setHasFooter]);
-    return (React__default.default.createElement("div", { className: cn__default.default(styles.footer, className, layoutStyles[layout], gap && layoutStyles["gap-".concat(gap)], (_b = {},
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.footer, className, layout_module.layoutStyles[layout], gap && layout_module.layoutStyles["gap-".concat(gap)], (_b = {},
             _b[styles.highlighted] = sticky && footerHighlighted,
             _b[styles.sticky] = sticky,
             _b)), "data-test-id": dataTestId }, children));

package/side-panel/components/footer/Component.mobile.js

@@ -6,19 +6,20 @@ var cn = require('classnames');
 var components_footer_Component = require('./Component.js');
 require('../../Context.js');
 require('../../../base-modal');
+require('../../layout.module-383ae214.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"footer":"side-panel__footer_13o6w","sticky":"side-panel__sticky_13o6w","column":"side-panel__column_13o6w"};
+var styles = {"footer":"side-panel__footer_1mu6f","sticky":"side-panel__sticky_1mu6f"};
 require('./mobile.css');
 
 var FooterMobile = function (_a) {
     var _b;
     var className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, restProps = tslib.__rest(_a, ["className", "sticky", "layout"]);
-    return (React__default.default.createElement(components_footer_Component.Footer, tslib.__assign({ className: cn__default.default(className, styles.footer, styles[layout], (_b = {},
+    return (React__default.default.createElement(components_footer_Component.Footer, tslib.__assign({ className: cn__default.default(className, styles.footer, (_b = {},
             _b[styles.sticky] = sticky,
             _b)), sticky: sticky, layout: layout }, restProps)));
 };