profinansy-ui-lib 3.3.8 → 3.3.9

package/dist/components/uikit/Tooltip/Tooltip.js

@@ -0,0 +1,161 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.TooltipContent = exports.TooltipTrigger = exports.useTooltip = void 0;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@floating-ui/react");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const styled_components_1 = require("styled-components");
+const theme_const_1 = require("../../../theme/theme.const");
+const zIndex_1 = require("../../../constants/zIndex");
+const Styled = __importStar(require("./Tooltip.styled"));
+function useTooltip({ placement = 'bottom', isHover = false, showArrow = true }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    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)(showArrow ? 10 : 4),
+            (0, react_2.flip)({
+                crossAxis: placement.includes('-'),
+                fallbackAxisSideDirection: 'end',
+                padding: 5
+            }),
+            (0, react_2.shift)({ padding: { top: 70, bottom: 10, left: 10, right: 10 } })
+        ]
+    });
+    (0, react_1.useEffect)(() => {
+        if (data.middlewareData.arrow &&
+            data.middlewareData.shift &&
+            arrowRef.current &&
+            showArrow) {
+            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, showArrow]);
+    const context = data.context;
+    const hover = (0, react_2.useHover)(context, {
+        enabled: isHover,
+        handleClose: (0, react_2.safePolygon)(),
+        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({ arrowRef,
+        open,
+        setOpen }, interactions), data)), [open, setOpen, interactions, data, arrowRef]);
+}
+exports.useTooltip = useTooltip;
+const TooltipContext = react_1.default.createContext(null);
+const Tooltip = (_a) => {
+    var { children, width, height, zIndex, padding } = _a, props = __rest(_a, ["children", "width", "height", "zIndex", "padding"]);
+    const popup = useTooltip(Object.assign({}, props));
+    return (react_1.default.createElement(TooltipContext.Provider, { value: popup },
+        react_1.default.createElement("div", { style: { overflow: 'hidden' }, onClick: (e) => e.stopPropagation() },
+            react_1.default.createElement(exports.TooltipTrigger, { targetElement: props.targetElement }),
+            react_1.default.createElement(exports.TooltipContent, { width: width, height: height, zIndex: zIndex, padding: padding, showArrow: props.showArrow }, children))));
+};
+exports.Tooltip = Tooltip;
+const TooltipTrigger = ({ targetElement }) => {
+    const context = (0, react_1.useContext)(TooltipContext);
+    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 null;
+};
+exports.TooltipTrigger = TooltipTrigger;
+const TooltipContent = ({ children, width, height, zIndex, padding, showArrow = true }) => {
+    const _a = (0, react_1.useContext)(TooltipContext), { context: floatingContext } = _a, context = __rest(_a, ["context"]);
+    const ref = (0, react_2.useMergeRefs)([context.refs.setFloating]);
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    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(Styled.Container, Object.assign({ ref: ref, style: Object.assign({ zIndex: zIndex ? zIndex : zIndex_1.zIndex.zIndex5 }, context.floatingStyles) }, 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, { width: width, height: height, mode: mode },
+                            showArrow && (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, { height: height, padding: padding }, children))))))));
+};
+exports.TooltipContent = TooltipContent;
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMc;AACd,8CAmB2B;AAE3B,gEAAsD;AACtD,yDAAiD;AACjD,4DAAoD;AACpD,sDAAiE;AACjE,yDAA0C;AAC1C,SAAgB,UAAU,CAAC,EACzB,SAAS,GAAG,QAAQ,EACpB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,IAAI,EAKjB;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEvC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAA;IAE7B,MAAM,IAAI,GAAG,IAAA,mBAAW,EAAC;QACvB,SAAS;QACT,IAAI;QACJ,YAAY,EAAE,OAAO;QACrB,oBAAoB,EAAE,kBAAU;QAChC,UAAU,EAAE;YACV,IAAA,aAAK,EAAC;gBACJ,OAAO,EAAE,QAAQ;aAClB,CAAC;YACF,IAAA,cAAM,EAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAA,YAAI,EAAC;gBACH,SAAS,EAAE,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC;gBAClC,yBAAyB,EAAE,KAAK;gBAChC,OAAO,EAAE,CAAC;aACX,CAAC;YACF,IAAA,aAAK,EAAC,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC;SACjE;KACF,CAAC,CAAA;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IACE,IAAI,CAAC,cAAc,CAAC,KAAK;YACzB,IAAI,CAAC,cAAc,CAAC,KAAK;YACzB,QAAQ,CAAC,OAAO;YAChB,SAAS,EACT;YACA,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAA;YAC1C,MAAM,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;YACjD,MAAM,QAAQ,GAAG,EAKhB,CAAA;YACD,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,QAAQ,EAAE;gBAC/C,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAAA;gBACtD,IAAI,QAAQ,KAAK,KAAK,EAAE;oBACtB,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAA;iBACxB;qBAAM;oBACL,QAAQ,CAAC,GAAG,GAAG,OAAO,CAAA;iBACvB;aACF;YACD,IAAI,QAAQ,KAAK,MAAM,IAAI,QAAQ,KAAK,OAAO,EAAE;gBAC/C,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,CAAA;gBACrD,IAAI,QAAQ,KAAK,MAAM,EAAE;oBACvB,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;iBACvB;qBAAM;oBACL,QAAQ,CAAC,IAAI,GAAG,OAAO,CAAA;iBACxB;aACF;YAED,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;SAChD;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAA;IAErB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;IAC5B,MAAM,KAAK,GAAG,IAAA,gBAAQ,EAAC,OAAO,EAAE;QAC9B,OAAO,EAAE,OAAO;QAChB,WAAW,EAAE,IAAA,mBAAW,GAAE;QAC1B,IAAI,EAAE,KAAK;QACX,KAAK,EAAE;YACL,IAAI,EAAE,GAAG;YACT,KAAK,EAAE,CAAC;SACT;KACF,CAAC,CAAA;IACF,MAAM,KAAK,GAAG,IAAA,gBAAQ,EAAC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,CAAA;IACtD,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,CAAC,CAAA;IACnC,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,OAAO,CAAC,CAAA;IAE7B,MAAM,YAAY,GAAG,IAAA,uBAAe,EAAC,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnE,OAAO,eAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,+BACJ,QAAQ;QACR,IAAI;QACJ,OAAO,IACJ,YAAY,GACZ,IAAI,EACP,EACF,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,CAAC,CAC9C,CAAA;AACH,CAAC;AA9FD,gCA8FC;AAID,MAAM,cAAc,GAAG,eAAK,CAAC,aAAa,CAAc,IAAI,CAAC,CAAA;AAE7D,MAAM,OAAO,GAAG,CAAC,EAOD,EAAE,EAAE;QAPH,EACf,QAAQ,EACR,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,OAEO,EADX,KAAK,cANO,oDAOhB,CADS;IAER,MAAM,KAAK,GAAG,UAAU,mBAAM,KAAK,EAAG,CAAA;IACtC,OAAO,CACL,8BAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACnC,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;YACrE,8BAAC,sBAAc,IAAC,aAAa,EAAE,KAAK,CAAC,aAAa,GAAI;YACtD,8BAAC,sBAAc,IACb,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,IAEzB,QAAQ,CACM,CACb,CACkB,CAC3B,CAAA;AACH,CAAC,CAAA;AAgGQ,0BAAO;AA9FT,MAAM,cAAc,GAAG,CAAC,EAC7B,aAAa,EAGd,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,cAAc,CAAC,CAAA;IAC1C,MAAM,GAAG,GAAG,IAAA,oBAAY,EAAC,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAA;IAErD,IAAI,aAAa,IAAI,eAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE;QACxD,OAAO,eAAK,CAAC,YAAY,CACvB,aAAa,EACb,OAAO,CAAC,iBAAiB,+BACvB,GAAG,IACA,aAAa,CAAC,KAAK,KACtB,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IAC9C,CACH,CAAA;KACF;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAnBY,QAAA,cAAc,kBAmB1B;AAEM,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAAS,GAAG,IAAI,EAQjB,EAAE,EAAE;IACH,MAAM,KAA2C,IAAA,kBAAU,EAAC,cAAc,CAAC,EAArE,EAAE,OAAO,EAAE,eAAe,OAA2C,EAAtC,OAAO,cAAtC,WAAwC,CAA6B,CAAA;IAC3E,MAAM,GAAG,GAAG,IAAA,oBAAY,EAAC,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAA;IAEpD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,uBAAO,GAAE,CAAA;IAE1B,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,2BAAmB,EAAC,eAAe,EAAE;QACxE,QAAQ,EAAE;YACR,IAAI,EAAE,GAAG;YACT,KAAK,EAAE,GAAG;SACX;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,YAAY;SACxB;KACF,CAAC,CAAA;IAEF,IAAI,CAAC,eAAe,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAEtC,OAAO,CACL,8BAAC,sBAAc;QACb,8BAAC,4BAAoB,IAAC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK;YAC1D,8BAAC,MAAM,CAAC,SAAS,kBACf,GAAG,EAAE,GAAG,EACR,KAAK,kBACH,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAW,CAAC,OAAO,IAC1C,OAAO,CAAC,cAAc,KAEvB,OAAO,CAAC,gBAAgB,EAAE;gBAE9B,8BAAC,iCAAa,IAAC,KAAK,EAAE,qBAAO,CAAC,IAAI,CAAC;oBACjC,uCAAK,KAAK,EAAE,gBAAgB;wBAC1B,8BAAC,MAAM,CAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI;4BACrD,SAAS,IAAI,CACZ,8BAAC,qBAAa,IACZ,GAAG,EAAE,OAAO,CAAC,QAAQ,EACrB,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,CAAC,EACZ,MAAM,EACJ,IAAI,KAAK,OAAO;oCACd,CAAC,CAAC,SAAS;oCACX,CAAC,CAAC,qBAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,QAAQ,EAEnC,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,qBAAO,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,KAAK,GACpC,CACH;4BACD,8BAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,IAC7C,QAAQ,CACM,CACF,CACb,CACQ,CACC,CACE,CACR,CAClB,CAAA;AACH,CAAC,CAAA;AAvEY,QAAA,cAAc,kBAuE1B"}

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const react_1 = __importDefault(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 Tooltip_1 = require("./Tooltip");
+exports.default = {
+    title: 'Components/Tooltip',
+    component: Tooltip_1.Tooltip,
+    tags: ['autodocs']
+};
+const Tooltip = () => {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Tooltip"),
+        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 \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u0441 \u043A\u0430\u043A\u0438\u043C-\u043B\u0438\u0431\u043E \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C. \u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435\n       \u043B\u043E\u0433\u0438\u043A\u0443 \u043F\u043E \u043E\u0442\u043A\u0440\u044B\u0442\u0438\u044E \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u043F\u043E targetElement. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0448\u0438\u0440\u0438\u043D\u0430 \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u0440\u0430\u0432\u043D\u0430 240px, \u043D\u043E \u0432\u044B \u0435\u0435 \u043C\u043E\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u043B\u044E\u0431\u043E\u0439, \u043F\u0435\u0440\u0435\u0434\u0430\u0432\n       \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>width</b>. \u041C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u044B\u0441\u043E\u0442\u0430 \u0432\u044B\u043F\u0430\u0434\u0430\u0448\u043A\u0438 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0440\u0430\u0432\u043D\u0430 448px, \u043D\u043E \u0432\u044B \u0435\u0435 \u043C\u043E\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u043B\u044E\u0431\u043E\u0439, \u043F\u0435\u0440\u0435\u0434\u0430\u0432\n       \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>height</b>" }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Tooltip_1.Tooltip, { targetElement: react_1.default.createElement(Button_1.Button, { text: "Open tooltip" }), width: '300px', height: "100px" },
+                react_1.default.createElement("div", { style: { fontSize: '12px' } }, "Lorem Ipsum - \u044D\u0442\u043E \u0442\u0435\u043A\u0441\u0442-\"\u0440\u044B\u0431\u0430\", \u0447\u0430\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0439 \u0432 \u043F\u0435\u0447\u0430\u0442\u0438 \u0438 \u0432\u044D\u0431-\u0434\u0438\u0437\u0430\u0439\u043D\u0435. Lorem Ipsum \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0439 \"\u0440\u044B\u0431\u043E\u0439\" \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u043E\u0432 \u043D\u0430 \u043B\u0430\u0442\u0438\u043D\u0438\u0446\u0435 \u0441 \u043D\u0430\u0447\u0430\u043B\u0430 XVI \u0432\u0435\u043A\u0430."))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u041E\u0442\u043A\u0440\u044B\u0442\u0438\u0435 \u0442\u0443\u043B\u0442\u0438\u043F\u0430 \u043F\u043E \u0445\u043E\u0432\u0435\u0440\u0443"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0418\u0437\u043D\u0430\u0447\u0430\u043B\u044C\u043D\u043E \u0442\u0443\u043B\u0442\u0438\u043F \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E \u043A\u043B\u0438\u043A\u0443 \u043D\u0430 \u0442\u0430\u0440\u0433\u0435\u0442 \u044D\u043B\u0435\u043C\u0435\u043D\u0442. \u0415\u0441\u043B\u0438 \u0434\u043E\u0431\u0430\u0432\u0438\u0442\u044C props <b>isHover</b>,\n          \u0442\u043E \u0442\u0443\u043B\u0442\u0438\u043F \u0431\u0443\u0434\u0435\u0442 \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043F\u043E \u0445\u043E\u0432\u0435\u0440\u0443 \u043D\u0430 \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(Tooltip_1.Tooltip, { targetElement: react_1.default.createElement(Button_1.Button, { text: "Open tooltip" }), width: '300px', height: "100px", isHover: true },
+                react_1.default.createElement("div", { style: { fontSize: '12px' } }, "Lorem Ipsum - \u044D\u0442\u043E \u0442\u0435\u043A\u0441\u0442-\"\u0440\u044B\u0431\u0430\", \u0447\u0430\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0439 \u0432 \u043F\u0435\u0447\u0430\u0442\u0438 \u0438 \u0432\u044D\u0431-\u0434\u0438\u0437\u0430\u0439\u043D\u0435. Lorem Ipsum \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0439 \"\u0440\u044B\u0431\u043E\u0439\" \u0434\u043B\u044F \u0442\u0435\u043A\u0441\u0442\u043E\u0432 \u043D\u0430 \u043B\u0430\u0442\u0438\u043D\u0438\u0446\u0435 \u0441 \u043D\u0430\u0447\u0430\u043B\u0430 XVI \u0432\u0435\u043A\u0430.")))));
+};
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAEzB,sCAAkC;AAClC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,uCAAgD;AAEhD,kBAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,iBAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAA;AAEM,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,OAAO,CACL;QACE,8BAAC,uBAAU,IAAC,KAAK,EAAE,IAAI,cAAsB;QAC7C,8BAAC,mCAAgB,IACf,IAAI,EAAC,krDAGiB,GACtB;QACF,8BAAC,2BAAY;YACX,8BAAC,iBAAS,IACR,aAAa,EAAE,8BAAC,eAAM,IAAC,IAAI,EAAC,cAAc,GAAG,EAC7C,KAAK,EAAE,OAAO,EACd,MAAM,EAAC,OAAO;gBAEd,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,uqBAI1B,CACI,CACC;QACf,8BAAC,uBAAU,wJAAwC;QACnD,8BAAC,mCAAgB,IACf,IAAI,EAAC,ouBACsD,GAC3D;QACF,8BAAC,2BAAY;YACX,8BAAC,iBAAS,IACR,aAAa,EAAE,8BAAC,eAAM,IAAC,IAAI,EAAC,cAAc,GAAG,EAC7C,KAAK,EAAE,OAAO,EACd,MAAM,EAAC,OAAO,EACd,OAAO,EAAE,IAAI;gBAEb,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,uqBAI1B,CACI,CACC,CACX,CACP,CAAA;AACH,CAAC,CAAA;AA5CY,QAAA,OAAO,WA4CnB"}

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

