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

package/ui/Elements/Spinner/Spinner.js

@@ -1,40 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Svg, Circle } from "./styles";
-var appearanceToColorMap = {
-    error: "red1",
-    concept: "bgLightGray1",
-    done: "darkGreen",
-    info: "lightGray6",
-    processing: "blue2",
-    success: "green",
-    warning: "yellow1",
-    waiting: "gray1"
-};
-var appearanceToFontColorMap = {
-    error: "white",
-    concept: "blue2",
-    done: "white",
-    info: "blue2",
-    processing: "white",
-    success: "white",
-    warning: "blue2",
-    waiting: "white"
-};
-var Spinner = function Spinner(param) {
-    var _param_variant = param.variant, variant = _param_variant === void 0 ? "default" : _param_variant, appearance = param.appearance;
-    var color = appearance ? appearanceToFontColorMap[appearance] : "blue2";
-    return /* @__PURE__ */ jsx(Svg, {
-        viewBox: "22 22 44 44",
-        $variant: variant,
-        children: /* @__PURE__ */ jsx(Circle, {
-            cx: "44",
-            cy: "44",
-            r: "20.2",
-            fill: "none",
-            strokeWidth: "3.6",
-            color: color
-        })
-    });
-};
-var Spinner_default = Spinner;
-export { Spinner, appearanceToColorMap, appearanceToFontColorMap, Spinner_default as default };

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

@@ -1,2 +0,0 @@
-var index_d_default = Spinner;
-export { index_d_default as default };

package/ui/Elements/Spinner/index.js

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

package/ui/Elements/Spinner/styles.js

@@ -1,66 +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  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  100% {\n    transform: rotate(360deg);\n  }\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  width: ",
-        "px;\n  height: ",
-        "px;\n  animation: ",
-        " 1.4s linear infinite;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  animation: ",
-        " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ",
-        ";\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { th, keyframes } from "@xstyled/styled-components";
-var KeyframesCircularDash = keyframes(_templateObject());
-var KeyframesCircularRotate = keyframes(_templateObject1());
-var Svg = styled.svg(_templateObject2(), function(param) {
-    var $variant = param.$variant;
-    return $variant === "sm" ? "16" : "40";
-}, function(param) {
-    var $variant = param.$variant;
-    return $variant === "sm" ? "16" : "40";
-}, KeyframesCircularRotate);
-var Circle = styled.circle(_templateObject3(), KeyframesCircularDash, function(param) {
-    var color = param.color;
-    return color ? th.color(color) : th.color("blue2");
-});
-export { Circle, Svg };

package/ui/Elements/Table/Table.js

@@ -1,78 +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  ",
-        ";\n  width: 100%;\n  border-collapse: collapse;\n  color: blue2;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  &:nth-child(even) {\n    background-color: bgLightGray;\n  }\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  font-weight: semiBold;\n  text-align: left;\n  border-top: 1px solid;\n  border-top-color: lightGray6;\n\n  &:not(:last-child) {\n    border-right: 1px dashed;\n    border-right-color: lightGray6;\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  td {\n    padding: 9px 4px;\n  }\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  background-color: bgLightGray1;\n\n  th {\n    padding: 10px 8px;\n  }\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { system } from "@xstyled/styled-components";
-var Table = styled.table(_templateObject(), system);
-var Tr = styled.tr(_templateObject1(), system);
-var Td = styled.td(_templateObject2(), system);
-var Th = styled.th(_templateObject3(), system);
-var Tbody = styled.tbody(_templateObject4(), system);
-var Thead = styled.thead(_templateObject5(), system);
-export { Table, Tbody, Td, Th, Thead, Tr };

package/ui/Elements/Table/index.js

@@ -1,2 +0,0 @@
-import { Table, Thead, Tr, Th, Td, Tbody } from "./Table";
-export { Table, Tbody, Td, Th, Thead, Tr };

package/ui/Elements/Tag/Tag.js

