@mailstep/design-system 0.8.31-beta.4 → 0.8.31

package/ui/Elements/Line/Line.d.ts

@@ -1,4 +1,3 @@
 import { ILine } from './types';
-
 declare const Line: ILine;
 export default Line;

package/ui/Elements/Line/Line.js

@@ -1,25 +1,23 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Line/Line.tsx
+const gabs = {
+	none: 0,
+	small: "5px",
+	medium: "10px",
+	large: "20px"
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@xstyled/styled-components';
-var gabs = {
-    none: 0,
-    small: '5px',
-    medium: '10px',
-    large: '20px',
-};
-var LineComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border-bottom: 1px ", ";\n  border-bottom-color: lightGray3;\n  margin: ", ";\n"], ["\n  width: 100%;\n  border-bottom: 1px ", ";\n  border-bottom-color: lightGray3;\n  margin: ", ";\n"])), function (_a) {
-    var variant = _a.variant;
-    return variant;
-}, function (_a) {
-    var gab = _a.gab, gabTop = _a.gabTop, gabBottom = _a.gabBottom;
-    return "".concat(gabs[gab] || gabs[gabTop], " 0 ").concat(gabs[gab] || gabs[gabBottom]);
+const LineComponent = styled$1.div`
+  width: 100%;
+  border-bottom: 1px ${({ variant }) => variant};
+  border-bottom-color: lightGray3;
+  margin: ${({ gab, gabTop, gabBottom }) => `${gabs[gab] || gabs[gabTop]} 0 ${gabs[gab] || gabs[gabBottom]}`};
+`;
+const Line = ({ gab = "none", gabTop = "none", gabBottom = "none", variant = "solid" }) => /* @__PURE__ */ jsx(LineComponent, {
+	gab,
+	gabTop,
+	gabBottom,
+	variant
 });
-var Line = function (_a) {
-    var _b = _a.gab, gab = _b === void 0 ? 'none' : _b, _c = _a.gabTop, gabTop = _c === void 0 ? 'none' : _c, _d = _a.gabBottom, gabBottom = _d === void 0 ? 'none' : _d, _e = _a.variant, variant = _e === void 0 ? 'solid' : _e;
-    return (_jsx(LineComponent, { gab: gab, gabTop: gabTop, gabBottom: gabBottom, variant: variant }));
-};
-export default Line;
-var templateObject_1;
+//#endregion
+export { Line as default };

package/ui/Elements/Line/index.d.ts

@@ -1,4 +1,3 @@
-import { default as Line } from './Line';
-
+import Line from './Line';
 export { Line };
 export default Line;

package/ui/Elements/Line/index.js

@@ -1,3 +1,5 @@
-import Line from './Line';
-export { Line };
-export default Line;
+import Line from "./Line.js";
+//#region packages/ui/Elements/Line/index.ts
+var Line_default = Line;
+//#endregion
+export { Line, Line_default as default };

package/ui/Elements/Line/stories/Line.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('../types').ILine;
+    component: import("../types").ILine;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Line/types.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 export type Gab = 'none' | 'small' | 'medium' | 'large';
 export type Variant = 'solid' | 'dashed';
 export type LineProps = {

package/ui/Elements/Link/Link.d.ts

@@ -1,5 +1,4 @@
-import { default as React, FC } from 'react';
-
+import React, { type FC } from 'react';
 type ToObjectType = {
     pathname?: string;
     search?: string;

package/ui/Elements/Link/Link.js

@@ -1,48 +1,44 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import { createRgba } from "../../utils/CreateRgba/createRgba.js";
+import "../../utils/index.js";
+import "react";
+import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import { NavLink } from "react-router-dom";
+//#region packages/ui/Elements/Link/Link.tsx
+const StyledLink = styled$1(NavLink)`
+  color: ${({ color }) => createRgba(color, .7)};
+  cursor: pointer;
+  :visited {
+    color: ${({ color }) => color};
+  }
+  :hover {
+    color: ${({ color }) => color};
+  }
+  :active {
+    color: ${({ color }) => color};
+  }
+  :focus {
+    outline: none;
+  }
+  font-family: ${th("fonts.primary")};
+  font-size: ${({ size }) => size};
+
+  ${({ disabled }) => disabled ? css`
+          pointer-events: none;
+          opacity: 0.5;
+        ` : null}
+`;
+const Link = (props) => {
+	const theme = useTheme();
+	const themeColor = props.color ? th.color(props.color)({ theme }) : void 0;
+	const themeFontSize = th.fontSize(props.size ?? 1)({ theme });
+	return /* @__PURE__ */ jsx(StyledLink, {
+		...props,
+		to: props.to || "",
+		color: themeColor,
+		size: themeFontSize,
+		children: props.children
+	});
 };
-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);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { NavLink as ReactLink } from 'react-router-dom';
-import { createRgba } from '../../utils';
-import styled, { css, useTheme, th } from '@xstyled/styled-components';
-var StyledLink = styled(ReactLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n  :visited {\n    color: ", ";\n  }\n  :hover {\n    color: ", ";\n  }\n  :active {\n    color: ", ";\n  }\n  :focus {\n    outline: none;\n  }\n  font-family: ", ";\n  font-size: ", ";\n\n  ", "\n"], ["\n  color: ", ";\n  cursor: pointer;\n  :visited {\n    color: ", ";\n  }\n  :hover {\n    color: ", ";\n  }\n  :active {\n    color: ", ";\n  }\n  :focus {\n    outline: none;\n  }\n  font-family: ", ";\n  font-size: ", ";\n\n  ", "\n"])), function (_a) {
-    var color = _a.color;
-    return createRgba(color, 0.7);
-}, function (_a) {
-    var color = _a.color;
-    return color;
-}, function (_a) {
-    var color = _a.color;
-    return color;
-}, function (_a) {
-    var color = _a.color;
-    return color;
-}, th('fonts.primary'), function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var disabled = _a.disabled;
-    return disabled
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          pointer-events: none;\n          opacity: 0.5;\n        "], ["\n          pointer-events: none;\n          opacity: 0.5;\n        "]))) : null;
-});
-var Link = function (props) {
-    var _a;
-    var theme = useTheme();
-    var themeColor = props.color ? th.color(props.color)({ theme: theme }) : undefined;
-    var themeFontSize = th.fontSize((_a = props.size) !== null && _a !== void 0 ? _a : 1)({ theme: theme });
-    return (_jsx(StyledLink, __assign({}, props, { to: props.to || '', color: themeColor, size: themeFontSize, children: props.children })));
-};
-export default Link;
-var templateObject_1, templateObject_2;
+//#endregion
+export { Link as default };

