@mailstep/design-system 0.8.27 → 0.8.28-beta.0

package/ui/Blocks/CommonGrid/utils/index.js

@@ -1,116 +1,78 @@
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-import ActionsFilter from "../components/Filters/ActionsFilter";
-import BooleanSelect from "../components/Filters/BooleanSelect";
-import DatePickerRange from "../components/Filters/DatePickerRange";
-import GridSelect from "../components/Filters/GridSelect";
-import NumberRange from "../components/Filters/NumberRange";
-import TextRange from "../components/Filters/TextRange";
-var isDefined = function isDefined(val) {
-    return typeof val !== "undefined";
+import ActionsFilter_default from "../components/Filters/ActionsFilter/index.js";
+import GridSelect_default from "../components/Filters/GridSelect/index.js";
+import BooleanSelect_default from "../components/Filters/BooleanSelect/index.js";
+import DatePickerRange_default from "../components/Filters/DatePickerRange/index.js";
+import NumberRange_default from "../components/Filters/NumberRange/index.js";
+import TextRange_default from "../components/Filters/TextRange/index.js";
+//#region packages/ui/Blocks/CommonGrid/utils/index.ts
+const isDefined = (val) => typeof val !== "undefined";
+const getCellSizeProps = (column, columnWidth) => {
+	if (!column) return {};
+	const { fixedSize, flexGrow, flexShrink, sticky } = column;
+	return {
+		flexBasis: columnWidth,
+		flexGrow: fixedSize ? 0 : isDefined(flexGrow) ? flexGrow : 1,
+		flexShrink: isDefined(flexShrink) ? flexShrink : 1,
+		maxWidth: sticky ? columnWidth : "auto"
+	};
 };
-var getCellSizeProps = function getCellSizeProps(column, columnWidth) {
-    if (!column) return {};
-    var fixedSize = column.fixedSize, flexGrow = column.flexGrow, flexShrink = column.flexShrink, sticky = column.sticky;
-    return {
-        flexBasis: columnWidth,
-        flexGrow: fixedSize ? 0 : isDefined(flexGrow) ? flexGrow : 1,
-        flexShrink: isDefined(flexShrink) ? flexShrink : 1,
-        maxWidth: sticky ? columnWidth : "auto"
-    };
+const getSortName = (column) => {
+	return column.systemName || column.name;
 };
-var getSortName = function getSortName(column) {
-    return column.systemName || column.name;
+const getFilterName = (column) => {
+	return column.systemFilter || column.systemName || column.name;
 };
-var getFilterName = function getFilterName(column) {
-    return column.systemFilter || column.systemName || column.name;
+const isColumnOn = (column, columnConfig) => {
+	if (column.alwaysOn) return true;
+	if (column.alwaysOff) return false;
+	const isHidden = columnConfig?.[column.name]?.isHidden;
+	if (typeof isHidden === "boolean") return !isHidden;
+	if (!!column.defaultHidden && !!columnConfig?.[column.name]) return true;
+	else return !column.defaultHidden;
 };
-var isColumnOn = function isColumnOn(column, columnConfig) {
-    var _columnConfig_column_name;
-    if (column.alwaysOn) return true;
-    if (column.alwaysOff) return false;
-    var isHidden = columnConfig === null || columnConfig === void 0 ? void 0 : (_columnConfig_column_name = columnConfig[column.name]) === null || _columnConfig_column_name === void 0 ? void 0 : _columnConfig_column_name.isHidden;
-    if (typeof isHidden === "boolean") return !isHidden;
-    if (!!column.defaultHidden && !!(columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name])) return true;
-    else return !column.defaultHidden;
+const calculatePaginator = (page, rowsPerPage) => ({
+	offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
+	limit: rowsPerPage
+});
+const createFilterType = (columnDefinition) => {
+	if (columnDefinition.filterOptions || columnDefinition.asyncLoadKey) return "options";
+	else return columnDefinition.filteringType || "text";
 };
-var calculatePaginator = function calculatePaginator(page, rowsPerPage) {
-    return {
-        offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
-        limit: rowsPerPage
-    };
+const getGroups = (columns) => columns.map((column, key) => {
+	const previousGroup = key > 0 && columns[key - 1].group;
+	return {
+		name: column.group,
+		start: !!(column.group && (!previousGroup || previousGroup && previousGroup !== column.group)),
+		end: !!(column.group && (!columns[key + 1] || columns[key + 1].group !== column.group))
+	};
+});
+const getGroupClassNames = (group) => `${group?.start ? "group-start" : ""} ${group?.end ? "group-end" : ""}`;
+const getStickyCollClassNames = (sticky, stickTo) => !sticky ? "" : `${stickTo ? ` sticky sticky-${stickTo}` : " sticky sticky-left"}`;
+const getFilters = (optimizeFilters) => {
+	const filters = {
+		number: { CellComponent: NumberRange_default },
+		text: { CellComponent: TextRange_default },
+		date: { CellComponent: DatePickerRange_default },
+		flag: { CellComponent: BooleanSelect_default },
+		options: { CellComponent: GridSelect_default },
+		actions: { CellComponent: ActionsFilter_default }
+	};
+	if (optimizeFilters) filters.text.defaultExtraProps = { defaultComparator: "eq" };
+	return filters;
 };
-var createFilterType = function createFilterType(columnDefinition) {
-    if (columnDefinition.filterOptions || columnDefinition.asyncLoadKey) return "options";
-    else return columnDefinition.filteringType || "text";
+/** Returns true when a filter value should be counted / applied */
+const isFilterActive = (value) => {
+	if (value == null) return false;
+	if (Array.isArray(value)) return !!value.length;
+	if (typeof value === "object") return value.value != null && value.value !== "";
+	return value !== "";
 };
-var getGroups = function getGroups(columns) {
-    return columns.map(function(column, key) {
-        var previousGroup = key > 0 && columns[key - 1].group;
-        return {
-            name: column.group,
-            start: !!(column.group && (!previousGroup || previousGroup && previousGroup !== column.group)),
-            end: !!(column.group && (!columns[key + 1] || columns[key + 1].group !== column.group))
-        };
-    });
-};
-var getGroupClassNames = function getGroupClassNames(group) {
-    return "".concat((group === null || group === void 0 ? void 0 : group.start) ? "group-start" : "", " ").concat((group === null || group === void 0 ? void 0 : group.end) ? "group-end" : "");
-};
-var getStickyCollClassNames = function getStickyCollClassNames(sticky, stickTo) {
-    return !sticky ? "" : "".concat(stickTo ? " sticky sticky-".concat(stickTo) : " sticky sticky-left");
-};
-var getFilters = function getFilters(optimizeFilters) {
-    var filters = {
-        number: {
-            CellComponent: NumberRange
-        },
-        text: {
-            CellComponent: TextRange
-        },
-        date: {
-            CellComponent: DatePickerRange
-        },
-        flag: {
-            CellComponent: BooleanSelect
-        },
-        options: {
-            CellComponent: GridSelect
-        },
-        actions: {
-            CellComponent: ActionsFilter
-        }
-    };
-    if (optimizeFilters) {
-        filters.text.defaultExtraProps = {
-            defaultComparator: "eq"
-        };
-    }
-    return filters;
-};
-var isFilterActive = function isFilterActive(value) {
-    if (value == null) return false;
-    if (Array.isArray(value)) return !!value.length;
-    if ((typeof value === "undefined" ? "undefined" : _type_of(value)) === "object") return value.value != null && value.value !== "";
-    return value !== "";
-};
-var checksColumnsOrder = function checksColumnsOrder(colsOrder, columnsDefinitions) {
-    var stickyRightColls = columnsDefinitions.filter(function(col) {
-        return col.sticky === true && col.stickTo === "right";
-    });
-    var stickyLeftColls = columnsDefinitions.filter(function(col) {
-        return col.sticky === true && col.stickTo !== "right";
-    });
-    if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) {
-        console.error("Grid can have only sticky column on each side.");
-    }
-    if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0 && stickyLeftColls[0].name !== "actions-cell-cg") {
-        console.error("The left sticky column should be the first one in a row");
-    }
-    if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1 && stickyRightColls[0].name !== "actions-cell-cg") {
-        console.error("The Right sticky column should be the last one in a row");
-    }
+const checksColumnsOrder = (colsOrder, columnsDefinitions) => {
+	const stickyRightColls = columnsDefinitions.filter((col) => col.sticky === true && col.stickTo === "right");
+	const stickyLeftColls = columnsDefinitions.filter((col) => col.sticky === true && col.stickTo !== "right");
+	if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) console.error("Grid can have only sticky column on each side.");
+	if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0 && stickyLeftColls[0].name !== "actions-cell-cg") console.error("The left sticky column should be the first one in a row");
+	if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1 && stickyRightColls[0].name !== "actions-cell-cg") console.error("The Right sticky column should be the last one in a row");
 };
+//#endregion
 export { calculatePaginator, checksColumnsOrder, createFilterType, getCellSizeProps, getFilterName, getFilters, getGroupClassNames, getGroups, getSortName, getStickyCollClassNames, isColumnOn, isFilterActive };

package/ui/Blocks/CornerDialog/CornerDialog.js

@@ -1,97 +1,43 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "../../Elements/Icon/Icon.js";
+import { Portal } from "../../Elements/Portal/index.js";
+import { CloseBtn, Container, Header, Status, StatusText, Wrapper } from "./styles.js";
+import { statusToColors, statusToIcon } from "./utils.js";
 import { useEffect, useState } from "react";
-import Icon from "../../Elements/Icon/Icon";
-import { Portal } from "../../Elements/Portal";
-import { Container, Header, Status, StatusText, Wrapper, CloseBtn } from "./styles";
-import { statusToColors, statusToIcon } from "./utils";
-var CornerDialog = function CornerDialog(param) {
-    var title = param.title, children = param.children, onClose = param.onClose, statusToTitle = param.statusToTitle, _param_isOpen = param.isOpen, isOpen = _param_isOpen === void 0 ? true : _param_isOpen, _intent = param.intent;
-    var _useState = _sliced_to_array(useState(false), 2), isMounted = _useState[0], setIsMounted = _useState[1];
-    useEffect(function() {
-        setIsMounted(true);
-    }, []);
-    var intent = _intent !== null && _intent !== void 0 ? _intent : "info";
-    var _statusToColors_intent = statusToColors[intent], fontColor = _statusToColors_intent.fontColor, backgroundColor = _statusToColors_intent.backgroundColor, fill = _statusToColors_intent.fill;
-    if (!isOpen) return null;
-    return /* @__PURE__ */ jsx(Portal, {
-        children: /* @__PURE__ */ jsxs(Container, {
-            $mounted: isMounted,
-            children: [
-                /* @__PURE__ */ jsxs(Status, {
-                    background: backgroundColor,
-                    children: [
-                        /* @__PURE__ */ jsx(Icon, {
-                            icon: statusToIcon[intent],
-                            fill: fill
-                        }),
-                        /* @__PURE__ */ jsx(StatusText, {
-                            fontColor: fontColor,
-                            children: statusToTitle[intent]()
-                        })
-                    ]
-                }),
-                /* @__PURE__ */ jsx(Header, {
-                    children: title
-                }),
-                /* @__PURE__ */ jsx(CloseBtn, {
-                    onClick: onClose,
-                    "data-testid": "corner-dialog-close-btn",
-                    children: /* @__PURE__ */ jsx(Icon, {
-                        icon: "close",
-                        size: "25px"
-                    })
-                }),
-                /* @__PURE__ */ jsx(Wrapper, {
-                    children: children
-                })
-            ]
-        })
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Blocks/CornerDialog/CornerDialog.tsx
+const CornerDialog = ({ title, children, onClose, statusToTitle, isOpen = true, intent: _intent }) => {
+	const [isMounted, setIsMounted] = useState(false);
+	useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	const intent = _intent ?? "info";
+	const { fontColor, backgroundColor, fill } = statusToColors[intent];
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Container, {
+		$mounted: isMounted,
+		children: [
+			/* @__PURE__ */ jsxs(Status, {
+				background: backgroundColor,
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: statusToIcon[intent],
+					fill
+				}), /* @__PURE__ */ jsx(StatusText, {
+					fontColor,
+					children: statusToTitle[intent]()
+				})]
+			}),
+			/* @__PURE__ */ jsx(Header, { children: title }),
+			/* @__PURE__ */ jsx(CloseBtn, {
+				onClick: onClose,
+				"data-testid": "corner-dialog-close-btn",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "close",
+					size: "25px"
+				})
+			}),
+			/* @__PURE__ */ jsx(Wrapper, { children })
+		]
+	}) });
 };
