@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -1,103 +1,101 @@
-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: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px !important;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ",
-        ";\n  color: ",
-        ";\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  text-overflow: ellipsis;\n  overflow: hidden;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1, { useTheme } from "@xstyled/styled-components";
+import { th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
 import { jsx } from "react/jsx-runtime";
-import styled, { useTheme } from "@xstyled/styled-components";
-import { th } from "@xstyled/system";
-var StyledHighlightBox = styled.div(_templateObject(), function(param) {
-    var $bgcolor = param.$bgcolor;
-    return $bgcolor;
-}, function(param) {
-    var $fontColor = param.$fontColor;
-    return $fontColor;
-});
-var OverflowWrap = styled.span(_templateObject1());
-var flagAppearanceToColorMap = {
-    neutralBold: "neutral300",
-    neutralSubtle: "neutral20",
-    blueBold: "blue70",
-    blueSubtle: "blue20",
-    tealBold: "teal60",
-    tealSubtle: "teal20",
-    greenBold: "green60",
-    greenSubtle: "green20",
-    orangeBold: "orange60",
-    orangeSubtle: "orange20",
-    yellowBold: "yellow60",
-    yellowSubtle: "yellow20",
-    pinkBold: "magenta60",
-    pinkSubtle: "magenta20",
-    purpleBold: "purple60",
-    purpleSubtle: "purple20",
-    redBold: "red60",
-    redSubtle: "red20"
+//#region packages/ui/Elements/HighlightBox/HighlightBox.tsx
+const StyledHighlightBox = styled$1.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: ml;
+  font-size: 12px;
+  text-align: center;
+  line-height: 19.2px;
+  min-width: 0;
+  font-weight: semiBold;
+  .default {
+    height: 24px;
+    padding: 2px 8px !important;
+  }
+  .small {
+    height: 18px;
+    padding: 1px 6px;
+  }
+  .wide {
+    height: 2.75em;
+    display: flex;
+    flex-flow: row wrap;
+    width: 11rem;
+    align-content: center;
+    line-height: 14px;
+    padding: 0.5px 12px;
+  }
+  .fitContent {
+    width: fit-content;
+    height: auto;
+    padding: 4px 5px;
+    font-size: 13px;
+    line-height: 15px;
+    font-weight: 400;
+  }
+  background-color: ${({ $bgcolor }) => $bgcolor};
+  color: ${({ $fontColor }) => $fontColor};
+`;
+const OverflowWrap = styled$1.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+const flagAppearanceToColorMap = {
+	neutralBold: "neutral300",
+	neutralSubtle: "neutral20",
+	blueBold: "blue70",
+	blueSubtle: "blue20",
+	tealBold: "teal60",
+	tealSubtle: "teal20",
+	greenBold: "green60",
+	greenSubtle: "green20",
+	orangeBold: "orange60",
+	orangeSubtle: "orange20",
+	yellowBold: "yellow60",
+	yellowSubtle: "yellow20",
+	pinkBold: "magenta60",
+	pinkSubtle: "magenta20",
+	purpleBold: "purple60",
+	purpleSubtle: "purple20",
+	redBold: "red60",
+	redSubtle: "red20"
 };
-var flagAppearanceToFontColorMap = {
-    neutralBold: "white",
-    neutralSubtle: "typoPrimary",
-    blueBold: "white",
-    blueSubtle: "blue80",
-    tealBold: "white",
-    tealSubtle: "teal90",
-    greenBold: "white",
-    greenSubtle: "green80",
-    orangeBold: "white",
-    orangeSubtle: "orange80",
-    yellowBold: "typoPrimary",
-    yellowSubtle: "typoPrimary",
-    pinkBold: "white",
-    pinkSubtle: "magenta80",
-    purpleBold: "white",
-    purpleSubtle: "purple80",
-    redBold: "white",
-    redSubtle: "red80"
+const flagAppearanceToFontColorMap = {
+	neutralBold: "white",
+	neutralSubtle: "typoPrimary",
+	blueBold: "white",
+	blueSubtle: "blue80",
+	tealBold: "white",
+	tealSubtle: "teal90",
+	greenBold: "white",
+	greenSubtle: "green80",
+	orangeBold: "white",
+	orangeSubtle: "orange80",
+	yellowBold: "typoPrimary",
+	yellowSubtle: "typoPrimary",
+	pinkBold: "white",
+	pinkSubtle: "magenta80",
+	purpleBold: "white",
+	purpleSubtle: "purple80",
+	redBold: "white",
+	redSubtle: "red80"
 };
-var HighlightBox = function HighlightBox(param) {
-    var children = param.children, appearance = param.appearance, _param_size = param.size, size = _param_size === void 0 ? "default" : _param_size, className = param.className, prefix = param.prefix;
-    var theme = useTheme();
-    var bgColor = th.color(appearance ? flagAppearanceToColorMap[appearance] : "transparent")({
-        theme: theme
-    });
-    var fontColor = th.color(appearance ? flagAppearanceToFontColorMap[appearance] : "typoPrimary")({
-        theme: theme
-    });
-    var name = prefix ? "".concat(prefix, "Label") : "label";
-    return /* @__PURE__ */ jsx(StyledHighlightBox, {
-        $bgcolor: bgColor,
-        $fontColor: fontColor,
-        "data-cy": name,
-        children: /* @__PURE__ */ jsx(OverflowWrap, {
-            className: size + " " + (className || ""),
-            children: children
-        })
-    });
+const HighlightBox = ({ children, appearance, size = "default", className, prefix }) => {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx(StyledHighlightBox, {
+		$bgcolor: th$1.color(appearance ? flagAppearanceToColorMap[appearance] : "transparent")({ theme }),
+		$fontColor: th$1.color(appearance ? flagAppearanceToFontColorMap[appearance] : "typoPrimary")({ theme }),
+		"data-cy": prefix ? `${prefix}Label` : "label",
+		children: /* @__PURE__ */ jsx(OverflowWrap, {
+			className: size + " " + (className || ""),
+			children
+		})
+	});
 };
-var HighlightBox_default = HighlightBox;
-export { HighlightBox_default as default, flagAppearanceToColorMap, flagAppearanceToFontColorMap };
+//#endregion
+export { HighlightBox as default, flagAppearanceToColorMap, flagAppearanceToFontColorMap };

package/ui/Elements/HighlightBox/index.js

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

package/ui/Elements/Icon/BadgeIcon.js

@@ -1,123 +1,28 @@
-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;
-}
-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: inline-table;\n  vertical-align: middle;\n  position: absolute;\n  top: -10%;\n  right: -10%;\n  font-size: 60%;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "./Icon.js";
 import { useMemo } from "react";
-import styled from "@xstyled/styled-components";
-import Icon from "./Icon";
-var Badge = styled(Icon)(_templateObject());
-var RelativeWrap = styled.div(_templateObject1());
-var BadgeIcon = function BadgeIcon(_0) {
-    var badge = _0.badge, iconProps = _object_without_properties(_0, [
-        "badge"
-    ]);
-    var badgeProps = useMemo(function() {
-        if (badge == "warning") {
-            return {
-                icon: "warningDual",
-                fill: "black",
-                secondaryColor: "yellow2"
-            };
-        }
-        return {};
-    }, [
-        badge
-    ]);
-    return /* @__PURE__ */ jsxs(RelativeWrap, {
-        children: [
-            /* @__PURE__ */ jsx(Badge, _object_spread({}, badgeProps)),
-            /* @__PURE__ */ jsx(Icon, _object_spread({}, iconProps))
-        ]
-    });
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/Icon/BadgeIcon.tsx
+const Badge = styled$1(Icon)`
+  display: inline-table;
+  vertical-align: middle;
+  position: absolute;
+  top: -10%;
+  right: -10%;
+  font-size: 60%;
+`;
+const RelativeWrap = styled$1.div`
+  position: relative;
+`;
+const BadgeIcon = ({ badge, ...iconProps }) => {
+	return /* @__PURE__ */ jsxs(RelativeWrap, { children: [/* @__PURE__ */ jsx(Badge, { ...useMemo(() => {
+		if (badge == "warning") return {
+			icon: "warningDual",
+			fill: "black",
+			secondaryColor: "yellow2"
+		};
+		return {};
+	}, [badge]) }), /* @__PURE__ */ jsx(Icon, { ...iconProps })] });
 };
-var BadgeIcon_default = BadgeIcon;
-export { BadgeIcon, BadgeIcon_default as default };
+//#endregion
+export { BadgeIcon, BadgeIcon as default };