profinansy-ui-lib 3.3.60 → 3.3.62

package/dist/components/uikit/Modal/Modal.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./Modal.styled"));
+const useTransitionModal_1 = require("../../../hooks/useTransitionModal");
+const Portal_1 = require("../Portal");
+const Close3_svg_1 = __importDefault(require("../../../icons/Close3.svg"));
+const classnames_1 = __importDefault(require("classnames"));
+const styled_components_1 = require("styled-components");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const theme_const_1 = require("../../../theme/theme.const");
+const MODAL_ROOT_ELEMENT_ID = 'react-modals';
+const Modal = (props) => {
+    const { animation, showModal, content, handleClose } = (0, useTransitionModal_1.useTransitionModal)({
+        isOpen: props.open,
+        children: props.children,
+        onClose: props.onClose
+    });
+    if (!showModal)
+        return null;
+    return (react_1.default.createElement(Content, Object.assign({}, props, { onClose: handleClose, animation: animation }), content));
+};
+exports.Modal = Modal;
+const Content = ({ onClose, children, title, subtitle, showCloseButton = true, styleContent, styleContentInside, classNameWrapper, styleBackground, styleWrapper, classNameBackground, classNameContent, classNameHeader, animation, disableClosing = false, titlePosition = 'left', isOverflowAuto = false, rightContent, bottomContent, adaptiveRightContent, containerId = MODAL_ROOT_ELEMENT_ID }) => {
+    const [bottomHeight, setBottomHeight] = (0, react_1.useState)(0);
+    const bottomRef = (0, react_1.useRef)(null);
+    const handleCloseBackground = () => {
+        if (disableClosing)
+            return;
+        handleClose();
+    };
+    (0, react_1.useEffect)(() => {
+        if (bottomRef.current) {
+            const { height } = bottomRef.current.getBoundingClientRect();
+            setBottomHeight(height);
+        }
+        else {
+            setBottomHeight(0);
+        }
+    }, [bottomRef === null || bottomRef === void 0 ? void 0 : bottomRef.current]);
+    const handleClose = () => {
+        if (onClose)
+            onClose();
+    };
+    (0, useTransitionModal_1.useControlsForModal)(handleCloseBackground);
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    return (react_1.default.createElement(Portal_1.Portal, { id: containerId },
+        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+            react_1.default.createElement(Styled.Wrapper, { className: (0, classnames_1.default)(classNameWrapper, 'modal-wrapper'), open: animation, style: styleWrapper, isOverflowAuto: isOverflowAuto },
+                react_1.default.createElement(Styled.Layout, { className: classNameBackground, onClick: handleCloseBackground, style: styleBackground }),
+                react_1.default.createElement(Styled.ContentWrapper, null,
+                    react_1.default.createElement(Styled.Content, { isOverflowAuto: isOverflowAuto, open: animation, showCloseButton: showCloseButton, className: (0, classnames_1.default)(classNameContent, 'modal-content'), style: styleContent },
+                        showCloseButton && (react_1.default.createElement(Styled.CloseButton, { onClick: onClose },
+                            react_1.default.createElement(Close3_svg_1.default, { className: "modal-closeBtn" }))),
+                        react_1.default.createElement(Styled.ContentInside, { bottomHeight: bottomHeight, isOverflowAuto: isOverflowAuto, style: styleContentInside, className: 'modal-contentInside' },
+                            !!title && (react_1.default.createElement(Styled.Header, { className: (0, classnames_1.default)(classNameHeader, 'modal-header') },
+                                react_1.default.createElement(Styled.FirstLineHeader, { adaptiveRightContent: adaptiveRightContent },
+                                    react_1.default.createElement(Styled.Title, { titlePosition: titlePosition, tag: "h5", variant: "header5-Bold" }, title),
+                                    rightContent || null),
+                                !!subtitle && (react_1.default.createElement(Styled.Subtitle, { tag: "span", variant: "text-Regular" }, subtitle)))),
+                            children),
+                        bottomContent && (react_1.default.createElement(Styled.BottomContent, { ref: bottomRef }, bottomContent))))))));
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/uikit/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/uikit/Modal/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/components/uikit/Modal/Modal.stories.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const _1 = require(".");
+const react_1 = __importStar(require("react"));
+const Button_1 = require("../Button");
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const TextButton_1 = require("../TextButton");
+exports.default = {
+    title: 'Components/Modal',
+    component: _1.Modal,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/yiCswWljV8KfikRKdjnnc7/Ui-kit-WEB?type=design&node-id=12187-37032&mode=design&t=GOXwsDhzc9d9gKvN-4'
+        }
+    }
+};
+const Modal = () => {
+    const [open1, setOpen1] = (0, react_1.useState)(false);
+    const [open2, setOpen2] = (0, react_1.useState)(false);
+    const [open4, setOpen4] = (0, react_1.useState)(false);
+    const [open5, setOpen5] = (0, react_1.useState)(false);
+    const [open6, setOpen6] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Modal"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u044B\u0445 \u043E\u043A\u043E\u043D." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Button_1.Button, { onClick: () => setOpen1(true), text: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C" }),
+            react_1.default.createElement(_1.Modal, { open: open1, onClose: () => setOpen1(false), disableClosing: true, bottomContent: react_1.default.createElement(Button_1.Button, { text: "test" }) },
+                react_1.default.createElement("div", { style: {
+                        width: '500px',
+                        background: '#D9D9D9',
+                        borderRadius: 12,
+                        height: 500
+                    } }))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0445\u0435\u0434\u0435\u0440\u0430"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u044F\u0442\u044C \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A, \u043F\u043E\u0434\u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A. \u041C\u043E\u0436\u043D\u043E \u043E\u0442\u043A\u043B\u044E\u0447\u0438\u0442\u044C\n      \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u043A\u0440\u0435\u0441\u0442\u0438\u043A\u0430." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Button_1.Button, { onClick: () => setOpen2(true), text: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C" }),
+            react_1.default.createElement(_1.Modal, { open: open2, onClose: () => setOpen2(false), title: 'Определение профиля инвестора по методу Goldman Sachs', subtitle: 'Subtitle modal', showCloseButton: false, adaptiveRightContent: 500, rightContent: react_1.default.createElement(TextButton_1.TextButton, { text: "\u041F\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044C \u0432 \u0446\u0435\u043B\u044C" }) },
+                react_1.default.createElement("div", { style: {
+                        width: '500px',
+                        background: '#D9D9D9',
+                        borderRadius: 12,
+                        height: 190
+                    } }))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041A\u0430\u0441\u0442\u043E\u043C\u0438\u0437\u0430\u0446\u0438\u044F"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043C\u0435\u043D\u044F\u0442\u044C \u0441\u0442\u0438\u043B\u0438 \u0444\u043E\u043D\u0430 \u0438 \u0441\u0430\u043C\u043E\u0433\u043E \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u043E\u043A\u043D\u0430" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Button_1.Button, { onClick: () => setOpen4(true), text: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C" }),
+            react_1.default.createElement(_1.Modal, { open: open4, onClose: () => setOpen4(false), title: 'Test modal', styleContent: {
+                    width: '100%',
+                    maxWidth: '600px',
+                    minWidth: '400px',
+                    borderRadius: '0px'
+                }, styleBackground: { background: 'rgba(40, 40, 40, 0.8)' } }, "Content")),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0412\u0435\u0440\u0442\u0438\u043A\u0430\u043B\u044C\u043D\u044B\u0439 \u0441\u043A\u0440\u043E\u043B\u043B"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u043E \u0440\u0430\u0441\u0442\u044F\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u043E \u0432\u044B\u0441\u043E\u0442\u0435 \u043D\u0430 \u0432\u0435\u043B\u0438\u0447\u0438\u043D\u0443 \u043E\u043A\u043D\u0430 \u043F\u043B\u044E\u0441 \u043E\u0442\u0441\u0442\u0443\u043F\u044B.\n      \u0415\u0441\u043B\u0438 \u043A\u043E\u043D\u0442\u0435\u043D\u0442 \u043D\u0435 \u0432\u043B\u0435\u0437\u0430\u0435\u0442, \u0442\u043E \u043F\u043E\u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0441\u043A\u0440\u043E\u043B\u043B. \u041F\u0440\u0438\u0447\u0435\u043C \u0441\u043A\u0440\u043E\u043B\u043B \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u043E\u0432. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E \u0440\u0430\u0441\u0442\u044F\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044F\n      \u043D\u0430 \u0432\u044B\u0441\u043E\u0442\u0443 \u044D\u043A\u0440\u0430\u043D\u0430 \u0438 \u0434\u043E\u0431\u0430\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0441\u043A\u0440\u043E\u043B\u043B \u0443 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430. \u041D\u043E \u0441 \u0442\u0430\u043A\u0438\u043C \u0441\u043B\u0443\u0447\u0430\u0435\u043C \u043C\u043E\u0433\u0443\u0442 \u0431\u044B\u0442\u044C \u043F\u0440\u043E\u0431\u043B\u0435\u043C\u044B, \u043A\u043E\u0433\u0434\u0430 \u043C\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C \u0440\u0430\u0437\u043B\u0438\u0447\u043D\u044B\u0435\n      \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u0432\u043D\u0443\u0442\u0440\u0438, \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, select. \u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0430\u0434\u043E, \u0447\u0442\u043E\u0431\u044B \u043A\u043E\u043D\u0442\u0435\u043D\u0442 \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435 \u043E\u0431\u0440\u0435\u0437\u0430\u043B\u0441\u044F \u0447\u0435\u0440\u0435\u0437 overflow, \u0442\u043E \u043F\u0440\u043E\u0441\u0442\u043E \u0434\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u043F\u0440\u043E\u043F\u0441 <b>isOverflowAuto</b>." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Button_1.Button, { onClick: () => setOpen5(true), text: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C" }),
+            react_1.default.createElement(_1.Modal, { open: open5, onClose: () => setOpen5(false), title: 'Test modal', styleContent: {
+                    width: '100%',
+                    maxWidth: '600px'
+                }, styleBackground: { background: 'rgba(40, 40, 40, 0.8)' } },
+                react_1.default.createElement("div", { style: {
+                        width: '500px',
+                        background: '#D9D9D9',
+                        borderRadius: 12,
+                        height: 2000
+                    } }))),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Button_1.Button, { onClick: () => setOpen6(true), text: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C" }),
+            react_1.default.createElement(_1.Modal, { isOverflowAuto: true, open: open6, onClose: () => setOpen6(false), title: 'Test modal', styleContent: {
+                    width: '100%',
+                    maxWidth: '600px'
+                }, styleBackground: { background: 'rgba(40, 40, 40, 0.8)' } },
+                react_1.default.createElement("div", { style: {
+                        width: '500px',
+                        background: '#D9D9D9',
+                        borderRadius: 12,
+                        height: 2000
+                    } })))));
+};
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.stories.js.map

