@mailstep/design-system 0.8.31-beta.3 → 0.8.31

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export type FlagAppearanceType = 'neutralBold' | 'neutralSubtle' | 'blueBold' | 'blueSubtle' | 'tealBold' | 'tealSubtle' | 'greenBold' | 'greenSubtle' | 'orangeBold' | 'orangeSubtle' | 'yellowBold' | 'yellowSubtle' | 'pinkBold' | 'pinkSubtle' | 'purpleBold' | 'purpleSubtle' | 'redBold' | 'redSubtle';
 export declare const flagAppearanceToColorMap: {
     neutralBold: string;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -1,65 +1,101 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import "react";
+import styled$1, { useTheme } from "@xstyled/styled-components";
+import { th as th$1 } from "@xstyled/system";
+import { jsx } from "react/jsx-runtime";
+//#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"
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled, { useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-var StyledHighlightBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var $bgcolor = _a.$bgcolor;
-    return $bgcolor;
-}, function (_a) {
-    var $fontColor = _a.$fontColor;
-    return $fontColor;
-});
-var OverflowWrap = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
-export 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'
+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"
 };
-export 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 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 = function (_a) {
-    var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, className = _a.className, prefix = _a.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 (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size + ' ' + (className || ''), children: children }) }));
-};
-export default HighlightBox;
-var templateObject_1, templateObject_2;
+//#endregion
+export { HighlightBox as default, flagAppearanceToColorMap, flagAppearanceToFontColorMap };

package/ui/Elements/HighlightBox/index.d.ts

@@ -1,3 +1,2 @@
-import { default as HighlightBox } from './HighlightBox';
-
+import HighlightBox from './HighlightBox';
 export default HighlightBox;

package/ui/Elements/HighlightBox/index.js

@@ -1,2 +1,5 @@
-import HighlightBox from './HighlightBox';
-export default 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.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { IconProps } from './types';
-
+import { type FC } from 'react';
+import { type IconProps } from './types';
 type Props = {
     badge: 'warning';
 } & IconProps;

package/ui/Elements/Icon/BadgeIcon.js

@@ -1,48 +1,28 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+import Icon from "./Icon.js";
+import { useMemo } from "react";
+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 __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import styled from '@xstyled/styled-components';
-import Icon from './Icon';
-var Badge = styled(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-table;\n  vertical-align: middle;\n  position: absolute;\n  top: -10%;\n  right: -10%;\n  font-size: 60%;\n"], ["\n  display: inline-table;\n  vertical-align: middle;\n  position: absolute;\n  top: -10%;\n  right: -10%;\n  font-size: 60%;\n"])));
-var RelativeWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-export var BadgeIcon = function (_a) {
-    var badge = _a.badge, iconProps = __rest(_a, ["badge"]);
-    var badgeProps = useMemo(function () {
-        if (badge == 'warning') {
-            return {
-                icon: 'warningDual',
-                fill: 'black',
-                secondaryColor: 'yellow2'
-            };
-        }
-        return {};
-    }, [badge]);
-    return (_jsxs(RelativeWrap, { children: [_jsx(Badge, __assign({}, badgeProps)), _jsx(Icon, __assign({}, iconProps))] }));
-};
-export default BadgeIcon;
-var templateObject_1, templateObject_2;
+//#endregion
+export { BadgeIcon, BadgeIcon as default };

package/ui/Elements/Icon/Icon.d.ts

@@ -1,8 +1,7 @@
-import { FC } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-common-types';
-import { FlipProp } from '@fortawesome/fontawesome-svg-core';
-import { IconProps } from './types';
-
+import { type FC } from 'react';
+import { type IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { type FlipProp } from '@fortawesome/fontawesome-svg-core';
+import type { IconProps } from './types';
 export declare const iconDictionary: Record<string, IconDefinition | [IconDefinition, FlipProp]>;
 declare const Icon: FC<IconProps>;
 export default Icon;