@alfalab/core-components 39.2.1 → 39.3.0

package/switch/esm/Component.js

@@ -4,7 +4,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"switch__component_j63ov","start":"switch__start_j63ov","center":"switch__center_j63ov","addons":"switch__addons_j63ov","block":"switch__block_j63ov","switch":"switch__switch_j63ov","content":"switch__content_j63ov","label":"switch__label_j63ov","hint":"switch__hint_j63ov","reversed":"switch__reversed_j63ov","checked":"switch__checked_j63ov","disabled":"switch__disabled_j63ov","inactive":"switch__inactive_j63ov","focused":"switch__focused_j63ov"};
+var styles = {"component":"switch__component_e6gkt","start":"switch__start_e6gkt","center":"switch__center_e6gkt","addons":"switch__addons_e6gkt","block":"switch__block_e6gkt","switch":"switch__switch_e6gkt","content":"switch__content_e6gkt","label":"switch__label_e6gkt","hint":"switch__hint_e6gkt","reversed":"switch__reversed_e6gkt","checked":"switch__checked_e6gkt","disabled":"switch__disabled_e6gkt","inactive":"switch__inactive_e6gkt","focused":"switch__focused_e6gkt"};
 require('./index.css');
 
 var Switch = forwardRef(function (_a, ref) {

package/switch/esm/index.css

@@ -47,7 +47,7 @@
 
     /* inactive */
     --switch-inactive-color: var(--color-light-border-underline);
-} .switch__component_j63ov {
+} .switch__component_e6gkt {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -55,20 +55,20 @@
     border: 0;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .switch__component_j63ov input {
+} .switch__component_e6gkt input {
     opacity: 0;
     position: absolute;
-} .switch__start_j63ov {
+} .switch__start_e6gkt {
     align-items: flex-start;
-} .switch__center_j63ov {
+} .switch__center_e6gkt {
     align-items: center;
-} .switch__addons_j63ov {
+} .switch__addons_e6gkt {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
-} .switch__block_j63ov {
+} .switch__block_e6gkt {
     width: 100%;
-} .switch__switch_j63ov {
+} .switch__switch_e6gkt {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -79,7 +79,7 @@
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-} .switch__switch_j63ov:before {
+} .switch__switch_e6gkt:before {
     content: '';
     position: absolute;
     top: 0;
@@ -91,56 +91,56 @@
     background-color: var(--color-light-graphic-primary-inverted);
     box-sizing: border-box;
     transition: transform 0.2s ease;
-} .switch__content_j63ov {
+} .switch__content_e6gkt {
     margin-left: var(--gap-s);
     flex-grow: 1;
-} .switch__label_j63ov {
+} .switch__label_e6gkt {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
-} .switch__label_j63ov:not(:only-child) {
+} .switch__label_e6gkt:not(:only-child) {
     margin-bottom: var(--gap-2xs);
-} .switch__hint_j63ov {
+} .switch__hint_e6gkt {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--switch-hint-color);
-} /* Reversed state */ .switch__component_j63ov.switch__reversed_j63ov {
+} /* Reversed state */ .switch__component_e6gkt.switch__reversed_e6gkt {
     flex-direction: row-reverse;
-} .switch__reversed_j63ov .switch__content_j63ov {
+} .switch__reversed_e6gkt .switch__content_e6gkt {
     margin-right: var(--gap-m);
     margin-left: 0;
-} .switch__reversed_j63ov .switch__addons_j63ov {
+} .switch__reversed_e6gkt .switch__addons_e6gkt {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-m);
-} /* Checked state */ .switch__checked_j63ov .switch__switch_j63ov {
+} /* Checked state */ .switch__checked_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-checked-bg-color);
     border-color: var(--switch-checked-border-color);
