@alfalab/core-components-side-panel 6.0.0 → 6.1.0-snapshot-92b8690

package/components/content/desktop.css

@@ -6,8 +6,8 @@
     --gap-40: var(--gap-3xl);
 } :root {
     --side-panel-s-content-paddings: var(--gap-40) var(--gap-40) var(--gap-0);
-} .side-panel__size-500_1jja7 {
+} .side-panel__size-500_1w4cw {
     padding: var(--side-panel-s-content-paddings)
-} .side-panel__size-500_1jja7:last-child {
+} .side-panel__size-500_1w4cw:last-child {
         padding-bottom: var(--gap-32);
     }

package/components/content/desktop.module.css.js

@@ -2,7 +2,7 @@
 
 require('./desktop.css');
 
-var styles = {"size-500":"side-panel__size-500_1jja7"};
+var styles = {"size-500":"side-panel__size-500_1w4cw"};
 
 module.exports = styles;
 //# sourceMappingURL=desktop.module.css.js.map

package/components/content/index.css

@@ -1,12 +1,12 @@
 :root {
     --gap-0: 0px;
-} .side-panel__content_6c1gz {
+} .side-panel__content_kmwbo {
     position: relative;
     box-sizing: border-box;
     width: 100%;
     z-index: 0
-} .side-panel__content_6c1gz.side-panel__withHeader_6c1gz {
+} .side-panel__content_kmwbo.side-panel__withHeader_kmwbo {
         padding-top: var(--gap-0);
-    } .side-panel__flex_6c1gz {
+    } .side-panel__flex_kmwbo {
     flex: 1 1 auto;
 }

package/components/content/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"content":"side-panel__content_6c1gz","withHeader":"side-panel__withHeader_6c1gz","flex":"side-panel__flex_6c1gz"};
+var styles = {"content":"side-panel__content_kmwbo","withHeader":"side-panel__withHeader_kmwbo","flex":"side-panel__flex_kmwbo"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/content/mobile.css

@@ -2,8 +2,8 @@
     --gap-m: 16px;
     --gap-0: 0px;
     --gap-16: var(--gap-m);
-} .side-panel__content_8cn7i {
+} .side-panel__content_lvzod {
     padding: var(--gap-16) var(--gap-16) var(--gap-0)
-} .side-panel__content_8cn7i:last-child {
+} .side-panel__content_lvzod:last-child {
         padding-bottom: var(--gap-16);
     }

package/components/content/mobile.module.css.js

@@ -2,7 +2,7 @@
 
 require('./mobile.css');
 
-var styles = {"content":"side-panel__content_8cn7i"};
+var styles = {"content":"side-panel__content_lvzod"};
 
 module.exports = styles;
 //# sourceMappingURL=mobile.module.css.js.map

package/components/controls/index.css

@@ -1,3 +1,3 @@
-.side-panel__component_1majz {
+.side-panel__component_atmxk {
     width: 100%;
 }

package/components/controls/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"side-panel__component_1majz"};
+var styles = {"component":"side-panel__component_atmxk"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/footer/desktop.css

@@ -6,8 +6,8 @@
     --gap-40: var(--gap-3xl);
 } :root {
     --side-panel-s-footer-paddings: var(--gap-24) var(--gap-40) var(--gap-40);
-} .side-panel__sticky_6x66b {
+} .side-panel__sticky_ygup5 {
     bottom: var(--gap-0);
-} .side-panel__size-500_6x66b {
+} .side-panel__size-500_ygup5 {
     padding: var(--side-panel-s-footer-paddings);
 }

package/components/footer/desktop.module.css.js

@@ -2,7 +2,7 @@
 
 require('./desktop.css');
 
-var styles = {"sticky":"side-panel__sticky_6x66b","size-500":"side-panel__size-500_6x66b"};
+var styles = {"sticky":"side-panel__sticky_ygup5","size-500":"side-panel__size-500_ygup5"};
 
 module.exports = styles;
 //# sourceMappingURL=desktop.module.css.js.map

package/components/footer/index.css