package/dist/components/uikit/Modal/Modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Modal/Modal.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/uikit/Modal/Modal.styled.js

@@ -0,0 +1,190 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseButton = exports.BottomContent = exports.Subtitle = exports.Title = exports.FirstLineHeader = exports.Header = exports.ContentInside = exports.Content = exports.ContentWrapper = exports.Layout = exports.Wrapper = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Scroll_1 = require("../../../styles/Scroll");
+const common_1 = require("../../../constants/common");
+const Typography_1 = require("../Typography");
+const animation_3 = require("../../../constants/animation/animation");
+const zIndex_1 = require("../../../constants/zIndex");
+const contentAnimation = (open) => (0, styled_components_1.keyframes) `
+  from {
+    transform: ${open ? 'scale(0.8)' : 'scale(1)'};
+  }
+  to {
+    transform: ${open ? 'scale(1)' : 'scale(0.8)'};
+  }
+`;
+const contentAnimationMobile = (open) => (0, styled_components_1.keyframes) `
+  from {
+    translate: ${open ? '0 100%' : '0 0'};
+  }
+  to {
+    translate: ${open ? '0 0' : '0 100%'};
+  }
+`;
+exports.Wrapper = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: ${zIndex_1.zIndex.zIndex7};
+  opacity: 0;
+  transition: opacity 0.3s ${animation_3.AnimationFunctions.animation_2};
+  overflow: ${(props) => (props.isOverflowAuto ? 'auto' : 'hidden')};
+  ${(props) => props.open &&
+    (0, styled_components_1.css) `
+      opacity: 1;
+      pointer-events: auto;
+    `}
+`;
+exports.Layout = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: ${(props) => props.theme.other.gray};
+`;
+exports.ContentWrapper = styled_components_1.default.div `
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+exports.Content = styled_components_1.default.div `
+  position: relative;
+  padding: 24px 16px;
+  border-radius: 24px;
+  box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.2);
+  background: ${(props) => props.theme.background.content};
+  margin: 20px ${(props) => (props.showCloseButton ? '50px' : '24px')};
+  max-height: ${(props) => props.isOverflowAuto ? 'auto' : 'calc(100dvh - 30px)'};
+  min-width: 300px;
+  max-width: 100vw;
+  animation: ${(props) => (0, styled_components_1.css) `
+      ${contentAnimation(props.open)} 0.3s ${animation_3.AnimationFunctions.animation_2} forwards
+    `};
+  @media (max-width: ${common_1.MOBILE_WIDTH}px) {
+    border-radius: 24px 24px 0 0;
+    padding: 16px 8px;
+    max-width: 100%;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    max-height: 90dvh;
+    margin: 0;
+    animation: ${(props) => (0, styled_components_1.css) `
+        ${contentAnimationMobile(props.open)} 0.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards
+      `};
+  }
+`;
+exports.ContentInside = styled_components_1.default.div `
+  height: 100%;
+  max-height: ${(props) => props.isOverflowAuto
+    ? 'auto'
+    : `calc(100dvh - ${props.bottomHeight}px - 78px)`};
+  overflow-y: ${(props) => (props.isOverflowAuto ? 'visible' : 'auto')};
+  padding: 0 8px;
+  margin-bottom: ${(props) => props.bottomHeight}px;
+  ${Scroll_1.Scroll};
+  @media (max-width: ${common_1.MOBILE_WIDTH}px) {
+    max-height: calc(90dvh - 48px);
+    overflow-y: auto;
+    ${Scroll_1.NotVisibleScroll}
+  }
+`;
+exports.Header = styled_components_1.default.div `
+  position: relative;
+  margin-bottom: 20px;
+`;
+exports.FirstLineHeader = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  ${(props) => props.adaptiveRightContent &&
+    (0, styled_components_1.css) `
+      @media (max-width: ${(props) => props.adaptiveRightContent}px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+      }
+    `}
+`;
+exports.Title = (0, styled_components_1.default)(Typography_1.Typography) `
+  width: 100%;
+  color: ${(props) => props.theme.text.primary};
+  margin: 0;
+  text-align: ${(props) => props.titlePosition};
+`;
+exports.Subtitle = (0, styled_components_1.default)(Typography_1.Typography) `
+  display: inline-block;
+  color: ${(props) => props.theme.text.secondary};
+  padding-top: 4px;
+  margin: 0;
+`;
+exports.BottomContent = styled_components_1.default.div `
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  border-radius: 0 0 24px 24px;
+  border-top: 0.5px solid ${(props) => props.theme.stroke.tertiary};
+  background: ${(props) => props.theme.background.content};
+  padding: 24px;
+  @media (max-width: ${common_1.MOBILE_WIDTH}px) {
+    padding: 16px;
+  }
+`;
+exports.CloseButton = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  right: -48px;
+  width: 48px;
+  min-width: 48px;
+  height: 48px;
+  min-height: 48px;
+  transition: ${() => `all 0.3s ${animation_3.AnimationFunctions.animation_1}`};
+  &:hover {
+    opacity: 0.8;
+    transform: scale(0.85);
+  }
+  @media (max-width: 600px) {
+    right: 0;
+    top: -48px;
+  }
+`;
+//# sourceMappingURL=Modal.styled.js.map

package/dist/components/uikit/Modal/Modal.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/Modal/Modal.styled.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAA0D;AAC1D,mDAAiE;AACjE,sDAAwD;AACxD,8CAA0C;AAC1C,sEAA2E;AAC3E,sDAAkD;AAElD,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAA,6BAAS,EAAA;;iBAEpC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;;;iBAGhC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;;CAEhD,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,IAAa,EAAE,EAAE,CAAC,IAAA,6BAAS,EAAA;;iBAE1C,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;;;iBAGvB,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;;CAEvC,CAAA;AAEY,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,CAA4C;;;;;;aAMhE,eAAM,CAAC,OAAO;;6BAEE,8BAAkB,CAAC,WAAW;cAC7C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/D,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,IAAI;IACV,IAAA,uBAAG,EAAA;;;KAGF;CACJ,CAAA;AAEY,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;gBAMhB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI;CAChD,CAAA;AAEY,QAAA,cAAc,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;CAKvC,CAAA;AAEY,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,CAI/B;;;;;gBAKc,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;iBACxC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;gBACrD,CAAC,KAAK,EAAE,EAAE,CACtB,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB;;;eAG1C,CAAC,KAAK,EAAE,EAAE,CACrB,IAAA,uBAAG,EAAA;QACC,gBAAgB,CAChB,KAAK,CAAC,IAAI,CACX,SAAS,8BAAkB,CAAC,WAAW;KACzC;uBACkB,qBAAY;;;;;;;;;;iBAUlB,CAAC,KAAK,EAAE,EAAE,CACrB,IAAA,uBAAG,EAAA;UACC,sBAAsB,CACtB,KAAK,CAAC,IAAI,CACX;OACF;;CAEN,CAAA;AAEY,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,CAGrC;;gBAEc,CAAC,KAAK,EAAE,EAAE,CACtB,KAAK,CAAC,cAAc;IAClB,CAAC,CAAC,MAAM;IACR,CAAC,CAAC,iBAAiB,KAAK,CAAC,YAAY,YAAY;gBACvC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;;mBAEnD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY;IAC5C,eAAM;uBACa,qBAAY;;;MAG7B,yBAAgB;;CAErB,CAAA;AAEY,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAG/B,CAAA;AAEY,QAAA,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAkC;;;;;IAKvE,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,oBAAoB;IAC1B,IAAA,uBAAG,EAAA;2BACoB,CAAC,KAAuC,EAAE,EAAE,CAC7D,KAAK,CAAC,oBAAoB;;;;;KAK/B;CACJ,CAAA;AAEY,QAAA,KAAK,GAAG,IAAA,2BAAM,EAAC,uBAAU,CAAC,CAErC;;WAES,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;gBAE9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa;CAC7C,CAAA;AAEY,QAAA,QAAQ,GAAG,IAAA,2BAAM,EAAC,uBAAU,CAAC,CAAA;;WAE/B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;;;CAG/C,CAAA;AAEY,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;4BAMX,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;gBAClD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;;uBAElC,qBAAY;;;CAGlC,CAAA;AAEY,QAAA,WAAW,GAAG,2BAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;gBAexB,GAAG,EAAE,CAAC,YAAY,8BAAkB,CAAC,WAAW,EAAE;;;;;;;;;CASjE,CAAA"}

package/dist/components/uikit/Modal/Modal.typed.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Modal.typed.js.map

package/dist/components/uikit/Modal/Modal.typed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.typed.js","sourceRoot":"","sources":["../../../../src/components/uikit/Modal/Modal.typed.ts"],"names":[],"mappings":""}

package/dist/components/uikit/Modal/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+var Modal_1 = require("./Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
+//# sourceMappingURL=index.js.map

package/dist/components/uikit/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/Modal/index.ts"],"names":[],"mappings":";;;AAAA,iCAA+B;AAAtB,8FAAA,KAAK,OAAA"}

package/dist/components/uikit/ModalMobile/ModalMobile.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalMobile = void 0;
+const react_1 = __importDefault(require("react"));
+const useTransitionModal_1 = require("../../../hooks/useTransitionModal");
+const Portal_1 = require("../Portal");
+const TextButton_1 = require("../TextButton");
+const Styled = __importStar(require("./ModalMobile.styled"));
+const styled_components_1 = require("styled-components");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const theme_const_1 = require("../../../theme/theme.const");
+const Close2_svg_1 = __importDefault(require("../../../icons/Close2.svg"));
+const MOBILE_MODAL_ROOT_ELEMENT_ID = 'react-sidebar';
+const ModalMobile = (props) => {
+    const { animation, showModal, content, handleClose } = (0, useTransitionModal_1.useTransitionModal)({
+        isOpen: props.isOpen,
+        children: props.children,
+        onClose: props.onClose
+    });
+    if (!showModal)
+        return null;
+    return (react_1.default.createElement(Content, Object.assign({}, props, { onClose: handleClose, animation: animation }), content));
+};
+exports.ModalMobile = ModalMobile;
+const Content = ({ title, leftButtonText, rightButtonText, children, animation, onClose, onLeftButton, onRightButton, closeIconVisible }) => {
+    const handleClose = () => {
+        if (onClose)
+            onClose();
+    };
+    (0, useTransitionModal_1.useControlsForModal)(onClose);
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    return (react_1.default.createElement(Portal_1.Portal, { id: MOBILE_MODAL_ROOT_ELEMENT_ID },
+        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+            react_1.default.createElement(Styled.Wrapper, { isOpen: animation },
+                react_1.default.createElement(Styled.Layout, { onClick: handleClose }),
+                react_1.default.createElement(Styled.Content, { isOpen: animation },
+                    react_1.default.createElement(Styled.Header, null,
+                        !!leftButtonText && (react_1.default.createElement(TextButton_1.TextButton, { text: leftButtonText, style: { color: '#F84708' }, onClick: onLeftButton })),
+                        react_1.default.createElement(Styled.Title, null, title),
+                        !!rightButtonText && (react_1.default.createElement(TextButton_1.TextButton, { text: rightButtonText, onClick: onRightButton })),
+                        closeIconVisible && (react_1.default.createElement(Styled.CloseButton, { onClick: handleClose },
+                            react_1.default.createElement(Close2_svg_1.default, { className: "modal-mobile-closeBtn" })))),
+                    react_1.default.createElement("div", null, children))))));
+};
+//# sourceMappingURL=ModalMobile.js.map

package/dist/components/uikit/ModalMobile/ModalMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalMobile.js","sourceRoot":"","sources":["../../../../src/components/uikit/ModalMobile/ModalMobile.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AAEzB,0EAG0C;AAC1C,sCAAkC;AAClC,8CAA0C;AAC1C,6DAA8C;AAG9C,yDAAiD;AACjD,gEAAsD;AACtD,4DAAoD;AACpD,2EAAiD;AAEjD,MAAM,4BAA4B,GAAG,eAAe,CAAA;AAEpD,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC1C,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,IAAA,uCAAkB,EAAC;QACxE,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,OAAO,EAAE,KAAK,CAAC,OAAO;KACvB,CAAC,CAAA;IAEF,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAA;IAE3B,OAAO,CACL,8BAAC,OAAO,oBAAK,KAAK,IAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,KAC3D,OAAO,CACA,CACX,CAAA;AACH,CAAC,CAAA;AAoDQ,kCAAW;AAlDpB,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,cAAc,EACd,eAAe,EACf,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,aAAa,EACb,gBAAgB,EACsB,EAAE,EAAE;IAC1C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,OAAO;YAAE,OAAO,EAAE,CAAA;IACxB,CAAC,CAAA;IAED,IAAA,wCAAmB,EAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,uBAAO,GAAE,CAAA;IAE1B,OAAO,CACL,8BAAC,eAAM,IAAC,EAAE,EAAE,4BAA4B;QACtC,8BAAC,iCAAa,IAAC,KAAK,EAAE,qBAAO,CAAC,IAAI,CAAC;YACjC,8BAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,SAAS;gBAC/B,8BAAC,MAAM,CAAC,MAAM,IAAC,OAAO,EAAE,WAAW,GAAI;gBACvC,8BAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,SAAS;oBAC/B,8BAAC,MAAM,CAAC,MAAM;wBACX,CAAC,CAAC,cAAc,IAAI,CACnB,8BAAC,uBAAU,IACT,IAAI,EAAE,cAAc,EACpB,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAC3B,OAAO,EAAE,YAAY,GACrB,CACH;wBACD,8BAAC,MAAM,CAAC,KAAK,QAAE,KAAK,CAAgB;wBACnC,CAAC,CAAC,eAAe,IAAI,CACpB,8BAAC,uBAAU,IAAC,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,aAAa,GAAI,CAC9D;wBACA,gBAAgB,IAAI,CACnB,8BAAC,MAAM,CAAC,WAAW,IAAC,OAAO,EAAE,WAAW;4BACtC,8BAAC,oBAAS,IAAC,SAAS,EAAC,uBAAuB,GAAG,CAC5B,CACtB,CACa;oBAChB,2CAAM,QAAQ,CAAO,CACN,CACF,CACH,CACT,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/components/uikit/ModalMobile/ModalMobile.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalMobile = void 0;
+const _1 = require(".");
+const react_1 = __importStar(require("react"));
+const Button_1 = require("../Button");
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+exports.default = {
+    title: 'Components',
+    component: _1.ModalMobile
+};
+const ModalMobile = () => {
+    const [open1, setOpen1] = (0, react_1.useState)(false);
+    const [open2, setOpen2] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u044B\u0445 \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u044B\u0445 \u043E\u043A\u043E\u043D" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Button_1.Button, { onClick: () => setOpen1(true), text: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C" }),
+            react_1.default.createElement(_1.ModalMobile, { isOpen: open1, onClose: () => setOpen1(false), title: 'Test modal', closeIconVisible: true },
+                react_1.default.createElement("div", { style: {
+                        width: '100%',
+                        background: '#D9D9D9',
+                        borderRadius: 12,
+                        height: '50vh'
+                    } }))),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E \u0441 \u043A\u043D\u043E\u043F\u043A\u0430\u043C\u0438 \u0441\u043F\u0440\u0430\u0432\u0430 \u0438 \u0441\u043B\u0435\u0432\u0430" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Button_1.Button, { onClick: () => setOpen2(true), text: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C" }),
+            react_1.default.createElement(_1.ModalMobile, { isOpen: open2, onClose: () => setOpen2(false), title: 'Test modal', rightButtonText: 'Ready', leftButtonText: 'Cancel' },
+                react_1.default.createElement("div", { style: {
+                        width: '100%',
+                        background: '#D9D9D9',
+                        borderRadius: 12,
+                        height: '50vh'
+                    } })))));
+};
+exports.ModalMobile = ModalMobile;
+//# sourceMappingURL=ModalMobile.stories.js.map

package/dist/components/uikit/ModalMobile/ModalMobile.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalMobile.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/ModalMobile/ModalMobile.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAA4C;AAC5C,+CAAuC;AAEvC,sCAAkC;AAClC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,kBAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,cAAS;CACrB,CAAA;AAEM,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEzC,OAAO,CACL;QACE,8BAAC,uBAAU,2DAAsB;QACjC,8BAAC,mCAAgB,IAAC,IAAI,EAAC,4UAA8D,GAAG;QACxF,8BAAC,2BAAY;YACX,8BAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,4CAAS,GAAG;YACxD,8BAAC,cAAS,IACR,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE,YAAY,EACnB,gBAAgB,EAAE,IAAI;gBAEtB,uCACE,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,UAAU,EAAE,SAAS;wBACrB,YAAY,EAAE,EAAE;wBAChB,MAAM,EAAE,MAAM;qBACf,GACD,CACQ,CACC;QACf,8BAAC,mCAAgB,IAAC,IAAI,EAAC,oNAA0C,GAAG;QACpE,8BAAC,2BAAY;YACX,8BAAC,eAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,4CAAS,GAAG;YACxD,8BAAC,cAAS,IACR,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE,YAAY,EACnB,eAAe,EAAE,OAAO,EACxB,cAAc,EAAE,QAAQ;gBAExB,uCACE,KAAK,EAAE;wBACL,KAAK,EAAE,MAAM;wBACb,UAAU,EAAE,SAAS;wBACrB,YAAY,EAAE,EAAE;wBAChB,MAAM,EAAE,MAAM;qBACf,GACD,CACQ,CACC,CACd,CACJ,CAAA;AACH,CAAC,CAAA;AAhDY,QAAA,WAAW,eAgDvB"}