-} .switch__checked_j63ov .switch__switch_j63ov:before {
+} .switch__checked_e6gkt .switch__switch_e6gkt:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
-} /* Disabled state */ .switch__disabled_j63ov {
+} /* Disabled state */ .switch__disabled_e6gkt {
     cursor: var(--disabled-cursor);
-} .switch__disabled_j63ov .switch__switch_j63ov {
+} .switch__disabled_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color);
-} .switch__disabled_j63ov .switch__label_j63ov {
+} .switch__disabled_e6gkt .switch__label_e6gkt {
     color: var(--switch-disabled-color);
-} .switch__disabled_j63ov .switch__hint_j63ov {
+} .switch__disabled_e6gkt .switch__hint_e6gkt {
     color: var(--switch-disabled-color);
-} /* Inactive */ .switch__inactive_j63ov {
+} /* Inactive */ .switch__inactive_e6gkt {
     cursor: var(--disabled-cursor);
-} .switch__inactive_j63ov .switch__switch_j63ov {
+} .switch__inactive_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color)
-} .switch__inactive_j63ov .switch__switch_j63ov:before {
+} .switch__inactive_e6gkt .switch__switch_e6gkt:before {
         background-color: var(--switch-inactive-color);
-    } /* Focused state */ .switch__focused_j63ov .switch__switch_j63ov {
+    } /* Focused state */ .switch__focused_e6gkt .switch__switch_e6gkt {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/switch/index.css

@@ -47,7 +47,7 @@
 
     /* inactive */
     --switch-inactive-color: var(--color-light-border-underline);
-} .switch__component_j63ov {
+} .switch__component_e6gkt {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -55,20 +55,20 @@
     border: 0;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .switch__component_j63ov input {
+} .switch__component_e6gkt input {
     opacity: 0;
     position: absolute;
-} .switch__start_j63ov {
+} .switch__start_e6gkt {
     align-items: flex-start;
-} .switch__center_j63ov {
+} .switch__center_e6gkt {
     align-items: center;
-} .switch__addons_j63ov {
+} .switch__addons_e6gkt {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
-} .switch__block_j63ov {
+} .switch__block_e6gkt {
     width: 100%;
-} .switch__switch_j63ov {
+} .switch__switch_e6gkt {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -79,7 +79,7 @@
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-} .switch__switch_j63ov:before {
+} .switch__switch_e6gkt:before {
     content: '';
     position: absolute;
     top: 0;
@@ -91,56 +91,56 @@
     background-color: var(--color-light-graphic-primary-inverted);
     box-sizing: border-box;
     transition: transform 0.2s ease;
-} .switch__content_j63ov {
+} .switch__content_e6gkt {
     margin-left: var(--gap-s);
     flex-grow: 1;
-} .switch__label_j63ov {
+} .switch__label_e6gkt {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
-} .switch__label_j63ov:not(:only-child) {
+} .switch__label_e6gkt:not(:only-child) {
     margin-bottom: var(--gap-2xs);
-} .switch__hint_j63ov {
+} .switch__hint_e6gkt {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--switch-hint-color);
-} /* Reversed state */ .switch__component_j63ov.switch__reversed_j63ov {
+} /* Reversed state */ .switch__component_e6gkt.switch__reversed_e6gkt {
     flex-direction: row-reverse;
-} .switch__reversed_j63ov .switch__content_j63ov {
+} .switch__reversed_e6gkt .switch__content_e6gkt {
     margin-right: var(--gap-m);
     margin-left: 0;
-} .switch__reversed_j63ov .switch__addons_j63ov {
+} .switch__reversed_e6gkt .switch__addons_e6gkt {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-m);
-} /* Checked state */ .switch__checked_j63ov .switch__switch_j63ov {
+} /* Checked state */ .switch__checked_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-checked-bg-color);
     border-color: var(--switch-checked-border-color);
