@alfalab/core-components-side-panel 4.1.3 → 5.0.1

package/esm/mobile/transitions.mobile.css

@@ -1,24 +1,24 @@
-/* hash: mn72t */
-.side-panel__appear_48wvn,
-.side-panel__enter_48wvn {
+/* hash: ntku8 */
+.side-panel__appear_1lrki,
+.side-panel__enter_1lrki {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.side-panel__appearActive_48wvn,
-.side-panel__enterActive_48wvn {
+.side-panel__appearActive_1lrki,
+.side-panel__enterActive_1lrki {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_48wvn {
+.side-panel__exit_1lrki {
     opacity: 1;
     transform: translateY(0);
 }
 
-.side-panel__exitActive_48wvn,
-.side-panel__exitDone_48wvn {
+.side-panel__exitActive_1lrki,
+.side-panel__exitDone_1lrki {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/esm/typings.d.ts

@@ -2,5 +2,6 @@ type View = 'desktop' | 'mobile';
 type TResponsiveModalContext = {
     view: View;
     size: 's';
+    dataTestId?: string;
 } | null;
 export { View, TResponsiveModalContext };

package/index.js

@@ -7,12 +7,14 @@ require('tslib');
 require('react');
 require('@alfalab/core-components-mq');
 require('@alfalab/core-components-shared');
-require('./components/header/Component.js');
+require('./components/controls/Component.js');
 require('classnames');
+require('./ResponsiveContext.js');
+require('./layout.module-2f71de49.js');
+require('./components/header/Component.js');
 require('@alfalab/core-components-navigation-bar');
 require('./Context.js');
 require('@alfalab/core-components-base-modal');
-require('./ResponsiveContext.js');
 require('./desktop/Component.desktop.js');
 require('react-merge-refs');
 require('@alfalab/core-components-drawer');

package/layout.module-2f71de49.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var layoutStyles = {"column":"side-panel__column_16gdu","gap-16":"side-panel__gap-16_16gdu","gap-24":"side-panel__gap-24_16gdu","gap-32":"side-panel__gap-32_16gdu","start":"side-panel__start_16gdu","center":"side-panel__center_16gdu","space-between":"side-panel__space-between_16gdu"};
+require('./components/footer/layout.css')
+
+exports.layoutStyles = layoutStyles;

package/mobile/Component.mobile.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { BaseModalProps } from "@alfalab/core-components-base-modal";
+import { ControlsProps } from "../components/controls/index";
 type SidePanelMobileProps = BaseModalProps & {
     /**
      * Управление наличием закрывающего крестика
@@ -18,5 +19,6 @@ declare const SidePanelMobile: React.ForwardRefExoticComponent<BaseModalProps &
     Content: React.FC<import("../components/content/Component").ContentProps>;
     Header: React.FC<import("../components/header/Component").HeaderProps>;
     Footer: React.FC<import("../components/footer/Component").FooterProps>;
+    Controls: React.FC<Omit<ControlsProps, "mobileLayout">>;
 };
 export { SidePanelMobileProps, SidePanelMobile };

package/mobile/Component.mobile.js

@@ -7,11 +7,14 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
 var components_content_Component_mobile = require('../components/content/Component.mobile.js');
+var components_controls_Component = require('../components/controls/Component.js');
 var components_footer_Component_mobile = require('../components/footer/Component.mobile.js');
 var components_header_Component = require('../components/header/Component.js');
 var ResponsiveContext = require('../ResponsiveContext.js');
 require('../components/content/Component.js');
+require('@alfalab/core-components-shared');
 require('../Context.js');
+require('../layout.module-2f71de49.js');
 require('../components/footer/Component.js');
 require('@alfalab/core-components-navigation-bar');
 
@@ -20,17 +23,17 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"side-panel__component_19cvm","mobileContent":"side-panel__mobileContent_19cvm"};
+var styles = {"component":"side-panel__component_1050h","mobileContent":"side-panel__mobileContent_1050h"};
 require('./mobile.css')
 
-var transitions = {"appear":"side-panel__appear_48wvn","enter":"side-panel__enter_48wvn","appearActive":"side-panel__appearActive_48wvn","enterActive":"side-panel__enterActive_48wvn","exit":"side-panel__exit_48wvn","exitActive":"side-panel__exitActive_48wvn","exitDone":"side-panel__exitDone_48wvn"};
+var transitions = {"appear":"side-panel__appear_1lrki","enter":"side-panel__enter_1lrki","appearActive":"side-panel__appearActive_1lrki","enterActive":"side-panel__enterActive_1lrki","exit":"side-panel__exit_1lrki","exitActive":"side-panel__exitActive_1lrki","exitDone":"side-panel__exitDone_1lrki"};
 require('./transitions.mobile.css')
 
-var contextValue = { size: 's', view: 'mobile' };
 var SidePanelMobileComponent = React.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, transitionProps = _a.transitionProps, restProps = tslib.__rest(_a, ["children", "className", "transitionProps"]);
+    var children = _a.children, className = _a.className, transitionProps = _a.transitionProps, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["children", "className", "transitionProps", "dataTestId"]);
     var responsiveContext = React.useContext(ResponsiveContext.ResponsiveContext);
-    var renderContent = function () { return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { ref: ref, transitionProps: tslib.__assign({ classNames: transitions }, transitionProps), className: cn__default.default(className, styles.component), scrollHandler: 'content' }),
+    var contextValue = React.useMemo(function () { return ({ size: 's', view: 'mobile', dataTestId: dataTestId }); }, [dataTestId]);
+    var renderContent = function () { return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { dataTestId: dataTestId, ref: ref, transitionProps: tslib.__assign({ classNames: transitions }, transitionProps), className: cn__default.default(className, styles.component), scrollHandler: 'content' }),
         React__default.default.createElement("div", { className: styles.mobileContent }, children))); };
     var renderWithContext = function () { return (React__default.default.createElement(ResponsiveContext.ResponsiveContext.Provider, { value: contextValue }, renderContent())); };
     return responsiveContext ? renderContent() : renderWithContext();
@@ -39,6 +42,7 @@ var SidePanelMobile = Object.assign(SidePanelMobileComponent, {
     Content: components_content_Component_mobile.ContentMobile,
     Header: components_header_Component.Header,
     Footer: components_footer_Component_mobile.FooterMobile,
+    Controls: components_controls_Component.Controls,
 });
 
 exports.SidePanelMobile = SidePanelMobile;

package/mobile/index.js

@@ -9,12 +9,15 @@ require('classnames');
 require('@alfalab/core-components-base-modal');
 require('../components/content/Component.mobile.js');
 require('../components/content/Component.js');
+require('@alfalab/core-components-shared');
 require('../Context.js');
+require('../ResponsiveContext.js');
+require('../components/controls/Component.js');
+require('../layout.module-2f71de49.js');
 require('../components/footer/Component.mobile.js');
 require('../components/footer/Component.js');
 require('../components/header/Component.js');
 require('@alfalab/core-components-navigation-bar');
-require('../ResponsiveContext.js');
 
 
 

package/mobile/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 7ui7p */
+/* hash: uxsui */
 :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,17 +27,17 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__component_19cvm {
+} .side-panel__component_1050h {
     top: 0;
     height: 100%;
     width: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     max-width: 600px;
-} .side-panel__component_19cvm.side-panel__component_19cvm {
+} .side-panel__component_1050h.side-panel__component_1050h {
     position: fixed;
     flex: 1;
-} .side-panel__mobileContent_19cvm {
+} .side-panel__mobileContent_1050h {
     display: flex;
     flex-direction: column;
     width: 100%;

package/mobile/transitions.mobile.css

@@ -1,24 +1,24 @@
-/* hash: mn72t */
-.side-panel__appear_48wvn,
-.side-panel__enter_48wvn {
+/* hash: ntku8 */
+.side-panel__appear_1lrki,
+.side-panel__enter_1lrki {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.side-panel__appearActive_48wvn,
-.side-panel__enterActive_48wvn {
+.side-panel__appearActive_1lrki,
+.side-panel__enterActive_1lrki {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_48wvn {
+.side-panel__exit_1lrki {
     opacity: 1;
     transform: translateY(0);
 }
 
-.side-panel__exitActive_48wvn,
-.side-panel__exitDone_48wvn {
+.side-panel__exitActive_1lrki,
+.side-panel__exitDone_1lrki {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/modern/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/modern/Component.responsive.js

@@ -1,11 +1,13 @@
 import React, { forwardRef, useMemo, useContext } from 'react';
 import { useMatchMedia } from '@alfalab/core-components-mq/modern';
 import { isClient } from '@alfalab/core-components-shared/modern';
+import { Controls } from './components/controls/Component.js';
 import { Header } from './components/header/Component.js';
 import { SidePanelDesktop } from './desktop/Component.desktop.js';
 import { SidePanelMobile } from './mobile/Component.mobile.js';
 import { ResponsiveContext } from './ResponsiveContext.js';
 import 'classnames';
+import './layout.module-a8ffdbd1.js';
 import '@alfalab/core-components-navigation-bar/modern';
 import './Context.js';
 import '@alfalab/core-components-base-modal/modern';
@@ -27,18 +29,19 @@ function createResponsive(desktop, mobile) {
     }
     return ResponsiveChild;
 }
-const SidePanelResponsiveComponent = forwardRef(({ children, breakpoint = 1024, size = 's', defaultMatchMediaValue, ...restProps }, ref) => {
+const SidePanelResponsiveComponent = forwardRef(({ children, breakpoint = 1024, size = 's', defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
     const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);
     const view = isDesktop ? 'desktop' : 'mobile';
-    const contextValue = useMemo(() => ({ view, size }), [view, size]);
+    const contextValue = useMemo(() => ({ view, size, dataTestId }), [view, size, dataTestId]);
     const Component = isDesktop ? SidePanelDesktop : SidePanelMobile;
     return (React.createElement(ResponsiveContext.Provider, { value: contextValue },
-        React.createElement(Component, { ref: ref, size: size, ...restProps }, children)));
+        React.createElement(Component, { ref: ref, size: size, dataTestId: dataTestId, ...restProps }, children)));
 });
 const SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
     Header,
+    Controls,
     Content: createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content),
     Footer: createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer),
 });

package/modern/components/content/Component.desktop.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import cn from 'classnames';
 import { Content } from './Component.js';
+import '@alfalab/core-components-shared/modern';
 import '../../Context.js';
 import '@alfalab/core-components-base-modal/modern';
+import '../../ResponsiveContext.js';
 
-const styles = {"s":"side-panel__s_cqees"};
+const styles = {"s":"side-panel__s_39vrx"};
 require('./desktop.css')
 
 const ContentDesktop = ({ size = 's', className, ...restProps }) => React.createElement(Content, { className: cn(className, size && styles[size]), ...restProps });

package/modern/components/content/Component.js

@@ -1,16 +1,19 @@
 import React, { useContext } from 'react';
 import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
 import '@alfalab/core-components-base-modal/modern';
 
-const styles = {"content":"side-panel__content_12bco","withHeader":"side-panel__withHeader_12bco","flex":"side-panel__flex_12bco"};
+const styles = {"content":"side-panel__content_1vagu","withHeader":"side-panel__withHeader_1vagu","flex":"side-panel__flex_1vagu"};
 require('./index.css')
 
 const Content = ({ children, className, dataTestId }) => {
     const { contentRef, hasHeader } = useContext(ModalContext);
+    const responsiveContext = useContext(ResponsiveContext);
     return (React.createElement("div", { className: cn(styles.content, className, styles.flex, {
             [styles.withHeader]: hasHeader,
-        }), ref: contentRef, "data-test-id": dataTestId }, children));
+        }), ref: contentRef, "data-test-id": dataTestId || getDataTestId(responsiveContext?.dataTestId, 'content') }, children));
 };
 
 export { Content };

package/modern/components/content/Component.mobile.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import cn from 'classnames';
 import { Content } from './Component.js';
+import '@alfalab/core-components-shared/modern';
 import '../../Context.js';
 import '@alfalab/core-components-base-modal/modern';
+import '../../ResponsiveContext.js';
 
-const styles = {"content":"side-panel__content_15i3m"};
+const styles = {"content":"side-panel__content_1hc2n"};
 require('./mobile.css')
 
 const ContentMobile = ({ className, ...restProps }) => (React.createElement(Content, { className: cn(className, styles.content), ...restProps }));

package/modern/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_39vrx {
     padding: var(--side-panel-s-content-paddings)
-} .side-panel__s_cqees:last-child {
+} .side-panel__s_39vrx:last-child {
         padding-bottom: var(--gap-2xl);
     }

package/modern/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_1vagu {
     position: relative;
     box-sizing: border-box;
     width: 100%;
     z-index: 0
-} .side-panel__content_12bco.side-panel__withHeader_12bco {
+} .side-panel__content_1vagu.side-panel__withHeader_1vagu {
         padding-top: 0;
-    } .side-panel__flex_12bco {
+    } .side-panel__flex_1vagu {
     flex: 1 1 auto;
 }

package/modern/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_1hc2n {
     padding: var(--gap-m) var(--gap-m) 0
-} .side-panel__content_15i3m:last-child {
+} .side-panel__content_1hc2n:last-child {
         padding-bottom: var(--gap-m);
     }

package/modern/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/modern/components/controls/Component.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import { l as layoutStyles } from '../../layout.module-a8ffdbd1.js';
+
+const styles = {"component":"side-panel__component_scwve"};
+require('./index.css')
+
+const Controls = ({ primary, secondary, gap = 16, layout: layoutProp = 'start', mobileLayout = layoutProp, }) => {
+    const context = useContext(ResponsiveContext);
+    const { view = 'desktop', dataTestId } = context || {};
+    const layout = view === 'mobile' ? mobileLayout : layoutProp;
+    const shouldReverse = view === 'mobile' && layout !== 'column';
+    return (React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'controls'), className: cn(styles.component, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`]) }, shouldReverse ? (React.createElement(React.Fragment, null,
+        secondary,
+        primary)) : (React.createElement(React.Fragment, null,
+        primary,
+        secondary))));
+};
+
+export { Controls };

package/modern/components/controls/index.css

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

package/modern/components/controls/index.d.ts

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

package/modern/components/controls/index.js

@@ -0,0 +1,6 @@
+export { Controls } from './Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/modern';
+import '../../ResponsiveContext.js';
+import '../../layout.module-a8ffdbd1.js';

package/modern/components/footer/Component.desktop.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
 import { Footer } from './Component.js';
+import '@alfalab/core-components-shared/modern';
 import '../../Context.js';
 import '@alfalab/core-components-base-modal/modern';
+import '../../ResponsiveContext.js';
+import '../../layout.module-a8ffdbd1.js';
 
-const styles = {"sticky":"side-panel__sticky_1bvwv","s":"side-panel__s_1bvwv"};
+const styles = {"sticky":"side-panel__sticky_62kfr","s":"side-panel__s_62kfr"};
 require('./desktop.css')
 
 const FooterDesktop = ({ size = 's', className, sticky, ...restProps }) => (React.createElement(Footer, { className: cn(className, size && styles[size], {

package/modern/components/footer/Component.js

@@ -1,23 +1,24 @@
 import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
 import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import { l as layoutStyles } from '../../layout.module-a8ffdbd1.js';
 import '@alfalab/core-components-base-modal/modern';
 
-const styles = {"footer":"side-panel__footer_cr8pp","sticky":"side-panel__sticky_cr8pp","highlighted":"side-panel__highlighted_cr8pp"};
+const styles = {"footer":"side-panel__footer_3jdk9","sticky":"side-panel__sticky_3jdk9","highlighted":"side-panel__highlighted_3jdk9"};
 require('./index.css')
 
-const 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')
-
 const Footer = ({ children, className, sticky, layout = 'start', gap, dataTestId, }) => {
     const { footerHighlighted, setHasFooter } = useContext(ModalContext);
+    const responsiveContext = useContext(ResponsiveContext);
     useEffect(() => {
         setHasFooter(true);
     }, [setHasFooter]);
     return (React.createElement("div", { className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`], {
             [styles.highlighted]: sticky && footerHighlighted,
             [styles.sticky]: sticky,
-        }), "data-test-id": dataTestId }, children));
+        }), "data-test-id": dataTestId || getDataTestId(responsiveContext?.dataTestId, 'footer') }, children));
 };
 
 export { Footer };

