profinansy-ui-lib 3.3.8 → 3.3.9

package/dist/components/uikit/Table/components/THead/THead.styled.js

@@ -0,0 +1,117 @@
+"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.THItem = exports.TH = exports.Sort = exports.THead = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const SortArrow_svg_1 = __importDefault(require("../../../../../icons/SortArrow.svg"));
+const utils_1 = require("../../utils");
+exports.THead = styled_components_1.default.thead `
+  position: ${(props) => (props.stickyHeader ? 'sticky' : 'relative')};
+  top: 0;
+  z-index: 2;
+`;
+exports.Sort = (0, styled_components_1.default)(SortArrow_svg_1.default) `
+  transform: ${(props) => props.sortRotated ? 'rotate(0deg)' : 'rotate(180deg)'};
+`;
+exports.TH = styled_components_1.default.th `
+  background: ${(props) => props.theme.background.secondaryAlpha};
+  padding: 0 12px;
+  height: 44px;
+  min-height: 44px;
+  max-height: 44px;
+  position: relative;
+  ${(props) => props.isSort &&
+    (0, styled_components_1.css) `
+      position: relative;
+      cursor: pointer;
+      &:hover {
+        background: ${(props) => props.theme.background.accentSecondaryTint};
+      }
+    `};
+  ${(props) => props.stickyFirstColumn &&
+    (0, styled_components_1.css) `
+      &:first-of-type {
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        ${(props) => props.isScrolled &&
+        (0, styled_components_1.css) `
+            &:after {
+              content: '';
+              display: block;
+              height: 100%;
+              pointer-events: none;
+              position: absolute;
+              right: -6px;
+              top: 0;
+              width: 6px;
+              z-index: -1;
+              background-image: linear-gradient(90deg, #90bff954, #bbd9fb00);
+            }
+          `}
+      }
+    `};
+  ${(props) => props.stickyLastColumn &&
+    (0, styled_components_1.css) `
+      &:last-of-type {
+        position: sticky;
+        top: 0;
+        right: 0;
+        z-index: 1;
+        ${(props) => !props.isScrolledEnd &&
+        (0, styled_components_1.css) `
+            &:after {
+              content: '';
+              display: block;
+              height: 100%;
+              pointer-events: none;
+              position: absolute;
+              left: -2px;
+              top: 0;
+              width: 2px;
+              z-index: -1;
+              background-image: linear-gradient(90deg, #bbd9fb00, #90bff954);
+            }
+          `}
+      }
+    `};
+  &:first-of-type {
+    border-radius: 8px 0 0 8px;
+  }
+  &:last-of-type {
+    border-radius: 0 8px 8px 0;
+  }
+`;
+exports.THItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  ${({ alignment }) => (0, utils_1.getAlignment)(alignment)}
+`;
+//# sourceMappingURL=THead.styled.js.map

package/dist/components/uikit/Table/components/THead/THead.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"THead.styled.js","sourceRoot":"","sources":["../../../../../../src/components/uikit/Table/components/THead/THead.styled.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAA+C;AAC/C,uFAAyD;AAEzD,uCAA0C;AAE7B,QAAA,KAAK,GAAG,2BAAM,CAAC,KAAK,CAA2B;cAC9C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;;;CAGpE,CAAA;AAEY,QAAA,IAAI,GAAG,IAAA,2BAAM,EAAC,uBAAQ,CAAC,CAGlC;eACa,CAAC,KAAK,EAAE,EAAE,CACrB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB;CACxD,CAAA;AAEY,QAAA,EAAE,GAAG,2BAAM,CAAC,EAAE,CAMzB;gBACc,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc;;;;;;IAM5D,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,MAAM;IACZ,IAAA,uBAAG,EAAA;;;;sBAIe,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,mBAAmB;;KAEtE;IACD,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,iBAAiB;IACvB,IAAA,uBAAG,EAAA;;;;;;UAMG,CAAC,KAA8B,EAAE,EAAE,CACnC,KAAK,CAAC,UAAU;QAChB,IAAA,uBAAG,EAAA;;;;;;;;;;;;;WAaF;;KAEN;IACD,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,gBAAgB;IACtB,IAAA,uBAAG,EAAA;;;;;;UAMG,CAAC,KAAiC,EAAE,EAAE,CACtC,CAAC,KAAK,CAAC,aAAa;QACpB,IAAA,uBAAG,EAAA;;;;;;;;;;;;;WAaF;;KAEN;;;;;;;CAOJ,CAAA;AAEY,QAAA,MAAM,GAAG,2BAAM,CAAC,GAAG,CAA0C;;;;IAItE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAA,oBAAY,EAAC,SAAS,CAAC;CAC7C,CAAA"}

package/dist/components/uikit/Table/hooks/useDragging.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragging = void 0;
+const react_1 = require("react");
+const useDragging = (tableContainerRef, isDraggable) => {
+    const [isStartDragging, setIsStartDragging] = (0, react_1.useState)(false);
+    const startX = (0, react_1.useRef)(0);
+    const scrollLeft = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        const handleMouseDown = (e) => {
+            setIsStartDragging(true);
+            if (tableContainerRef.current) {
+                startX.current = e.pageX - tableContainerRef.current.offsetLeft;
+                scrollLeft.current = tableContainerRef.current.scrollLeft;
+            }
+        };
+        const handleMouseMove = (e) => {
+            if (!isStartDragging)
+                return;
+            e.preventDefault();
+            if (tableContainerRef.current) {
+                const x = e.pageX - tableContainerRef.current.offsetLeft;
+                const walk = (x - startX.current) * 2;
+                tableContainerRef.current.scrollLeft = scrollLeft.current - walk;
+            }
+        };
+        const handleMouseUp = () => {
+            setIsStartDragging(false);
+        };
+        const container = tableContainerRef.current;
+        if (isDraggable) {
+            container === null || container === void 0 ? void 0 : container.addEventListener('mousedown', handleMouseDown);
+            container === null || container === void 0 ? void 0 : container.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            container === null || container === void 0 ? void 0 : container.removeEventListener('mousedown', handleMouseDown);
+            container === null || container === void 0 ? void 0 : container.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isStartDragging, isDraggable]);
+};
+exports.useDragging = useDragging;
+//# sourceMappingURL=useDragging.js.map

package/dist/components/uikit/Table/hooks/useDragging.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragging.js","sourceRoot":"","sources":["../../../../../src/components/uikit/Table/hooks/useDragging.ts"],"names":[],"mappings":";;;AAAA,iCAAqE;AAE9D,MAAM,WAAW,GAAG,CACzB,iBAAgD,EAChD,WAAoB,EACpB,EAAE;IACF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC7D,MAAM,MAAM,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAA;IACxB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAA;IAE5B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,kBAAkB,CAAC,IAAI,CAAC,CAAA;YACxB,IAAI,iBAAiB,CAAC,OAAO,EAAE;gBAC7B,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,UAAU,CAAA;gBAC/D,UAAU,CAAC,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,UAAU,CAAA;aAC1D;QACH,CAAC,CAAA;QAED,MAAM,eAAe,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,CAAC,eAAe;gBAAE,OAAM;YAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,IAAI,iBAAiB,CAAC,OAAO,EAAE;gBAC7B,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,UAAU,CAAA;gBACxD,MAAM,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;gBACrC,iBAAiB,CAAC,OAAO,CAAC,UAAU,GAAG,UAAU,CAAC,OAAO,GAAG,IAAI,CAAA;aACjE;QACH,CAAC,CAAA;QAED,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,kBAAkB,CAAC,KAAK,CAAC,CAAA;QAC3B,CAAC,CAAA;QAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,OAAO,CAAA;QAC3C,IAAI,WAAW,EAAE;YACf,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YACzD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YACzD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;SAClD;QAED,OAAO,GAAG,EAAE;YACV,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YAC5D,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAA;YAC5D,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAA;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAA;AACpC,CAAC,CAAA;AA5CY,QAAA,WAAW,eA4CvB"}

package/dist/components/uikit/Table/hooks/useHorizontalScroll.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHorizontalScroll = void 0;
+const react_1 = require("react");
+const useHorizontalScroll = (tableContainerRef, stickyFirstColumn, stickyLastColumn) => {
+    const [isScrolled, setIsScrolled] = (0, react_1.useState)(false);
+    const [isScrolledEnd, setIsScrolledEnd] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const handleScroll = () => {
+            if (tableContainerRef.current) {
+                const { scrollLeft, scrollWidth, clientWidth } = tableContainerRef.current;
+                setIsScrolled(scrollLeft > 0);
+                setIsScrolledEnd(scrollLeft + clientWidth >= scrollWidth);
+            }
+        };
+        const container = tableContainerRef.current;
+        if (stickyFirstColumn || stickyLastColumn) {
+            handleScroll();
+            container === null || container === void 0 ? void 0 : container.addEventListener('scroll', handleScroll);
+        }
+        return () => {
+            container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', handleScroll);
+        };
+    }, [stickyFirstColumn, stickyLastColumn]);
+    return { tableContainerRef, isScrolled, isScrolledEnd };
+};
+exports.useHorizontalScroll = useHorizontalScroll;
+//# sourceMappingURL=useHorizontalScroll.js.map

package/dist/components/uikit/Table/hooks/useHorizontalScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalScroll.js","sourceRoot":"","sources":["../../../../../src/components/uikit/Table/hooks/useHorizontalScroll.ts"],"names":[],"mappings":";;;AAAA,iCAA6D;AAEtD,MAAM,mBAAmB,GAAG,CACjC,iBAAgD,EAChD,iBAA0B,EAC1B,gBAAyB,EACzB,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEzD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,iBAAiB,CAAC,OAAO,EAAE;gBAC7B,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAC5C,iBAAiB,CAAC,OAAO,CAAA;gBAC3B,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAAA;gBAC7B,gBAAgB,CAAC,UAAU,GAAG,WAAW,IAAI,WAAW,CAAC,CAAA;aAC1D;QACH,CAAC,CAAA;QAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,OAAO,CAAA;QAE3C,IAAI,iBAAiB,IAAI,gBAAgB,EAAE;YACzC,YAAY,EAAE,CAAA;YACd,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;SACpD;QAED,OAAO,GAAG,EAAE;YACV,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACxD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEzC,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,CAAA;AACzD,CAAC,CAAA;AA/BY,QAAA,mBAAmB,uBA+B/B"}

package/dist/components/uikit/Table/hooks/useLastRow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const useLastRow: (callback: () => void) => {
     lastRowRef: import("react").MutableRefObject<any>;
 };

package/dist/components/uikit/Table/hooks/useLastRow.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLastRow = void 0;
+const react_1 = require("react");
+const useLastRow = (callback) => {
+    const lastRowRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && callback) {
+                callback();
+            }
+        }, { threshold: 1 });
+        if (lastRowRef.current) {
+            observer.observe(lastRowRef.current);
+        }
+        return () => {
+            if (lastRowRef.current) {
+                observer.unobserve(lastRowRef.current);
+            }
+        };
+    }, [callback, lastRowRef]);
+    return { lastRowRef };
+};
+exports.useLastRow = useLastRow;
+//# sourceMappingURL=useLastRow.js.map

package/dist/components/uikit/Table/hooks/useLastRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLastRow.js","sourceRoot":"","sources":["../../../../../src/components/uikit/Table/hooks/useLastRow.ts"],"names":[],"mappings":";;;AAAA,iCAAyC;AAElC,MAAM,UAAU,GAAG,CAAC,QAAoB,EAAE,EAAE;IACjD,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAA;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,EAAE;YACV,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,QAAQ,EAAE;gBACzC,QAAQ,EAAE,CAAA;aACX;QACH,CAAC,EACD,EAAE,SAAS,EAAE,CAAC,EAAE,CACjB,CAAA;QAED,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;SACrC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;aACvC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAE1B,OAAO,EAAE,UAAU,EAAE,CAAA;AACvB,CAAC,CAAA;AAzBY,QAAA,UAAU,cAyBtB"}

package/dist/components/uikit/Table/hooks/useSort.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSort = void 0;
+const react_1 = require("react");
+function useSort(data, customSort) {
+    const [sortedData, setSortedData] = (0, react_1.useState)(data);
+    const [activeSort, setActiveSort] = (0, react_1.useState)(null);
+    const isCustomSort = !!customSort;
+    const sortRotated = (isCustomSort ? customSort === null || customSort === void 0 ? void 0 : customSort.activeSortDirection : activeSort === null || activeSort === void 0 ? void 0 : activeSort.order) !==
+        'ASC';
+    const activeSortField = isCustomSort
+        ? customSort === null || customSort === void 0 ? void 0 : customSort.activeSortField
+        : activeSort === null || activeSort === void 0 ? void 0 : activeSort.field;
+    (0, react_1.useEffect)(() => {
+        const compare = (a, b) => {
+            const aField = a[activeSort.field];
+            const bField = b[activeSort.field];
+            const compareNumbers = (a, b) => {
+                return activeSort.order === 'ASC' ? a - b : b - a;
+            };
+            const compareStrings = (a, b) => {
+                return activeSort.order === 'ASC'
+                    ? a.localeCompare(b)
+                    : b.localeCompare(a);
+            };
+            if (typeof aField === 'number' && typeof bField === 'number') {
+                return compareNumbers(aField, bField);
+            }
+            else if (typeof aField === 'string' && typeof bField === 'string') {
+                return compareStrings(aField, bField);
+            }
+            else if (typeof aField === 'number') {
+                return -1;
+            }
+            else {
+                return 1;
+            }
+        };
+        const copyData = [...data];
+        if (activeSort) {
+            copyData.sort(compare);
+        }
+        setSortedData(copyData);
+    }, [data, activeSort]);
+    const handleSort = (field) => {
+        const order = (activeSort === null || activeSort === void 0 ? void 0 : activeSort.field) !== field
+            ? 'ASC'
+            : activeSort.order === 'ASC'
+                ? 'DESC'
+                : 'ASC';
+        if (isCustomSort) {
+            return customSort === null || customSort === void 0 ? void 0 : customSort.onSort(field, order);
+        }
+        setActiveSort({ field, order });
+    };
+    return { sortedData, activeSortField, sortRotated, handleSort };
+}
+exports.useSort = useSort;
+//# sourceMappingURL=useSort.js.map

package/dist/components/uikit/Table/hooks/useSort.js.map

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

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

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

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

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

package/dist/components/uikit/Table/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAlignment = void 0;
+const getAlignment = (alignment) => {
+    const styles = {
+        justifyContent: 'flex-start',
+        textAlign: alignment
+    };
+    if (alignment === 'right')
+        styles.justifyContent = 'flex-end';
+    if (alignment === 'center')
+        styles.justifyContent = 'center';
+    return styles;
+};
+exports.getAlignment = getAlignment;
+//# sourceMappingURL=utils.js.map

package/dist/components/uikit/Table/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/uikit/Table/utils.ts"],"names":[],"mappings":";;;AAEO,MAAM,YAAY,GAAG,CAAC,SAAoC,EAAE,EAAE;IACnE,MAAM,MAAM,GAAG;QACb,cAAc,EAAE,YAAY;QAC5B,SAAS,EAAE,SAAS;KACrB,CAAA;IACD,IAAI,SAAS,KAAK,OAAO;QAAE,MAAM,CAAC,cAAc,GAAG,UAAU,CAAA;IAC7D,IAAI,SAAS,KAAK,QAAQ;QAAE,MAAM,CAAC,cAAc,GAAG,QAAQ,CAAA;IAC5D,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AARY,QAAA,YAAY,gBAQxB"}

package/dist/components/uikit/Tabs/Tabs.js

@@ -0,0 +1,98 @@
+"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.Tabs = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./Tabs.styled"));
+const DragScroll_1 = require("../DragScroll");
+const Typography_1 = require("../Typography");
+const Counter_1 = require("../Counter");
+const ThemeProvider_1 = require("../../../theme/ThemeProvider");
+const theme_const_1 = require("../../../theme/theme.const");
+const styled_components_1 = require("styled-components");
+const Tabs = ({ style, onChange, options, selectedValue, indent = 16, counterType, classWrapper }) => {
+    const [line, setLine] = (0, react_1.useState)({ left: 0, width: 0 });
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (selectedValue && (options === null || options === void 0 ? void 0 : options.length)) {
+            const index = options.findIndex((val) => val.value === selectedValue);
+            getLinePosition(index);
+        }
+    }, [selectedValue, options]);
+    const handleClick = (value, evt, index) => {
+        if (onChange) {
+            onChange(value, evt);
+        }
+        scrollToTab(index);
+    };
+    const getLinePosition = (index) => {
+        if (ref.current && ref.current.children[index]) {
+            const tabElement = ref.current.children[index];
+            const tabsRect = ref.current.getBoundingClientRect();
+            const tabRect = tabElement.getBoundingClientRect();
+            const containerScrollLeft = ref.current.scrollLeft; // Смещение скролла контейнера
+            const tabOffset = tabRect.left - tabsRect.left + containerScrollLeft; // Учитываем смещение скролла
+            const tabWidth = tabRect.width;
+            setLine({ left: tabOffset, width: tabWidth });
+        }
+    };
+    const scrollToTab = (index) => {
+        if (ref.current && ref.current.children[index]) {
+            const selectedTab = ref.current.children[index];
+            const containerRect = ref.current.getBoundingClientRect();
+            const tabRect = selectedTab.getBoundingClientRect();
+            const offsetRight = tabRect.right - containerRect.right;
+            const offsetLeft = tabRect.left - containerRect.left;
+            if (offsetRight > 0) {
+                ref.current.scrollTo({
+                    left: ref.current.scrollLeft + offsetRight + 10,
+                    behavior: 'smooth'
+                });
+            }
+            else if (offsetLeft < 0) {
+                ref.current.scrollTo({
+                    left: ref.current.scrollLeft + offsetLeft - 10,
+                    behavior: 'smooth'
+                });
+            }
+        }
+    };
+    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(Styled.Wrapper, { className: classWrapper },
+            react_1.default.createElement(DragScroll_1.DragScroll, null,
+                react_1.default.createElement(Styled.Container, { indent: indent, style: style, ref: ref },
+                    options.map((item, index) => (react_1.default.createElement(Styled.Button, { key: index, onClick: (evt) => handleClick(item.value, evt, index), isActive: selectedValue === item.value },
+                        react_1.default.createElement(Typography_1.Typography, { tag: "span", variant: "controls-Medium" }, item.label),
+                        item.dataCount !== undefined && (react_1.default.createElement(Counter_1.Counter, { number: item.dataCount, type: counterType, style: {
+                                marginLeft: '4px',
+                                background: selectedValue === item.value
+                                    ? theme_const_1.palette[mode].other.violet
+                                    : theme_const_1.palette[mode].other.gray
+                            } }))))),
+                    react_1.default.createElement(Styled.LineIndicator, { position: line.left, width: line.width }))))));
+};
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.js.map

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

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

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

@@ -0,0 +1,79 @@
+"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.Tabs = void 0;
+const react_1 = __importStar(require("react"));
+const StoryDescription_1 = require("../storybook/StoryDescription/StoryDescription");
+const StoryExample_1 = require("../storybook/StoryExample/StoryExample");
+const StoryTitle_1 = require("../storybook/StoryTitle/StoryTitle");
+const Tabs_1 = require("./Tabs");
+const Card_1 = require("../Card");
+exports.default = {
+    title: 'Components/Tabs',
+    component: Tabs_1.Tabs,
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/yiCswWljV8KfikRKdjnnc7/Ui-kit-WEB?type=design&node-id=13264-18262&mode=dev'
+        }
+    }
+};
+const Tabs = () => {
+    const data = [
+        { label: 'Акции', value: 'stock' },
+        { label: 'Облигации', value: 'bonds' },
+        { label: 'ETF', value: 'etfs' },
+        { label: 'Криптовалюта', value: 'crypto' },
+        { label: 'Индексы', value: 'index' },
+        { label: 'Валюта', value: 'currency' },
+        { label: 'Фьючерсы', value: 'futures' },
+        { label: 'Опционы', value: 'options' },
+        { label: 'Металлы', value: 'metals' }
+    ];
+    const dataWithCountCounter = [
+        { label: 'Акции', value: 'stock', dataCount: 1 },
+        { label: 'Облигации', value: 'bonds', dataCount: 25 },
+        { label: 'ETF', value: 'etfs', dataCount: 99 }
+    ];
+    const [value1, setValue1] = (0, react_1.useState)(data[0].value);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StoryTitle_1.StoryTitle, { isBig: true }, "Tabs"),
+        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 \u0432\u044B\u0431\u043E\u0440\u0430 \u0440\u0435\u043D\u0434\u0430\u0440\u0438\u043D\u0433\u0430 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0435\u043D\u043D\u043E\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Tabs_1.Tabs, { options: data, selectedValue: value1, onChange: setValue1 })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "Counter \u0432\u043D\u0443\u0442\u0440\u0438 Tabs"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043E\u0442\u043E\u0431\u0440\u0430\u0437\u0438\u0442\u044C \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043D\u0430\u0439\u0434\u0435\u043D\u044B\u0445/\u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432. \u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0430\u0434\u043E\n      \u043E\u0442\u043E\u0431\u0440\u0430\u0437\u0438\u0442\u044C \u0447\u0438\u0441\u043B\u043E \u0432 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0435 Counter, \u0442\u043E \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0442\u044C \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>counterType</b>. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0435\u043D\u0438\u044E \u043E\u043D\u043E \u0440\u0430\u0432\u043D\u043E <b>brand</b>.\n      " }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement(Tabs_1.Tabs, { counterType: "brand", options: dataWithCountCounter, selectedValue: value1, onChange: setValue1 })),
+        react_1.default.createElement(StoryTitle_1.StoryTitle, null, "\u0421\u043A\u0440\u043E\u043B\u043B"),
+        react_1.default.createElement(StoryDescription_1.StoryDescription, { text: "\u0415\u0441\u043B\u0438 \u0442\u0430\u0431\u044B \u043D\u0435 \u0432\u043B\u0435\u0437\u0430\u044E\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u043D\u0442, \u0442\u043E \u043E\u043D\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043A\u0440\u044B\u0430\u0442\u044C\u0441\u044F \u0437\u0430 \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u043E\u043C \u0438 \u0441\u043A\u0440\u043E\u043B\u0438\u0442\u044C\u0441\u044F. \u0414\u043B\u044F \u043B\u0443\u0447\u0448\u0435\u0433\u043E UX \u0432\u0430\u0448\u0438 \u0442\u0430\u0431\u044B \u0434\u043E\u043B\u0436\u043D\u044B \u043F\u043B\u043E\u0442\u043D\u043E\n      \u043F\u0440\u0438\u043C\u044B\u043A\u0430\u0442\u044C \u043A \u043A\u0440\u0430\u044F\u043C, \u0434\u043B\u044F \u044D\u0442\u043E\u0433\u043E \u0441\u0434\u0435\u043B\u0430\u043D\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <b>indent</b>. \u041F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u043E\u043D\u043E \u0440\u0430\u0432\u043D\u043E 16 - \u0441\u0442\u0430\u043D\u0434\u0430\u0440\u0442\u043D\u043E\u0433\u043E \u043F\u0430\u0434\u0434\u0438\u043D\u0433\u0430 \u043A\u0430\u0440\u0442\u043E\u0447\u043A\u0438." }),
+        react_1.default.createElement(StoryExample_1.StoryExample, null,
+            react_1.default.createElement("div", { style: { maxWidth: '600px' } },
+                react_1.default.createElement(Card_1.Card, { title: "\u0421\u043A\u0440\u043E\u043B\u043B" },
+                    react_1.default.createElement(Tabs_1.Tabs, { options: data, selectedValue: value1, onChange: setValue1 }))))));
+};
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tabs/Tabs.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAEvC,qFAAiF;AACjF,yEAAqE;AACrE,mEAA+D;AAE/D,iCAA0C;AAC1C,kCAA8B;AAE9B,kBAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,WAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uGAAuG;SAC7G;KACF;CACF,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,EAAE;IACvB,MAAM,IAAI,GAAG;QACX,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE;QACtC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;QAC/B,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC1C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE;QACpC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE;QACtC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;QACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;KACtC,CAAA;IAED,MAAM,oBAAoB,GAAG;QAC3B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE;QAChD,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;QACrD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;KAC/C,CAAA;IAED,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAEnD,OAAO,CACL;QACE,8BAAC,uBAAU,IAAC,KAAK,EAAE,IAAI,WAAmB;QAC1C,8BAAC,mCAAgB,IAAC,IAAI,EAAC,uXAAsE,GAAG;QAChG,8BAAC,2BAAY;YACX,8BAAC,WAAS,IAAC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAI,CAC3D;QACf,8BAAC,uBAAU,4DAAiC;QAC5C,8BAAC,mCAAgB,IACf,IAAI,EAAC,o+BAEN,GACC;QACF,8BAAC,2BAAY;YACX,8BAAC,WAAS,IACR,WAAW,EAAC,OAAO,EACnB,OAAO,EAAE,oBAAoB,EAC7B,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,SAAS,GACnB,CACW;QACf,8BAAC,uBAAU,+CAAoB;QAC/B,8BAAC,mCAAgB,IACf,IAAI,EAAC,moCACkH,GACvH;QACF,8BAAC,2BAAY;YACX,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;gBAC/B,8BAAC,WAAI,IAAC,KAAK,EAAC,sCAAQ;oBAClB,8BAAC,WAAS,IACR,OAAO,EAAE,IAAI,EACb,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,SAAS,GACnB,CACG,CACH,CACO,CACd,CACJ,CAAA;AACH,CAAC,CAAA;AA5DY,QAAA,IAAI,QA4DhB"}

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

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineIndicator = exports.Button = exports.Container = exports.Wrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const animation_2 = require("../../../constants/animation/animation");
+exports.Wrapper = styled_components_1.default.div `
+  max-width: 100%;
+`;
+exports.Container = styled_components_1.default.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -ms-overflow-style: none; /* IE и Edge */
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  padding-right: ${(props) => `${props.indent}px`};
+  margin-right: ${(props) => `-${props.indent}px`};
+  padding-left: ${(props) => `${props.indent}px`};
+  margin-left: ${(props) => `-${props.indent}px`};
+`;
+exports.Button = styled_components_1.default.button `
+  font-family: 'Manrope', sans-serif;
+  background: transparent;
+  outline: none;
+  border: none;
+  color: ${(props) => props.isActive ? props.theme.text.primary : props.theme.text.fourth};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+  padding: 8px 0;
+  transition: ${() => `all 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  &:hover {
+    color: ${(props) => props.theme.text.primary};
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+    pointer-events: none;
+  }
+`;
+exports.LineIndicator = styled_components_1.default.div `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: ${(props) => `${props.width}px`};
+  height: 2px;
+  background: ${(props) => props.theme.stroke.accent};
+  transition: ${() => `all 0.3s ${animation_2.AnimationFunctions.animation_1}`};
+  will-change: transform;
+  transform: ${(props) => `translateX(${props.position}px)`};
+`;
+//# sourceMappingURL=Tabs.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styled.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tabs/Tabs.styled.ts"],"names":[],"mappings":";;;;;;AAAA,0EAAoE;AACpE,sEAA2E;AAE9D,QAAA,OAAO,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAEhC,CAAA;AAEY,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,CAEjC;;;;;;;;;;;;mBAYiB,CAAC,KAAoD,EAAE,EAAE,CACxE,GAAG,KAAK,CAAC,MAAM,IAAI;kBACL,CAAC,KAAoD,EAAE,EAAE,CACvE,IAAI,KAAK,CAAC,MAAM,IAAI;kBACN,CAAC,KAAoD,EAAE,EAAE,CACvE,GAAG,KAAK,CAAC,MAAM,IAAI;iBACN,CAAC,KAAoD,EAAE,EAAE,CACtE,IAAI,KAAK,CAAC,MAAM,IAAI;CACvB,CAAA;AAEY,QAAA,MAAM,GAAG,2BAAM,CAAC,MAAM,CAAuB;;;;;WAK/C,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;;;;;;gBAQvD,GAAG,EAAE,CAAC,YAAY,8BAAkB,CAAC,WAAW,EAAE;;aAErD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;CAO/C,CAAA;AAEY,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAqC;;;;WAIjE,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI;;gBAExB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;gBACpC,GAAG,EAAE,CAAC,YAAY,8BAAkB,CAAC,WAAW,EAAE;;eAEnD,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,KAAK,CAAC,QAAQ,KAAK;CAC1D,CAAA"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/uikit/Tabs/index.ts"],"names":[],"mappings":";;;AAAA,+BAA6B;AAApB,4FAAA,IAAI,OAAA"}