@@ -5,15 +5,15 @@
     --side-panel-footer-background: var(--color-light-modal-bg-primary);
     --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);
-} .side-panel__footer_1jtzx {
+} .side-panel__footer_1log9 {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
-} .side-panel__sticky_1jtzx {
+} .side-panel__sticky_1log9 {
     background: var(--side-panel-footer-background);
     position: sticky;
     z-index: 1;
-} .side-panel__highlighted_1jtzx {
+} .side-panel__highlighted_1log9 {
     background: var(--side-panel-footer-highlight-background);
     box-shadow: var(--side-panel-footer-highlight-box-shadow);
 }

package/components/footer/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"side-panel__footer_1jtzx","sticky":"side-panel__sticky_1jtzx","highlighted":"side-panel__highlighted_1jtzx"};
+var styles = {"footer":"side-panel__footer_1log9","sticky":"side-panel__sticky_1log9","highlighted":"side-panel__highlighted_1log9"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/footer/layout.css

@@ -7,35 +7,35 @@
     --gap-32: var(--gap-2xl);
 } :root {
     --side-panel-footer-default-gap: var(--gap-16);
-} .side-panel__column_16mil {
+} .side-panel__column_mxt5r {
     display: flex;
     flex-direction: column
-} .side-panel__column_16mil > *:not(:last-child):not(:only-child) {
+} .side-panel__column_mxt5r > *:not(:last-child):not(:only-child) {
         margin-bottom: var(--side-panel-footer-default-gap);
-    } .side-panel__column_16mil.side-panel__gap-16_16mil > *:not(:last-child):not(:only-child) {
+    } .side-panel__column_mxt5r.side-panel__gap-16_mxt5r > *:not(:last-child):not(:only-child) {
         margin-bottom: var(--gap-16);
-    } .side-panel__column_16mil.side-panel__gap-24_16mil > *:not(:last-child):not(:only-child) {
+    } .side-panel__column_mxt5r.side-panel__gap-24_mxt5r > *:not(:last-child):not(:only-child) {
         margin-bottom: var(--gap-24);
-    } .side-panel__column_16mil.side-panel__gap-32_16mil > *:not(:last-child):not(:only-child) {
+    } .side-panel__column_mxt5r.side-panel__gap-32_mxt5r > *:not(:last-child):not(:only-child) {
         margin-bottom: var(--gap-32);
-    } .side-panel__start_16mil {
+    } .side-panel__start_mxt5r {
     justify-content: flex-start;
-} .side-panel__center_16mil {
+} .side-panel__center_mxt5r {
     justify-content: center;
-} .side-panel__space-between_16mil {
+} .side-panel__space-between_mxt5r {
     justify-content: space-between
-} .side-panel__space-between_16mil > * {
+} .side-panel__space-between_mxt5r > * {
         flex: 1;
-    } .side-panel__start_16mil,
-.side-panel__center_16mil,
-.side-panel__space-between_16mil {
+    } .side-panel__start_mxt5r,
+.side-panel__center_mxt5r,
+.side-panel__space-between_mxt5r {
     display: flex
-} .side-panel__start_16mil > *:not(:last-child):not(:only-child), .side-panel__center_16mil > *:not(:last-child):not(:only-child), .side-panel__space-between_16mil > *:not(:last-child):not(:only-child) {
+} .side-panel__start_mxt5r > *:not(:last-child):not(:only-child), .side-panel__center_mxt5r > *:not(:last-child):not(:only-child), .side-panel__space-between_mxt5r > *:not(:last-child):not(:only-child) {
         margin-right: var(--side-panel-footer-default-gap);
-    } .side-panel__start_16mil.side-panel__gap-16_16mil > *:not(:last-child):not(:only-child), .side-panel__center_16mil.side-panel__gap-16_16mil > *:not(:last-child):not(:only-child), .side-panel__space-between_16mil.side-panel__gap-16_16mil > *:not(:last-child):not(:only-child) {
+    } .side-panel__start_mxt5r.side-panel__gap-16_mxt5r > *:not(:last-child):not(:only-child), .side-panel__center_mxt5r.side-panel__gap-16_mxt5r > *:not(:last-child):not(:only-child), .side-panel__space-between_mxt5r.side-panel__gap-16_mxt5r > *:not(:last-child):not(:only-child) {
         margin-right: var(--gap-16);
-    } .side-panel__start_16mil.side-panel__gap-24_16mil > *:not(:last-child):not(:only-child), .side-panel__center_16mil.side-panel__gap-24_16mil > *:not(:last-child):not(:only-child), .side-panel__space-between_16mil.side-panel__gap-24_16mil > *:not(:last-child):not(:only-child) {
+    } .side-panel__start_mxt5r.side-panel__gap-24_mxt5r > *:not(:last-child):not(:only-child), .side-panel__center_mxt5r.side-panel__gap-24_mxt5r > *:not(:last-child):not(:only-child), .side-panel__space-between_mxt5r.side-panel__gap-24_mxt5r > *:not(:last-child):not(:only-child) {
         margin-right: var(--gap-24);
-    } .side-panel__start_16mil.side-panel__gap-32_16mil > *:not(:last-child):not(:only-child), .side-panel__center_16mil.side-panel__gap-32_16mil > *:not(:last-child):not(:only-child), .side-panel__space-between_16mil.side-panel__gap-32_16mil > *:not(:last-child):not(:only-child) {
+    } .side-panel__start_mxt5r.side-panel__gap-32_mxt5r > *:not(:last-child):not(:only-child), .side-panel__center_mxt5r.side-panel__gap-32_mxt5r > *:not(:last-child):not(:only-child), .side-panel__space-between_mxt5r.side-panel__gap-32_mxt5r > *:not(:last-child):not(:only-child) {
         margin-right: var(--gap-32);
     }