@@ -0,0 +1,59 @@
+"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.Content = exports.Tooltip = exports.Container = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Scroll_1 = require("../Scroll/Scroll");
+exports.Container = styled_components_1.default.div `
+  &:focus-visible {
+    outline: none;
+  }
+`;
+exports.Tooltip = styled_components_1.default.div `
+  font-family: 'Manrope', sans-serif;
+  box-sizing: border-box;
+  width: ${(props) => (props.width ? props.width : '240px')};
+  max-height: calc(100vh - 90px);
+  height: ${(props) => props.height};
+  overflow: ${(props) => (props.height === 'auto' ? 'visible' : 'hidden')};
+  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.Content = styled_components_1.default.div `
+  padding: ${(props) => props.padding || '12px 16px'};
+  max-height: calc(100vh - 90px);
+  height: 100%;
+  overflow-y: ${(props) => (props.height === 'auto' ? 'visible' : 'auto')};
+  white-space: break-spaces;
+  position: relative;
+  ${Scroll_1.Scroll}
+`;
+//# sourceMappingURL=Tooltip.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tooltip/Tooltip.styled.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAA+C;AAC/C,6CAAyC;AAE5B,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIlC,CAAA;AAEY,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,CAI/B;;;WAGS,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;;YAE/C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM;cACrB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;sBACnD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK;;gBAE7C,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;;IAEjD,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,IAAI,KAAK,MAAM;IACrB,IAAA,uBAAG,EAAA;4BACqB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KAC7D;CACJ,CAAA;AAEY,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,CAG/B;aACW,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,IAAI,WAAW;;;gBAGpC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;;;IAGrE,eAAM;CACT,CAAA"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tooltip/index.ts"],"names":[],"mappings":";;;AAAA,qCAAmC;AAA1B,kGAAA,OAAO,OAAA"}

package/dist/components/uikit/Typography/Typography.const.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTypographyParameters = exports.typographyVariants = void 0;
+exports.typographyVariants = [
+    'header1-Bold',
+    'header2-ExtraBold',
+    'header2-Bold',
+    'header3-Bold',
+    'header3-SemiBold',
+    'header4-Bold',
+    'header4-SemiBold',
+    'header5-Bold',
+    'header5-SemiBold',
+    'header6-Bold',
+    'header6-SemiBold',
+    'paragraph-Regular',
+    'paragraph-Medium',
+    'text-Regular',
+    'text-Medium',
+    'text-Bold',
+    'description-Regular',
+    'description-Medium',
+    'description-SemiBold',
+    'description-Bold',
+    'caption-Medium',
+    'caption-SemiBold',
+    'caption-Bold',
+    'caption2-Medium',
+    'caption2-SemiBold',
+    'caption2-Bold',
+    'tag-Medium11',
+    'tag-Medium10',
+    'tag-Medium9',
+    'controls-Regular',
+    'controls-Medium',
+    'controls-SemiBold'
+];
+// [58, 56, 700]  font-size, line-height, font-weight
+const getTypographyParameters = (variant) => {
+    switch (variant) {
+        case 'header1-Bold':
+            return [48, 56, 700];
+        case 'header2-ExtraBold':
+            return [32, 44, 800];
+        case 'header2-Bold':
+            return [32, 44, 700];
+        case 'header3-Bold':
+            return [24, 32, 700];
+        case 'header3-SemiBold':
+            return [24, 32, 600];
+        case 'header4-Bold':
+            return [20, 24, 700];
+        case 'header4-SemiBold':
+            return [20, 24, 600];
+        case 'header5-Bold':
+            return [18, 22, 700];
+        case 'header5-SemiBold':
+            return [18, 22, 600];
+        case 'header6-Bold':
+            return [16, 20, 700];
+        case 'header6-SemiBold':
+            return [16, 20, 600];
+        case 'paragraph-Regular':
+            return [17, 22, 400];
+        case 'paragraph-Medium':
+            return [17, 22, 500];
+        case 'text-Regular':
+            return [15, 20, 400];
+        case 'text-Medium':
+            return [15, 20, 500];
+        case 'text-Bold':
+            return [15, 20, 700];
+        case 'description-Regular':
+            return [14, 18, 400];
+        case 'description-Medium':
+            return [14, 18, 500];
+        case 'description-SemiBold':
+            return [14, 18, 600];
+        case 'description-Bold':
+            return [14, 18, 700];
+        case 'caption-Medium':
+            return [13, 16, 500];
+        case 'caption-SemiBold':
+            return [13, 16, 600];
+        case 'caption-Bold':
+            return [13, 16, 700];
+        case 'caption2-Medium':
+            return [12, 16, 500];
+        case 'caption2-SemiBold':
+            return [12, 16, 600];
+        case 'caption2-Bold':
+            return [12, 16, 700];
+        case 'tag-Medium11':
+            return [11, 14, 500];
+        case 'tag-Medium10':
+            return [10, 14, 500];
+        case 'tag-Medium9':
+            return [9, 14, 500];
+        case 'controls-Regular':
+            return [16, 20, 400];
+        case 'controls-Medium':
+            return [16, 20, 500];
+        case 'controls-SemiBold':
+            return [16, 20, 600];
+        default:
+            return [15, 20, 400];
+    }
+};
+exports.getTypographyParameters = getTypographyParameters;
+//# sourceMappingURL=Typography.const.js.map

package/dist/components/uikit/Typography/Typography.const.js.map

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

package/dist/components/uikit/Typography/Typography.js

@@ -0,0 +1,51 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+const react_1 = __importStar(require("react"));
+const Typography_styled_1 = require("./Typography.styled");
+const theme_const_1 = require("../../../theme/theme.const");
+const styled_components_1 = require("styled-components");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const Typography = (0, react_1.forwardRef)((_a, ref) => {
+    var { tag = 'p', className, children, variant, title, colorName, onClick, colorCategory = 'text' } = _a, props = __rest(_a, ["tag", "className", "children", "variant", "title", "colorName", "onClick", "colorCategory"]);
+    const Tag = tag;
+    const { mode } = (0, ThemeProvider_1.useMode)();
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_const_1.palette[mode] },
+        react_1.default.createElement(Typography_styled_1.TypographyStyled, { ref: ref, as: Tag, variant: variant, className: className, title: title, colorCategory: colorCategory, colorName: colorName, onClick: onClick, style: props }, children)));
+});
+exports.Typography = Typography;
+//# sourceMappingURL=Typography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/components/uikit/Typography/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwD;AACxD,2DAAsD;AAEtD,4DAAoD;AACpD,yDAAiD;AACjD,gEAAsD;AAEtD,MAAM,UAAU,GAAG,IAAA,kBAAU,EAC3B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,GAAG,GAAG,GAAG,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,SAAS,EACT,OAAO,EACP,aAAa,GAAG,MAAM,OAEvB,EADI,KAAK,cATV,6FAUC,CADS;IAIV,MAAM,GAAG,GAAG,GAAkC,CAAA;IAE9C,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,uBAAO,GAAE,CAAA;IAE1B,OAAO,CACL,8BAAC,iCAAa,IAAC,KAAK,EAAE,qBAAO,CAAC,IAAI,CAAC;QACjC,8BAAC,oCAAgB,IACf,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,GAAG,EACP,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,IAEX,QAAQ,CACQ,CACL,CACjB,CAAA;AACH,CAAC,CACF,CAAA;AAEQ,gCAAU"}

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

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+const _1 = require(".");
+const react_1 = __importDefault(require("react"));
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const Typography_const_1 = require("./Typography.const");
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+exports.default = {
+    title: 'Guideline/Typography',
+    component: _1.Typography,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/bJrf64mQMk2pKHVXTDsHLS/Typography-WEB?type=design&node-id=803-2&mode=design&t=VzrDNRNL5mLXZWbu-4'
+        }
+    }
+};
+const Typography = () => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Typography"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0422\u0438\u043F\u043E\u0433\u0440\u0430\u0444\u0438\u043A\u0430, \u043A\u043E\u0442\u043E\u0440\u0430\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u043D\u0430 \u043F\u0440\u043E\u0435\u043A\u0442\u0435. \u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 <b>tag</b>, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0445\u043E\u0442\u0438\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0438 <b>variant</b>. \u041A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 \u0442\u0430\u043A \u0436\u0435 \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442 \u043B\u044E\u0431\u044B\u0435 css \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null, Typography_const_1.typographyVariants.map((item, index) => (react_1.default.createElement(_1.Typography, { tag: "p", display: 'block', variant: item, key: index, paddingBottom: '10px', colorName: "primary", colorCategory: "text" }, item)))),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0420\u0430\u0437\u043D\u044B\u0435 \u0448\u0440\u0438\u0444\u0442\u044B \u043F\u043E\u0434 \u0440\u0430\u0437\u043D\u044B\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u044F"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u041C\u043E\u0436\u043D\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043D\u044B\u0435 <b>variant</b> \u043F\u043E\u0434 \u0440\u0430\u0437\u043D\u044B\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u044F. \u0414\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0432 <b>variant</b> \u043F\u0440\u043E\u043A\u0438\u0434\u044B\u0432\u0430\u0439\u0442\u0435 \u043C\u0430\u0441\u0441\u0438\u0432 \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(_1.Typography, { tag: "p", display: 'block', variant: [
+                    { resolution: null, variant: 'header1-Bold' },
+                    { resolution: 960, variant: 'header2-Bold' }
+                ], paddingBottom: '10px', colorName: "secondary", colorCategory: "text" }, "\u0422\u0438\u043F\u043E\u0433\u0440\u0430\u0444\u0438\u043A\u0430, \u043A\u043E\u0442\u043E\u0440\u0430\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u043D\u0430 \u043F\u0440\u043E\u0435\u043A\u0442\u0435"))));
+};
+exports.Typography = Typography;
+//# sourceMappingURL=Typography.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Typography/Typography.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,wBAA2C;AAC3C,kDAAyB;AACzB,yEAAqE;AACrE,mEAA+D;AAC/D,yDAAuD;AACvD,qFAAiF;AAEjF,kBAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,aAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,6HAA6H;SACnI;KACF;CACF,CAAA;AAEM,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL;QACE,8BAAC,uBAAU,IAAC,KAAK,EAAE,IAAI,iBAAyB;QAChD,8BAAC,mCAAgB,IAAC,IAAI,EAAC,wsBAAkK,GAAG;QAC5L,8BAAC,2BAAY,QACV,qCAAkB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,8BAAC,aAAS,IACR,GAAG,EAAC,GAAG,EACP,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,EACb,GAAG,EAAE,KAAK,EACV,aAAa,EAAE,MAAM,EACrB,SAAS,EAAC,SAAS,EACnB,aAAa,EAAC,MAAM,IAEnB,IAAI,CACK,CACb,CAAC,CACW;QACf,8BAAC,uBAAU,yMAAiD;QAC5D,8BAAC,mCAAgB,IAAC,IAAI,EAAC,+eAAwH,GAAG;QAClJ,8BAAC,2BAAY;YACX,8BAAC,aAAS,IACR,GAAG,EAAC,GAAG,EACP,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;oBACP,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE;oBAC7C,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE;iBAC7C,EACD,aAAa,EAAE,MAAM,EACrB,SAAS,EAAC,WAAW,EACrB,aAAa,EAAC,MAAM,sPAGV,CACC,CACd,CACJ,CAAA;AACH,CAAC,CAAA;AAvCY,QAAA,UAAU,cAuCtB"}

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyStyled = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Typography_const_1 = require("./Typography.const");
+const getFontStyles = (variant) => {
+    if (!Array.isArray(variant)) {
+        const parameters = (0, Typography_const_1.getTypographyParameters)(variant);
+        return {
+            fontSize: `${parameters[0]}px`,
+            lineHeight: `${parameters[1]}px`,
+            fontWeight: parameters[2]
+        };
+    }
+    else {
+        let mediaQueries = '';
+        variant.forEach(({ variant, resolution }) => {
+            const parameters = (0, Typography_const_1.getTypographyParameters)(variant);
+            if (!resolution) {
+                mediaQueries += `
+        font-size: ${parameters[0]}px;
+        line-height: ${parameters[1]}px;
+        font-weight: ${parameters[2]};`;
+            }
+            else {
+                mediaQueries += `@media (max-width: ${resolution}px) { 
+        font-size: ${parameters[0]}px;
+        line-height: ${parameters[1]}px;
+        font-weight: ${parameters[2]};`;
+            }
+        });
+        return mediaQueries;
+    }
+};
+const getColor = (theme, colorCategory, colorName) => {
+    if (colorCategory && colorName)
+        return theme[colorCategory][colorName];
+    return null;
+};
+const TypographyStyled = styled_components_1.default.p `
+  display: inline-block;
+  color: ${(props) => getColor(props.theme, props.colorCategory, props.colorName)};
+  ${({ variant }) => getFontStyles(variant)};
+`;
+exports.TypographyStyled = TypographyStyled;
+//# sourceMappingURL=Typography.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/Typography/Typography.styled.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAsC;AAEtC,yDAA4D;AAG5D,MAAM,aAAa,GAAG,CAAC,OAAoC,EAAE,EAAE;IAC7D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC3B,MAAM,UAAU,GAAG,IAAA,0CAAuB,EAAC,OAAO,CAAC,CAAA;QACnD,OAAO;YACL,QAAQ,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI;YAC9B,UAAU,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI;YAChC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;SAC1B,CAAA;KACF;SAAM;QACL,IAAI,YAAY,GAAG,EAAE,CAAA;QACrB,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE;YAC1C,MAAM,UAAU,GAAG,IAAA,0CAAuB,EAAC,OAAO,CAAC,CAAA;YACnD,IAAI,CAAC,UAAU,EAAE;gBACf,YAAY,IAAI;qBACH,UAAU,CAAC,CAAC,CAAC;uBACX,UAAU,CAAC,CAAC,CAAC;uBACb,UAAU,CAAC,CAAC,CAAC,GAAG,CAAA;aAChC;iBAAM;gBACL,YAAY,IAAI,sBAAsB,UAAU;qBACnC,UAAU,CAAC,CAAC,CAAC;uBACX,UAAU,CAAC,CAAC,CAAC;uBACb,UAAU,CAAC,CAAC,CAAC,GAAG,CAAA;aAChC;QACH,CAAC,CAAC,CAAA;QACF,OAAO,YAAY,CAAA;KACpB;AACH,CAAC,CAAA;AAED,MAAM,QAAQ,GAAG,CACf,KAAa,EACb,aAAgD,EAChD,SAAwC,EACxC,EAAE;IACF,IAAI,aAAa,IAAI,SAAS;QAAE,OAAO,KAAK,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAA;IACtE,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,2BAAM,CAAC,CAAC,CAI/B;;WAES,CAAC,KAAK,EAAE,EAAE,CACjB,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3D,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC;CAC1C,CAAA;AAEQ,4CAAgB"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/Typography/index.ts"],"names":[],"mappings":";;;AAAA,2CAAyC;AAAhC,wGAAA,UAAU,OAAA"}