@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/Alert/Alert.js

@@ -1,100 +1,76 @@
+import Icon from "../Icon/Icon.js";
+import "../Icon/index.js";
+import { ActionButton, CloseBtn, Description, IconWrap, LinkWrapper, StyledAlert, Text, Title, VerticalSeparator } from "./styles.js";
+import { th, useTheme, x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { x, useTheme } from "@xstyled/styled-components";
-import { th } from "@xstyled/styled-components";
-import { Icon } from "../Icon";
-import { IconWrap, LinkWrapper, StyledAlert, VerticalSeparator, Text, Title, CloseBtn, ActionButton, Description } from "./styles";
-var alertBackgroundColor = {
-    success: "green10",
-    info: "blue10",
-    warning: "yellow10",
-    danger: "red10"
+//#region packages/ui/Elements/Alert/Alert.tsx
+const alertBackgroundColor = {
+	success: "green10",
+	info: "blue10",
+	warning: "yellow10",
+	danger: "red10"
 };
-var alertColorFill = {
-    success: "successColor",
-    info: "blue60",
-    warning: "yellow70",
-    danger: "dangerColor"
+const alertColorFill = {
+	success: "successColor",
+	info: "blue60",
+	warning: "yellow70",
+	danger: "dangerColor"
 };
-var alertIconMap = {
-    success: "circleCheck",
-    info: "info",
-    warning: "circleTriangle",
-    danger: "circleTriangle"
+const alertIconMap = {
+	success: "circleCheck",
+	info: "info",
+	warning: "circleTriangle",
+	danger: "circleTriangle"
 };
-var Alert = function Alert(props) {
-    var intent = props.intent, inline = props.inline, onClick = props.onClick, onClose = props.onClose, title = props.title, text = props.text, href = props.href, actionLabel = props.actionLabel, actionType = props.actionType, desc = props.desc, _props_closeAnywhere = props.closeAnywhere, closeAnywhere = _props_closeAnywhere === void 0 ? false : _props_closeAnywhere;
-    var theme = useTheme();
-    var bgColor = th.color(intent ? alertBackgroundColor[intent] : "transparent")({
-        theme: theme
-    });
-    var colorFill = th.color(intent ? alertColorFill[intent] : "transparent")({
-        theme: theme
-    });
-    var icon = intent && alertIconMap[intent];
-    return /* @__PURE__ */ jsxs(StyledAlert, {
-        $bgColor: bgColor,
-        $colorFill: colorFill,
-        $inline: inline,
-        onClick: closeAnywhere ? onClose : void 0,
-        children: [
-            /* @__PURE__ */ jsxs(x.div, {
-                display: "flex",
-                alignItems: "center",
-                children: [
-                    inline && /* @__PURE__ */ jsx(VerticalSeparator, {
-                        $colorFill: colorFill
-                    }),
-                    icon && /* @__PURE__ */ jsx(IconWrap, {
-                        children: /* @__PURE__ */ jsx(Icon, {
-                            icon: icon,
-                            size: "20px",
-                            fill: colorFill
-                        })
-                    }),
-                    /* @__PURE__ */ jsxs("div", {
-                        children: [
-                            /* @__PURE__ */ jsx(Title, {
-                                children: title
-                            }),
-                            /* @__PURE__ */ jsxs(Text, {
-                                children: [
-                                    " ",
-                                    text
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /* @__PURE__ */ jsxs(x.div, {
-                display: "flex",
-                alignItems: "center",
-                children: [
-                    href && actionType === "link" && /* @__PURE__ */ jsx(LinkWrapper, {
-                        $colorFill: colorFill,
-                        to: href,
-                        children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : "Link"
-                    }),
-                    onClick && actionType === "button" && /* @__PURE__ */ jsx(ActionButton, {
-                        $colorFill: colorFill,
-                        onClick: onClick,
-                        children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : "Submit"
-                    }),
-                    onClose && !closeAnywhere && /* @__PURE__ */ jsx(CloseBtn, {
-                        onClick: onClose,
-                        children: /* @__PURE__ */ jsx(Icon, {
-                            icon: "close",
-                            size: "15px",
-                            fill: "gray"
-                        })
-                    }),
-                    desc && /* @__PURE__ */ jsx(Description, {
-                        children: desc
-                    })
-                ]
-            })
-        ]
-    });
+const Alert = (props) => {
+	const { intent, inline, onClick, onClose, title, text, href, actionLabel, actionType, desc, closeAnywhere = false } = props;
+	const theme = useTheme();
+	const bgColor = th.color(intent ? alertBackgroundColor[intent] : "transparent")({ theme });
+	const colorFill = th.color(intent ? alertColorFill[intent] : "transparent")({ theme });
+	const icon = intent && alertIconMap[intent];
+	return /* @__PURE__ */ jsxs(StyledAlert, {
+		$bgColor: bgColor,
+		$colorFill: colorFill,
+		$inline: inline,
+		onClick: closeAnywhere ? onClose : void 0,
+		children: [/* @__PURE__ */ jsxs(x.div, {
+			display: "flex",
+			alignItems: "center",
+			children: [
+				inline && /* @__PURE__ */ jsx(VerticalSeparator, { $colorFill: colorFill }),
+				icon && /* @__PURE__ */ jsx(IconWrap, { children: /* @__PURE__ */ jsx(Icon, {
+					icon,
+					size: "20px",
+					fill: colorFill
+				}) }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Title, { children: title }), /* @__PURE__ */ jsxs(Text, { children: [" ", text] })] })
+			]
+		}), /* @__PURE__ */ jsxs(x.div, {
+			display: "flex",
+			alignItems: "center",
+			children: [
+				href && actionType === "link" && /* @__PURE__ */ jsx(LinkWrapper, {
+					$colorFill: colorFill,
+					to: href,
+					children: actionLabel ?? "Link"
+				}),
+				onClick && actionType === "button" && /* @__PURE__ */ jsx(ActionButton, {
+					$colorFill: colorFill,
+					onClick,
+					children: actionLabel ?? "Submit"
+				}),
+				onClose && !closeAnywhere && /* @__PURE__ */ jsx(CloseBtn, {
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "close",
+						size: "15px",
+						fill: "gray"
+					})
+				}),
+				desc && /* @__PURE__ */ jsx(Description, { children: desc })
+			]
+		})]
+	});
 };
-var Alert_default = Alert;
-export { Alert_default as default };
+//#endregion
+export { Alert as default };

package/ui/Elements/Alert/index.js

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

package/ui/Elements/Alert/styles.js

@@ -1,127 +1,82 @@
-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: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ",
-        ";\n  border-radius: 8px;\n  background-color: ",
-        ";\n  color: ",
-        ";\n  font-family: ",
-        ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  margin: 0 13px 0 9px;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 14px;\n  font-weight: 600;\n  color: ",
-        ";\n  margin-right: 10px;\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ",
-        ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ",
-        ";\n  font-size: 10px;\n"
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "styled-components";
-import { Link } from "../Link";
-import { x, th } from "@xstyled/styled-components";
-var StyledAlert = styled(x.div)(_templateObject(), function(param) {
-    var $inline = param.$inline, $colorFill = param.$colorFill;
-    return $inline ? "solid 1px ".concat($colorFill) : "none";
-}, function(param) {
-    var $bgColor = param.$bgColor;
-    return $bgColor;
-}, th("colors.textPrimary"), th("fonts.primary"));
-var VerticalSeparator = styled(x.div)(_templateObject1(), function(param) {
-    var $colorFill = param.$colorFill;
-    return $colorFill;
-});
-var IconWrap = styled(x.div)(_templateObject2());
-var Title = styled.span(_templateObject3());
-var Text = styled.span(_templateObject4());
-var LinkWrapper = styled(Link)(_templateObject5(), function(param) {
-    var $colorFill = param.$colorFill;
-    return $colorFill;
-});
-var ActionButton = styled.button(_templateObject6(), function(param) {
-    var $colorFill = param.$colorFill;
-    return $colorFill;
-});
-var CloseBtn = styled.button(_templateObject7());
-var Description = styled.div(_templateObject8(), th("colors.gray"));
+import Link from "../Link/Link.js";
+import "../Link/index.js";
+import { th, x } from "@xstyled/styled-components";
+import styled$2 from "styled-components";
+//#region packages/ui/Elements/Alert/styles.ts
+const StyledAlert = styled$2(x.div)`
+  width: calc(100vw - 20px);
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  border: ${({ $inline, $colorFill }) => $inline ? `solid 1px ${$colorFill}` : "none"};
+  border-radius: 8px;
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${th("colors.textPrimary")};
+  font-family: ${th("fonts.primary")};
+  padding: 6px 5px 6px 5px;
+  margin-bottom: 5px;
+  position: sticky;
+  left: 10px;
+  @media (min-width: 1024px) {
+    position: relative;
+    left: 0;
+    width: 100%;
+  }
+`;
+const VerticalSeparator = styled$2(x.div)`
+  width: 4px;
+  height: 36px;
+  border-radius: 94px;
+  background-color: ${({ $colorFill }) => $colorFill};
+`;
+const IconWrap = styled$2(x.div)`
+  margin: 0 13px 0 9px;
+`;
+const Title = styled$2.span`
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+`;
+const Text = styled$2.span`
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+`;
+const LinkWrapper = styled$2(Link)`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ $colorFill }) => $colorFill};
+  margin-right: 10px;
+`;
+const ActionButton = styled$2.button`
+  margin-right: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ $colorFill }) => $colorFill};
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+`;
+const CloseBtn = styled$2.button`
+  height: 30px;
+  width: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  margin-right: 5px;
+  background-color: transparent;
+  & :hover {
+    cursor: pointer;
+  }
+`;
+const Description = styled$2.div`
+  position: absolute;
+  top: 3px;
+  right: 8px;
+  color: ${th("colors.gray")};
+  font-size: 10px;
+`;
+//#endregion
 export { ActionButton, CloseBtn, Description, IconWrap, LinkWrapper, StyledAlert, Text, Title, VerticalSeparator };

package/ui/Elements/Alert/types.js

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

package/ui/Elements/AsyncSelect/AsyncSelect.js

@@ -1,161 +1,35 @@
-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 _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 _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 _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 _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 ErrorMessage from "../ErrorMessage/ErrorMessage.js";
+import { FieldLabel } from "../Label/Label.js";
+import "../Label/index.js";
+import SpaceAround_default from "../SpaceAround/index.js";
+import { StyledAsyncSelect, Wrapper } from "../Select/styles.js";
+import { useStylesAndComponents } from "../Select/themes/index.js";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import ErrorMessage from "../ErrorMessage/ErrorMessage";
-import { FieldLabel } from "../Label";
-import { StyledAsyncSelect, Wrapper } from "../Select/styles";
-import { useStylesAndComponents } from "../Select/themes";
-import SpaceAroundWrap from "../SpaceAround";
 import { i18n } from "@lingui/core";
-var AsyncSelect = function AsyncSelect(_0) {
-    var error = _0.error, label = _0.label, className = _0.className, spaceAround = _0.spaceAround, name = _0.name, placeholder = _0.placeholder, _0_style = _0.style, style = _0_style === void 0 ? "form" : _0_style, _0_optionVariant = _0.optionVariant, optionVariant = _0_optionVariant === void 0 ? "checkbox" : _0_optionVariant, _0_multiLabelVariant = _0.multiLabelVariant, multiLabelVariant = _0_multiLabelVariant === void 0 ? "count" : _0_multiLabelVariant, props = _object_without_properties(_0, [
-        "error",
-        "label",
-        "className",
-        "spaceAround",
-        "name",
-        "placeholder",
-        "style",
-        "optionVariant",
-        "multiLabelVariant"
-    ]);
-    var _useStylesAndComponents = _sliced_to_array(useStylesAndComponents(style, optionVariant, multiLabelVariant), 3), customComponents = _useStylesAndComponents[0], customTheme = _useStylesAndComponents[1], customStyles = _useStylesAndComponents[2];
-    return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
-        spaceAround: spaceAround,
-        className: className,
-        children: [
-            /* @__PURE__ */ jsxs(Wrapper, {
-                children: [
-                    label && /* @__PURE__ */ jsx(FieldLabel, {
-                        htmlFor: name,
-                        children: label
-                    }),
-                    /* @__PURE__ */ jsx(StyledAsyncSelect, _object_spread({
-                        id: name,
-                        name: name,
-                        theme: customTheme,
-                        components: customComponents,
-                        styles: customStyles,
-                        classNamePrefix: "react-select",
-                        placeholder: placeholder || i18n._({
-                            id: "components.dropdown.placeholder",
-                            message: "Select..."
-                        })
-                    }, props))
-                ]
-            }),
-            error && /* @__PURE__ */ jsx(ErrorMessage, {
-                children: error
-            })
-        ]
-    });
+//#region packages/ui/Elements/AsyncSelect/AsyncSelect.tsx
+const AsyncSelect = ({ error, label, className, spaceAround, name, placeholder, style = "form", optionVariant = "checkbox", multiLabelVariant = "count", ...props }) => {
+	const [customComponents, customTheme, customStyles] = useStylesAndComponents(style, optionVariant, multiLabelVariant);
+	return /* @__PURE__ */ jsxs(SpaceAround_default, {
+		spaceAround,
+		className,
+		children: [/* @__PURE__ */ jsxs(Wrapper, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: name,
+			children: label
+		}), /* @__PURE__ */ jsx(StyledAsyncSelect, {
+			id: name,
+			name,
+			theme: customTheme,
+			components: customComponents,
+			styles: customStyles,
+			classNamePrefix: "react-select",
+			placeholder: placeholder || i18n._({
+				id: "components.dropdown.placeholder",
+				message: "Select..."
+			}),
+			...props
+		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })]
+	});
 };
+//#endregion
 export { AsyncSelect };

package/ui/Elements/AsyncSelect/index.js

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