package/ui/Elements/Link/index.d.ts

@@ -1,4 +1,3 @@
-import { default as Link } from './Link';
-
+import Link from './Link';
 export { Link };
 export default Link;

package/ui/Elements/Link/index.js

@@ -1,3 +1,5 @@
-import Link from './Link';
-export { Link };
-export default Link;
+import Link from "./Link.js";
+//#region packages/ui/Elements/Link/index.ts
+var Link_default = Link;
+//#endregion
+export { Link, Link_default as default };

package/ui/Elements/Link/stories/Link.stories.d.ts

@@ -1,21 +1,20 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<{
+    component: import("react").FC<{
         as?: any;
-        children?: import('react').ReactNode;
-        to?: string | Function | {
-            pathname?: string | undefined;
-            search?: string | undefined;
-            hash?: string | undefined;
-            state?: object | undefined;
-        } | undefined;
-        target?: string | undefined;
-        color?: string | undefined;
-        size?: number | "inherit" | undefined;
-        disabled?: boolean | undefined;
-        onClick?: Function | undefined;
+        children?: React.ReactNode;
+        to?: string | {
+            pathname?: string;
+            search?: string;
+            hash?: string;
+            state?: object;
+        } | Function;
+        target?: string;
+        color?: string;
+        size?: number | "inherit";
+        disabled?: boolean;
+        onClick?: Function;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Elements/Logo/Logo.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-import { LogoProps } from './types';
-
+import React from 'react';
+import type { LogoProps } from './types';
 declare const Logo: React.FC<LogoProps>;
 export default Logo;

package/ui/Elements/Logo/Logo.js

@@ -1,94 +1,69 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import "react";
+import styled$1 from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+import logoBlackImage from "./assets/mailship/logo_black.png";
+import logoMImage from "./assets/mailship/logo_m.png";
+import logoWhiteImage from "./assets/mailship/logo_white.png";
+import logoSvg from "./assets/mailship/mailship-logo.svg";
+import logoMailstepBlack from "./assets/mailstep/mailstep_black.svg";
+import logoMailstepWhite from "./assets/mailstep/mailstep_white.svg";
+import logoMailstock from "./assets/mailstock/mailstock.svg";
+import logoMailwise from "./assets/mailwise/mailwiseLogo.svg";
+import logoMailwiseSmall from "./assets/mailwise/mailwiseLogoSmall.svg";
+import logoMailwrap from "./assets/mailwrap/mailwrapLogo.svg";
+import logoMailwrapSmall from "./assets/mailwrap/mailwrapLogoSmall.svg";
+import warehouseManager2 from "./assets/warehouse/manager2.svg";
+import warehouseManager3 from "./assets/warehouse/manager3.svg";
+import warehouseManager from "./assets/warehouse/manager.svg";
+//#region packages/ui/Elements/Logo/Logo.tsx
+const defaultSizes = {
+	small: "30px",
+	medium: "46px",
+	big: "61px"
 };
-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);
+const variantMap = {
+	mailship: {
+		white: logoWhiteImage,
+		black: logoBlackImage,
+		m: logoMImage,
+		s: logoSvg
+	},
+	mailwise: {
+		black: logoMailwise,
+		s: logoMailwiseSmall
+	},
+	mailstock: { black: logoMailstock },
+	mailstep: {
+		black: logoMailstepBlack,
+		white: logoMailstepWhite
+	},
+	mailwrap: {
+		black: logoMailwrap,
+		s: logoMailwrapSmall
+	},
+	warehouse: {
+		black: warehouseManager,
+		m: warehouseManager2,
+		s: warehouseManager3
+	}
 };
-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;
+const StyledImage = styled$1.img`
+  width: ${({ width }) => width || "auto"};
+  height: ${({ height, width, size }) => height || (width ? "auto" : size ? defaultSizes[size] : defaultSizes.medium)};
+`;
+const Logo = ({ brand = "mailship", variant, size, width, height, ...rest }) => {
+	const logo = variantMap[brand]?.[variant];
+	if (!logo) {
+		console.warn("No variant for this logo exists.");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(StyledImage, {
+		src: logo,
+		size,
+		width,
+		height,
+		...rest
+	});
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import logoBlackImage from './assets/mailship/logo_black.png';
-import logoMImage from './assets/mailship/logo_m.png';
-import logoWhiteImage from './assets/mailship/logo_white.png';
-import logoSvg from './assets/mailship/mailship-logo.svg';
-import logoMailstepBlack from './assets/mailstep/mailstep_black.svg';
-import logoMailstepWhite from './assets/mailstep/mailstep_white.svg';
-import logoMailstock from './assets/mailstock/mailstock.svg';
-import logoMailwise from './assets/mailwise/mailwiseLogo.svg';
-import logoMailwiseSmall from './assets/mailwise/mailwiseLogoSmall.svg';
-import logoMailwrap from './assets/mailwrap/mailwrapLogo.svg';
-import logoMailwrapSmall from './assets/mailwrap/mailwrapLogoSmall.svg';
-import warehouseManager2 from './assets/warehouse/manager2.svg';
-import warehouseManager3 from './assets/warehouse/manager3.svg';
-import warehouseManager from './assets/warehouse/manager.svg';
-import styled from '@xstyled/styled-components';
-var defaultSizes = {
-    small: '30px',
-    medium: '46px',
-    big: '61px' // cca 200px width on full logo
-};
-var variantMap = {
-    mailship: {
-        white: logoWhiteImage,
-        black: logoBlackImage,
-        m: logoMImage,
-        s: logoSvg
-    },
-    mailwise: {
-        black: logoMailwise,
-        s: logoMailwiseSmall
-    },
-    mailstock: {
-        black: logoMailstock
-    },
-    mailstep: {
-        black: logoMailstepBlack,
-        white: logoMailstepWhite
-    },
-    mailwrap: {
-        black: logoMailwrap,
-        s: logoMailwrapSmall
-    },
-    warehouse: {
-        black: warehouseManager,
-        m: warehouseManager2,
-        s: warehouseManager3
-    }
-};
-var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
-    var width = _a.width;
-    return width || 'auto';
-}, function (_a) {
-    var height = _a.height, width = _a.width, size = _a.size;
-    return height || (width ? 'auto' : size ? defaultSizes[size] : defaultSizes.medium);
-});
-var Logo = function (_a) {
-    var _b = _a.brand, brand = _b === void 0 ? 'mailship' : _b, variant = _a.variant, size = _a.size, width = _a.width, height = _a.height, rest = __rest(_a, ["brand", "variant", "size", "width", "height"]);
-    var variants = variantMap[brand];
-    var logo = variants === null || variants === void 0 ? void 0 : variants[variant];
-    if (!logo) {
-        console.warn('No variant for this logo exists.');
-        return null;
-    }
-    return _jsx(StyledImage, __assign({ src: logo, size: size, width: width, height: height }, rest));
-};
-export default Logo;
-var templateObject_1;
+//#endregion
+export { Logo as default };

package/ui/Elements/Logo/index.d.ts

@@ -1,5 +1,4 @@
-import { default as Logo } from './Logo';
-
+import Logo from './Logo';
 export { Logo };
 export type { Brand, Variant } from './types';
 export default Logo;

package/ui/Elements/Logo/index.js

@@ -1,3 +1,5 @@
-import Logo from './Logo';
-export { Logo };
-export default Logo;
+import Logo from "./Logo.js";
+//#region packages/ui/Elements/Logo/index.ts
+var Logo_default = Logo;
+//#endregion
+export { Logo, Logo_default as default };

package/ui/Elements/Logo/stories/Logo.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').LogoProps>;
+    component: import("react").FC<import("../types").LogoProps>;
     parameters: {
         backgrounds: {
             default: string;

package/ui/Elements/Pagination/Pagination.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export type PaginationProps = {
     page?: number;
     itemCount?: number;

package/ui/Elements/Pagination/Pagination.js

@@ -1,39 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
-var Pagination = function (_a) {
-    var onPageChange = _a.onPageChange, _b = _a.itemPerPage, itemPerPage = _b === void 0 ? 3 : _b, _c = _a.itemCount, itemCount = _c === void 0 ? 0 : _c, page = _a.page, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.rate, rate = _e === void 0 ? 4 : _e, customPaginationHandler = _a.customPaginationHandler;
-    var setPage = useCallback(function (number) { return function () {
-        if (customPaginationHandler) {
-            customPaginationHandler(number, itemPerPage);
-            return;
-        }
-        if (onPageChange) {
-            onPageChange(number, itemPerPage);
-        }
-    }; }, [itemPerPage, onPageChange, customPaginationHandler]);
-    var pageX = page !== null && page !== void 0 ? page : 1;
-    var pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
-    var arrayOfPages = useMemo(function () {
-        var pageNumbers = Array.from({ length: pageCount }, function (_, i) { return i + 1; });
-        // first and last page are still visible
-        // if number of pages is less than 6 (display all pages without dots and duplication of first and last char)
-        if (pageCount < radius + 1) {
-            return pageNumbers.slice(1, pageCount - 1);
-            // if current page is less than radius (display first radius pages)
-        }
-        else if (pageX < radius) {
-            return pageNumbers.slice(1, Math.min(pageX + rate, radius));
-            // display last radius pages
-        }
-        else if (pageX > pageCount - Math.floor(radius / 2)) {
-            return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
-        }
-        else {
-            // display dispersion of 2 chars from current page (part between dots)
-            return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
-        }
-    }, [pageCount, pageX]);
-    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), arrayOfPages[0] > 2 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
+import { Btn, DotsWrapper, GoIcon, PageBtn, Wrapper } from "./styled.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Pagination/Pagination.tsx
+const Pagination = ({ onPageChange, itemPerPage = 3, itemCount = 0, page, radius = 5, rate = 4, customPaginationHandler }) => {
+	const setPage = useCallback((number) => () => {
+		if (customPaginationHandler) {
+			customPaginationHandler(number, itemPerPage);
+			return;
+		}
+		if (onPageChange) onPageChange(number, itemPerPage);
+	}, [
+		itemPerPage,
+		onPageChange,
+		customPaginationHandler
+	]);
+	const pageX = page ?? 1;
+	const pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
+	const arrayOfPages = useMemo(() => {
+		const pageNumbers = Array.from({ length: pageCount }, (_, i) => i + 1);
+		if (pageCount < radius + 1) return pageNumbers.slice(1, pageCount - 1);
+		else if (pageX < radius) return pageNumbers.slice(1, Math.min(pageX + rate, radius));
+		else if (pageX > pageCount - Math.floor(radius / 2)) return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
+		else return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
+	}, [pageCount, pageX]);
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [
+		/* @__PURE__ */ jsx(Btn, {
+			disabled: pageX <= 1,
+			onClick: setPage(pageX - 1),
+			children: /* @__PURE__ */ jsx(GoIcon, {
+				icon: "goLeft",
+				isActive: pageX > 1
+			})
+		}),
+		/* @__PURE__ */ jsx(PageBtn, {
+			isCurrent: pageX === 1,
+			onClick: setPage(1),
+			children: 1
+		}),
+		arrayOfPages[0] > 2 && /* @__PURE__ */ jsx(DotsWrapper, { children: "..." }),
+		arrayOfPages?.map((number) => /* @__PURE__ */ jsx(PageBtn, {
+			isCurrent: pageX === number,
+			onClick: setPage(number ?? 1),
+			children: number
+		}, number)),
+		arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && /* @__PURE__ */ jsx(DotsWrapper, { children: "..." }),
+		pageCount !== 1 && /* @__PURE__ */ jsx(PageBtn, {
+			isCurrent: pageX === pageCount,
+			onClick: setPage(pageCount),
+			children: pageCount
+		}),
+		/* @__PURE__ */ jsx(Btn, {
+			disabled: pageX >= pageCount,
+			onClick: setPage(pageX + 1),
+			children: /* @__PURE__ */ jsx(GoIcon, {
+				icon: "goRight",
+				isActive: pageX < pageCount
+			})
+		})
+	] });
 };
-export default Pagination;
+//#endregion
+export { Pagination as default };

package/ui/Elements/Pagination/index.d.ts

@@ -1,5 +1,4 @@
-import { default as Pagination } from './Pagination';
-
+import Pagination from './Pagination';
 export type { PaginationProps } from './Pagination';
 export { Pagination };
 export default Pagination;

package/ui/Elements/Pagination/index.js

@@ -1,3 +1,5 @@
-import Pagination from './Pagination';
-export { Pagination };
-export default Pagination;
+import Pagination from "./Pagination.js";
+//#region packages/ui/Elements/Pagination/index.ts
+var Pagination_default = Pagination;
+//#endregion
+export { Pagination, Pagination_default as default };

package/ui/Elements/Pagination/stories/Pagination.stories.d.ts

@@ -1,9 +1,8 @@
-import { StoryObj } from '@storybook/react-webpack5';
+import type { StoryObj } from '@storybook/react-webpack5';
 import { PaginationProps } from '../';
-
 declare const meta: {
     title: string;
-    component: import('react').FC<PaginationProps>;
+    component: import("react").FC<PaginationProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Pagination/styled.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
-export declare const Wrapper: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements, "color">) => import('react').ReactElement<any, string>, import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
-export declare const Btn: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {
+export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, import("@xstyled/styled-components").Theme, import("@xstyled/styled-components").SystemProps<import("@xstyled/styled-components").Theme>, "color">;
+export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
 }, never>;
-export declare const ArrowIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
+export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/styled-components").Theme, {
     isActive: boolean;
 }, never>;
-export declare const GoIcon: import('styled-components').StyledComponent<import('react').FC<import('../Icon').IconProps>, import('@xstyled/system').Theme, {
+export declare const GoIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/styled-components").Theme, {
     isActive: boolean;
 }, never>;
-export declare const DotsWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const PageBtn: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
+export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const PageBtn: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
     isCurrent: boolean;
 }, never>;