@addev-be/ui 0.16.8 → 0.16.10

package/dist/components/ui/Label.d.ts

@@ -1,3 +1,4 @@
+import { ComponentProps } from 'react';
 import { ThemeColor } from '../../providers/ThemeProvider/types';
 export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LabelProps>> & string;
 export type LabelProps = {
@@ -6,4 +7,4 @@ export type LabelProps = {
     rounded?: boolean;
     bordered?: boolean;
 };
-export declare const Label: (props: import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof LabelProps> & LabelProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").JSX.Element | null;
+export declare const Label: ({ children, size, className, ref, ...props }: ComponentProps<typeof StyledLabel> & LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/Label.js

@@ -30,13 +30,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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)
@@ -51,24 +61,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.StyledLabel = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 exports.StyledLabel = styled_components_1.default.span.withConfig({
     shouldForwardProp: function () { return true; },
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-sans);\n  font-weight: 500;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-0_5) var(--space-1_5);\n    font-size: var(--text-xs);\n    border-radius: var(--rounded-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n\n  &.medium {\n    padding: var(--space-1) var(--space-2);\n    font-size: var(--text-sm);\n    border-radius: var(--rounded-md);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3_5);\n      height: var(--space-3_5);\n    }\n  }\n\n  &.large {\n    padding: var(--space-1_5) var(--space-2_5);\n    font-size: var(--text-base);\n    border-radius: var(--rounded-lg);\n    svg {\n      margin-right: var(--space-1_5);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-sans);\n  font-weight: 500;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-0_5) var(--space-1_5);\n    font-size: var(--text-xs);\n    border-radius: var(--rounded-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n\n  &.medium {\n    padding: var(--space-1) var(--space-2);\n    font-size: var(--text-sm);\n    border-radius: var(--rounded-md);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3_5);\n      height: var(--space-3_5);\n    }\n  }\n\n  &.large {\n    padding: var(--space-1_5) var(--space-2_5);\n    font-size: var(--text-base);\n    border-radius: var(--rounded-lg);\n    svg {\n      margin-right: var(--space-1_5);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n"])), function (_a) {
     var color = _a.color;
     return color
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-700);\n          svg {\n            fill: var(--color-", "-700);\n          }\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-700);\n          svg {\n            fill: var(--color-", "-700);\n          }\n        "])), color, color, color) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-neutral-100);\n          color: var(--color-neutral-700);\n          svg {\n            fill: var(--color-neutral-700);\n          }\n        "], ["\n          background-color: var(--color-neutral-100);\n          color: var(--color-neutral-700);\n          svg {\n            fill: var(--color-neutral-700);\n          }\n        "])));
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-700);\n          svg {\n            fill: var(--color-", "-700);\n          }\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-700);\n          svg {\n            fill: var(--color-", "-700);\n          }\n        "])), color, color, color) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-base-100);\n          color: var(--color-text-700);\n          svg {\n            fill: var(--color-base-700);\n          }\n        "], ["\n          background-color: var(--color-base-100);\n          color: var(--color-text-700);\n          svg {\n            fill: var(--color-base-700);\n          }\n        "])));
 }, function (_a) {
     var bordered = _a.bordered, color = _a.color;
     return bordered
-        ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border: 1px solid\n            ", ";\n        "], ["\n          border: 1px solid\n            ", ";\n        "])), color ? "var(--color-".concat(color, "-200)") : 'var(--color-neutral-200)') : 'border: none;';
+        ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border: 1px solid\n            ", ";\n        "], ["\n          border: 1px solid\n            ", ";\n        "])), color ? "var(--color-".concat(color, "-200)") : 'var(--color-base-200)') : 'border: none;';
 }, function (_a) {
     var rounded = _a.rounded;
     return rounded && 'border-radius: var(--rounded-full);';
 });