package/components/footer/layout.module.css.js

@@ -2,7 +2,7 @@
 
 require('./layout.css');
 
-var layoutStyles = {"column":"side-panel__column_16mil","gap-16":"side-panel__gap-16_16mil","gap-24":"side-panel__gap-24_16mil","gap-32":"side-panel__gap-32_16mil","start":"side-panel__start_16mil","center":"side-panel__center_16mil","space-between":"side-panel__space-between_16mil"};
+var layoutStyles = {"column":"side-panel__column_mxt5r","gap-16":"side-panel__gap-16_mxt5r","gap-24":"side-panel__gap-24_mxt5r","gap-32":"side-panel__gap-32_mxt5r","start":"side-panel__start_mxt5r","center":"side-panel__center_mxt5r","space-between":"side-panel__space-between_mxt5r"};
 
 module.exports = layoutStyles;
 //# sourceMappingURL=layout.module.css.js.map

package/components/footer/mobile.css

@@ -6,14 +6,14 @@
     --gap-0: 0px;
     --gap-16: var(--gap-m);
 }
-.side-panel__footer_vlfa7 {
+.side-panel__footer_1i4c5 {
     padding: var(--gap-16)
 }
 @media (display-mode: standalone) {
-.side-panel__footer_vlfa7 {
+.side-panel__footer_1i4c5 {
         padding-bottom: calc(var(--sab) + var(--gap-16))
 }
     }
-.side-panel__sticky_vlfa7 {
+.side-panel__sticky_1i4c5 {
     bottom: var(--gap-0);
 }

package/components/footer/mobile.module.css.js

@@ -2,7 +2,7 @@
 
 require('./mobile.css');
 
-var styles = {"footer":"side-panel__footer_vlfa7","sticky":"side-panel__sticky_vlfa7"};
+var styles = {"footer":"side-panel__footer_1i4c5","sticky":"side-panel__sticky_1i4c5"};
 
 module.exports = styles;
 //# sourceMappingURL=mobile.module.css.js.map

package/components/header/desktop.css

@@ -14,15 +14,15 @@
     --side-panel-s-header-desktop-line-height: 36px;
     --side-panel-header-desktop-font-weight: bold;
     --side-panel-header-desktop-font-family: var(--font-family-system);
-} .side-panel__content_1k5cn {
+} .side-panel__content_1won3 {
     font-weight: var(--side-panel-header-desktop-font-weight);
     font-family: var(--side-panel-header-desktop-font-family);
-} .side-panel__size-500_1k5cn .side-panel__content_1k5cn {
+} .side-panel__size-500_1won3 .side-panel__content_1won3 {
     padding: var(--side-panel-s-header-desktop-content-paddings);
     font-size: var(--side-panel-s-header-desktop-font-size);
     line-height: var(--side-panel-s-header-desktop-line-height);
-} .side-panel__size-500_1k5cn {
+} .side-panel__size-500_1won3 {
     padding: var(--side-panel-s-header-paddings);
-} .side-panel__sticky_1k5cn {
+} .side-panel__sticky_1won3 {
     top: var(--gap-0);
 }

package/components/header/desktop.module.css.js

@@ -2,7 +2,7 @@
 
 require('./desktop.css');
 
-var desktopStyles = {"content":"side-panel__content_1k5cn","size-500":"side-panel__size-500_1k5cn","sticky":"side-panel__sticky_1k5cn"};
+var desktopStyles = {"content":"side-panel__content_1won3","size-500":"side-panel__size-500_1won3","sticky":"side-panel__sticky_1won3"};
 
 module.exports = desktopStyles;
 //# sourceMappingURL=desktop.module.css.js.map

package/components/header/index.css

@@ -5,42 +5,42 @@
     --side-panel-header-background: var(--color-light-modal-bg-primary);
     --side-panel-header-highlight-background: var(--color-light-modal-bg-primary);
     --side-panel-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
-} .side-panel__header_1ao9e {
+} .side-panel__header_ljkvx {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease
-} .side-panel__header_1ao9e:not(.side-panel__hasContent_1ao9e) {
+} .side-panel__header_ljkvx:not(.side-panel__hasContent_ljkvx) {
         pointer-events: none;
-    } .side-panel__highlighted_1ao9e {
+    } .side-panel__highlighted_ljkvx {
     background: var(--side-panel-header-highlight-background);
     box-shadow: var(--side-panel-header-highlight-box-shadow);
-} .side-panel__sticky_1ao9e {
+} .side-panel__sticky_ljkvx {
     position: sticky;
     z-index: 1
-} .side-panel__sticky_1ao9e.side-panel__hasContent_1ao9e {
+} .side-panel__sticky_ljkvx.side-panel__hasContent_ljkvx {
         background: var(--side-panel-header-background);
-    } .side-panel__header_1ao9e.side-panel__backgroundImage_1ao9e {
+    } .side-panel__header_ljkvx.side-panel__backgroundImage_ljkvx {
     background: center no-repeat;
     background-size: cover;
-} .side-panel__content_1ao9e {
+} .side-panel__content_ljkvx {
     flex-grow: 1;
-} .side-panel__title_1ao9e {
+} .side-panel__title_ljkvx {
     word-break: break-word;
-} .side-panel__addon_1ao9e {
+} .side-panel__addon_ljkvx {
     min-width: 48px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: all;
-} .side-panel__closer_1ao9e {
+} .side-panel__closer_ljkvx {
     margin-left: auto;
-} .side-panel__right_1ao9e {
+} .side-panel__right_ljkvx {
     justify-content: flex-end;
     text-align: right;
-} .side-panel__trim_1ao9e {
+} .side-panel__trim_ljkvx {
     overflow: hidden
-} .side-panel__trim_1ao9e .side-panel__title_1ao9e {
+} .side-panel__trim_ljkvx .side-panel__title_ljkvx {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/components/header/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"header":"side-panel__header_1ao9e","hasContent":"side-panel__hasContent_1ao9e","highlighted":"side-panel__highlighted_1ao9e","sticky":"side-panel__sticky_1ao9e"};
+var styles = {"header":"side-panel__header_ljkvx","hasContent":"side-panel__hasContent_ljkvx","highlighted":"side-panel__highlighted_ljkvx","sticky":"side-panel__sticky_ljkvx"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/header/mobile.css

@@ -22,18 +22,18 @@
     --side-panel-header-mobile-paddings: var(--side-panel-header-mobile-top-padding) var(--gap-8)
         var(--gap-4) var(--gap-8);
 }
-.side-panel__header_9tuj8 {
+.side-panel__header_1senb {
     padding: var(--side-panel-header-mobile-paddings)
 }
 @media (display-mode: standalone) {
-.side-panel__header_9tuj8 {
+.side-panel__header_1senb {
         padding-top: calc(var(--sat) + var(--side-panel-header-mobile-top-padding))
 }
     }
-.side-panel__sticky_9tuj8 {
+.side-panel__sticky_1senb {
     top: var(--gap-0);
 }
-.side-panel__content_9tuj8 {
+.side-panel__content_1senb {
     font-size: var(--side-panel-header-mobile-font-size);
     line-height: var(--side-panel-header-mobile-line-height);
     font-family: var(--side-panel-header-mobile-font-family);

package/components/header/mobile.module.css.js

@@ -2,7 +2,7 @@
 
 require('./mobile.css');
 
-var mobileStyles = {"header":"side-panel__header_9tuj8","sticky":"side-panel__sticky_9tuj8","content":"side-panel__content_9tuj8"};
+var mobileStyles = {"header":"side-panel__header_1senb","sticky":"side-panel__sticky_1senb","content":"side-panel__content_1senb"};
 
 module.exports = mobileStyles;
 //# sourceMappingURL=mobile.module.css.js.map

package/desktop/desktop.css

@@ -1,7 +1,7 @@
 :root {
     --side-panel-s-width: 500px;
-} .side-panel__size-500_2jkz3.side-panel__size-500_2jkz3 {
+} .side-panel__size-500_1unzu.side-panel__size-500_1unzu {
     width: var(--side-panel-s-width);
-} .side-panel__hidden_2jkz3 {
+} .side-panel__hidden_1unzu {
     overflow-x: hidden;
 }

package/desktop/desktop.module.css.js

@@ -2,7 +2,7 @@
 
 require('./desktop.css');
 
-var styles = {"size-500":"side-panel__size-500_2jkz3","hidden":"side-panel__hidden_2jkz3"};
+var styles = {"size-500":"side-panel__size-500_1unzu","hidden":"side-panel__hidden_1unzu"};
 
 module.exports = styles;
 //# sourceMappingURL=desktop.module.css.js.map

package/desktop/transitions.desktop.css

@@ -1,31 +1,31 @@
-.side-panel__enterRight_pb25x {
+.side-panel__enterRight_jq428 {
     opacity: 0;
     transform: translateX(15px);
 }
 
-.side-panel__enterLeft_pb25x {
+.side-panel__enterLeft_jq428 {
     opacity: 0;
     transform: translateX(-15px);
 }
 
-.side-panel__enterActive_pb25x {
+.side-panel__enterActive_jq428 {
     opacity: 1;
     transform: translateX(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_pb25x {
+.side-panel__exit_jq428 {
     opacity: 1;
     transform: translateX(0);
 }
 
-.side-panel__exitActiveRight_pb25x {
+.side-panel__exitActiveRight_jq428 {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(15px);
 }
 
-.side-panel__exitActiveLeft_pb25x {
+.side-panel__exitActiveLeft_jq428 {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(-15px);

package/desktop/transitions.desktop.module.css.js

@@ -2,7 +2,7 @@
 
 require('./transitions.desktop.css');
 
-var transitions = {"enterActive":"side-panel__enterActive_pb25x","exit":"side-panel__exit_pb25x","exitActiveRight":"side-panel__exitActiveRight_pb25x","exitActiveLeft":"side-panel__exitActiveLeft_pb25x"};
+var transitions = {"enterActive":"side-panel__enterActive_jq428","exit":"side-panel__exit_jq428","exitActiveRight":"side-panel__exitActiveRight_jq428","exitActiveLeft":"side-panel__exitActiveLeft_jq428"};
 
 module.exports = transitions;
 //# sourceMappingURL=transitions.desktop.module.css.js.map

package/dynamic-mixins/Component.responsive.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import { BaseModalProps } from '@alfalab/core-components-base-modal';
+import { DrawerProps } from '@alfalab/core-components-drawer';
+import { Controls } from './components/controls';
+import { Header } from './components/header/Component';
+export declare type SidePanelResponsiveProps = BaseModalProps & Pick<DrawerProps, 'contentTransitionProps' | 'placement' | 'nativeScrollbar'> & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: 's' | 500;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const SidePanelResponsiveComponent: React.ForwardRefExoticComponent<BaseModalProps & Pick<DrawerProps, "placement" | "nativeScrollbar" | "contentTransitionProps"> & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: "s" | 500 | undefined;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean | undefined;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile" | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContentResponsive: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
+declare const FooterResponsive: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
+/** Респонсив компаунд */
+declare const SidePanelResponsive: React.ForwardRefExoticComponent<BaseModalProps & Pick<DrawerProps, "placement" | "nativeScrollbar" | "contentTransitionProps"> & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: "s" | 500 | undefined;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean | undefined;
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile" | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Controls: React.FC<import("./components/controls").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>;
+};
+export { SidePanelResponsive, SidePanelResponsiveComponent as SidePanelComponentResponsive, Header as HeaderResponsive, Controls as ControlsResponsive, ContentResponsive, FooterResponsive, };

package/dynamic-mixins/Component.responsive.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var dynamicMixins = require('@alfalab/core-components-mq/dynamic-mixins');
+var Component$1 = require('./components/controls/Component.js');
+var Component = require('./components/header/Component.js');
+var Component_desktop = require('./desktop/Component.desktop.js');
+var Component_mobile = require('./mobile/Component.mobile.js');
+var ResponsiveContext = require('./ResponsiveContext.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+function createResponsive(desktop, mobile) {
+    // eslint-disable-next-line
+    function ResponsiveChild(props) {
+        var _a = (React.useContext(ResponsiveContext.ResponsiveContext) || {}).view, view = _a === void 0 ? 'desktop' : _a;
+        var Child = view === 'desktop' ? desktop : mobile;
+        return React__default.default.createElement(Child, tslib.__assign({}, props));
+    }
+    return ResponsiveChild;
+}
+var SidePanelResponsiveComponent = React.forwardRef(function (_a, ref) {
+    var children = _a.children, breakpoint = _a.breakpoint, client = _a.client, _b = _a.defaultMatchMediaValue, defaultMatchMediaValue = _b === void 0 ? client === undefined ? undefined : client === 'desktop' : _b, _c = _a.size, size = _c === void 0 ? 500 : _c, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["children", "breakpoint", "client", "defaultMatchMediaValue", "size", "dataTestId"]);
+    var isDesktop = dynamicMixins.useIsDesktop(breakpoint, defaultMatchMediaValue);
+    var view = isDesktop ? 'desktop' : 'mobile';
+    var contextValue = React.useMemo(function () { return ({ view: view, size: size, dataTestId: dataTestId }); }, [view, size, dataTestId]);
+    var Component = isDesktop ? Component_desktop.SidePanelDesktop : Component_mobile.SidePanelMobile;
+    return (React__default.default.createElement(ResponsiveContext.ResponsiveContext.Provider, { value: contextValue },
+        React__default.default.createElement(Component, tslib.__assign({ ref: ref, size: size, dataTestId: dataTestId }, restProps), children)));
+});
+var ContentResponsive = createResponsive(Component_desktop.SidePanelDesktop.Content, Component_mobile.SidePanelMobile.Content);
+var FooterResponsive = createResponsive(Component_desktop.SidePanelDesktop.Footer, Component_mobile.SidePanelMobile.Footer);
+/** Респонсив компаунд */
+var SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
+    Header: Component.Header,
+    Controls: Component$1.Controls,
+    Content: ContentResponsive,
+    Footer: FooterResponsive,
+});
+SidePanelResponsiveComponent.displayName = 'SidePanelResponsiveComponent';
+
+exports.ControlsResponsive = Component$1.Controls;
+exports.HeaderResponsive = Component.Header;
+exports.ContentResponsive = ContentResponsive;
+exports.FooterResponsive = FooterResponsive;
+exports.SidePanelComponentResponsive = SidePanelResponsiveComponent;
+exports.SidePanelResponsive = SidePanelResponsive;
+//# sourceMappingURL=Component.responsive.js.map

package/dynamic-mixins/Component.responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.responsive.js","sources":["../src/Component.responsive.tsx"],"sourcesContent":["import React, { FC, forwardRef, useContext, useMemo } from 'react';\n\nimport { BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { DrawerProps } from '@alfalab/core-components-drawer';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { Controls } from './components/controls';\nimport { Header } from './components/header/Component';\nimport { SidePanelDesktop } from './desktop';\nimport { SidePanelMobile } from './mobile';\nimport { ResponsiveContext } from './ResponsiveContext';\nimport { TResponsiveModalContext } from './typings';\n\nexport type SidePanelResponsiveProps = BaseModalProps &\n    Pick<DrawerProps, 'contentTransitionProps' | 'placement' | 'nativeScrollbar'> & {\n        /**\n         * Ширина модального окна\n         * @default \"s\"\n         */\n        size?: 's' | 500;\n\n        /**\n         * Управление наличием закрывающего крестика\n         * @default false\n         */\n        hasCloser?: boolean;\n\n        /**\n         * Контрольная точка, с нее начинается desktop версия\n         * @default 1024\n         */\n        breakpoint?: number;\n\n        /**\n         * Версия, которая будет использоваться при серверном рендеринге\n         */\n        client?: 'desktop' | 'mobile';\n\n        /**\n         * Значение по-умолчанию для хука useMatchMedia\n         * @deprecated Используйте client\n         */\n        defaultMatchMediaValue?: boolean | (() => boolean);\n    };\n\nfunction createResponsive<DesktopType extends FC, MobileType extends FC>(\n    desktop: DesktopType,\n    mobile: MobileType,\n) {\n    // eslint-disable-next-line\n    function ResponsiveChild(props: any) {\n        const { view = 'desktop' } = useContext(ResponsiveContext) || {};\n\n        const Child = view === 'desktop' ? desktop : mobile;\n\n        return <Child {...props} />;\n    }\n\n    return ResponsiveChild as DesktopType | MobileType;\n}\n\nconst SidePanelResponsiveComponent = forwardRef<HTMLDivElement, SidePanelResponsiveProps>(\n    (\n        {\n            children,\n            breakpoint,\n            client,\n            defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop',\n            size = 500,\n            dataTestId,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);\n\n        const view = isDesktop ? 'desktop' : 'mobile';\n\n        const contextValue = useMemo<TResponsiveModalContext>(\n            () => ({ view, size, dataTestId }),\n            [view, size, dataTestId],\n        );\n\n        const Component = isDesktop ? SidePanelDesktop : SidePanelMobile;\n\n        return (\n            <ResponsiveContext.Provider value={contextValue}>\n                <Component ref={ref} size={size} dataTestId={dataTestId} {...restProps}>\n                    {children}\n                </Component>\n            </ResponsiveContext.Provider>\n        );\n    },\n);\n\nconst ContentResponsive = createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content);\nconst FooterResponsive = createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer);\n\n/** Респонсив компаунд */\nconst SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {\n    Header,\n    Controls,\n    Content: ContentResponsive,\n    Footer: FooterResponsive,\n});\n\nSidePanelResponsiveComponent.displayName = 'SidePanelResponsiveComponent';\n\nexport {\n    SidePanelResponsive,\n    SidePanelResponsiveComponent as SidePanelComponentResponsive,\n    Header as HeaderResponsive,\n    Controls as ControlsResponsive,\n    ContentResponsive,\n    FooterResponsive,\n};\n"],"names":["useContext","ResponsiveContext","React","__assign","forwardRef","__rest","useIsDesktop","useMemo","SidePanelDesktop","SidePanelMobile","Header","Controls"],"mappings":";;;;;;;;;;;;;;;;;AA6CA,SAAS,gBAAgB,CACrB,OAAoB,EACpB,MAAkB,EAAA;;IAGlB,SAAS,eAAe,CAAC,KAAU,EAAA;AACvB,QAAA,IAAA,EAAqB,GAAA,CAAAA,gBAAU,CAACC,mCAAiB,CAAC,IAAI,EAAE,MAAxC,EAAhB,IAAI,GAAG,EAAA,KAAA,MAAA,GAAA,SAAS,KAAA;AAExB,QAAA,IAAM,KAAK,GAAG,IAAI,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM;AAEnD,QAAA,OAAOC,sBAAC,CAAA,aAAA,CAAA,KAAK,EAAKC,cAAA,CAAA,EAAA,EAAA,KAAK,EAAI;;AAG/B,IAAA,OAAO,eAA2C;AACtD;AAEA,IAAM,4BAA4B,GAAGC,gBAAU,CAC3C,UACI,EAQC,EACD,GAAG,EAAA;AARC,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,EAAgF,GAAA,EAAA,CAAA,sBAAA,EAAhF,sBAAsB,GAAG,EAAA,KAAA,MAAA,GAAA,MAAM,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,KAAK,SAAS,GAAA,EAAA,EAChF,YAAU,EAAV,IAAI,mBAAG,GAAG,GAAA,EAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACP,SAAS,GAAAC,YAAA,CAAA,EAAA,EAPhB,oFAQC,CADe;IAIhB,IAAM,SAAS,GAAGC,0BAAY,CAAC,UAAU,EAAE,sBAAsB,CAAC;IAElE,IAAM,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ;AAE7C,IAAA,IAAM,YAAY,GAAGC,aAAO,CACxB,YAAM,EAAA,QAAC,EAAE,IAAI,EAAA,IAAA,EAAE,IAAI,EAAA,IAAA,EAAE,UAAU,EAAA,UAAA,EAAE,EAA3B,EAA4B,EAClC,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAC3B;IAED,IAAM,SAAS,GAAG,SAAS,GAAGC,kCAAgB,GAAGC,gCAAe;IAEhE,QACIP,qCAACD,mCAAiB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA;QAC3CC,sBAAC,CAAA,aAAA,CAAA,SAAS,mBAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,IAAM,SAAS,CAAA,EACjE,QAAQ,CACD,CACa;AAErC,CAAC;AAGL,IAAM,iBAAiB,GAAG,gBAAgB,CAACM,kCAAgB,CAAC,OAAO,EAAEC,gCAAe,CAAC,OAAO;AAC5F,IAAM,gBAAgB,GAAG,gBAAgB,CAACD,kCAAgB,CAAC,MAAM,EAAEC,gCAAe,CAAC,MAAM;AAEzF;AACA,IAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,4BAA4B,EAAE;AACpE,IAAA,MAAM,EAAAC,gBAAA;AACN,IAAA,QAAQ,EAAAC,oBAAA;AACR,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,MAAM,EAAE,gBAAgB;AAC3B,CAAA;AAED,4BAA4B,CAAC,WAAW,GAAG,8BAA8B;;;;;;;;;"}

package/dynamic-mixins/Context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseModalContext } from '@alfalab/core-components-base-modal';
+export declare const ModalContext: import("react").Context<BaseModalContext>;

package/dynamic-mixins/Context.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dynamicMixins = require('@alfalab/core-components-base-modal/dynamic-mixins');
+
+var ModalContext = dynamicMixins.BaseModalContext;
+
+exports.ModalContext = ModalContext;
+//# sourceMappingURL=Context.js.map

package/dynamic-mixins/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../src/Context.tsx"],"sourcesContent":["import { BaseModalContext } from '@alfalab/core-components-base-modal';\n\nexport const ModalContext = BaseModalContext;\n"],"names":["BaseModalContext"],"mappings":";;;;;;AAEO,IAAM,YAAY,GAAGA;;;;"}

package/dynamic-mixins/ResponsiveContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TResponsiveModalContext } from './typings';
+export declare const ResponsiveContext: React.Context<TResponsiveModalContext>;