package/modern/components/footer/Component.mobile.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import cn from 'classnames';
 import { Footer } from './Component.js';
+import '@alfalab/core-components-shared/modern';
 import '../../Context.js';
 import '@alfalab/core-components-base-modal/modern';
+import '../../ResponsiveContext.js';
+import '../../layout.module-a8ffdbd1.js';
 
-const styles = {"footer":"side-panel__footer_13o6w","sticky":"side-panel__sticky_13o6w","column":"side-panel__column_13o6w"};
+const styles = {"footer":"side-panel__footer_1e4vh","sticky":"side-panel__sticky_1e4vh"};
 require('./mobile.css')
 
-const FooterMobile = ({ className, sticky, layout = 'start', ...restProps }) => (React.createElement(Footer, { className: cn(className, styles.footer, styles[layout], {
+const FooterMobile = ({ className, sticky, layout = 'start', ...restProps }) => (React.createElement(Footer, { className: cn(className, styles.footer, {
         [styles.sticky]: sticky,
     }), sticky: sticky, layout: layout, ...restProps }));
 

package/modern/components/footer/desktop.css

@@ -1,4 +1,4 @@
-/* hash: xg1mo */
+/* hash: 1kjc9 */
 :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__sticky_1bvwv {
+} .side-panel__sticky_62kfr {
     bottom: 0;
-} .side-panel__s_1bvwv {
+} .side-panel__s_62kfr {
     padding: var(--side-panel-s-footer-paddings);
 }

package/modern/components/footer/index.css

@@ -1,8 +1,8 @@
-/* hash: bbrc0 */
+/* hash: yf1yt */
 :root {
 } /* deprecated */ :root {
-    --color-light-bg-primary: #fff;
-    --color-light-border-secondary: #e7e8ec; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-modal-bg-primary: #fff;
+    --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
 } :root {
 } :root {
@@ -17,30 +17,30 @@
 } :root {
 } :root {
 } :root {
-    --side-panel-footer-background: var(--color-light-bg-primary);
+    --side-panel-footer-background: var(--color-light-modal-bg-primary);
 
     /* sizes */
 
     /* paddings */
 
     /* scroll */
-    --side-panel-footer-highlight-background: var(--color-light-bg-primary);
-    --side-panel-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-secondary);
+    --side-panel-footer-highlight-background: var(--color-light-modal-bg-primary);
+    --side-panel-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
 
     /* desktop */
 
     /* mobile */
 
     /* paddings */
-} .side-panel__footer_cr8pp {
+} .side-panel__footer_3jdk9 {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
-} .side-panel__sticky_cr8pp {
+} .side-panel__sticky_3jdk9 {
     background: var(--side-panel-footer-background);
     position: sticky;
     z-index: 1;
-} .side-panel__highlighted_cr8pp {
+} .side-panel__highlighted_3jdk9 {
     background: var(--side-panel-footer-highlight-background);
     box-shadow: var(--side-panel-footer-highlight-box-shadow);
 }