@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/DatePicker/utils/constants.js

@@ -1,35 +1,29 @@
-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;
-}
-import { DatePickerRepeat, TimePickerRepeat } from "../Datetime/types";
+import "../Datetime/types.js";
 import { i18n } from "@lingui/core";
-var _obj;
-var DatePickerRepeatTrans = (_obj = {}, _define_property(_obj, DatePickerRepeat.EVERY_TODAY, i18n._({
-    id: "dataGrid.everyToday",
-    message: "Every today"
-})), _define_property(_obj, DatePickerRepeat.EVERY_YESTERDAY, i18n._({
-    id: "dataGrid.everyYesterday",
-    message: "Every yesterday"
-})), _obj);
-var _obj1;
-var TimePickerRepeatTrans = (_obj1 = {}, _define_property(_obj1, TimePickerRepeat.FROM, i18n._({
-    id: "dataGrid.timepicker.from",
-    message: "from"
-})), _define_property(_obj1, TimePickerRepeat.TO, i18n._({
-    id: "dataGrid.timepicker.to",
-    message: "to"
-})), _define_property(_obj1, TimePickerRepeat.AT, i18n._({
-    id: "dataGrid.timepicker.at",
-    message: "at"
-})), _obj1);
+//#region packages/ui/Elements/DatePicker/utils/constants.ts
+const DatePickerRepeatTrans = {
+	["every-today"]: i18n._({
+		id: "dataGrid.everyToday",
+		message: "Every today"
+	}),
+	["every-yesterday"]: i18n._({
+		id: "dataGrid.everyYesterday",
+		message: "Every yesterday"
+	})
+};
+const TimePickerRepeatTrans = {
+	["from"]: i18n._({
+		id: "dataGrid.timepicker.from",
+		message: "from"
+	}),
+	["to"]: i18n._({
+		id: "dataGrid.timepicker.to",
+		message: "to"
+	}),
+	["at"]: i18n._({
+		id: "dataGrid.timepicker.at",
+		message: "at"
+	})
+};
+//#endregion
 export { DatePickerRepeatTrans, TimePickerRepeatTrans };

package/ui/Elements/Dropdown/Dropdown.js

