@mailstep/design-system 0.8.27 → 0.8.28-beta.0

package/ui/Elements/Logo/Logo.js

@@ -1,88 +1,5 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys, key, i;
-    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
-        sourceKeys = Reflect.ownKeys(Object(source));
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-        return target;
-    }
-    target = _object_without_properties_loose(source, excluded);
-    if (Object.getOwnPropertySymbols) {
-        sourceKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  width: ",
-        ";\n  height: ",
-        ";\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+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";
@@ -98,69 +15,55 @@ 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",
-    // cca 100px width on full logo
-    medium: "46px",
-    // cca 150px width on full logo
-    big: "61px"
+//#region packages/ui/Elements/Logo/Logo.tsx
+const defaultSizes = {
+	small: "30px",
+	medium: "46px",
+	big: "61px"
 };
-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
-    }
+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 StyledImage = styled.img(_templateObject(), function(param) {
-    var width = param.width;
-    return width || "auto";
-}, function(param) {
-    var height = param.height, width = param.width, size = param.size;
-    return height || (width ? "auto" : size ? defaultSizes[size] : defaultSizes.medium);
-});
-var Logo = function Logo(_0) {
-    var _0_brand = _0.brand, brand = _0_brand === void 0 ? "mailship" : _0_brand, variant = _0.variant, size = _0.size, width = _0.width, height = _0.height, rest = _object_without_properties(_0, [
-        "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 /* @__PURE__ */ jsx(StyledImage, _object_spread({
-        src: logo,
-        size: size,
-        width: width,
-        height: height
-    }, rest));
+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
+	});
 };
-var Logo_default = Logo;
-export { Logo_default as default };
+//#endregion
+export { Logo as default };

package/ui/Elements/Logo/index.js

@@ -1,3 +1,5 @@
-import Logo from "./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/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Elements/Pagination/Pagination.js

@@ -1,87 +1,63 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Btn, DotsWrapper, GoIcon, PageBtn, Wrapper } from "./styled.js";
 import { useCallback, useMemo } from "react";
-import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from "./styled";
-var Pagination = function Pagination(param) {
-    var onPageChange = param.onPageChange, _param_itemPerPage = param.itemPerPage, itemPerPage = _param_itemPerPage === void 0 ? 3 : _param_itemPerPage, _param_itemCount = param.itemCount, itemCount = _param_itemCount === void 0 ? 0 : _param_itemCount, page = param.page, _param_radius = param.radius, radius = _param_radius === void 0 ? 5 : _param_radius, _param_rate = param.rate, rate = _param_rate === void 0 ? 4 : _param_rate, customPaginationHandler = param.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;
-        });
-        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 === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function(number) {
-                return /* @__PURE__ */ jsx(PageBtn, {
-                    isCurrent: pageX === number,
-                    onClick: setPage(number !== null && number !== void 0 ? 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
-                })
-            })
-        ]
-    });
+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
+			})
+		})
+	] });
 };
-var Pagination_default = Pagination;
-export { Pagination_default as default };
+//#endregion
+export { Pagination as default };

package/ui/Elements/Pagination/index.js

@@ -1,3 +1,5 @@
-import Pagination from "./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/styled.js

@@ -1,91 +1,64 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
+import Icon_default from "../Icon/index.js";
+import styled$1, { x } from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+//#region packages/ui/Elements/Pagination/styled.tsx
+const Wrapper = styled$1(x.div)`
+  display: inline-flex;
+  align-items: center;
+
+  & > *:not(:last-child) {
+    margin-right: 1px;
+    @media (min-width: 1024px) {
+      margin-right: 4px;
     }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  background-color: transparent;\n  border: none;\n  cursor: ",
-        ";\n  opacity: ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  color: gray1;\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ",
-        ";\n  font-size: 14px;\n  font-weight: ",
-        ";\n  font-family: ",
-        ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { x } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-import Icon from "../Icon";
-var Wrapper = styled(x.div)(_templateObject());
-var Btn = styled.button(_templateObject1(), function(param) {
-    var disabled = param.disabled;
-    return disabled ? "default" : "pointer";
-}, function(param) {
-    var disabled = param.disabled;
-    return disabled ? 0 : 1;
-});
-var ArrowIcon = styled(Icon)(_templateObject2());
-var GoIcon = styled(ArrowIcon)(_templateObject3());
-var DotsWrapper = styled.div(_templateObject4());
-var PageBtn = styled.span(_templateObject5(), function(param) {
-    var isCurrent = param.isCurrent;
-    return isCurrent ? th.color("red1") : th.color("gray1");
-}, function(param) {
-    var isCurrent = param.isCurrent;
-    return isCurrent ? th.fontWeight("semiBold") : th.fontWeight("normal");
-}, th("fonts.primary"));
+  }
+`;
+const Btn = styled$1.button`
+  background-color: transparent;
+  border: none;
+  cursor: ${({ disabled }) => disabled ? "default" : "pointer"};
+  opacity: ${({ disabled }) => disabled ? 0 : 1};
+`;
+const ArrowIcon = styled$1(Icon_default)`
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  color: blue2;
+
+  &:hover {
+    color: blue2;
+  }
+`;
+const GoIcon = styled$1(ArrowIcon)`
+  margin: 0 8px;
+  font-size: 12px;
+  & > svg {
+    width: 10px;
+  }
+`;
+const DotsWrapper = styled$1.div`
+  color: gray1;
+`;
+const PageBtn = styled$1.span`
+  height: 18px;
+  min-width: 18px;
+  display: flex;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  margin: 0 4px;
+  color: ${({ isCurrent }) => isCurrent ? th$1.color("red1") : th$1.color("gray1")};
+  font-size: 14px;
+  font-weight: ${({ isCurrent }) => isCurrent ? th$1.fontWeight("semiBold") : th$1.fontWeight("normal")};
+  font-family: ${th$1("fonts.primary")};
+  line-height: 1em;
+
+  &:hover {
+    color: blue2;
+  }
+`;
+//#endregion
 export { ArrowIcon, Btn, DotsWrapper, GoIcon, PageBtn, Wrapper };

package/ui/Elements/Portal/index.js

@@ -1,71 +1,23 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
 import { useEffect, useState } from "react";
 import ReactDom from "react-dom";
-var Portal = function Portal(param) {
-    var children = param.children;
-    var _useState = _sliced_to_array(useState(function() {
-        return document.createElement("div");
-    }), 1), container = _useState[0];
-    useEffect(function() {
-        try {
-            document.body.appendChild(container);
-        } catch (e) {
-            console.log(e);
-        }
-        return function() {
-            try {
-                document.body.removeChild(container);
-            } catch (e) {
-                console.log(e);
-            }
-        };
-    }, []);
-    return ReactDom.createPortal(children, container);
+//#region packages/ui/Elements/Portal/index.ts
+const Portal = ({ children }) => {
+	const [container] = useState(() => document.createElement("div"));
+	useEffect(() => {
+		try {
+			document.body.appendChild(container);
+		} catch (e) {
+			console.log(e);
+		}
+		return () => {
+			try {
+				document.body.removeChild(container);
+			} catch (e) {
+				console.log(e);
+			}
+		};
+	}, []);
+	return ReactDom.createPortal(children, container);
 };
-var Portal_default = Portal;
-export { Portal, Portal_default as default };
+//#endregion
+export { Portal, Portal as default };