-} .switch__checked_j63ov .switch__switch_j63ov:before {
+} .switch__checked_e6gkt .switch__switch_e6gkt:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
-} /* Disabled state */ .switch__disabled_j63ov {
+} /* Disabled state */ .switch__disabled_e6gkt {
     cursor: var(--disabled-cursor);
-} .switch__disabled_j63ov .switch__switch_j63ov {
+} .switch__disabled_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color);
-} .switch__disabled_j63ov .switch__label_j63ov {
+} .switch__disabled_e6gkt .switch__label_e6gkt {
     color: var(--switch-disabled-color);
-} .switch__disabled_j63ov .switch__hint_j63ov {
+} .switch__disabled_e6gkt .switch__hint_e6gkt {
     color: var(--switch-disabled-color);
-} /* Inactive */ .switch__inactive_j63ov {
+} /* Inactive */ .switch__inactive_e6gkt {
     cursor: var(--disabled-cursor);
-} .switch__inactive_j63ov .switch__switch_j63ov {
+} .switch__inactive_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color)
-} .switch__inactive_j63ov .switch__switch_j63ov:before {
+} .switch__inactive_e6gkt .switch__switch_e6gkt:before {
         background-color: var(--switch-inactive-color);
-    } /* Focused state */ .switch__focused_j63ov .switch__switch_j63ov {
+    } /* Focused state */ .switch__focused_e6gkt .switch__switch_e6gkt {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/switch/modern/Component.js

@@ -3,7 +3,7 @@ import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 
-const styles = {"component":"switch__component_j63ov","start":"switch__start_j63ov","center":"switch__center_j63ov","addons":"switch__addons_j63ov","block":"switch__block_j63ov","switch":"switch__switch_j63ov","content":"switch__content_j63ov","label":"switch__label_j63ov","hint":"switch__hint_j63ov","reversed":"switch__reversed_j63ov","checked":"switch__checked_j63ov","disabled":"switch__disabled_j63ov","inactive":"switch__inactive_j63ov","focused":"switch__focused_j63ov"};
+const styles = {"component":"switch__component_e6gkt","start":"switch__start_e6gkt","center":"switch__center_e6gkt","addons":"switch__addons_e6gkt","block":"switch__block_e6gkt","switch":"switch__switch_e6gkt","content":"switch__content_e6gkt","label":"switch__label_e6gkt","hint":"switch__hint_e6gkt","reversed":"switch__reversed_e6gkt","checked":"switch__checked_e6gkt","disabled":"switch__disabled_e6gkt","inactive":"switch__inactive_e6gkt","focused":"switch__focused_e6gkt"};
 require('./index.css');
 
 const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {

package/switch/modern/index.css

@@ -47,7 +47,7 @@
 
     /* inactive */
     --switch-inactive-color: var(--color-light-border-underline);
-} .switch__component_j63ov {
+} .switch__component_e6gkt {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -55,20 +55,20 @@
     border: 0;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-} .switch__component_j63ov input {
+} .switch__component_e6gkt input {
     opacity: 0;
     position: absolute;
-} .switch__start_j63ov {
+} .switch__start_e6gkt {
     align-items: flex-start;
-} .switch__center_j63ov {
+} .switch__center_e6gkt {
     align-items: center;
-} .switch__addons_j63ov {
+} .switch__addons_e6gkt {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
-} .switch__block_j63ov {
+} .switch__block_e6gkt {
     width: 100%;
-} .switch__switch_j63ov {
+} .switch__switch_e6gkt {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -79,7 +79,7 @@
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-} .switch__switch_j63ov:before {
+} .switch__switch_e6gkt:before {
     content: '';
     position: absolute;
     top: 0;
@@ -91,56 +91,56 @@
     background-color: var(--color-light-graphic-primary-inverted);
     box-sizing: border-box;
     transition: transform 0.2s ease;
-} .switch__content_j63ov {
+} .switch__content_e6gkt {
     margin-left: var(--gap-s);
     flex-grow: 1;
-} .switch__label_j63ov {
+} .switch__label_e6gkt {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
-} .switch__label_j63ov:not(:only-child) {
+} .switch__label_e6gkt:not(:only-child) {
     margin-bottom: var(--gap-2xs);
-} .switch__hint_j63ov {
+} .switch__hint_e6gkt {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--switch-hint-color);
-} /* Reversed state */ .switch__component_j63ov.switch__reversed_j63ov {
+} /* Reversed state */ .switch__component_e6gkt.switch__reversed_e6gkt {
     flex-direction: row-reverse;
-} .switch__reversed_j63ov .switch__content_j63ov {
+} .switch__reversed_e6gkt .switch__content_e6gkt {
     margin-right: var(--gap-m);
     margin-left: 0;
-} .switch__reversed_j63ov .switch__addons_j63ov {
+} .switch__reversed_e6gkt .switch__addons_e6gkt {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-m);
-} /* Checked state */ .switch__checked_j63ov .switch__switch_j63ov {
+} /* Checked state */ .switch__checked_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-checked-bg-color);
     border-color: var(--switch-checked-border-color);
