@alfalab/core-components 27.12.0 → 27.14.0

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

@@ -722,44 +722,44 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.select-with-tags__tag_po7r2 {
+.select-with-tags__tag_1o1xy {
     padding: 0;
     padding-left: var(--gap-m);
     margin: var(--gap-2xs);
     cursor: default
 }
-.select-with-tags__tag_po7r2:active:not(:disabled) {
+.select-with-tags__tag_1o1xy:active:not(:disabled) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
     }
-.select-with-tags__tag_po7r2:hover:not(:disabled):not(:active) {
+.select-with-tags__tag_1o1xy:hover:not(:disabled):not(:active) {
         background-color: var(--tag-background-color-checked);
         color: var(--tag-text-color-checked);
     }
-.select-with-tags__tag_po7r2 > span {
+.select-with-tags__tag_1o1xy > span {
         width: 100%;
         height: 100%;
     }
-.select-with-tags__tagNoClose_po7r2 {
+.select-with-tags__tagNoClose_1o1xy {
     padding-right: var(--gap-m);
 }
-.select-with-tags__tagContentWrap_po7r2 {
+.select-with-tags__tagContentWrap_1o1xy {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     height: 100%;
     cursor: pointer;
 }
-.select-with-tags__tagCross_po7r2 {
+.select-with-tags__tagCross_1o1xy {
     padding-right: var(--gap-xs);
     height: 100%
 }
-.select-with-tags__tagCross_po7r2:hover {
+.select-with-tags__tagCross_1o1xy:hover {
         opacity: 0.7;
     }
-.select-with-tags__tagCross_po7r2:active {
+.select-with-tags__tagCross_1o1xy:active {
         opacity: 0.5;
     }
-.select-with-tags__tagCross_po7r2 svg {
+.select-with-tags__tagCross_1o1xy svg {
         height: 100%;
     }

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

@@ -7,7 +7,7 @@ import '../../../../tag/modern';
 import { Tag } from '../tag/component.js';
 import { calculateTotalElementsPerRow } from '../../utils/calculate-collapse-size.js';
 
-var styles = {"component":"select-with-tags__component_n28vj","xl":"select-with-tags__xl_n28vj","contentWrapper":"select-with-tags__contentWrapper_n28vj","l":"select-with-tags__l_n28vj","m":"select-with-tags__m_n28vj","s":"select-with-tags__s_n28vj","contentWrapperVertical":"select-with-tags__contentWrapperVertical_n28vj","hasLabel":"select-with-tags__hasLabel_n28vj","hasTags":"select-with-tags__hasTags_n28vj","addons":"select-with-tags__addons_n28vj","field":"select-with-tags__field_n28vj","input":"select-with-tags__input_n28vj","block":"select-with-tags__block_n28vj","focusVisible":"select-with-tags__focusVisible_n28vj","placeholder":"select-with-tags__placeholder_n28vj","addons-size-m":"select-with-tags__addons-size-m_n28vj","addons-size-l":"select-with-tags__addons-size-l_n28vj","addons-size-xl":"select-with-tags__addons-size-xl_n28vj","label":"select-with-tags__label_n28vj"};
+var styles = {"component":"select-with-tags__component_6ms9h","xl":"select-with-tags__xl_6ms9h","contentWrapper":"select-with-tags__contentWrapper_6ms9h","l":"select-with-tags__l_6ms9h","m":"select-with-tags__m_6ms9h","s":"select-with-tags__s_6ms9h","contentWrapperVertical":"select-with-tags__contentWrapperVertical_6ms9h","hasLabel":"select-with-tags__hasLabel_6ms9h","hasTags":"select-with-tags__hasTags_6ms9h","addons":"select-with-tags__addons_6ms9h","field":"select-with-tags__field_6ms9h","input":"select-with-tags__input_6ms9h","block":"select-with-tags__block_6ms9h","focusVisible":"select-with-tags__focusVisible_6ms9h","placeholder":"select-with-tags__placeholder_6ms9h","addons-size-m":"select-with-tags__addons-size-m_6ms9h","addons-size-l":"select-with-tags__addons-size-l_6ms9h","addons-size-xl":"select-with-tags__addons-size-xl_6ms9h","label":"select-with-tags__label_6ms9h"};
 require('./index.css');
 
 const TagList = ({ size = 'xl', open, disabled, placeholder, selectedMultiple = [], Arrow, innerProps, className, fieldClassName, value = '', autocomplete, label, valueRenderer, onInput, handleDeleteTag, collapseTagList, moveInputToNewLine, transformCollapsedTagText, transformTagText, isPopoverOpen, handleUpdatePopover, Tag: Tag$1 = Tag, ...restProps }) => {

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

@@ -722,59 +722,59 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.select-with-tags__component_n28vj.select-with-tags__xl_n28vj .select-with-tags__contentWrapper_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__xl_6ms9h .select-with-tags__contentWrapper_6ms9h {
     padding: var(--gap-l) var(--gap-m);
 }
-.select-with-tags__component_n28vj.select-with-tags__l_n28vj .select-with-tags__contentWrapper_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__l_6ms9h .select-with-tags__contentWrapper_6ms9h {
     padding: var(--gap-m) var(--gap-m);
 }
-.select-with-tags__component_n28vj.select-with-tags__m_n28vj .select-with-tags__contentWrapper_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__m_6ms9h .select-with-tags__contentWrapper_6ms9h {
     padding: var(--gap-m) var(--gap-s);
 }
-.select-with-tags__component_n28vj.select-with-tags__s_n28vj .select-with-tags__contentWrapper_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__s_6ms9h .select-with-tags__contentWrapper_6ms9h {
     padding: var(--gap-s) var(--gap-s);
 }
-.select-with-tags__component_n28vj.select-with-tags__xl_n28vj .select-with-tags__contentWrapperVertical_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__xl_6ms9h .select-with-tags__contentWrapperVertical_6ms9h {
     padding-top: var(--gap-l);
     padding-bottom: var(--gap-l);
 }
-.select-with-tags__component_n28vj.select-with-tags__l_n28vj .select-with-tags__contentWrapperVertical_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__l_6ms9h .select-with-tags__contentWrapperVertical_6ms9h {
     padding-top: var(--gap-m);
     padding-bottom: var(--gap-m);
 }
-.select-with-tags__component_n28vj.select-with-tags__m_n28vj .select-with-tags__contentWrapperVertical_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__m_6ms9h .select-with-tags__contentWrapperVertical_6ms9h {
     padding-top: var(--gap-s);
     padding-bottom: var(--gap-s);
 }
-.select-with-tags__component_n28vj.select-with-tags__s_n28vj .select-with-tags__contentWrapperVertical_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__s_6ms9h .select-with-tags__contentWrapperVertical_6ms9h {
     padding-top: var(--gap-xs);
     padding-bottom: var(--gap-xs);
 }
-.select-with-tags__component_n28vj .select-with-tags__contentWrapper_n28vj {
+.select-with-tags__component_6ms9h .select-with-tags__contentWrapper_6ms9h {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     margin: var(--gap-2xs-neg)
 }
-.select-with-tags__component_n28vj .select-with-tags__contentWrapper_n28vj:not(.select-with-tags__contentWrapperVertical_n28vj):not(.select-with-tags__hasLabel_n28vj) {
+.select-with-tags__component_6ms9h .select-with-tags__contentWrapper_6ms9h:not(.select-with-tags__contentWrapperVertical_6ms9h):not(.select-with-tags__hasLabel_6ms9h) {
         padding-top: 0;
         padding-bottom: 0;
     }
-.select-with-tags__component_n28vj .select-with-tags__contentWrapper_n28vj.select-with-tags__hasLabel_n28vj {
+.select-with-tags__component_6ms9h .select-with-tags__contentWrapper_6ms9h.select-with-tags__hasLabel_6ms9h {
         margin-top: var(--gap-xs);
         padding-bottom: var(--gap-xs);
     }
-.select-with-tags__component_n28vj .select-with-tags__contentWrapper_n28vj.select-with-tags__hasTags_n28vj.select-with-tags__hasLabel_n28vj {
+.select-with-tags__component_6ms9h .select-with-tags__contentWrapper_6ms9h.select-with-tags__hasTags_6ms9h.select-with-tags__hasLabel_6ms9h {
         margin-top: var(--gap-m);
         padding-bottom: var(--gap-s);
     }
-.select-with-tags__component_n28vj:hover .select-with-tags__addons_n28vj {
+.select-with-tags__component_6ms9h:hover .select-with-tags__addons_6ms9h {
     opacity: 0.7;
 }
-.select-with-tags__field_n28vj {
+.select-with-tags__field_6ms9h {
     cursor: pointer;
 }
-.select-with-tags__input_n28vj {
+.select-with-tags__input_6ms9h {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -789,23 +789,23 @@
     font-family: var(--font-family);
     color: var(--color-light-text-primary)
 }
-.select-with-tags__input_n28vj:disabled {
+.select-with-tags__input_6ms9h:disabled {
         color: var(--color-light-text-secondary);
     }
-.select-with-tags__input_n28vj::placeholder {
+.select-with-tags__input_6ms9h::placeholder {
         color: var(--color-light-text-secondary);
     }
-.select-with-tags__input_n28vj:focus::placeholder {
+.select-with-tags__input_6ms9h:focus::placeholder {
         color: var(--color-light-text-tertiary);
     }
-.select-with-tags__block_n28vj {
+.select-with-tags__block_6ms9h {
     min-width: 100%;
 }
-.select-with-tags__focusVisible_n28vj {
+.select-with-tags__focusVisible_6ms9h {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }
-.select-with-tags__placeholder_n28vj {
+.select-with-tags__placeholder_6ms9h {
     display: flex;
     align-items: center;
     min-height: 28px;
@@ -813,36 +813,36 @@
     color: var(--color-light-text-tertiary);
     pointer-events: none;
 }
-.select-with-tags__addons_n28vj {
+.select-with-tags__addons_6ms9h {
     align-self: flex-start;
     padding-top: var(--gap-s);
 }
-.select-with-tags__addons-size-m_n28vj {
+.select-with-tags__addons-size-m_6ms9h {
     padding-top: var(--gap-m);
 }
-.select-with-tags__addons-size-l_n28vj {
+.select-with-tags__addons-size-l_6ms9h {
     padding-top: var(--gap-l);
 }
-.select-with-tags__addons-size-xl_n28vj {
+.select-with-tags__addons-size-xl_6ms9h {
     padding-top: var(--gap-xl);
 }
-.select-with-tags__component_n28vj.select-with-tags__s_n28vj .select-with-tags__label_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__s_6ms9h .select-with-tags__label_6ms9h {
     top: 5px;
     left: 12px;
 }
-.select-with-tags__component_n28vj.select-with-tags__m_n28vj .select-with-tags__label_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__m_6ms9h .select-with-tags__label_6ms9h {
     top: 8px;
     left: 12px;
 }
-.select-with-tags__component_n28vj.select-with-tags__l_n28vj .select-with-tags__label_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__l_6ms9h .select-with-tags__label_6ms9h {
     top: 10px;
     left: 16px;
 }
-.select-with-tags__component_n28vj.select-with-tags__xl_n28vj .select-with-tags__label_n28vj {
+.select-with-tags__component_6ms9h.select-with-tags__xl_6ms9h .select-with-tags__label_6ms9h {
     top: 14px;
     left: 16px;
 }
-.select-with-tags__component_n28vj .select-with-tags__label_n28vj {
+.select-with-tags__component_6ms9h .select-with-tags__label_6ms9h {
     top: 14px;
     align-items: flex-start;
     height: auto;

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

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../tslib.es6-b34309fc.js');
+require('../tslib.es6-9f8bb791.js');
 require('../../select');
 var utils_match = require('./match.js');
 

package/select-with-tags/utils/match.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-b34309fc.js');
+var tslib_es6 = require('../tslib.es6-9f8bb791.js');
 var coreComponentsSelect = require('../../select');
 
 var defaultMatch = function (option, inputValue) {

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+/// <reference types="react-transition-group" />
+import React from 'react';
+import { DrawerProps } from "../drawer";
+type SidePanelDesktopProps = DrawerProps & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: 's';
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+declare const SidePanelDesktop: React.ForwardRefExoticComponent<Pick<import("packages/base-modal/src").BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
+    contentTransitionProps?: Partial<TimeoutProps<undefined>> | Partial<EndListenerProps<undefined>> | undefined;
+} & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: "s" | undefined;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
+    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps>;
+    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
+};
+export { SidePanelDesktopProps, SidePanelDesktop };

package/side-panel/Component.desktop.js

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-46fc2207.js');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsDrawer = require('../drawer');
+var mergeRefs = require('react-merge-refs');
+require('../base-modal');
+require('./Context.js');
+require('./components/header/Component.js');
+require('../icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('./components/closer/Component.js');
+var components_header_Component_desktop = require('./components/header/Component.desktop.js');
+require('./components/content/Component.js');
+var components_content_Component_desktop = require('./components/content/Component.desktop.js');
+require('./components/footer/Component.js');
+var components_footer_Component_desktop = require('./components/footer/Component.desktop.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+
+var styles = {"s":"side-panel__s_1ysbr","hidden":"side-panel__hidden_1ysbr"};
+require('./desktop.css');
+
+var transitions = {"appear":"side-panel__appear_1hpwc","enter":"side-panel__enter_1hpwc","appearActive":"side-panel__appearActive_1hpwc","enterActive":"side-panel__enterActive_1hpwc","exit":"side-panel__exit_1hpwc","exitActive":"side-panel__exitActive_1hpwc","exitDone":"side-panel__exitDone_1hpwc"};
+require('./transitions.desktop.css');
+
+var SidePanelDesktopComponent = React.forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, children = _a.children, className = _a.className, wrapperClassName = _a.wrapperClassName, _c = _a.contentTransitionProps, contentTransitionProps = _c === void 0 ? {} : _c, backdropProps = _a.backdropProps, restProps = tslib_es6.__rest(_a, ["size", "children", "className", "wrapperClassName", "contentTransitionProps", "backdropProps"]);
+    var modalRef = React.useRef(null);
+    return (React__default['default'].createElement(coreComponentsDrawer.Drawer, tslib_es6.__assign({}, restProps, { ref: mergeRefs__default['default']([ref, modalRef]), wrapperClassName: wrapperClassName, className: cn__default['default'](className, styles[size], styles.hidden), backdropProps: backdropProps, contentTransitionProps: tslib_es6.__assign({ classNames: transitions }, contentTransitionProps) }), React__default['default'].Children.map(children, function (child) {
+        return React.isValidElement(child) ? React.cloneElement(child, { size: size }) : child;
+    })));
+});
+var SidePanelDesktop = Object.assign(SidePanelDesktopComponent, {
+    Content: components_content_Component_desktop.ContentDesktop,
+    Header: components_header_Component_desktop.HeaderDesktop,
+    Footer: components_footer_Component_desktop.FooterDesktop,
+});
+
+exports.SidePanelDesktop = SidePanelDesktop;

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseModalProps } from "../base-modal";
+type SidePanelMobileProps = BaseModalProps & {
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+declare const SidePanelMobile: React.ForwardRefExoticComponent<BaseModalProps & {
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./components/content/Component").ContentProps>;
+    Header: React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps>;
+};
+export { SidePanelMobileProps, SidePanelMobile };

package/side-panel/Component.mobile.js

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-46fc2207.js');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsBaseModal = require('../base-modal');
+require('./Context.js');
+require('./components/header/Component.js');
+require('../icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('./components/closer/Component.js');
+require('./components/content/Component.js');
+require('./components/footer/Component.js');
+require('@alfalab/icons-glyph/CrossMIcon');
+var components_header_Component_mobile = require('./components/header/Component.mobile.js');
+var components_content_Component_mobile = require('./components/content/Component.mobile.js');
+var components_footer_Component_mobile = require('./components/footer/Component.mobile.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"component":"side-panel__component_y5ha2"};
+require('./mobile.css');
+
+var transitions = {"appear":"side-panel__appear_kozij","enter":"side-panel__enter_kozij","appearActive":"side-panel__appearActive_kozij","enterActive":"side-panel__enterActive_kozij","exit":"side-panel__exit_kozij","exitActive":"side-panel__exitActive_kozij","exitDone":"side-panel__exitDone_kozij"};
+require('./transitions.mobile.css');
+
+var SidePanelMobileComponent = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, transitionProps = _a.transitionProps, restProps = tslib_es6.__rest(_a, ["children", "className", "transitionProps"]);
+    return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, tslib_es6.__assign({}, restProps, { ref: ref, transitionProps: tslib_es6.__assign({ classNames: transitions }, transitionProps), className: cn__default['default'](className, styles.component) }), children));
+});
+var SidePanelMobile = Object.assign(SidePanelMobileComponent, {
+    Content: components_content_Component_mobile.ContentMobile,
+    Header: components_header_Component_mobile.HeaderMobile,
+    Footer: components_footer_Component_mobile.FooterMobile,
+});
+
+exports.SidePanelMobile = SidePanelMobile;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/// <reference types="react-transition-group" />
+import React from 'react';
+import { SidePanelDesktopProps } from "./Component.desktop";
+import { SidePanelMobileProps } from "./Component.mobile";
+type SidePanelResponsiveProps = SidePanelMobileProps & SidePanelDesktopProps;
+declare const SidePanelResponsive: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
+    hasCloser?: boolean | undefined;
+} & Pick<import("packages/base-modal/src").BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
+    contentTransitionProps?: Partial<TimeoutProps<undefined>> | Partial<EndListenerProps<undefined>> | undefined;
+} & {
+    size?: "s" | undefined;
+    hasCloser?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
+    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>;
+    Closer: React.FC<import("./components/closer/Component").CloserProps>;
+};
+export { SidePanelResponsiveProps, SidePanelResponsive };

package/side-panel/Component.responsive.js

@@ -0,0 +1,60 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-46fc2207.js');
+var React = require('react');
+require('classnames');
+require('../drawer');
+require('react-merge-refs');
+require('../base-modal');
+require('./Context.js');
+require('./components/header/Component.js');
+require('../icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+var components_closer_Component = require('./components/closer/Component.js');
+require('./components/header/Component.desktop.js');
+require('./components/content/Component.js');
+require('./components/content/Component.desktop.js');
+require('./components/footer/Component.js');
+require('./components/footer/Component.desktop.js');
+var Component_desktop = require('./Component.desktop.js');
+require('@alfalab/icons-glyph/CrossMIcon');
+require('./components/header/Component.mobile.js');
+require('./components/content/Component.mobile.js');
+require('./components/footer/Component.mobile.js');
+var Component_mobile = require('./Component.mobile.js');
+var hooks = require('@alfalab/hooks');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ResponsiveContext = React__default['default'].createContext({
+    view: 'desktop',
+});
+function createResponsive(desktop, mobile) {
+    function ResponsiveChild(props) {
+        var view = React.useContext(ResponsiveContext).view;
+        var Child = view === 'desktop' ? desktop : mobile;
+        return React__default['default'].createElement(Child, tslib_es6.__assign({}, props));
+    }
+    return ResponsiveChild;
+}
+var SidePanelResponsiveComponent = React.forwardRef(function (_a, ref) {
+    var children = _a.children, restProps = tslib_es6.__rest(_a, ["children"]);
+    var view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var contextValue = React.useMemo(function () { return ({ view: view }); }, [view]);
+    var Component = view === 'desktop' ? Component_desktop.SidePanelDesktop : Component_mobile.SidePanelMobile;
+    return (React__default['default'].createElement(ResponsiveContext.Provider, { value: contextValue },
+        React__default['default'].createElement(Component, tslib_es6.__assign({ ref: ref }, restProps), children)));
+});
+var SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
+    Header: createResponsive(Component_desktop.SidePanelDesktop.Header, Component_mobile.SidePanelMobile.Header),
+    Content: createResponsive(Component_desktop.SidePanelDesktop.Content, Component_mobile.SidePanelMobile.Content),
+    Footer: createResponsive(Component_desktop.SidePanelDesktop.Footer, Component_mobile.SidePanelMobile.Footer),
+    Closer: components_closer_Component.Closer,
+});
+
+exports.SidePanelResponsive = SidePanelResponsive;

package/side-panel/Context.d.ts

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

package/side-panel/Context.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsBaseModal = require('../base-modal');
+
+var ModalContext = coreComponentsBaseModal.BaseModalContext;
+
+exports.ModalContext = ModalContext;

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

@@ -0,0 +1,29 @@
+import { ButtonHTMLAttributes, ElementType, FC } from 'react';
+import { IconButtonProps } from "../../../icon-button";
+type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: 'left' | 'right';
+    /**
+     * Размер кнопки
+     */
+    size?: IconButtonProps['size'];
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+};
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
+declare const Closer: FC<CloserProps>;
+export { CloserProps, Closer };

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

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../tslib.es6-46fc2207.js');
+var React = require('react');
+var cn = require('classnames');
+require('../../../base-modal');
+var Context = require('../../Context.js');
+var coreComponentsIconButton = require('../../../icon-button');
+var CrossHeavyMIcon = require('@alfalab/icons-glyph/CrossHeavyMIcon');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"closer":"side-panel__closer_8pghy","button":"side-panel__button_8pghy","sticky":"side-panel__sticky_8pghy"};
+require('./index.css');
+
+/**
+ * @deprecated Компонент только для внутреннего использования. Используйте <Header />
+ */
+var Closer = function (_a) {
+    var _b;
+    var className = _a.className, _c = _a.size, size = _c === void 0 ? 's' : _c, sticky = _a.sticky, _d = _a.icon, icon = _d === void 0 ? CrossHeavyMIcon.CrossHeavyMIcon : _d, restProps = tslib_es6.__rest(_a, ["className", "size", "sticky", "icon"]);
+    var onClose = React.useContext(Context.ModalContext).onClose;
+    var handleClick = React.useCallback(function (event) {
+        onClose(event, 'closerClick');
+    }, [onClose]);
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.closer, className, (_b = {},
+            _b[styles.sticky] = sticky,
+            _b)) },
+        React__default['default'].createElement(coreComponentsIconButton.IconButton, tslib_es6.__assign({ size: size, className: styles.button, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps))));
+};
+
+exports.Closer = Closer;