profinansy-ui-lib 3.3.60 → 3.3.62

package/dist/components/uikit/Popup/Popup.js

@@ -0,0 +1,224 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = exports.PopupContent = exports.PopupTrigger = exports.usePopup = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./Popup.styled"));
+const PopupClose_svg_1 = __importDefault(require("../../../icons/PopupClose.svg"));
+const react_2 = require("@floating-ui/react");
+const Modal_1 = require("../Modal");
+const useGetVideoLink_1 = require("../../../hooks/useGetVideoLink");
+const styled_components_1 = require("styled-components");
+const theme_const_1 = require("../../../theme/theme.const");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const useBreakpoints_1 = require("../../../hooks/useBreakpoints");
+const useIsomorphicLayoutEffect_1 = require("../../../hooks/useIsomorphicLayoutEffect");
+const zIndex_1 = require("../../../constants/zIndex");
+const debounce_1 = require("../../../utils/debounce");
+const Typography_1 = require("../Typography");
+function usePopup({ placement = 'bottom', isHover = false }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [labelId, setLabelId] = (0, react_1.useState)();
+    const [descriptionId, setDescriptionId] = (0, react_1.useState)();
+    const arrowRef = (0, react_1.useRef)(null);
+    const data = (0, react_2.useFloating)({
+        placement,
+        open,
+        onOpenChange: setOpen,
+        whileElementsMounted: react_2.autoUpdate,
+        middleware: [
+            (0, react_2.arrow)({
+                element: arrowRef
+            }),
+            (0, react_2.offset)(10),
+            (0, react_2.flip)({
+                crossAxis: placement.includes('-'),
+                fallbackAxisSideDirection: 'end',
+                padding: 5
+            }),
+            (0, react_2.shift)({ padding: 10 })
+        ]
+    });
+    (0, react_1.useEffect)(() => {
+        const handleScroll = () => {
+            if (data.refs.reference.current) {
+                const targetRect = data.refs.reference.current.getBoundingClientRect();
+                if (targetRect.y < 60) {
+                    setOpen(false);
+                }
+            }
+        };
+        if (open) {
+            window.addEventListener('scroll', (0, debounce_1.debounce)(handleScroll, 300));
+        }
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        if (data.middlewareData.arrow &&
+            data.middlewareData.shift &&
+            arrowRef.current) {
+            const { x, y } = data.middlewareData.arrow;
+            const position = context === null || context === void 0 ? void 0 : context.placement.split('-')[0];
+            const settings = {};
+            if (position === 'top' || position === 'bottom') {
+                settings.left = `${x - data.middlewareData.shift.x}px`;
+                if (position === 'top') {
+                    settings.bottom = '0px';
+                }
+                else {
+                    settings.top = '-13px';
+                }
+            }
+            if (position === 'left' || position === 'right') {
+                settings.top = `${y - data.middlewareData.shift.y}px`;
+                if (position === 'left') {
+                    settings.right = '0px';
+                }
+                else {
+                    settings.left = '-13px';
+                }
+            }
+            Object.assign(arrowRef.current.style, settings);
+        }
+    }, [data]);
+    const context = data.context;
+    const hover = (0, react_2.useHover)(context, {
+        enabled: isHover,
+        move: false,
+        delay: {
+            open: 300,
+            close: 0
+        }
+    });
+    const click = (0, react_2.useClick)(context, { enabled: !isHover });
+    const dismiss = (0, react_2.useDismiss)(context);
+    const role = (0, react_2.useRole)(context);
+    const interactions = (0, react_2.useInteractions)([dismiss, role, click, hover]);
+    return react_1.default.useMemo(() => (Object.assign(Object.assign(Object.assign({ arrowRef,
+        open,
+        setOpen }, interactions), data), { labelId,
+        descriptionId,
+        setLabelId,
+        setDescriptionId })), [open, setOpen, interactions, data, labelId, descriptionId, arrowRef]);
+}
+exports.usePopup = usePopup;
+const PopupContext = react_1.default.createContext(null);
+const Popup = (_a) => {
+    var { content } = _a, restOptions = __rest(_a, ["content"]);
+    const popup = usePopup(Object.assign({}, restOptions));
+    return (react_1.default.createElement(PopupContext.Provider, { value: popup },
+        react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
+            react_1.default.createElement(exports.PopupTrigger, { isText: restOptions.isText, targetElement: restOptions.targetElement, targetClass: restOptions.targetClass }),
+            react_1.default.createElement(exports.PopupContent, { content: content }))));
+};
+exports.Popup = Popup;
+const PopupTrigger = ({ isText, targetElement, targetClass }) => {
+    const context = (0, react_1.useContext)(PopupContext);
+    const ref = (0, react_2.useMergeRefs)([context.refs.setReference]);
+    if (targetElement && react_1.default.isValidElement(targetElement)) {
+        return react_1.default.cloneElement(targetElement, context.getReferenceProps(Object.assign(Object.assign({ ref }, targetElement.props), { 'data-state': context.open ? 'open' : 'closed' })));
+    }
+    return (react_1.default.createElement(Styled.Trigger, Object.assign({ className: targetClass, ref: ref, type: "button", "data-state": context.open ? 'open' : 'closed' }, context.getReferenceProps()), isText ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Styled.Text, null,
+            react_1.default.createElement(Typography_1.Typography, { variant: "caption2-SemiBold", tag: "span" }, "\u041A\u0430\u043A \u044D\u0442\u043E \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442?")),
+        react_1.default.createElement(Styled.TextHintOnMobile, null))) : (react_1.default.createElement(Styled.Hint, null))));
+};
+exports.PopupTrigger = PopupTrigger;
+const PopupContent = ({ content }) => {
+    const [videoOpen, setVideoOpen] = (0, react_1.useState)(false);
+    const _a = (0, react_1.useContext)(PopupContext), { context: floatingContext, setLabelId, setDescriptionId } = _a, context = __rest(_a, ["context", "setLabelId", "setDescriptionId"]);
+    const ref = (0, react_2.useMergeRefs)([context.refs.setFloating]);
+    const idLabel = (0, react_2.useId)();
+    const idDescription = (0, react_2.useId)();
+    const [title, description, link, videoLink] = content !== null && content !== void 0 ? content : [];
+    const { link: iframeLink } = (0, useGetVideoLink_1.useGetVideoLink)({ videoLink });
+    const { xs } = (0, useBreakpoints_1.useBreakpoints)();
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(() => {
+        setLabelId(idLabel);
+        setDescriptionId(idDescription);
+        return () => {
+            setLabelId(undefined);
+            setDescriptionId(undefined);
+        };
+    }, [idLabel, idDescription, setLabelId, setDescriptionId]);
+    const handleCloseVideo = () => {
+        setVideoOpen(false);
+    };
+    const modalStyle = {
+        padding: '0px',
+        background: 'transparent',
+        maxWidth: '700px',
+        maxHeight: xs ? '400px' : '540px',
+        width: '100%',
+        height: '100%'
+    };
+    const { styles: transitionStyles } = (0, react_2.useTransitionStyles)(floatingContext, {
+        duration: {
+            open: 100,
+            close: 100
+        },
+        initial: {
+            opacity: 0,
+            transform: 'scale(0.8)'
+        }
+    });
+    if (!floatingContext.open)
+        return null;
+    return (react_1.default.createElement(react_2.FloatingPortal, null,
+        react_1.default.createElement(react_2.FloatingFocusManager, { context: floatingContext, modal: false },
+            react_1.default.createElement("div", Object.assign({ ref: ref, style: Object.assign({ zIndex: zIndex_1.zIndex.zIndex8 }, context.floatingStyles), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps()),
+                react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+                    react_1.default.createElement("div", { style: transitionStyles },
+                        react_1.default.createElement(Styled.Tooltip, { mode: mode },
+                            react_1.default.createElement(react_2.FloatingArrow, { ref: context.arrowRef, context: floatingContext, tipRadius: 2, stroke: mode === 'light' ? '#f0f0f0' : theme_const_1.palette[mode].stroke.contrast, strokeWidth: 1, fill: theme_const_1.palette[mode].background.field }),
+                            react_1.default.createElement(Styled.Content, null,
+                                react_1.default.createElement(Styled.Close, { onClick: () => context.setOpen(false) },
+                                    react_1.default.createElement(PopupClose_svg_1.default, null)),
+                                react_1.default.createElement(Styled.Title, { id: idLabel, dangerouslySetInnerHTML: { __html: title || '' } }),
+                                !!videoLink && (react_1.default.createElement(Styled.PlayBtn, { onClick: () => setVideoOpen(true) },
+                                    react_1.default.createElement("img", { width: 280, height: 140, src: "https://storage.yandexcloud.net/public-files.profinansy.ru/images/suggestion-video-preview.png", alt: "video-preview" }))),
+                                react_1.default.createElement(Styled.Description, { id: idDescription, dangerouslySetInnerHTML: { __html: description || '' } }),
+                                link && (react_1.default.createElement(Styled.Link, { href: link, target: "_blank", rel: "noreferrer" }, "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435...")))))),
+                react_1.default.createElement(Modal_1.Modal, { open: videoOpen, styleContent: modalStyle, styleContentInside: { padding: '0px' }, styleWrapper: { zIndex: 300000 }, onClose: handleCloseVideo },
+                    react_1.default.createElement(Styled.IframeWrapper, null,
+                        react_1.default.createElement(Styled.Ifram, { src: iframeLink, allowFullScreen: true })))))));
+};
+exports.PopupContent = PopupContent;
+//# sourceMappingURL=Popup.js.map

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

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

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

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const Popup_1 = require("./Popup");
+exports.default = {
+    title: 'Components/Popup',
+    component: Popup_1.Popup,
+    tags: ['autodocs']
+};
+const Target = styled_components_1.default.div `
+  width: 50px;
+  padding: 8px;
+  background: #ffffff;
+  display: flex;
+  justify-content: center;
+`;
+const content = [
+    'Динамика счета',
+    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ' +
+        "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, " +
+        'when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
+    'https://www.google.com/',
+    'https://www.youtube.com/watch?v=XqZsoesa55w'
+];
+const Popup = () => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Popup"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "Popup \u2014 \u044D\u0442\u043E \u0434\u043B\u0438\u043D\u043D\u0430\u044F \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u0441\u0430\u043C, \u043A\u043B\u0438\u043A\u043E\u043C \u043F\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0443." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Popup_1.Popup, { content: content })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0422\u0435\u043A\u0441\u0442\u043E\u0432\u044B\u0439 \u0442\u0430\u0440\u0433\u0435\u0442"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u0442\u0435\u043A\u0441\u0442\u043E\u0432\u044B\u0439 \u0442\u0430\u0440\u0433\u0435\u0442 \u044D\u043B\u0435\u043C\u0435\u043D\u0442." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Popup_1.Popup, { isText: true, content: content })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0417\u0430\u043C\u0435\u043D\u0430 \u0442\u0430\u0440\u0433\u0435\u0442"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044C \u0441\u0432\u043E\u0439 \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442, \u043F\u043E \u043A\u043E\u0442\u043E\u0440\u043E\u043C\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u044B\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043F\u043E\u043F\u0430\u043F." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Popup_1.Popup, { targetElement: react_1.default.createElement(Target, null, "click"), content: content })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041E\u0442\u043A\u0440\u044B\u0442\u0438\u0435 \u043F\u043E\u043F\u0430\u043F\u0430"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0418\u043D\u043E\u0433\u0434\u0430 \u043C\u043E\u0436\u0435\u0442 \u043F\u043E\u043D\u0430\u0434\u043E\u0431\u0438\u0442\u044C\u0441\u044F \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043F\u043E\u043F\u0430\u043F \u043F\u043E \u0445\u043E\u0432\u0435\u0440\u0443." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { display: 'flex', gap: 16 } },
+                react_1.default.createElement(Popup_1.Popup, { targetElement: react_1.default.createElement(Target, null, "click"), content: content }),
+                react_1.default.createElement(Popup_1.Popup, { targetElement: react_1.default.createElement(Target, null, "hover"), isHover: true, content: content })))));
+};
+exports.Popup = Popup;
+//# sourceMappingURL=Popup.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Popup/Popup.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB,0EAAsC;AACtC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,mCAA4C;AAE5C,kBAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,aAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAA;AAED,MAAM,MAAM,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;CAMxB,CAAA;AAED,MAAM,OAAO,GAAG;IACd,gBAAgB;IAChB,6EAA6E;QAC3E,gFAAgF;QAChF,8FAA8F;IAChG,yBAAyB;IACzB,6CAA6C;CAC9C,CAAA;AAEM,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,CACL;QACE,8BAAC,uBAAU,IAAC,KAAK,EAAE,IAAI,YAAoB;QAC3C,8BAAC,mCAAgB,IAAC,IAAI,EAAC,uaAAwF,GAAG;QAClH,8BAAC,2BAAY;YACX,8BAAC,aAAS,IAAC,OAAO,EAAE,OAAO,GAAI,CAClB;QACf,8BAAC,uBAAU,sGAA8B;QACzC,8BAAC,mCAAgB,IAAC,IAAI,EAAC,sOAA6C,GAAG;QACvE,8BAAC,2BAAY;YACX,8BAAC,aAAS,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAChC;QACf,8BAAC,uBAAU,oFAA2B;QACtC,8BAAC,mCAAgB,IAAC,IAAI,EAAC,kbAAoF,GAAG;QAC9G,8BAAC,2BAAY;YACX,8BAAC,aAAS,IAAC,aAAa,EAAE,8BAAC,MAAM,gBAAe,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD;QACf,8BAAC,uBAAU,gGAA6B;QACxC,8BAAC,mCAAgB,IAAC,IAAI,EAAC,uRAAsD,GAAG;QAChF,8BAAC,2BAAY;YACX,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE;gBACtC,8BAAC,aAAS,IAAC,aAAa,EAAE,8BAAC,MAAM,gBAAe,EAAE,OAAO,EAAE,OAAO,GAAI;gBACtE,8BAAC,aAAS,IACR,aAAa,EAAE,8BAAC,MAAM,gBAAe,EACrC,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,OAAO,GAChB,CACE,CACO,CACd,CACJ,CAAA;AACH,CAAC,CAAA;AAhCY,QAAA,KAAK,SAgCjB"}

