@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/Tag/Tag.js

@@ -1,87 +1,52 @@
-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"
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Tag/Tag.tsx
+const fontSizeMap = {
+	small: "14px",
+	medium: "16px",
+	big: "20px"
 };
-var paddingMap = {
-    small: "2px 8px",
-    medium: "7px 10px",
-    big: "12px 12px"
+const paddingMap = {
+	small: "2px 8px",
+	medium: "7px 10px",
+	big: "12px 12px"
 };
-var borderRadiusMap = {
-    small: "6px",
-    medium: "20px",
-    big: "20px"
+const 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";
+const 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)";
+const 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 };
+const Tag = styled$1.div`
+  background-color: ${({ color }) => getBgColor(color)};
+  margin-right: ${({ marginRight }) => marginRight || "10px"};
+  color: ${({ isNotSelected, textColor }) => getTextColor(isNotSelected, textColor)};
+  width: fit-content;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  text-align: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  ${({ size }) => `border-radius: ${borderRadiusMap[size || "medium"]}`};
+  ${({ size }) => `font-size: ${fontSizeMap[size || "medium"]}`};
+  ${({ size }) => `padding: ${paddingMap[size || "medium"]}`};
+  ${({ border }) => border && "border: 1px solid rgba(0, 0, 0, 0.65);"};
+  ${({ opacity }) => opacity && "opacity: 0.7"};
+  ${({ pointer }) => pointer && "cursor: pointer;"};
+  ${({ hover }) => hover && "&: hover { opacity: 0.7}"};
+
+  & span {
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+}
+`;
+//#endregion
+export { Tag as default };

package/ui/Elements/Tag/index.js

@@ -1,4 +1,6 @@
-import Tag from "./Tag";
-import { palettes } from "./palettes";
+import Tag from "./Tag.js";
+import { palettes } from "./palettes.js";
+//#region packages/ui/Elements/Tag/index.ts
 var Tag_default = Tag;
+//#endregion
 export { Tag_default as default, palettes };

package/ui/Elements/Tag/palettes.js

@@ -1,47 +1,52 @@
-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"
-    }
+//#region packages/ui/Elements/Tag/palettes.ts
+/**
+* [string, string]: [background, text]
+*/
+const 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"
+	}
 };
+//#endregion
 export { palettes };

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

@@ -1,20 +1,19 @@
-import { jsx } from "react/jsx-runtime";
-import Tag from "../../Tag";
-import { palettes } from "../../palettes";
+import Tag from "../../Tag.js";
+import { palettes } from "../../palettes.js";
 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);
-        })
-    });
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Tag/stories/components/predefinedTags.tsx
+const PredefinedTags = () => {
+	return /* @__PURE__ */ jsx(x.div, {
+		display: "flex",
+		flexWrap: "wrap",
+		fontFamily: "monospace",
+		children: Object.keys(palettes).map((paletteName) => /* @__PURE__ */ jsx(Tag, {
+			color: palettes[paletteName].color,
+			textColor: palettes[paletteName].textColor,
+			children: paletteName
+		}, paletteName))
+	});
 };
-var predefinedTags_default = PredefinedTags;
-export { predefinedTags_default as default };
+//#endregion
+export { PredefinedTags as default };

package/ui/Elements/Tag/types.js

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

package/ui/Elements/Text/Text.js

@@ -1,76 +1,10 @@
-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 "react";
 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 };
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Text/Text.tsx
+const Text = ({ as = "span", ...props }) => /* @__PURE__ */ jsx(x.div, {
+	as,
+	...props
+});
+//#endregion
+export { Text as default };

package/ui/Elements/Text/index.js

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

package/ui/Elements/Text/types.js

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

package/ui/Elements/Toast/Toast.js

@@ -1,58 +1,36 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "../Icon/Icon.js";
+import "../Icon/index.js";
+import { toastIconFill, toastIconMap, toastTitleMap } from "./constants.js";
+import { CloseWrapper, Container, ContentWrapper, Text, Title } from "./styles.js";
 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"
-                            })
-                        })
-                    })
-                ]
-            })
-        ]
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Toast/Toast.tsx
+const Toast = ({ closeToast, title, text, type, autoClose }) => {
+	const icon = toastIconMap[type];
+	const fill = toastIconFill[type];
+	useEffect(() => {
+		if (!autoClose) return;
+		const timer = setTimeout(() => closeToast?.(), autoClose);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Container, {
+		autoClose,
+		fill,
+		children: [/* @__PURE__ */ jsx(x.div, {
+			mx: "12px",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon,
+				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 };
+//#endregion
+export { Toast as default };

package/ui/Elements/Toast/constants.js

@@ -1,19 +1,21 @@
-var toastIconMap = {
-    info: "info",
-    success: "circleCheck",
-    error: "circleX",
-    warning: "circleTriangle"
+//#region packages/ui/Elements/Toast/constants.ts
+const toastIconMap = {
+	info: "info",
+	success: "circleCheck",
+	error: "circleX",
+	warning: "circleTriangle"
 };
-var toastIconFill = {
-    info: "blue2",
-    success: "darkGreen",
-    error: "red1",
-    warning: "yellow1"
+const toastIconFill = {
+	info: "blue2",
+	success: "darkGreen",
+	error: "red1",
+	warning: "yellow1"
 };
-var toastTitleMap = {
-    info: "Info",
-    success: "Success",
-    error: "Error",
-    warning: "Warning"
+const toastTitleMap = {
+	info: "Info",
+	success: "Success",
+	error: "Error",
+	warning: "Warning"
 };
+//#endregion
 export { toastIconFill, toastIconMap, toastTitleMap };

package/ui/Elements/Toast/index.js

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