-exports.Label = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, props = __rest(_a, ["children", "size", "className"]);
+var Label = function (_a) {
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, ref = _a.ref, props = __rest(_a, ["children", "size", "className", "ref"]);
     return ((0, jsx_runtime_1.jsx)(exports.StyledLabel, __assign({ ref: ref, className: "".concat(size, " ").concat(className) }, props, { children: children })));
-});
+};
+exports.Label = Label;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ui/Message/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Message = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -47,7 +57,7 @@ var colorsMap = {
 };
 var Message = function (_a) {
     var children = _a.children, title = _a.title, type = _a.type;
-    var _b = colorsMap[type], Icon = _b.iconComponent, _c = _b.baseColor, baseColor = _c === void 0 ? 'neutral' : _c;
-    return ((0, jsx_runtime_1.jsxs)(styles.MessageContainer, { "$baseColor": baseColor, children: [(0, jsx_runtime_1.jsx)(Icon, { className: "MessageIcon" }), (0, jsx_runtime_1.jsxs)(styles.MessageContent, { children: [title && (0, jsx_runtime_1.jsx)("h3", { children: title }), (0, jsx_runtime_1.jsx)("div", { children: children })] })] }));
+    var _b = colorsMap[type], Icon = _b.iconComponent, _c = _b.baseColor, baseColor = _c === void 0 ? 'base' : _c;
+    return ((0, jsx_runtime_1.jsxs)(styles.MessageContainer, { "$baseColor": baseColor, children: [(0, jsx_runtime_1.jsx)(Icon, { className: "MessageIcon" }), (0, jsx_runtime_1.jsxs)(styles.MessageContent, { children: [title && (0, jsx_runtime_1.jsx)(styles.MessageTitle, { children: title }), (0, jsx_runtime_1.jsx)("div", { children: children })] })] }));
 };
 exports.Message = Message;

package/dist/components/ui/Message/styles.d.ts