@@ -1,87 +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  background-color: ",
-        ";\n  margin-right: ",
-        ";\n  color: ",
-        ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ",
-        ";\n  ",
-        ";\n  ",
-        ";\n  ",
-        ";\n  ",
-        ";\n  ",
-        ";\n  ",
-        ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { th } from "@xstyled/styled-components";
-var fontSizeMap = {
-    small: "14px",
-    medium: "16px",
-    big: "20px"
-};
-var paddingMap = {
-    small: "2px 8px",
-    medium: "7px 10px",
-    big: "12px 12px"
-};
-var borderRadiusMap = {
-    small: "6px",
-    medium: "20px",
-    big: "20px"
-};
-var getTextColor = function getTextColor(isNotSelected, textColor) {
-    if (textColor) {
-        return th.color(textColor);
-    }
-    return isNotSelected ? th.color("blue2") : "white";
-};
-var getBgColor = function getBgColor(color) {
-    return color ? th.color(color) : "rgba(157, 163, 169, 0.2)";
-};
-var Tag = styled.div(_templateObject(), function(param) {
-    var color = param.color;
-    return getBgColor(color);
-}, function(param) {
-    var marginRight = param.marginRight;
-    return marginRight || "10px";
-}, function(param) {
-    var isNotSelected = param.isNotSelected, textColor = param.textColor;
-    return getTextColor(isNotSelected, textColor);
-}, function(param) {
-    var size = param.size;
-    return "border-radius: ".concat(borderRadiusMap[size || "medium"]);
-}, function(param) {
-    var size = param.size;
-    return "font-size: ".concat(fontSizeMap[size || "medium"]);
-}, function(param) {
-    var size = param.size;
-    return "padding: ".concat(paddingMap[size || "medium"]);
-}, function(param) {
-    var border = param.border;
-    return border && "border: 1px solid rgba(0, 0, 0, 0.65);";
-}, function(param) {
-    var opacity = param.opacity;
-    return opacity && "opacity: 0.7";
-}, function(param) {
-    var pointer = param.pointer;
-    return pointer && "cursor: pointer;";
-}, function(param) {
-    var hover = param.hover;
-    return hover && "&: hover { opacity: 0.7}";
-});
-var Tag_default = Tag;
-export { Tag_default as default };

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

@@ -1,3 +0,0 @@
-import { Props, Pallete } from "./types";
-var index_d_default = Tag;
-export { Pallete, Props, index_d_default as default };

package/ui/Elements/Tag/index.js

@@ -1,4 +0,0 @@
-import Tag from "./Tag";
-import { palettes } from "./palettes";
-var Tag_default = Tag;
-export { Tag_default as default, palettes };

package/ui/Elements/Tag/palettes.js

@@ -1,47 +0,0 @@
-var palettes = {
-    greenWhite: {
-        color: "green60",
-        textColor: "white"
-    },
-    greenGreen: {
-        color: "green30",
-        textColor: "green80"
-    },
-    blueBlue: {
-        color: "blue20",
-        textColor: "blue80"
-    },
-    magentaWhite: {
-        color: "magenta60",
-        textColor: "white"
-    },
-    magentaMagenta: {
-        color: "magenta20",
-        textColor: "magenta80"
-    },
-    tealTeal: {
-        color: "teal20",
-        textColor: "teal90"
-    },
-    orangeOrange: {
-        color: "orange20",
-        textColor: "orange80"
-    },
-    grayGray: {
-        color: "neutral20",
-        textColor: "typoPrimary"
-    },
-    redWhite: {
-        color: "red1",
-        textColor: "white"
-    },
-    redRed: {
-        color: "red30",
-        textColor: "red1"
-    },
-    purplePurple: {
-        color: "purple20",
-        textColor: "purple80"
-    }
-};
-export { palettes };

package/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -1,20 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import Tag from "../../Tag";
-import { palettes } from "../../palettes";
-import { x } from "@xstyled/styled-components";
-var PredefinedTags = function PredefinedTags() {
-    return /* @__PURE__ */ jsx(x.div, {
-        display: "flex",
-        flexWrap: "wrap",
-        fontFamily: "monospace",
-        children: Object.keys(palettes).map(function(paletteName) {
-            return /* @__PURE__ */ jsx(Tag, {
-                color: palettes[paletteName].color,
-                textColor: palettes[paletteName].textColor,
-                children: paletteName
-            }, paletteName);
-        })
-    });
-};
-var predefinedTags_default = PredefinedTags;
-export { predefinedTags_default as default };

package/ui/Elements/Text/Text.js

@@ -1,76 +0,0 @@
-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;
-}
-import { jsx } from "react/jsx-runtime";
-import { x } from "@xstyled/styled-components";
-var Text = function Text(_0) {
-    var _0_as = _0.as, as = _0_as === void 0 ? "span" : _0_as, props = _object_without_properties(_0, [
-        "as"
-    ]);
-    return /* @__PURE__ */ jsx(x.div, _object_spread({
-        as: as
-    }, props));
-};
-var Text_default = Text;
-export { Text_default as default };

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

@@ -1,2 +0,0 @@
-var index_d_default = Text;
-export { index_d_default as default };