@@ -1,90 +1,55 @@
-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([
-        ""
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n  left: ",
-        ";\n  height: 0;\n  width: 0;\n  z-index: -1;\n  ",
-        " {\n    transform: translate(-10%, -50%);\n    width: fit-content;\n    ",
-        " {\n      border-radius: 2px;\n      background-color: ",
-        ";\n      width: 8px;\n      height: 8px;\n      transform: rotate(45deg);\n    }\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n\n  ",
-        "\n\n  width: fit-content;\n  height: fit-content;\n  display: block;\n  z-index: 1;\n\n  ",
-        " {\n    display: ",
-        ";\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1, { th } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled, { th } from "@xstyled/styled-components";
-var ArrowInnerB = styled.div(_templateObject());
-var ArrowInnerA = styled.div(_templateObject1());
-var Arrow = styled.div(_templateObject2(), function(param) {
-    var verticalShift = param.verticalShift;
-    return verticalShift ? "calc(50% + 70px)" : "calc(50%)";
-}, ArrowInnerA, ArrowInnerB, th.color("white"));
-var StyledDropdownWrap = styled.div(_templateObject3(), function(param) {
-    var customDropdownPosition = param.customDropdownPosition;
-    return customDropdownPosition || "\n      top: 100%;\n      right: 0;\n    ";
-}, Arrow, function(param) {
-    var showArrow = param.showArrow;
-    return showArrow ? "block" : "none";
-});
-var Dropdown = function Dropdown(param) {
-    var show = param.show, className = param.className, wrapRef = param.wrapRef, children = param.children, showArrow = param.showArrow, verticalShift = param.verticalShift, customDropdownPosition = param.customDropdownPosition;
-    return /* @__PURE__ */ jsx(Fragment, {
-        children: show && /* @__PURE__ */ jsxs(StyledDropdownWrap, {
-            ref: wrapRef,
-            className: className,
-            showArrow: showArrow,
-            customDropdownPosition: customDropdownPosition,
-            children: [
-                /* @__PURE__ */ jsx(Arrow, {
-                    verticalShift: verticalShift,
-                    children: /* @__PURE__ */ jsx(ArrowInnerA, {
-                        children: /* @__PURE__ */ jsx(ArrowInnerB, {})
-                    })
-                }),
-                children
-            ]
-        })
-    });
+//#region packages/ui/Elements/Dropdown/Dropdown.tsx
+const ArrowInnerB = styled$1.div``;
+const ArrowInnerA = styled$1.div``;
+const Arrow = styled$1.div`
+  position: relative;
+  left: ${({ verticalShift }) => verticalShift ? "calc(50% + 70px)" : "calc(50%)"};
+  height: 0;
+  width: 0;
+  z-index: -1;
+  ${ArrowInnerA} {
+    transform: translate(-10%, -50%);
+    width: fit-content;
+    ${ArrowInnerB} {
+      border-radius: 2px;
+      background-color: ${th.color("white")};
+      width: 8px;
+      height: 8px;
+      transform: rotate(45deg);
+    }
+  }
+`;
+const StyledDropdownWrap = styled$1.div`
+  position: absolute;
+
+  ${({ customDropdownPosition }) => customDropdownPosition || `
+      top: 100%;
+      right: 0;
+    `}
+
+  width: fit-content;
+  height: fit-content;
+  display: block;
+  z-index: 1;
+
+  ${Arrow} {
+    display: ${({ showArrow }) => showArrow ? "block" : "none"};
+  }
+`;
+const Dropdown = ({ show, className, wrapRef, children, showArrow, verticalShift, customDropdownPosition }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: show && /* @__PURE__ */ jsxs(StyledDropdownWrap, {
+		ref: wrapRef,
+		className,
+		showArrow,
+		customDropdownPosition,
+		children: [/* @__PURE__ */ jsx(Arrow, {
+			verticalShift,
+			children: /* @__PURE__ */ jsx(ArrowInnerA, { children: /* @__PURE__ */ jsx(ArrowInnerB, {}) })
+		}), children]
+	}) });
 };
-var Dropdown_default = Dropdown;
-export { Dropdown_default as default };
+//#endregion
+export { Dropdown as default };

package/ui/Elements/Dropdown/index.js

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

package/ui/Elements/Dropdown/types.js

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

package/ui/Elements/DropdownMenu/DropdownMenu.js

@@ -1,137 +1,35 @@
-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  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: lightGray2;\n  border-radius: 10px;\n  box-shadow: dropdownMenuShadow;\n  color: red2;\n  z-index: 1;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import MenuItem from "./components/DefaultItem.js";
+import MenuList from "./components/MenuList.js";
+import "react";
+import styled$1 from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import DefaultItem from "./components/DefaultItem";
-import MenuList from "./components/MenuList";
-import styled from "@xstyled/styled-components";
-var StyledDropdownWrap = styled.div(_templateObject());
-var DropdownMenu = function DropdownMenu(_0) {
-    var items = _0.items, showMenu = _0.showMenu, className = _0.className, _0_ItemComponent = _0.ItemComponent, ItemComponent = _0_ItemComponent === void 0 ? DefaultItem : _0_ItemComponent, header = _0.header, footer = _0.footer, rest = _object_without_properties(_0, [
-        "items",
-        "showMenu",
-        "className",
-        "ItemComponent",
-        "header",
-        "footer"
-    ]);
-    return /* @__PURE__ */ jsx(Fragment, {
-        children: showMenu && /* @__PURE__ */ jsxs(StyledDropdownWrap, _object_spread_props(_object_spread({
-            className: className
-        }, rest), {
-            children: [
-                header || null,
-                /* @__PURE__ */ jsx(MenuList, {
-                    items: items,
-                    ItemComponent: ItemComponent
-                }),
-                footer || null
-            ]
-        }))
-    });
+//#region packages/ui/Elements/DropdownMenu/DropdownMenu.tsx
+const StyledDropdownWrap = styled$1.div`
+  width: fit-content;
+  height: fit-content;
+  background-color: white;
+  padding: 2;
+  display: block;
+  border: slim;
+  border-color: lightGray2;
+  border-radius: 10px;
+  box-shadow: dropdownMenuShadow;
+  color: red2;
+  z-index: 1;
+`;
+const DropdownMenu = ({ items, showMenu, className, ItemComponent = MenuItem, header, footer, ...rest }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: showMenu && /* @__PURE__ */ jsxs(StyledDropdownWrap, {
+		className,
+		...rest,
+		children: [
+			header || null,
+			/* @__PURE__ */ jsx(MenuList, {
+				items,
+				ItemComponent
+			}),
+			footer || null
+		]
+	}) });
 };