@@ -1,9 +1,6 @@
-import { ThemeColor } from '../../../providers';
-export declare const MessageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, never>, {
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+export declare const MessageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, {
     $baseColor: ThemeColor;
 }>> & string;
-export declare const MessageContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>> & string;
+export declare const MessageContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const MessageTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;

package/dist/components/ui/Message/styles.js

@@ -19,15 +19,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageContent = exports.MessageContainer = void 0;
+exports.MessageTitle = exports.MessageContent = exports.MessageContainer = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.MessageContainer = styled_components_1.default.div.attrs({
     className: 'MessageContainer',
@@ -38,4 +48,5 @@ exports.MessageContainer = styled_components_1.default.div.attrs({
 exports.MessageContent = styled_components_1.default.div.attrs({
     className: 'MessageContent',
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+exports.MessageTitle = styled_components_1.default.h3(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ui/TabsView/TabsList.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SpaceProps } from '../../../helpers/styled/space';
+import { Tab } from './types';
+type TabsListProps = {
+    tabs: Tab[];
+    selectedIndex?: number;
+    onSelectedIndexChanged?: (index: number) => void;
+} & SpaceProps;
+export declare const TabsList: FC<TabsListProps>;
+export {};

package/dist/components/ui/TabsView/TabsList.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.TabsList = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var TabsList = function (_a) {
+    var tabs = _a.tabs, selectedIndex = _a.selectedIndex, onSelectedIndexChanged = _a.onSelectedIndexChanged, spaceProps = __rest(_a, ["tabs", "selectedIndex", "onSelectedIndexChanged"]);
+    var _b = (0, react_1.useState)(selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : 0), activeIndex = _b[0], setActiveIndex = _b[1];
+    (0, react_1.useEffect)(function () {
+        setActiveIndex(selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : 0);
+    }, [selectedIndex]);
+    (0, react_1.useEffect)(function () {
+        onSelectedIndexChanged === null || onSelectedIndexChanged === void 0 ? void 0 : onSelectedIndexChanged(activeIndex);
+    }, [activeIndex, onSelectedIndexChanged]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.TabsListContainer, __assign({}, spaceProps, { children: tabs.map(function (tab, index) { return ((0, jsx_runtime_1.jsxs)(styles_1.TabContainer, { "$color": tab.color, "$isActive": activeIndex === index, onClick: function () { return setActiveIndex(index); }, children: [tab.icon ? (0, jsx_runtime_1.jsx)(tab.icon, {}) : null, tab.tabName] }, index)); }) })));
+};
+exports.TabsList = TabsList;

package/dist/components/ui/TabsView/TabsView.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Tab } from './types';
+type TabsViewProps = {
+    tabs: Tab[];
+    overflow?: boolean;
+    onSelectedTabChanged?: (tab: Tab, index: number) => void;
+};
+export declare const TabsView: FC<TabsViewProps>;
+export {};

package/dist/components/ui/TabsView/TabsView.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var TabsList_1 = require("./TabsList");
+var TabsView = function (_a) {
+    var tabs = _a.tabs, _b = _a.overflow, overflow = _b === void 0 ? false : _b, onSelectedTabChanged = _a.onSelectedTabChanged;
+    var _c = (0, react_1.useState)(0), activeIndex = _c[0], setActiveIndex = _c[1];
+    var activeTab = tabs[activeIndex];
+    (0, react_1.useEffect)(function () {
+        onSelectedTabChanged === null || onSelectedTabChanged === void 0 ? void 0 : onSelectedTabChanged(tabs[activeIndex], activeIndex);
+    }, [activeIndex, tabs, onSelectedTabChanged]);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.TabsViewContainer, { children: [(0, jsx_runtime_1.jsx)(TabsList_1.TabsList, { tabs: tabs, selectedIndex: activeIndex, onSelectedIndexChanged: setActiveIndex, p: "2" }), (0, jsx_runtime_1.jsx)(styles_1.TabContentContainer, { "$isOverflow": overflow, children: activeTab.content })] }));
+};
+exports.TabsView = TabsView;

package/dist/components/ui/TabsView/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './TabsView';
+export * from './TabsList';

package/dist/components/ui/TabsView/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./TabsView"), exports);
+__exportStar(require("./TabsList"), exports);

package/dist/components/ui/TabsView/styles.d.ts

@@ -0,0 +1,11 @@
+import { SpaceProps } from '../../../helpers/styled/space';
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
+export declare const TabsViewContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TabsListContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SpaceProps>> & string;
+export declare const TabContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color?: ThemeColorWithIntensity | ThemeColor;
+    $isActive?: boolean;
+}>> & string;
+export declare const TabContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isOverflow?: boolean;
+}>> & string;

package/dist/components/ui/TabsView/styles.js

@@ -0,0 +1,57 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContentContainer = exports.TabContainer = exports.TabsListContainer = exports.TabsViewContainer = void 0;
+var space_1 = require("../../../helpers/styled/space");
+var styled_components_1 = __importStar(require("styled-components"));
+var helpers_1 = require("../../../providers/ThemeProvider/helpers");
+exports.TabsViewContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+exports.TabsListContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: var(--space-4);\n  flex-shrink: 0;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  font-size: var(--text-lg);\n  white-space: nowrap;\n\n  ", "\n"], ["\n  display: flex;\n  gap: var(--space-4);\n  flex-shrink: 0;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  font-size: var(--text-lg);\n  white-space: nowrap;\n\n  ", "\n"])), space_1.space);
+exports.TabContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: var(--space-8);\n  gap: var(--space-2);\n  cursor: pointer;\n  padding: 0 var(--space-2);\n  color: var(--color-text-800);\n\n  svg {\n    height: var(--space-4);\n    width: var(--space-4);\n    fill: var(--color-base-800);\n  }\n\n  ", ";\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  height: var(--space-8);\n  gap: var(--space-2);\n  cursor: pointer;\n  padding: 0 var(--space-2);\n  color: var(--color-text-800);\n\n  svg {\n    height: var(--space-4);\n    width: var(--space-4);\n    fill: var(--color-base-800);\n  }\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var _b = _a.$color, $color = _b === void 0 ? 'primary' : _b;
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &:hover {\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    }\n  "], ["\n    &:hover {\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    }\n  "])), (0, helpers_1.getColorWithIntensity)($color, 500), (0, helpers_1.getColorWithIntensity)($color, 500));
+}, function (_a) {
+    var $isActive = _a.$isActive, _b = _a.$color, $color = _b === void 0 ? 'primary' : _b;
+    return $isActive && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      border-bottom: var(--space-0_5) solid;\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    "], ["\n      border-bottom: var(--space-0_5) solid;\n      color: var(--color-", ");\n      svg {\n        fill: var(--color-", ");\n      }\n    "])), (0, helpers_1.getColorWithIntensity)($color, 500), (0, helpers_1.getColorWithIntensity)($color, 500));
+});
+exports.TabContentContainer = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  height: 100%;\n\n  ", "\n"], ["\n  display: flex;\n  height: 100%;\n\n  ", "\n"])), function (_a) {
+    var $isOverflow = _a.$isOverflow;
+    return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    overflow: ", ";\n    scroll-behavior: smooth;\n  "], ["\n    overflow: ", ";\n    scroll-behavior: smooth;\n  "])), $isOverflow ? 'auto' : 'hidden');
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/ui/TabsView/types.d.ts

