@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/Avatar/Avatar.js

@@ -1,153 +1,38 @@
-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 ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ",
-        ";\n  background-color: ",
-        ";\n  width: ",
-        ";\n  height: ",
-        ";\n  :hover {\n    background-color: ",
-        ";\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import { Profile } from "../Icon/icons/Profile.js";
+import "../Icon/index.js";
+import "react";
+import styled$1, { th } from "@xstyled/styled-components";
 import { Fragment, jsx } from "react/jsx-runtime";
-import { Profile } from "../Icon";
-import styled, { th } from "@xstyled/styled-components";
-var defaultDimension = 100;
-var StyledAvatarWrap = styled.div(_templateObject(), function(props) {
-    return props.$colorFront ? th.color(props.$colorFront) : "auto";
-}, function(props) {
-    return props.$colorBack ? th.color(props.$colorBack) : "auto";
-}, function(props) {
-    return "".concat(props.size, "px");
-}, function(props) {
-    return "".concat(props.size, "px");
-}, function(props) {
-    return props.$hoverColorBack ? th.color(props.$hoverColorBack) : "auto";
-});
-var Avatar = function Avatar(_0) {
-    var src = _0.src, _0_size = _0.size, size = _0_size === void 0 ? defaultDimension : _0_size, colorFront = _0.colorFront, colorBack = _0.colorBack, className = _0.className, hoverColorBack = _0.hoverColorBack, rest = _object_without_properties(_0, [
-        "src",
-        "size",
-        "colorFront",
-        "colorBack",
-        "className",
-        "hoverColorBack"
-    ]);
-    return /* @__PURE__ */ jsx(Fragment, {
-        children: /* @__PURE__ */ jsx(StyledAvatarWrap, _object_spread_props(_object_spread({
-            size: size || 34,
-            className: className,
-            $colorBack: colorBack || "neutral20",
-            $colorFront: colorFront || "blue2",
-            $hoverColorBack: hoverColorBack || "lightGray7"
-        }, rest), {
-            children: src ? /* @__PURE__ */ jsx("img", {
-                src: src,
-                width: size,
-                height: size
-            }) : /* @__PURE__ */ jsx(Profile, {})
-        }))
-    });
+//#region packages/ui/Elements/Avatar/Avatar.tsx
+const defaultDimension = 100;
+const StyledAvatarWrap = styled$1.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+  color: ${(props) => props.$colorFront ? th.color(props.$colorFront) : "auto"};
+  background-color: ${(props) => props.$colorBack ? th.color(props.$colorBack) : "auto"};
+  width: ${(props) => `${props.size}px`};
+  height: ${(props) => `${props.size}px`};
+  :hover {
+    background-color: ${(props) => props.$hoverColorBack ? th.color(props.$hoverColorBack) : "auto"};
+  }
+`;
+const Avatar = ({ src, size = defaultDimension, colorFront, colorBack, className, hoverColorBack, ...rest }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(StyledAvatarWrap, {
+		size: size || 34,
+		className,
+		$colorBack: colorBack || "neutral20",
+		$colorFront: colorFront || "blue2",
+		$hoverColorBack: hoverColorBack || "lightGray7",
+		...rest,
+		children: src ? /* @__PURE__ */ jsx("img", {
+			src,
+			width: size,
+			height: size
+		}) : /* @__PURE__ */ jsx(Profile, {})
+	}) });
 };
+//#endregion
 export { Avatar };

package/ui/Elements/Avatar/index.js

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

package/ui/Elements/Avatar/types.js

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

package/ui/Elements/Badge/Badge.js

@@ -1,107 +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  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ",
-        ";\n  padding: ",
-        ";\n  color: white;\n  gap: 10px;\n  background-color: ",
-        ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ",
-        ";\n  font-size: ",
-        ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ",
-        ";\n  left: ",
-        ";\n  z-index: 1;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n          width: ",
-        ";\n        "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n  ",
-        ";\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import styled, { css, useTheme, th } from "@xstyled/styled-components";
-var Circle = styled.div(_templateObject(), function(param) {
-    var size = param.size;
-    return size === "small" ? "16px" : "24px";
-}, function(param) {
-    var size = param.size;
-    return size === "small" ? "0 5px" : "3px 8px";
-}, function(param) {
-    var color = param.color;
-    return color;
-}, th("fonts.primary"), function(param) {
-    var size = param.size;
-    return size === "small" ? "12px" : "14px";
-}, function(param) {
-    var topPosition = param.topPosition;
-    return topPosition && "-15%";
-}, function(param) {
-    var horizontalPosition = param.horizontalPosition;
-    return horizontalPosition === "middle" ? "50%" : "100%";
-});
-var RelativeWrap = styled.div(_templateObject2(), function(param) {
-    var width = param.width;
-    return width ? css(_templateObject1(), width) : "";
-});
-var Badge = function Badge(param) {
-    var children = param.children, _param_color = param.color, color = _param_color === void 0 ? "red1" : _param_color, _param_size = param.size, size = _param_size === void 0 ? "default" : _param_size, label = param.label, childWidth = param.childWidth, topPosition = param.topPosition, _param_horizontalPosition = param.horizontalPosition, horizontalPosition = _param_horizontalPosition === void 0 ? "middle" : _param_horizontalPosition;
-    var theme = useTheme();
-    var themeColor = th.color(color)({
-        theme: theme
-    });
-    var badgeLabel = useMemo(function() {
-        return typeof label === "number" ? label >= 100 ? "99+" : label : label;
-    }, [
-        label
-    ]);
-    if (!label || typeof label === "number" && label <= 0) {
-        return /* @__PURE__ */ jsx(Fragment, {
-            children: children
-        });
-    }
-    return /* @__PURE__ */ jsxs(RelativeWrap, {
-        width: childWidth,
-        children: [
-            /* @__PURE__ */ jsx(Circle, {
-                color: themeColor,
-                size: size,
-                topPosition: topPosition,
-                horizontalPosition: horizontalPosition,
-                children: /* @__PURE__ */ jsx("div", {
-                    className: "label",
-                    children: badgeLabel
-                })
-            }),
-            children
-        ]
-    });
+import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Badge/Badge.tsx
+const Circle = styled$1.div`
+  min-width: 12px;
+  display: flex;
+  align-items: center;
+  height: ${({ size }) => size === "small" ? "16px" : "24px"};
+  padding: ${({ size }) => size === "small" ? "0 5px" : "3px 8px"};
+  color: white;
+  gap: 10px;
+  background-color: ${({ color }) => color};
+  border-radius: 29px;
+  line-height: 15.6px;
+  font-family: ${th("fonts.primary")};
+  font-size: ${({ size }) => size === "small" ? "12px" : "14px"};
+  font-weight: semiBold;
+  position: absolute;
+  top: ${({ topPosition }) => topPosition && "-15%"};
+  left: ${({ horizontalPosition }) => horizontalPosition === "middle" ? "50%" : "100%"};
+  z-index: 1;
+`;
+const RelativeWrap = styled$1.div`
+  position: relative;
+  ${({ width }) => width ? css`
+          width: ${width};
+        ` : ""};
+`;
+const Badge = ({ children, color = "red1", size = "default", label, childWidth, topPosition, horizontalPosition = "middle" }) => {
+	const theme = useTheme();
+	const themeColor = th.color(color)({ theme });
+	const badgeLabel = useMemo(() => {
+		return typeof label === "number" ? label >= 100 ? "99+" : label : label;
+	}, [label]);
+	if (!label || typeof label === "number" && label <= 0) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(RelativeWrap, {
+		width: childWidth,
+		children: [/* @__PURE__ */ jsx(Circle, {
+			color: themeColor,
+			size,
+			topPosition,
+			horizontalPosition,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "label",
+				children: badgeLabel
+			})
+		}), children]
+	});
 };
-var Badge_default = Badge;
-export { Badge_default as default };
+//#endregion
+export { Badge as default };

package/ui/Elements/Badge/index.js

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

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -1,25 +1,22 @@
-import { jsx } from "react/jsx-runtime";
+import { Bar } from "./styles.js";
 import { x } from "@xstyled/styled-components";
-import { Bar } from "./styles";
-var BarChartSymbol = function BarChartSymbol(param) {
-    var _param_total = param.total, total = _param_total === void 0 ? 3 : _param_total, _param_height = param.height, height = _param_height === void 0 ? 14 : _param_height, _param_minHeight = param.minHeight, minHeight = _param_minHeight === void 0 ? 7 : _param_minHeight, _param_selected = param.selected, selected = _param_selected === void 0 ? 3 : _param_selected, _param_gap = param.gap, gap = _param_gap === void 0 ? 2 : _param_gap, _param_width = param.width, width = _param_width === void 0 ? 3 : _param_width, color = param.color;
-    return /* @__PURE__ */ jsx(x.div, {
-        display: "flex",
-        alignItems: "flex-end",
-        gap: "".concat(gap, "px"),
-        children: Array.from({
-            length: total
-        }).map(function(_, index) {
-            return /* @__PURE__ */ jsx(Bar, {
-                total: total,
-                index: index + 1,
-                height: height,
-                minHeight: minHeight,
-                selected: selected,
-                color: color,
-                width: width
-            }, index);
-        })
-    });
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/BarChartSymbol/BarChartSymbol.tsx
+const BarChartSymbol = ({ total = 3, height = 14, minHeight = 7, selected = 3, gap = 2, width = 3, color }) => {
+	return /* @__PURE__ */ jsx(x.div, {
+		display: "flex",
+		alignItems: "flex-end",
+		gap: `${gap}px`,
+		children: Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(Bar, {
+			total,
+			index: index + 1,
+			height,
+			minHeight,
+			selected,
+			color,
+			width
+		}, index))
+	});
 };
+//#endregion
 export { BarChartSymbol };

package/ui/Elements/BarChartSymbol/index.js

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

package/ui/Elements/BarChartSymbol/styles.js

@@ -1,34 +1,10 @@
-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: ",
-        "px;\n  height: ",
-        "px;\n  background-color: ",
-        ";\n  border-radius: 7px;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
 import { styled, th } from "@xstyled/styled-components";
-var Bar = styled.div(_templateObject(), function(param) {
-    var width = param.width;
-    return width;
-}, function(param) {
-    var index = param.index, height = param.height, total = param.total, minHeight = param.minHeight;
-    return minHeight + (index - 1) * ((height - minHeight) / (total - 1));
-}, function(param) {
-    var selected = param.selected, index = param.index, color = param.color;
-    return selected >= index ? th.color(color || "red1") : th.color("lightGray6");
-});
+//#region packages/ui/Elements/BarChartSymbol/styles.ts
+const Bar = styled.div`
+  width: ${({ width }) => width}px;
+  height: ${({ index, height, total, minHeight }) => minHeight + (index - 1) * ((height - minHeight) / (total - 1))}px;
+  background-color: ${({ selected, index, color }) => selected >= index ? th.color(color || "red1") : th.color("lightGray6")};
+  border-radius: 7px;
+`;
+//#endregion
 export { Bar };

package/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,125 +1,21 @@
-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 ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1, { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import styled, { x } from "@xstyled/styled-components";
-var StyledBox = styled(x.div)(_templateObject());
-var BorderedBox = function BorderedBox(_0) {
-    var children = _0.children, className = _0.className, id = _0.id, rest = _object_without_properties(_0, [
-        "children",
-        "className",
-        "id"
-    ]);
-    return /* @__PURE__ */ jsx(StyledBox, _object_spread_props(_object_spread({
-        id: id,
-        className: className
-    }, rest), {
-        children: children
-    }));
-};
-var BorderedBox_default = BorderedBox;
-export { BorderedBox_default as default };
+//#region packages/ui/Elements/BorderedBox/BorderedBox.tsx
+const StyledBox = styled$1(x.div)`
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 3;
+  border: slim;
+  border-color: lightGray3;
+  border-radius: md;
+`;
+const BorderedBox = ({ children, className, id, ...rest }) => /* @__PURE__ */ jsx(StyledBox, {
+	id,
+	className,
+	...rest,
+	children
+});
+//#endregion
+export { BorderedBox as default };

package/ui/Elements/BorderedBox/index.js

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

package/ui/Elements/BorderedBox/types.js

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