@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/Modal/styles.js

@@ -1,257 +1,183 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
+import { createRgba } from "../../utils/CreateRgba/createRgba.js";
+import "../../utils/index.js";
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/Modal/styles.ts
+const variantStyles = (component, variant = "default") => ({
+	header: {
+		default: css`
+        padding: 20px;
+        border-bottom: 1px solid ${th.color("lightGray6")};
+        @media (min-width: 576px) {
+          padding: 30px;
+          border-bottom: 0;
+        }
+      `,
+		compact: css`
+        padding: 20px 20px;
+        border-bottom: 1px solid ${th.color("lightGray6")};
+      `,
+		mobileFullscreen: css`
+        padding: 20px;
+      `
+	},
+	dialogWindow: {
+		default: css`
+        border-radius: 10px;
+        max-width: calc(100% - 32px);
+      `,
+		compact: css`
+        border-radius: 10px;
+        max-width: calc(100% - 32px);
+      `,
+		mobileFullscreen: css`
+        border-radius: 0;
+        max-width: 100% !important;
+      `
+	},
+	contentContainer: {
+		default: css`
+        padding: 20px 20px 15px;
+        @media (min-width: 576px) {
+          padding: 30px;
         }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n        padding: 20px;\n        border-bottom: 1px solid ",
-        ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n        padding: 20px 20px;\n        border-bottom: 1px solid ",
-        ";\n      "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n        padding: 20px;\n      "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n        border-radius: 0;\n        max-width: 100% !important;\n      "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n        padding: 20px 20px 15px;\n      "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n        padding: 0;\n      "
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        "\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ",
-        ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject10() {
-    var data = _tagged_template_literal([
-        "\n  background-color: ",
-        ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ",
-        ";\n  min-height: ",
-        ";\n  max-height: ",
-        ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ",
-        "\n  ",
-        ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ",
-        " auto 0 auto;\n  }\n"
-    ]);
-    _templateObject10 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject11() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: space-between;\n  ",
-        "\n"
-    ]);
-    _templateObject11 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject12() {
-    var data = _tagged_template_literal([
-        "\n  min-height: 50px;\n  ",
-        "\n"
-    ]);
-    _templateObject12 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject13() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"
-    ]);
-    _templateObject13 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject14() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ",
-        ";\n  text-align: right;\n  justify-content: ",
-        ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"
-    ]);
-    _templateObject14 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject15() {
-    var data = _tagged_template_literal([
-        "\n  width: ",
-        ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ",
-        ";\n    }\n  }\n"
-    ]);
-    _templateObject15 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject16() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"
-    ]);
-    _templateObject16 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { css, th } from "@xstyled/styled-components";
-import { createRgba } from "../../utils";
-var Component = /* @__PURE__ */ function(Component2) {
-    Component2["Header"] = "header";
-    Component2["DialogWindow"] = "dialogWindow";
-    Component2["ContentContainer"] = "contentContainer";
-    Component2["Title"] = "title";
-    return Component2;
-}(Component || {});
-var variantStyles = function variantStyles(component) {
-    var variant = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
-    return ({
-        header: {
-            default: css(_templateObject(), th.color("lightGray6")),
-            compact: css(_templateObject1(), th.color("lightGray6")),
-            mobileFullscreen: css(_templateObject2())
-        },
-        dialogWindow: {
-            default: css(_templateObject3()),
-            compact: css(_templateObject4()),
-            mobileFullscreen: css(_templateObject5())
-        },
-        contentContainer: {
-            default: css(_templateObject6()),
-            compact: css(_templateObject7()),
-            mobileFullscreen: css(_templateObject8())
-        },
-        title: {}
-    })[component][variant];
-};
-var DialogOverlay = styled.div(_templateObject9(), function(param) {
-    var _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? "blue2" : _param_backgroundColor;
-    return createRgba(backgroundColor, 0.6);
-});
-var DialogWindow = styled.div(_templateObject10(), function(param) {
-    var $backgroundColor = param.$backgroundColor;
-    return $backgroundColor || "#fefefe";
-}, function(param) {
-    var $minWidth = param.$minWidth;
-    return $minWidth || "10%";
-}, function(param) {
-    var $minHeight = param.$minHeight;
-    return $minHeight || "auto";
-}, function(param) {
-    var $maxHeight = param.$maxHeight;
-    return $maxHeight || "none";
-}, function(param) {
-    var variant = param.variant;
-    return variantStyles("dialogWindow" /* DialogWindow */ , variant);
-}, function(param) {
-    var $maxWidth = param.$maxWidth;
-    return $maxWidth && "max-width: ".concat($maxWidth);
-}, function(param) {
-    var _param_top = param.top, top = _param_top === void 0 ? "100px" : _param_top;
-    return top;
-});
-var HeaderContainer = styled.div(_templateObject11(), function(param) {
-    var variant = param.variant;
-    return variantStyles("header" /* Header */ , variant);
-});
-var ContentContainer = styled.div(_templateObject12(), function(param) {
-    var variant = param.variant;
-    return variantStyles("contentContainer" /* ContentContainer */ , variant);
-});
-var TitleContainer = styled.div(_templateObject13());
-var ButtonsContainer = styled.div(_templateObject14(), th.color("lightGray6"), function(param) {
-    var hasSpaceBetween = param.hasSpaceBetween;
-    return hasSpaceBetween ? "space-between" : "flex-end";
-});
-var ButtonsWrapper = styled.div(_templateObject15(), function(param) {
-    var hasExtraAction = param.hasExtraAction;
-    return hasExtraAction ? "auto" : "100%";
-}, function(param) {
-    var hasBothButtons = param.hasBothButtons;
-    return hasBothButtons ? "50%" : "auto";
-});
-var CloseButton = styled.div(_templateObject16());
+      `,
+		compact: css`
+        padding: 20px 20px 15px;
+      `,
+		mobileFullscreen: css`
+        padding: 0;
+      `
+	},
+	title: {}
+})[component][variant];
+const DialogOverlay = styled$1.div`
+  position: fixed;
+  z-index: 9;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: ${({ backgroundColor = "blue2" }) => createRgba(backgroundColor, .6)};
+  text-align: center;
+
+  @media print {
+    position: absolute !important;
+    left: 0 !important;
+    top: 0 !important;
+    height: auto !important;
+    visibility: hidden;
+  }
+
+  @media (max-width: 576px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+  }
+`;
+const DialogWindow = styled$1.div`
+  background-color: ${({ $backgroundColor }) => $backgroundColor || "#fefefe"};
+  margin: auto;
+  box-shadow: dialogShadow;
+  min-width: ${({ $minWidth }) => $minWidth || "10%"};
+  min-height: ${({ $minHeight }) => $minHeight || "auto"};
+  max-height: ${({ $maxHeight }) => $maxHeight || "none"};
+  display: inline-block;
+  position: relative;
+  text-align: left;
+
+  ${({ variant }) => variantStyles("dialogWindow", variant)}
+  ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth}`};
+
+  @media print {
+    background-color: #fff;
+    margin: 0;
+    visibility: visible;
+    overflow: visible;
+    box-shadow: none;
+    max-width: 100%;
+  }
+
+  @media (min-width: 576px) {
+    margin: ${({ top = "100px" }) => top} auto 0 auto;
+  }
+`;
+const HeaderContainer = styled$1.div`
+  display: flex;
+  justify-content: space-between;
+  ${({ variant }) => variantStyles("header", variant)}
+`;
+const ContentContainer = styled$1.div`
+  min-height: 50px;
+  ${({ variant }) => variantStyles("contentContainer", variant)}
+`;
+const TitleContainer = styled$1.div`
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  color: typoPrimary;
+  padding-right: 34px;
+
+  > div:first-of-type {
+    margin-right: 0.5em;
+    display: block;
+  }
+
+  .icon {
+    font-size: 24px;
+    margin-right: 15px;
+    display: flex;
+
+    @media (max-width: 576px) {
+      font-size: 18px;
+      margin-right: 12px;
+    }
+  }
+`;
+const ButtonsContainer = styled$1.div`
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+  border-top: 1px solid ${th.color("lightGray6")};
+  text-align: right;
+  justify-content: ${({ hasSpaceBetween }) => hasSpaceBetween ? "space-between" : "flex-end"};
+
+  @media (max-width: 576px) {
+    display: flex;
+    justify-content: space-around;
+    padding: 32px 18px 18px;
+
+    > * {
+      margin: 0;
+    }
+  }
+`;
+const ButtonsWrapper = styled$1.div`
+  width: ${({ hasExtraAction }) => hasExtraAction ? "auto" : "100%"};
+  display: flex;
+  justify-content: inherit;
+  column-gap: 8px;
+
+  @media (max-width: 576px) {
+    & > button {
+      width: ${({ hasBothButtons }) => hasBothButtons ? "50%" : "auto"};
+    }
+  }
+`;
+const CloseButton = styled$1.div`
+  position: absolute;
+  z-index: 2;
+  background-color: bgLightGray1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  top: 11px;
+  right: 20px;
+  width: 34px;
+  height: 34px;
+`;
+//#endregion
 export { ButtonsContainer, ButtonsWrapper, CloseButton, ContentContainer, DialogOverlay, DialogWindow, HeaderContainer, TitleContainer };

package/ui/Blocks/Modal/types.js

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

package/ui/Blocks/Modal/utils.js

@@ -1,8 +1,10 @@
-var widthMap = {
-    wide: "1450px",
-    mediumLarge: "1200px",
-    medium: "900px",
-    narrow: "600px",
-    auto: "auto"
+//#region packages/ui/Blocks/Modal/utils.ts
+const widthMap = {
+	wide: "1450px",
+	mediumLarge: "1200px",
+	medium: "900px",
+	narrow: "600px",
+	auto: "auto"
 };
+//#endregion
 export { widthMap };

package/ui/Blocks/Popover/index.js

@@ -1,53 +1,32 @@
-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  z-index: 5;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
+import { Portal } from "../../Elements/Portal/index.js";
+import "react";
+import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
 import { Popper } from "react-popper";
-import Portal from "../../Elements/Portal";
-import { useClickOutside } from "../Modal/hooks/useClickOutside";
-import styled from "@xstyled/styled-components";
-var PopoverWrapper = styled.div(_templateObject());
-var Popover = function Popover(param) {
-    var placement = param.placement, wrapper = param.wrapper, children = param.children, onClose = param.onClose, parentRef = param.parentRef;
-    var popperRef = useClickOutside({
-        onClose: onClose,
-        parentRef: parentRef
-    });
-    var Wrapper = wrapper || PopoverWrapper;
-    return /* @__PURE__ */ jsx(Portal, {
-        children: /* @__PURE__ */ jsx("div", {
-            ref: popperRef,
-            children: /* @__PURE__ */ jsx(Popper, {
-                innerRef: popperRef,
-                referenceElement: parentRef.current,
-                placement: placement,
-                children: function children1(param) {
-                    var ref = param.ref, style = param.style;
-                    return /* @__PURE__ */ jsx(Wrapper, {
-                        ref: ref,
-                        style: style,
-                        children: children
-                    });
-                }
-            })
-        })
-    });
+//#region packages/ui/Blocks/Popover/index.tsx
+const PopoverWrapper = styled$1.div`
+  z-index: 5;
+`;
+const Popover = ({ placement, wrapper, children, onClose, parentRef }) => {
+	const popperRef = useClickOutside({
+		onClose,
+		parentRef
+	});
+	const Wrapper = wrapper || PopoverWrapper;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
+		ref: popperRef,
+		children: /* @__PURE__ */ jsx(Popper, {
+			innerRef: popperRef,
+			referenceElement: parentRef.current,
+			placement,
+			children: ({ ref, style }) => /* @__PURE__ */ jsx(Wrapper, {
+				ref,
+				style,
+				children
+			})
+		})
+	}) });
 };
-var Popover_default = Popover;
-export { Popover_default as default };
+//#endregion
+export { Popover as default };