@@ -0,0 +1,10 @@
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
+import { IconFC } from '../../../Icons';
+import { ReactNode } from 'react';
+export type Tab = {
+    color?: ThemeColorWithIntensity | ThemeColor;
+    content: ReactNode;
+    icon?: IconFC;
+    key?: string;
+    tabName: string;
+};

package/dist/components/ui/TabsView/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/ui/index.d.ts

@@ -4,3 +4,4 @@ export * from './ContextMenu';
 export * from './Ellipsis';
 export * from './Label';
 export * from './Message';
+export * from './TabsView';

package/dist/components/ui/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./ContextMenu"), exports);
 __exportStar(require("./Ellipsis"), exports);
 __exportStar(require("./Label"), exports);
 __exportStar(require("./Message"), exports);
+__exportStar(require("./TabsView"), exports);

package/dist/config/index.d.ts

@@ -1,10 +1,7 @@
+import { DeepPartial } from '../types';
 export type EnvType = 'dev' | 'test' | 'staging' | 'prod';
 export type Config = {
     webSocketUrl: string;
     httpServerUrl: `${string}/`;
 };
-type DeepPartial<T> = T extends object ? {
-    [P in keyof T]?: DeepPartial<T[P]>;
-} : T;
 export type PartialConfig = DeepPartial<Config>;
-export {};

package/dist/helpers/components.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const withDisplayName: <P = {}>(component: FC<P>, displayName: string) => FC<P>;

package/dist/helpers/components.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withDisplayName = void 0;
+var withDisplayName = function (component, displayName) {
+    component.displayName = displayName;
+    return component;
+};
+exports.withDisplayName = withDisplayName;

package/dist/helpers/index.d.ts

@@ -2,3 +2,4 @@ export * from './dates';
 export * from './numbers';
 export * from './text';
 export * from './responsive';
+export * from './types';