+//#endregion
 export { CornerDialog };

package/ui/Blocks/CornerDialog/index.js

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

package/ui/Blocks/CornerDialog/styles.js

@@ -1,84 +1,57 @@
-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  position: fixed;\n  z-index: 10;\n  bottom: 3rem;\n  right: 0.6rem;\n  background: white;\n  border-radius: 12px;\n  box-shadow: cornerDialogShadow;\n  width: 95vw;\n  max-width: 400px;\n  padding: 50px 30px 30px;\n  color: typoPrimary;\n  transition: opacity 225ms linear;\n  opacity: ",
-        ";\n  @media (min-width: 768px) {\n    right: 3rem;\n    width: 400px;\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  margin-bottom: 15px;\n  color: typoPrimary;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  font-size: 14px;\n  font-weight: 400;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  left: 0;\n  top: 0;\n  padding: 6px 10px;\n  text-transform: uppercase;\n  border-radius: 12px 0 12px 0;\n  background-color: ",
-        ";\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  display: inline-block;\n  margin-left: 6px;\n  font-size: 14px;\n  font-weight: 700;\n  color: ",
-        ";\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { th } from "@xstyled/styled-components";
-var Container = styled.div(_templateObject(), function(param) {
-    var $mounted = param.$mounted;
-    return $mounted ? 1 : 0;
-});
-var Header = styled.div(_templateObject1());
-var Wrapper = styled.div(_templateObject2());
-var Status = styled.div(_templateObject3(), function(param) {
-    var background = param.background;
-    return th.color(background);
-});
-var CloseBtn = styled.div(_templateObject4());
-var StatusText = styled.span(_templateObject5(), function(param) {
-    var fontColor = param.fontColor;
-    return th.color(fontColor);
-});
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Blocks/CornerDialog/styles.ts
+const Container = styled$1.div`
+  position: fixed;
+  z-index: 10;
+  bottom: 3rem;
+  right: 0.6rem;
+  background: white;
+  border-radius: 12px;
+  box-shadow: cornerDialogShadow;
+  width: 95vw;
+  max-width: 400px;
+  padding: 50px 30px 30px;
+  color: typoPrimary;
+  transition: opacity 225ms linear;
+  opacity: ${({ $mounted }) => $mounted ? 1 : 0};
+  @media (min-width: 768px) {
+    right: 3rem;
+    width: 400px;
+  }
+`;
+const Header = styled$1.div`
+  margin-bottom: 15px;
+  color: typoPrimary;
+  font-size: 18px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+`;
+const Wrapper = styled$1.div`
+  font-size: 14px;
+  font-weight: 400;
+`;
+const Status = styled$1.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 6px 10px;
+  text-transform: uppercase;
+  border-radius: 12px 0 12px 0;
+  background-color: ${({ background }) => th.color(background)};
+`;
+const CloseBtn = styled$1.div`
+  cursor: pointer;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+`;
+const StatusText = styled$1.span`
+  display: inline-block;
+  margin-left: 6px;
+  font-size: 14px;
+  font-weight: 700;
+  color: ${({ fontColor }) => th.color(fontColor)};
+`;
+//#endregion
 export { CloseBtn, Container, Header, Status, StatusText, Wrapper };

package/ui/Blocks/CornerDialog/types.js

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

package/ui/Blocks/CornerDialog/utils.js

@@ -1,29 +1,31 @@
-var statusToColors = {
-    info: {
-        fontColor: "gray1",
-        backgroundColor: "lightGray7",
-        fill: "gray1"
-    },
-    success: {
-        fontColor: "white",
-        backgroundColor: "green",
-        fill: "white"
-    },
-    error: {
-        fontColor: "white",
-        backgroundColor: "red1",
-        fill: "white"
-    },
-    warning: {
-        fontColor: "blue2",
-        backgroundColor: "yellow1",
-        fill: "blue2"
-    }
+//#region packages/ui/Blocks/CornerDialog/utils.ts
+const statusToColors = {
+	info: {
+		fontColor: "gray1",
+		backgroundColor: "lightGray7",
+		fill: "gray1"
+	},
+	success: {
+		fontColor: "white",
+		backgroundColor: "green",
+		fill: "white"
+	},
+	error: {
+		fontColor: "white",
+		backgroundColor: "red1",
+		fill: "white"
+	},
+	warning: {
+		fontColor: "blue2",
+		backgroundColor: "yellow1",
+		fill: "blue2"
+	}
 };
-var statusToIcon = {
-    info: "info",
-    success: "circleCheck",
-    error: "circleX",
-    warning: "circleTriangle"
+const statusToIcon = {
+	info: "info",
+	success: "circleCheck",
+	error: "circleX",
+	warning: "circleTriangle"
 };
+//#endregion
 export { statusToColors, statusToIcon };

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.js

@@ -1,15 +1,16 @@
+import { MenuItemsListItem } from "../../styles.js";
 import { jsx } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
-import { MenuItemsListItem } from "../../styles";
-var MenuItem = function MenuItem(param) {
-    var item = param.item;
-    return /* @__PURE__ */ jsx(MenuItemsListItem, {
-        onClick: item.onClick,
-        pointer: !!item.onClick,
-        children: item.link ? /* @__PURE__ */ jsx(Link, {
-            to: item.link,
-            children: item.title
-        }) : item.title
-    });
+//#region packages/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.tsx
+const MenuItem = ({ item }) => {
+	return /* @__PURE__ */ jsx(MenuItemsListItem, {
+		onClick: item.onClick,
+		pointer: !!item.onClick,
+		children: item.link ? /* @__PURE__ */ jsx(Link, {
+			to: item.link,
+			children: item.title
+		}) : item.title
+	});
 };
+//#endregion
 export { MenuItem };

package/ui/Blocks/Header/components/MenuItems/index.js

@@ -1,14 +1,9 @@
+import { MenuItemsList } from "./styles.js";
+import { MenuItem } from "./components/MenuItem/index.js";
 import { jsx } from "react/jsx-runtime";
-import { MenuItem } from "./components/MenuItem";
-import { MenuItemsList } from "./styles";
-var MenuItems = function MenuItems(param) {
-    var items = param.items;
-    return /* @__PURE__ */ jsx(MenuItemsList, {
-        children: items === null || items === void 0 ? void 0 : items.map(function(item, key) {
-            return /* @__PURE__ */ jsx(MenuItem, {
-                item: item
-            }, key);
-        })
-    });
+//#region packages/ui/Blocks/Header/components/MenuItems/index.tsx
+const MenuItems = ({ items }) => {
+	return /* @__PURE__ */ jsx(MenuItemsList, { children: items?.map((item, key) => /* @__PURE__ */ jsx(MenuItem, { item }, key)) });
 };
+//#endregion
 export { MenuItems };