@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/SpaceAround/SpaceAround.js

@@ -1,168 +1,33 @@
-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          margin-top: ",
-        ";\n          margin-right: ",
-        ";\n          margin-bottom: ",
-        ";\n          margin-left: ",
-        ";\n        "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n          display: flex;\n          justify-content: space-between;\n        "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  width: ",
-        ";\n  position: relative;\n  box-sizing: border-box;\n  ",
-        ";\n  ",
-        ";\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1, { css, th, useTheme, x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import styled, { x, css, useTheme, th } from "@xstyled/styled-components";
-var Wrapper = styled(x.div)(_templateObject2(), function(param) {
-    var $marginLeft = param.$marginLeft, $marginRight = param.$marginRight;
-    return "calc(100% - ".concat($marginLeft || "0px", " - ").concat($marginRight || "0px", ")");
-}, function(param) {
-    var $spaceAround = param.$spaceAround;
-    return $spaceAround ? css(_templateObject(), $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginTop) === "undefined" ? 1 : $spaceAround.marginTop, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginRight) === "undefined" ? 1 : $spaceAround.marginRight, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginBottom) === "undefined" ? 2 : $spaceAround.marginBottom, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginLeft) === "undefined" ? 0 : $spaceAround.marginLeft) : "";
-}, function(param) {
-    var $spaceBetween = param.$spaceBetween;
-    return $spaceBetween ? css(_templateObject1()) : "";
-});
-var SpaceAroundWrap = function SpaceAroundWrap(_0) {
-    var children = _0.children, _0_spaceBetween = _0.spaceBetween, spaceBetween = _0_spaceBetween === void 0 ? false : _0_spaceBetween, _0_spaceAround = _0.spaceAround, spaceAround = _0_spaceAround === void 0 ? true : _0_spaceAround, rest = _object_without_properties(_0, [
-        "children",
-        "spaceBetween",
-        "spaceAround"
-    ]);
-    var theme = useTheme();
-    var themeMarginLeft = typeof spaceAround !== "boolean" && (spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginLeft) ? th.space(spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginLeft)({
-        theme: theme
-    }) : 0;
-    var themeMarginRight = typeof spaceAround !== "boolean" && (spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginRight) ? th.space(spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginRight)({
-        theme: theme
-    }) : 0;
-    return /* @__PURE__ */ jsx(Wrapper, _object_spread_props(_object_spread({
-        $spaceAround: spaceAround,
-        $spaceBetween: spaceBetween,
-        $marginRight: themeMarginRight,
-        $marginLeft: themeMarginLeft
-    }, rest), {
-        children: children
-    }));
+//#region packages/ui/Elements/SpaceAround/SpaceAround.tsx
+const Wrapper = styled$1(x.div)`
+  width: ${({ $marginLeft, $marginRight }) => `calc(100% - ${$marginLeft || "0px"} - ${$marginRight || "0px"})`};
+  position: relative;
+  box-sizing: border-box;
+  ${({ $spaceAround }) => $spaceAround ? css`
+          margin-top: ${$spaceAround === true || typeof $spaceAround?.marginTop === "undefined" ? 1 : $spaceAround.marginTop};
+          margin-right: ${$spaceAround === true || typeof $spaceAround?.marginRight === "undefined" ? 1 : $spaceAround.marginRight};
+          margin-bottom: ${$spaceAround === true || typeof $spaceAround?.marginBottom === "undefined" ? 2 : $spaceAround.marginBottom};
+          margin-left: ${$spaceAround === true || typeof $spaceAround?.marginLeft === "undefined" ? 0 : $spaceAround.marginLeft};
+        ` : ""};
+  ${({ $spaceBetween }) => $spaceBetween ? css`
+          display: flex;
+          justify-content: space-between;
+        ` : ""};
+`;
+const SpaceAroundWrap = ({ children, spaceBetween = false, spaceAround = true, ...rest }) => {
+	const theme = useTheme();
+	const themeMarginLeft = typeof spaceAround !== "boolean" && spaceAround?.marginLeft ? th.space(spaceAround?.marginLeft)({ theme }) : 0;
+	return /* @__PURE__ */ jsx(Wrapper, {
+		$spaceAround: spaceAround,
+		$spaceBetween: spaceBetween,
+		$marginRight: typeof spaceAround !== "boolean" && spaceAround?.marginRight ? th.space(spaceAround?.marginRight)({ theme }) : 0,
+		$marginLeft: themeMarginLeft,
+		...rest,
+		children
+	});
 };
-var SpaceAround_default = SpaceAroundWrap;
-export { SpaceAround_default as default };
+//#endregion
+export { SpaceAroundWrap as default };

package/ui/Elements/SpaceAround/index.js

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

package/ui/Elements/SpaceAround/types.js

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

package/ui/Elements/Spinner/Spinner.js

@@ -1,40 +1,39 @@
+import { Circle, Svg } from "./styles.js";
 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"
+//#region packages/ui/Elements/Spinner/Spinner.tsx
+const 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"
+const 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
-        })
-    });
+const Spinner = ({ variant = "default", appearance }) => {
+	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: appearance ? appearanceToFontColorMap[appearance] : "blue2"
+		})
+	});
 };
-var Spinner_default = Spinner;
-export { Spinner, appearanceToColorMap, appearanceToFontColorMap, Spinner_default as default };
+//#endregion
+export { Spinner, Spinner as default, appearanceToColorMap, appearanceToFontColorMap };

package/ui/Elements/Spinner/index.js

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

package/ui/Elements/Spinner/styles.js

@@ -1,66 +1,36 @@
-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");
-});
+import styled$1, { keyframes, th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Spinner/styles.ts
+const KeyframesCircularDash = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0px;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`;
+const KeyframesCircularRotate = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const Svg = styled$1.svg`
+  width: ${({ $variant }) => $variant === "sm" ? "16" : "40"}px;
+  height: ${({ $variant }) => $variant === "sm" ? "16" : "40"}px;
+  animation: ${KeyframesCircularRotate} 1.4s linear infinite;
+`;
+const Circle = styled$1.circle`
+  animation: ${KeyframesCircularDash} 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  stroke: ${({ color }) => color ? th.color(color) : th.color("blue2")};
+`;
+//#endregion
 export { Circle, Svg };

package/ui/Elements/Spinner/types.js

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

package/ui/Elements/Table/Table.js

@@ -1,78 +1,45 @@
-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);
+import styled$1, { system } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Table/Table.tsx
+const Table = styled$1.table`
+  ${system};
+  width: 100%;
+  border-collapse: collapse;
+  color: blue2;
+`;
+const Tr = styled$1.tr`
+  ${system};
+  &:nth-child(even) {
+    background-color: bgLightGray;
+  }
+`;
+const Td = styled$1.td`
+  ${system};
+`;
+const Th = styled$1.th`
+  ${system};
+  font-weight: semiBold;
+  text-align: left;
+  border-top: 1px solid;
+  border-top-color: lightGray6;
+
+  &:not(:last-child) {
+    border-right: 1px dashed;
+    border-right-color: lightGray6;
+  }
+`;
+const Tbody = styled$1.tbody`
+  ${system};
+  td {
+    padding: 9px 4px;
+  }
+`;
+const Thead = styled$1.thead`
+  ${system};
+  background-color: bgLightGray1;
+
+  th {
+    padding: 10px 8px;
+  }
+`;
+//#endregion
 export { Table, Tbody, Td, Th, Thead, Tr };

package/ui/Elements/Table/index.js

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