+//#endregion
 export { DropdownMenu };

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -1,58 +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      border-top: slim;\n      border-color: lightGray2;\n    "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  margin-right: 10px;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1, { css } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styled, { css } from "@xstyled/styled-components";
-var StyledListItem = styled.li(_templateObject1(), function(props) {
-    return props.hasSeparator && css(_templateObject());
-});
-var IconWrap = styled.span(_templateObject2());
-var MenuItem = function MenuItem(param) {
-    var icon = param.icon, title = param.title, hasSeparator = param.hasSeparator;
-    return /* @__PURE__ */ jsxs(StyledListItem, {
-        hasSeparator: hasSeparator,
-        children: [
-            icon && /* @__PURE__ */ jsx(IconWrap, {
-                children: icon
-            }),
-            title
-        ]
-    });
+//#region packages/ui/Elements/DropdownMenu/components/DefaultItem.tsx
+const StyledListItem = styled$1.li`
+  padding: 8px 10px;
+  font-size: 14px;
+  color: typoPrimary;
+  font-weight: normal;
+  display: flex;
+
+  :hover {
+    background-color: bgLightGray1;
+    cursor: pointer;
+  }
+
+  ${(props) => props.hasSeparator && css`
+      border-top: slim;
+      border-color: lightGray2;
+    `};
+`;
+const IconWrap = styled$1.span`
+  margin-right: 10px;
+`;
+const MenuItem = ({ icon, title, hasSeparator }) => {
+	return /* @__PURE__ */ jsxs(StyledListItem, {
+		hasSeparator,
+		children: [icon && /* @__PURE__ */ jsx(IconWrap, { children: icon }), title]
+	});
 };
-var DefaultItem_default = MenuItem;
-export { DefaultItem_default as default };
+//#endregion
+export { MenuItem as default };

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -1,106 +1,59 @@
-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 _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    background-color: red1;\n    color: white;\n    border-radius: 6px;\n    :hover {\n      & svg {\n        stroke: typoPrimary;\n      }\n    }\n    & svg {\n      stroke: white;\n    }\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: block;\n  border-top: ",
-        ";\n  padding-top: ",
-        ";\n  color: typoPrimary;\n  text-decoration: none;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ",
-        "\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx } from "react/jsx-runtime";
+import Link from "../../Link/Link.js";
 import { useCallback } from "react";
+import styled$1, { css } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
 import { useLocation } from "react-router";
-import Link from "../../Link/Link";
-import styled, { css } from "@xstyled/styled-components";
-var StyledLink = styled(Link)(_templateObject1(), function(param) {
-    var $hasSeparator = param.$hasSeparator;
-    return $hasSeparator ? "1px solid #D2D8DF" : "none";
-}, function(param) {
-    var $hasSeparator = param.$hasSeparator;
-    return $hasSeparator ? "4px" : "0";
-}, function(param) {
-    var $isActive = param.$isActive;
-    return $isActive && css(_templateObject());
-});
-var MenuItem = function MenuItem(param) {
-    var item = param.item, ItemComponent = param.ItemComponent, onClose = param.onClose;
-    var onClick = item.onClick, link = item.link, hasSeparator = item.hasSeparator, name = item.name, autoClose = item.autoClose;
-    var location = useLocation();
-    var isActive = link === location.pathname;
-    var onClickCallback = useCallback(function(e) {
-        if (onClick) {
-            e.preventDefault();
-            onClick();
-        }
-        if (autoClose && onClose) {
-            setTimeout(function() {
-                onClose();
-            }, 200);
-        }
-    }, [
-        autoClose,
-        onClick,
-        onClose
-    ]);
-    return /* @__PURE__ */ jsx(StyledLink, {
-        to: link,
-        $isActive: isActive,
-        onClick: onClickCallback,
-        $hasSeparator: !!hasSeparator,
-        "data-cy": name,
-        size: "inherit",
-        children: /* @__PURE__ */ jsx(ItemComponent, _object_spread({}, item))
-    });
+//#region packages/ui/Elements/DropdownMenu/components/MenuItem.tsx
+const StyledLink = styled$1(Link)`
+  display: block;
+  border-top: ${({ $hasSeparator }) => $hasSeparator ? "1px solid #D2D8DF" : "none"};
+  padding-top: ${({ $hasSeparator }) => $hasSeparator ? "4px" : "0"};
+  color: typoPrimary;
+  text-decoration: none;
+
+  :hover > * {
+    color: typoPrimary;
+    background-color: bgLightGray1;
+    border-radius: 6px;
+  }
+  ${({ $isActive }) => $isActive && css`
+    background-color: red1;
+    color: white;
+    border-radius: 6px;
+    :hover {
+      & svg {
+        stroke: typoPrimary;
+      }
+    }
+    & svg {
+      stroke: white;
+    }
+  }
+`}
+`;
+const MenuItem = ({ item, ItemComponent, onClose }) => {
+	const { onClick, link, hasSeparator, name, autoClose } = item;
+	return /* @__PURE__ */ jsx(StyledLink, {
+		to: link,
+		$isActive: link === useLocation().pathname,
+		onClick: useCallback((e) => {
+			if (onClick) {
+				e.preventDefault();
+				onClick();
+			}
+			if (autoClose && onClose) setTimeout(() => {
+				onClose();
+			}, 200);
+		}, [
+			autoClose,
+			onClick,
+			onClose
+		]),
+		$hasSeparator: !!hasSeparator,
+		"data-cy": name,
+		size: "inherit",
+		children: /* @__PURE__ */ jsx(ItemComponent, { ...item })
+	});
 };
-var MenuItem_default = MenuItem;
-export { MenuItem_default as default };
+//#endregion
+export { MenuItem as default };