@mailstep/design-system 0.8.26-beta.5 → 0.8.26

package/ui/Elements/Pagination/Pagination.js

@@ -1,87 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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
-                })
-            })
-        ]
-    });
-};
-var Pagination_default = Pagination;
-export { Pagination_default as default };

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

@@ -1,3 +0,0 @@
-import { PaginationProps as PaginationProps2 } from "./Pagination";
-var index_d_default = Pagination;
-export { PaginationProps2 as PaginationProps, index_d_default as default };

package/ui/Elements/Pagination/index.js

@@ -1,3 +0,0 @@
-import Pagination from "./Pagination";
-var Pagination_default = Pagination;
-export { Pagination, Pagination_default as default };

package/ui/Elements/Pagination/styled.js

@@ -1,91 +0,0 @@
-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  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"));
-export { ArrowIcon, Btn, DotsWrapper, GoIcon, PageBtn, Wrapper };

package/ui/Elements/Portal/index.js

@@ -1,71 +0,0 @@
-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);
-};
-var Portal_default = Portal;
-export { Portal, Portal_default as default };

package/ui/Elements/ProgressBar/ProgressBar.js

@@ -1,21 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { StyledProgressBar, Progress, ProgressDescription } from "./styles";
-var ProgressBar = function ProgressBar(param) {
-    var _param_progress = param.progress, progress = _param_progress === void 0 ? 0 : _param_progress, status = param.status, errorMessage = param.errorMessage, noText = param.noText, variant = param.variant;
-    if (progress > 100 || progress < 0) console.warn("Progress value should be number between 0 and 100.");
-    return /* @__PURE__ */ jsxs(StyledProgressBar, {
-        status: status,
-        variant: variant,
-        children: [
-            /* @__PURE__ */ jsx(Progress, {
-                progress: progress,
-                status: status
-            }),
-            !noText && /* @__PURE__ */ jsx(ProgressDescription, {
-                children: status === "error" && errorMessage ? errorMessage : "".concat(progress, "%")
-            })
-        ]
-    });
-};
-var ProgressBar_default = ProgressBar;
-export { ProgressBar_default as default };

package/ui/Elements/ProgressBar/index.js

@@ -1,3 +0,0 @@
-import ProgressBar from "./ProgressBar";
-var ProgressBar_default = ProgressBar;
-export { ProgressBar, ProgressBar_default as default };

package/ui/Elements/ProgressBar/styles.js

@@ -1,117 +0,0 @@
-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  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ",
-        ";\n  color: ",
-        ";\n  background-color: ",
-        ";\n  justify-content: center;\n  border: slim;\n  border-color: ",
-        ";\n  border-radius: md;\n  overflow: hidden;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n0%{\n  background-position-x: 0%;\n}\n100% {\n  background-position-x: 500px;\n}\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  background: repeating-linear-gradient(\n    -45deg,\n    ",
-        ",\n    ",
-        " 10px,\n    ",
-        " 10px,\n    ",
-        " 22.1px\n  );\n  background-size: 4000px 50px;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  background: repeating-linear-gradient(\n    -45deg,\n    ",
-        ",\n    ",
-        " 10px,\n    ",
-        " 10px,\n    ",
-        " 22.1px\n  );\n  background-size: 4000px 50px;\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  background: repeating-linear-gradient(\n    -45deg,\n    ",
-        ",\n    ",
-        " 10px,\n    ",
-        " 10px,\n    ",
-        " 22.1px\n  );\n  background-size: 4000px 50px;\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ",
-        ";\n  height: 35px;\n  animation: ",
-        " 20s linear infinite;\n  transition: width 500ms;\n  ",
-        "\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n  align-self: center;\n"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { keyframes, css } from "@xstyled/styled-components";
-import { th } from "@xstyled/styled-components";
-import { createRgba } from "../../utils";
-var StyledProgressBar = styled.div(_templateObject(), function(props) {
-    return props.variant === "thin" ? "12px" : "35px";
-}, th("colors.white"), function(props) {
-    return props.status === "finished" ? createRgba(props.theme.colors.success, 0.4) : "".concat(th("colors.red1"));
-}, function(props) {
-    return props.status === "finished" ? "".concat(th("colors.success")) : "".concat(th("colors.red1"));
-});
-var slide = keyframes(_templateObject1());
-var StyledStatusFinished = css(_templateObject2(), function(props) {
-    return createRgba(props.theme.colors.success, 0.4);
-}, function(props) {
-    return createRgba(props.theme.colors.success, 0.4);
-}, th("colors.success"), th("colors.success"));
-var StyledStatusLoading = css(_templateObject3(), th("colors.red1"), th("colors.red1"), th("colors.red1"), th("colors.red1"));
-var StyledStatusError = css(_templateObject4(), th("colors.red1"), th("colors.red1"), th("colors.red1"), th("colors.red1"));
-var Progress = styled.div(_templateObject5(), function(props) {
-    return "".concat(props.progress, "%");
-}, slide, function(props) {
-    return props.status === "finished" ? StyledStatusFinished : props.status === "error" ? StyledStatusError : StyledStatusLoading;
-});
-var ProgressDescription = styled.span(_templateObject6());
-export { Progress, ProgressDescription, StyledProgressBar };