package/dist/components/uikit/Popup/Popup.styled.d.ts

@@ -8,8 +8,9 @@ declare const Title: import("styled-components").StyledComponent<"span", import(
 declare const Link: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
 declare const Description: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const PlayBtn: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+declare const IframeWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const Ifram: import("styled-components").StyledComponent<"iframe", import("styled-components").DefaultTheme, {}, never>;
 declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const TextHintOnMobile: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object, string | number | symbol>;
 declare const Hint: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object, string | number | symbol>;
-export { Title, Content, PlayBtn, Link, Description, Ifram, Text, Hint, TextHintOnMobile };
+export { Title, Content, PlayBtn, Link, Description, IframeWrapper, Ifram, Text, Hint, TextHintOnMobile };

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

@@ -0,0 +1,208 @@
+"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.TextHintOnMobile = exports.Hint = exports.Text = exports.Ifram = exports.IframeWrapper = exports.Description = exports.Link = exports.PlayBtn = exports.Content = exports.Title = exports.Close = exports.Trigger = exports.Tooltip = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Scroll_1 = require("../../../styles/Scroll");
+const Hint_svg_1 = __importDefault(require("../../../icons/Hint.svg"));
+const animation_2 = require("../../../constants/animation/animation");
+const common_1 = require("../../../constants/common");
+exports.Tooltip = styled_components_1.default.div `
+  font-family: 'Manrope', sans-serif;
+  box-sizing: border-box;
+  width: 300px;
+  max-height: 360px;
+  overflow: hidden;
+  padding: 10px 0 10px 10px;
+  background-color: ${(props) => props.theme.background.field};
+  border-radius: 12px;
+  box-shadow: ${(props) => props.theme.shadow.overlay};
+  z-index: 9999999;
+  ${(props) => props.mode === 'dark' &&
+    (0, styled_components_1.css) `
+      border: 0.5px solid ${(props) => props.theme.stroke.contrast};
+    `}
+`;
+exports.Trigger = styled_components_1.default.button `
+  font-family: 'Manrope', sans-serif;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  cursor: pointer;
+`;
+const Content = styled_components_1.default.div `
+  max-height: 340px;
+  padding-right: 10px;
+  height: 100%;
+  overflow-y: auto;
+  white-space: break-spaces;
+  position: relative;
+  & a {
+    color: ${(props) => props.theme.text.accent};
+  }
+  & p {
+    margin: 0;
+  }
+  ${Scroll_1.Scroll}
+`;
+exports.Content = Content;
+exports.Close = styled_components_1.default.button `
+  background: transparent;
+  border: none;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  cursor: pointer;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.3s ${animation_2.AnimationFunctions.animation_1};
+  & path {
+    transition: fill 0.3s ${animation_2.AnimationFunctions.animation_1};
+    fill: ${(props) => props.theme.icons.secondary};
+  }
+  &:hover {
+    transform: scale(0.9);
+    & path {
+      fill: ${(props) => props.theme.icons.primary};
+    }
+  }
+`;
+const Title = styled_components_1.default.span `
+  font-weight: 500;
+  color: ${(props) => props.theme.text.primary};
+  font-size: 14px;
+  line-height: 16px;
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
+  padding-right: 20px;
+`;
+exports.Title = Title;
+const Link = styled_components_1.default.a `
+  font-size: 12px;
+  color: ${(props) => props.theme.text.accentSecondary};
+  text-align: left;
+  cursor: pointer;
+  display: block;
+  margin-top: 8px;
+  text-decoration: none;
+  transition: ${() => `color 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  &:hover {
+    color: ${(props) => props.theme.text.accent};
+  }
+`;
+exports.Link = Link;
+const Description = styled_components_1.default.div `
+  color: ${(props) => props.theme.text.primary};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  margin-top: 8px;
+  display: block;
+`;
+exports.Description = Description;
+const PlayBtn = styled_components_1.default.button `
+  all: unset;
+  cursor: pointer;
+  margin-top: 8px;
+  transition: ${() => `opacity 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+exports.PlayBtn = PlayBtn;
+const IframeWrapper = styled_components_1.default.div `
+  min-width: 700px;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  @media (max-width: ${common_1.TABLET_WIDTH}px) {
+    min-width: 400px;
+  }
+  @media (max-width: ${common_1.MOBILE_WIDTH}px) {
+    min-width: 100%;
+  }
+`;
+exports.IframeWrapper = IframeWrapper;
+const Ifram = styled_components_1.default.iframe `
+  border: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 24px;
+  @media (max-width: ${common_1.MOBILE_WIDTH}px) {
+    border-radius: 24px 24px 0 0;
+  }
+`;
+exports.Ifram = Ifram;
+const Text = styled_components_1.default.div `
+  padding: 2px 8px;
+  display: flex;
+  align-items: center;
+  border-radius: 30px;
+  white-space: nowrap;
+  background: ${(props) => props.theme.background.accentSecondaryTint};
+  color: ${(props) => props.theme.interactiveButtons.outlineBrandText};
+  transition: ${() => `opacity 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  :hover {
+    opacity: 0.8;
+  }
+  @media (max-width: ${common_1.MOBILE_WIDTH}px) {
+    display: none;
+  }
+`;
+exports.Text = Text;
+const TextHintOnMobile = (0, styled_components_1.default)(Hint_svg_1.default) `
+  display: none;
+  transition: ${() => `opacity 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  :hover {
+    opacity: 0.8;
+  }
+  @media (max-width: ${common_1.MOBILE_WIDTH}px) {
+    display: block;
+  }
+`;
+exports.TextHintOnMobile = TextHintOnMobile;
+const Hint = (0, styled_components_1.default)(Hint_svg_1.default) `
+  transition: ${() => `opacity 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  :hover {
+    opacity: 0.8;
+  }
+`;
+exports.Hint = Hint;
+//# sourceMappingURL=Popup.styled.js.map

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

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

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

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

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

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

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

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

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

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

package/dist/components/uikit/Portal/Portal.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Portal = void 0;
+const react_dom_1 = require("react-dom");
+const usePortal_1 = require("./usePortal");
+const Portal = ({ id, children }) => {
+    const target = (0, usePortal_1.usePortal)(id);
+    return target ? (0, react_dom_1.createPortal)(children, target) : null;
+};
+exports.Portal = Portal;
+//# sourceMappingURL=Portal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../../src/components/uikit/Portal/Portal.tsx"],"names":[],"mappings":";;;AAAA,yCAAwC;AAGxC,2CAAuC;AAEvC,MAAM,MAAM,GAAG,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAW,EAAE,EAAE;IAC3C,MAAM,MAAM,GAAG,IAAA,qBAAS,EAAC,EAAE,CAAC,CAAA;IAC5B,OAAO,MAAM,CAAC,CAAC,CAAC,IAAA,wBAAY,EAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AACvD,CAAC,CAAA;AAEQ,wBAAM"}

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

@@ -0,0 +1,77 @@
+"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.Portal = 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 styled_components_1 = __importDefault(require("styled-components"));
+exports.default = {
+    title: 'Components/Portal',
+    component: _1.Portal,
+    tags: ['autodocs']
+};
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+`;
+const Text = styled_components_1.default.span `
+  display: inline-block;
+  font-size: 14px;
+  padding-bottom: 8px;
+`;
+const Block = styled_components_1.default.div `
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 10px;
+  width: 300px;
+  height: 100px;
+`;
+const Portal = () => {
+    const [id, setId] = (0, react_1.useState)('test1');
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Portal"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u0434\u043B\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u043F\u043E\u0440\u0442\u0430\u043B\u0430. \u041D\u0443\u0436\u043D\u043E, \u0447\u0442\u043E\u0431\u044B \u0440\u0430\u0437\u043C\u0435\u0449\u0430\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0432\n        \u043D\u0443\u0436\u043D\u043E\u043C \u0443\u0437\u043B\u0435 DOM \u0434\u0435\u0440\u0435\u0432\u0430\u0432. \u041E\u0431\u0435\u0440\u043D\u0438\u0442\u0435 \u043D\u0443\u0436\u043D\u044B\u0439 \u0432\u0430\u043C \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 Portal, \u043F\u0435\u0440\u0435\u0434\u0430\u0432 \u0435\u043C\u0443 id.\n        Id - \u044D\u0442\u043E id \u0434\u043E\u043C \u0443\u0437\u043B\u0430 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435. \u0415\u0441\u043B\u0438 \u0442\u0430\u043A\u043E\u0433\u043E \u043D\u0435\u0442, \u0442\u043E \u043E\u043D \u0441\u043E\u0437\u0434\u0430\u0441\u0442 \u043D\u043E\u0432\u044B\u0439 \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438 \u0438 \u0434\u043E\u0431\u0430\u0432\u0438\u0442 \u0435\u0433\u043E \u0432 \u043A\u043E\u043D\u0435\u0446\n        \u0434\u043E\u043C \u0434\u0435\u0440\u0435\u0432\u0430." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Wrapper, null,
+                react_1.default.createElement(Block, { id: "test1" },
+                    react_1.default.createElement(Text, null, "\u0422\u0435\u0441\u0442\u043E\u0432\u044B\u0439 \u0431\u043B\u043E\u043A 1")),
+                react_1.default.createElement(Block, { id: "test2" },
+                    react_1.default.createElement(Text, null, "\u0422\u0435\u0441\u0442\u043E\u0432\u044B\u0439 \u0431\u043B\u043E\u043A 2"))),
+            react_1.default.createElement(_1.Portal, { id: id },
+                react_1.default.createElement(Text, null, "\u041F\u043E\u0441\u043B\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u044F \u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0443, \u0442\u0435\u043A\u0441\u0442 \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u0441\u044F \u0432 \u0434\u0440\u0443\u0433\u043E\u0439 \u0431\u043B\u043E\u043A")),
+            react_1.default.createElement("div", { style: { display: 'flex', gap: 16 } },
+                react_1.default.createElement(Button_1.Button, { onClick: () => setId('test1'), text: "\u0411\u043B\u043E\u043A 1" }),
+                react_1.default.createElement(Button_1.Button, { onClick: () => setId('test2'), text: "\u0411\u043B\u043E\u043A 2" })))));
+};
+exports.Portal = Portal;
+//# sourceMappingURL=Portal.stories.js.map