package/dist/helpers/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./dates"), exports);
 __exportStar(require("./numbers"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./responsive"), exports);
+__exportStar(require("./types"), exports);

package/dist/helpers/react.d.ts

@@ -0,0 +1,2 @@
+import { ForwardRefExoticComponent, ForwardRefRenderFunction, PropsWithoutRef, RefAttributes } from 'react';
+export declare const forwardRefGeneric: <T, P = {}>(render: ForwardRefRenderFunction<T, PropsWithoutRef<P>>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

package/dist/helpers/react.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forwardRefGeneric = void 0;
+var react_1 = require("react");
+var forwardRefGeneric = function (render) {
+    return (0, react_1.forwardRef)(render);
+};
+exports.forwardRefGeneric = forwardRefGeneric;

package/dist/helpers/styled/index.d.ts

@@ -0,0 +1 @@
+export * from './space';

package/dist/helpers/styled/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./space"), exports);

package/dist/helpers/styled/space.d.ts

@@ -0,0 +1,39 @@
+import { ThemeSpace, ThemeSpaceWithNegative } from '../../providers/ThemeProvider/types';
+export type MarginProps = {
+    m?: ThemeSpace | ThemeSpaceWithNegative;
+    mx?: ThemeSpace | ThemeSpaceWithNegative;
+    my?: ThemeSpace | ThemeSpaceWithNegative;
+    mt?: ThemeSpace | ThemeSpaceWithNegative;
+    mr?: ThemeSpace | ThemeSpaceWithNegative;
+    mb?: ThemeSpace | ThemeSpaceWithNegative;
+    ml?: ThemeSpace | ThemeSpaceWithNegative;
+};
+export declare const margins: import("styled-components").RuleSet<MarginProps>;
+export type PaddingProps = {
+    p?: ThemeSpace;
+    px?: ThemeSpace;
+    py?: ThemeSpace;
+    pt?: ThemeSpace;
+    pr?: ThemeSpace;
+    pb?: ThemeSpace;
+    pl?: ThemeSpace;
+};
+export declare const paddings: import("styled-components").RuleSet<PaddingProps>;
+export type SpaceProps = MarginProps & PaddingProps;
+export declare const extractSpaceProps: ({ m, mx, my, mt, mr, mb, ml, p, px, py, pt, pr, pb, pl, }: SpaceProps) => {
+    m: "0" | "1" | "0_5" | "1_5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "96" | "128" | "-0" | "-1" | "-0_5" | "-1_5" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-96" | "-128" | undefined;
+    mx: "0" | "1" | "0_5" | "1_5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "96" | "128" | "-0" | "-1" | "-0_5" | "-1_5" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-96" | "-128" | undefined;
+    my: "0" | "1" | "0_5" | "1_5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "96" | "128" | "-0" | "-1" | "-0_5" | "-1_5" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-96" | "-128" | undefined;
+    mt: "0" | "1" | "0_5" | "1_5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "96" | "128" | "-0" | "-1" | "-0_5" | "-1_5" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-96" | "-128" | undefined;
+    mr: "0" | "1" | "0_5" | "1_5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "96" | "128" | "-0" | "-1" | "-0_5" | "-1_5" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-96" | "-128" | undefined;
+    mb: "0" | "1" | "0_5" | "1_5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "96" | "128" | "-0" | "-1" | "-0_5" | "-1_5" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-96" | "-128" | undefined;
+    ml: "0" | "1" | "0_5" | "1_5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "14" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "72" | "80" | "96" | "128" | "-0" | "-1" | "-0_5" | "-1_5" | "-2" | "-3" | "-4" | "-5" | "-6" | "-8" | "-10" | "-12" | "-14" | "-16" | "-20" | "-24" | "-32" | "-40" | "-48" | "-56" | "-64" | "-72" | "-80" | "-96" | "-128" | undefined;
+    p: ThemeSpace | undefined;
+    px: ThemeSpace | undefined;
+    py: ThemeSpace | undefined;
+    pt: ThemeSpace | undefined;
+    pr: ThemeSpace | undefined;
+    pb: ThemeSpace | undefined;
+    pl: ThemeSpace | undefined;
+};
+export declare const space: import("styled-components").RuleSet<SpaceProps>;

package/dist/helpers/styled/space.js

@@ -0,0 +1,90 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.space = exports.extractSpaceProps = exports.paddings = exports.margins = void 0;
+var styled_components_1 = require("styled-components");
+exports.margins = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+    var m = _a.m;
+    return m && m.startsWith('-')
+        ? "margin: calc(0 - var(--space-".concat(m.substring(1), "));")
+        : "margin: var(--space-".concat(m, ");");
+}, function (_a) {
+    var mx = _a.mx;
+    return mx && mx.startsWith('-')
+        ? "margin-left: calc(0 - var(--space-".concat(mx.substring(1), ")); margin-right: calc(0 - var(--space-").concat(mx.substring(1), "));")
+        : "margin-left: var(--space-".concat(mx, "); margin-right: var(--space-").concat(mx, ");");
+}, function (_a) {
+    var my = _a.my;
+    return my && my.startsWith('-')
+        ? "margin-top: calc(0 - var(--space-".concat(my.substring(1), ")); margin-bottom: calc(0 - var(--space-").concat(my.substring(1), "));")
+        : "margin-top: var(--space-".concat(my, "); margin-bottom: var(--space-").concat(my, ");");
+}, function (_a) {
+    var mt = _a.mt;
+    return mt && mt.startsWith('-')
+        ? "margin-top: calc(0 - var(--space-".concat(mt.substring(1), "));")
+        : "margin-top: var(--space-".concat(mt, ");");
+}, function (_a) {
+    var mr = _a.mr;
+    return mr && mr.startsWith('-')
+        ? "margin-right: calc(0 - var(--space-".concat(mr.substring(1), "));")
+        : "margin-right: var(--space-".concat(mr, ");");
+}, function (_a) {
+    var mb = _a.mb;
+    return mb && mb.startsWith('-')
+        ? "margin-bottom: calc(0 - var(--space-".concat(mb.substring(1), "));")
+        : "margin-bottom: var(--space-".concat(mb, ");");
+}, function (_a) {
+    var ml = _a.ml;
+    return ml && ml.startsWith('-')
+        ? "margin-left: calc(0 - var(--space-".concat(ml.substring(1), "));")
+        : "margin-left: var(--space-".concat(ml, ");");
+});
+exports.paddings = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+    var p = _a.p;
+    return p && "padding: var(--space-".concat(p, ");");
+}, function (_a) {
+    var px = _a.px;
+    return px &&
+        "padding-left: var(--space-".concat(px, "); padding-right: var(--space-").concat(px, ");");
+}, function (_a) {
+    var py = _a.py;
+    return py &&
+        "padding-top: var(--space-".concat(py, "); padding-bottom: var(--space-").concat(py, ");");
+}, function (_a) {
+    var pt = _a.pt;
+    return pt && "padding-top: var(--space-".concat(pt, ");");
+}, function (_a) {
+    var pr = _a.pr;
+    return pr && "padding-right: var(--space-".concat(pr, ");");
+}, function (_a) {
+    var pb = _a.pb;
+    return pb && "padding-bottom: var(--space-".concat(pb, ");");
+}, function (_a) {
+    var pl = _a.pl;
+    return pl && "padding-left: var(--space-".concat(pl, ");");
+});
+var extractSpaceProps = function (_a) {
+    var m = _a.m, mx = _a.mx, my = _a.my, mt = _a.mt, mr = _a.mr, mb = _a.mb, ml = _a.ml, p = _a.p, px = _a.px, py = _a.py, pt = _a.pt, pr = _a.pr, pb = _a.pb, pl = _a.pl;
+    return ({
+        m: m,
+        mx: mx,
+        my: my,
+        mt: mt,
+        mr: mr,
+        mb: mb,
+        ml: ml,
+        p: p,
+        px: px,
+        py: py,
+        pt: pt,
+        pr: pr,
+        pb: pb,
+        pl: pl,
+    });
+};
+exports.extractSpaceProps = extractSpaceProps;
+exports.space = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), exports.margins, exports.paddings);
+var templateObject_1, templateObject_2, templateObject_3;