-} .switch__checked_j63ov .switch__switch_j63ov:before {
+} .switch__checked_e6gkt .switch__switch_e6gkt:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
-} /* Disabled state */ .switch__disabled_j63ov {
+} /* Disabled state */ .switch__disabled_e6gkt {
     cursor: var(--disabled-cursor);
-} .switch__disabled_j63ov .switch__switch_j63ov {
+} .switch__disabled_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color);
-} .switch__disabled_j63ov .switch__label_j63ov {
+} .switch__disabled_e6gkt .switch__label_e6gkt {
     color: var(--switch-disabled-color);
-} .switch__disabled_j63ov .switch__hint_j63ov {
+} .switch__disabled_e6gkt .switch__hint_e6gkt {
     color: var(--switch-disabled-color);
-} /* Inactive */ .switch__inactive_j63ov {
+} /* Inactive */ .switch__inactive_e6gkt {
     cursor: var(--disabled-cursor);
-} .switch__inactive_j63ov .switch__switch_j63ov {
+} .switch__inactive_e6gkt .switch__switch_e6gkt {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color)
-} .switch__inactive_j63ov .switch__switch_j63ov:before {
+} .switch__inactive_e6gkt .switch__switch_e6gkt:before {
         background-color: var(--switch-inactive-color);
-    } /* Focused state */ .switch__focused_j63ov .switch__switch_j63ov {
+    } /* Focused state */ .switch__focused_e6gkt .switch__switch_e6gkt {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/system-message/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SystemMessageBaseProps } from "./types";
+declare const SystemMessage: React.FC<SystemMessageBaseProps>;
+export { SystemMessage };