package/ui/Elements/Text/index.js

@@ -1,2 +0,0 @@
-import Text from "./Text";
-export { Text };

package/ui/Elements/Toast/Toast.js

@@ -1,58 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { Icon } from "../Icon";
-import { x } from "@xstyled/styled-components";
-import { toastTitleMap, toastIconMap, toastIconFill } from "./constants";
-import { Title, Text, ContentWrapper, CloseWrapper, Container } from "./styles";
-var Toast = function Toast(param) {
-    var closeToast = param.closeToast, title = param.title, text = param.text, type = param.type, autoClose = param.autoClose;
-    var icon = toastIconMap[type];
-    var fill = toastIconFill[type];
-    useEffect(function() {
-        if (!autoClose) return;
-        var timer = setTimeout(function() {
-            return closeToast === null || closeToast === void 0 ? void 0 : closeToast();
-        }, autoClose);
-        return function() {
-            clearTimeout(timer);
-        };
-    }, []);
-    return /* @__PURE__ */ jsxs(Container, {
-        autoClose: autoClose,
-        fill: fill,
-        children: [
-            /* @__PURE__ */ jsx(x.div, {
-                mx: "12px",
-                children: /* @__PURE__ */ jsx(Icon, {
-                    icon: icon,
-                    fill: fill,
-                    size: "20px"
-                })
-            }),
-            /* @__PURE__ */ jsxs(ContentWrapper, {
-                children: [
-                    /* @__PURE__ */ jsxs("div", {
-                        children: [
-                            /* @__PURE__ */ jsx(Title, {
-                                children: title || toastTitleMap[type]
-                            }),
-                            text && /* @__PURE__ */ jsx(Text, {
-                                children: text
-                            })
-                        ]
-                    }),
-                    /* @__PURE__ */ jsx(CloseWrapper, {
-                        children: /* @__PURE__ */ jsx("div", {
-                            onClick: closeToast,
-                            children: /* @__PURE__ */ jsx(Icon, {
-                                icon: "close"
-                            })
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-};
-var Toast_default = Toast;
-export { Toast_default as default };

package/ui/Elements/Toast/constants.js

@@ -1,19 +0,0 @@
-var toastIconMap = {
-    info: "info",
-    success: "circleCheck",
-    error: "circleX",
-    warning: "circleTriangle"
-};
-var toastIconFill = {
-    info: "blue2",
-    success: "darkGreen",
-    error: "red1",
-    warning: "yellow1"
-};
-var toastTitleMap = {
-    info: "Info",
-    success: "Success",
-    error: "Error",
-    warning: "Warning"
-};
-export { toastIconFill, toastIconMap, toastTitleMap };

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

@@ -1,3 +0,0 @@
-import { CustomToastProps as CustomToastProps2 } from "./Toast";
-var index_d_default = Toast;
-export { CustomToastProps2 as CustomToastProps, index_d_default as default };

package/ui/Elements/Toast/index.js

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

package/ui/Elements/Toast/styles.js

@@ -1,106 +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: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ",
-        ";\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: space-between;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n    to {\n       transform: scaleX(0)\n    }\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ",
-        " ",
-        "ms linear;\n    border-radius: ",
-        ";\n    background-color: ",
-        ";\n  }\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ",
-        ";\n  box-shadow: ",
-        ";\n  padding: 10px;\n\n  @media ",
-        " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ",
-        ";\n    border-radius: ",
-        ";\n    background-color: ",
-        ";\n  }\n\n  ",
-        ";\n"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { css, keyframes, th } from "@xstyled/styled-components";
-var Title = styled.span(_templateObject(), th("colors.blue2"));
-var Text = styled.span(_templateObject1(), th("colors.gray1"));
-var ContentWrapper = styled.div(_templateObject2());
-var CloseWrapper = styled.span(_templateObject3());
-var timerAnimation = keyframes(_templateObject4());
-var after = function after(autoClose) {
-    return css(_templateObject5(), timerAnimation, autoClose, th.radius("lg"), th.color("lightGray5"));
-};
-var Container = styled.div(_templateObject6(), th.radius("lg"), th.shadow("cornerDialogShadow"), "(max-width: 576px)", function(param) {
-    var autoClose = param.autoClose;
-    return autoClose && "bottom: 8px";
-}, th.radius("lg"), function(param) {
-    var fill = param.fill;
-    return th.color(fill);
-}, function(param) {
-    var autoClose = param.autoClose;
-    return autoClose && after(autoClose);
-});
-export { CloseWrapper, Container, ContentWrapper, Text, Title };