package/system-message/Component.desktop.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { SystemMessageDesktopProps } from "./types";
+declare const SystemMessageDesktop: React.FC<SystemMessageDesktopProps> & {
+    Graphic: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Title: React.FC<{
+        className?: string | undefined;
+        tag?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        children: React.ReactNode;
+    }>;
+    Subtitle: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Caption: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Controls: React.FC<{
+        direction?: "column" | "row" | undefined;
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+};
+export { SystemMessageDesktop };

package/system-message/Component.desktop.js

@@ -0,0 +1,24 @@
+var tslib = require('tslib');
+var React = require('react');
+var Component = require('./Component.js');
+var utils = require('./utils.js');
+require('classnames');
+require('./Context.js');
+require('./components/caption/Component.js');
+require('./getDataTestId-1916afae.js');
+require('./components/controls/Component.js');
+require('./components/graphic/Component.js');
+require('./components/subtitle/Component.js');
+require('./components/title/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var SystemMessageDesktopComponent = function (_a) {
+    var children = _a.children, restProps = tslib.__rest(_a, ["children"]);
+    return (React__default.default.createElement(Component.SystemMessage, tslib.__assign({}, restProps, { view: 'desktop' }), children));
+};
+var SystemMessageDesktop = utils.createCompound(SystemMessageDesktopComponent);
+
+exports.SystemMessageDesktop = SystemMessageDesktop;

package/system-message/Component.js

@@ -0,0 +1,56 @@
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var Context = require('./Context.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 desktopStyles = {"component":"system-message__component_40bsl"};
+require('./desktop.css');
+
+var styles = {"component":"system-message__component_ruzaf","fullHeight":"system-message__fullHeight_ruzaf","first":"system-message__first_ruzaf","last":"system-message__last_ruzaf","controls":"system-message__controls_ruzaf","both":"system-message__both_ruzaf"};
+require('./index.css');
+
+var mobileStyles = {"component":"system-message__component_1flvl"};
+require('./mobile.css');
+
+var isControlsElement = function (obj) {
+    return typeof obj === 'object' && obj.type.displayName === 'Controls';
+};
+var SystemMessage = function (_a) {
+    var _b;
+    var view = _a.view, dataTestId = _a.dataTestId, children = _a.children, fullHeight = _a.fullHeight, className = _a.className;
+    var contextValue = React.useMemo(function () { return ({ dataTestId: dataTestId, view: view, fullHeight: fullHeight }); }, [view, dataTestId, fullHeight]);
+    var renderChildrenWithFullHeight = function () {
+        var renderCloned = function (child, extraClassName) {
+            return React__default.default.cloneElement(child, tslib.__assign(tslib.__assign({}, child.props), { className: cn__default.default(child.props.className, extraClassName) }));
+        };
+        var childrenArray = React__default.default.Children.toArray(children);
+        var childrenCount = childrenArray.length;
+        return childrenArray.map(function (child, idx) {
+            var isFirstElement = idx === 0;
+            var isLastElement = idx + 1 === childrenCount;
+            if (isFirstElement && React.isValidElement(child)) {
+                if (isLastElement) {
+                    return renderCloned(child, styles.both);
+                }
+                return renderCloned(child, styles.first);
+            }
+            if (isLastElement && React.isValidElement(child)) {
+                return renderCloned(child, isControlsElement(child) ? styles.controls : styles.last);
+            }
+            return child;
+        });
+    };
+    return (React__default.default.createElement(Context.SystemMessageContext.Provider, { value: contextValue },
+        React__default.default.createElement("div", { "data-test-id": dataTestId, className: cn__default.default(styles.component, className, (_b = {},
+                _b[mobileStyles.component] = view === 'mobile',
+                _b[desktopStyles.component] = view === 'desktop',
+                _b[styles.fullHeight] = fullHeight,
+                _b)) }, fullHeight ? renderChildrenWithFullHeight() : children)));
+};
+
+exports.SystemMessage = SystemMessage;

package/system-message/Component.mobile.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { SystemMessageMobileProps } from "./types";
+declare const SystemMessageMobile: React.FC<SystemMessageMobileProps> & {
+    Graphic: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Title: React.FC<{
+        className?: string | undefined;
+        tag?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        children: React.ReactNode;
+    }>;
+    Subtitle: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Caption: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Controls: React.FC<{
+        direction?: "column" | "row" | undefined;
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+};
+export { SystemMessageMobile };

package/system-message/Component.mobile.js

@@ -0,0 +1,24 @@
+var tslib = require('tslib');
+var React = require('react');
+var Component = require('./Component.js');
+var utils = require('./utils.js');
+require('classnames');
+require('./Context.js');
+require('./components/caption/Component.js');
+require('./getDataTestId-1916afae.js');
+require('./components/controls/Component.js');
+require('./components/graphic/Component.js');
+require('./components/subtitle/Component.js');
+require('./components/title/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var SystemMessageMobileComponent = function (_a) {
+    var children = _a.children, restProps = tslib.__rest(_a, ["children"]);
+    return (React__default.default.createElement(Component.SystemMessage, tslib.__assign({}, restProps, { view: 'mobile' }), children));
+};
+var SystemMessageMobile = utils.createCompound(SystemMessageMobileComponent);
+
+exports.SystemMessageMobile = SystemMessageMobile;

package/system-message/Components.responsive.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { SystemMessageResponsiveProps } from "./types";
+declare const SystemMessageResponsive: React.FC<SystemMessageResponsiveProps> & {
+    Graphic: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Title: React.FC<{
+        className?: string | undefined;
+        tag?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        children: React.ReactNode;
+    }>;
+    Subtitle: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Caption: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Controls: React.FC<{
+        direction?: "column" | "row" | undefined;
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+};
+export { SystemMessageResponsive };

package/system-message/Components.responsive.js

@@ -0,0 +1,30 @@
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../mq');
+var Component = require('./Component.js');
+var utils = require('./utils.js');
+require('classnames');
+require('./Context.js');
+require('./components/caption/Component.js');
+require('./getDataTestId-1916afae.js');
+require('./components/controls/Component.js');
+require('./components/graphic/Component.js');
+require('./components/subtitle/Component.js');
+require('./components/title/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var isClient = function () { return typeof window !== 'undefined'; };
+
+var SystemMessageResponsiveComponent = function (_a) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var getDefaultValue = function () { return (isClient() ? window.matchMedia(query).matches : false); };
+    var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];
+    return (React__default.default.createElement(Component.SystemMessage, tslib.__assign({}, restProps, { view: isDesktop ? 'desktop' : 'mobile' }), children));
+};
+var SystemMessageResponsive = utils.createCompound(SystemMessageResponsiveComponent);
+
+exports.SystemMessageResponsive = SystemMessageResponsive;

package/system-message/Context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TSystemMessageContext } from "./types";
+declare const SystemMessageContext: React.Context<TSystemMessageContext>;
+export { SystemMessageContext };

package/system-message/Context.js

@@ -0,0 +1,11 @@
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var SystemMessageContext = React__default.default.createContext({
+    view: 'desktop',
+});
+
+exports.SystemMessageContext = SystemMessageContext;

package/system-message/components/caption/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type CaptionProps = {
+    /**
+     * Дополнительно имя класса
+     */
+    className?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: React.ReactNode;
+};
+declare const Caption: React.FC<CaptionProps>;
+export { Caption };