@mailstep/design-system 0.8.27 → 0.8.28

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

@@ -1,16 +1,15 @@
+import MenuItem from "./MenuItem.js";
+import "react";
 import { jsx } from "react/jsx-runtime";
-import MenuItem from "./MenuItem";
-var MenuList = function MenuList(param) {
-    var items = param.items, ItemComponent = param.ItemComponent, onClose = param.onClose;
-    return /* @__PURE__ */ jsx("ul", {
-        children: items === null || items === void 0 ? void 0 : items.map(function(item, i) {
-            return !item.hidden && /* @__PURE__ */ jsx(MenuItem, {
-                item: item,
-                ItemComponent: ItemComponent,
-                onClose: onClose
-            }, i);
-        })
-    });
+//#region packages/ui/Elements/DropdownMenu/components/MenuList.tsx
+const MenuList = ({ items, ItemComponent, onClose }) => {
+	return /* @__PURE__ */ jsx("ul", { children: items?.map((item, i) => {
+		return !item.hidden && /* @__PURE__ */ jsx(MenuItem, {
+			item,
+			ItemComponent,
+			onClose
+		}, i);
+	}) });
 };
-var MenuList_default = MenuList;
-export { MenuList_default as default };
+//#endregion
+export { MenuList as default };

package/ui/Elements/DropdownMenu/index.js

@@ -1,2 +1,2 @@
-import { DropdownMenu } from "./DropdownMenu";
+import { DropdownMenu } from "./DropdownMenu.js";
 export { DropdownMenu as default };

package/ui/Elements/DropdownMenu/types.js

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

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -1,207 +1,128 @@
-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 _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-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);
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  flex-shrink: 0;\n  margin-left: 2;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  margin-right: 1;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  top: 8px;\n  min-width: ",
-        ";\n  width: max-content;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: center;\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n  border-left: ",
-        ";\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ",
-        " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ",
-        " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import Icon from "../Icon/Icon.js";
+import Button_default from "../Button/index.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import "../DropdownMenu/index.js";
+import Popover from "../../Blocks/Popover/index.js";
 import React, { useCallback, useRef } from "react";
-import Popover from "../../Blocks/Popover";
-import Button from "../Button/index";
-import DropdownMenu from "../DropdownMenu";
-import Icon from "../Icon/Icon";
-import styled from "@xstyled/styled-components";
-var ArrowIcon = styled(Icon)(_templateObject());
-var CustomIconWrap = styled.div(_templateObject1());
-var StyledDropdownMenu = styled(DropdownMenu)(_templateObject2(), function(param) {
-    var $fixedWidth = param.$fixedWidth;
-    return $fixedWidth ? "160px" : "max-content";
-});
-var ContentWrapper = styled.div(_templateObject3());
-var ChevronWrapper = styled.div(_templateObject4(), function(param) {
-    var $hasBorder = param.$hasBorder;
-    return $hasBorder ? "1px solid white" : "none";
-});
-var CustomSelectButton = styled.button(_templateObject5(), ContentWrapper, ChevronWrapper);
-var DropdownSelect = function DropdownSelect(param) {
-    var label = param.label, appearance = param.appearance, variant = param.variant, options = param.options, showChevron = param.showChevron, onSelect = param.onSelect, disabled = param.disabled, icon = param.icon, ButtonComponent = param.ButtonComponent;
-    var _React_useState = _sliced_to_array(React.useState(false), 2), showDropdownMenu = _React_useState[0], setShowDropdownMenu = _React_useState[1];
-    var onClose = useCallback(function() {
-        setShowDropdownMenu(false);
-    }, []);
-    var toggleDropdownMenu = React.useCallback(function() {
-        setShowDropdownMenu(function(prev) {
-            return !prev;
-        });
-    }, []);
-    var handleSelectItem = React.useCallback(function(item) {
-        setShowDropdownMenu(false);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
-    }, [
-        onSelect
-    ]);
-    var ref = useRef(null);
-    var items = options.map(function(item) {
-        return {
-            title: item.label,
-            onClick: function onClick() {
-                handleSelectItem(item);
-            },
-            link: "#",
-            name: item.name
-        };
-    });
-    var ComponentOfButton = ButtonComponent || Button;
-    var isCustomBtn = !!ButtonComponent;
-    return /* @__PURE__ */ jsxs("div", {
-        ref: ref,
-        children: [
-            /* @__PURE__ */ jsx(ComponentOfButton, {
-                type: "button",
-                appearance: appearance || "secondary",
-                variant: variant || "default",
-                onClick: toggleDropdownMenu,
-                disabled: disabled,
-                "data-cy": "createProductDropdownMenuBtn",
-                children: /* @__PURE__ */ jsxs(ContentWrapper, {
-                    children: [
-                        icon && /* @__PURE__ */ jsx(CustomIconWrap, {
-                            children: icon
-                        }),
-                        /* @__PURE__ */ jsx("span", {
-                            children: label
-                        }),
-                        showChevron && /* @__PURE__ */ jsx(ChevronWrapper, {
-                            $hasBorder: isCustomBtn,
-                            children: /* @__PURE__ */ jsx(ArrowIcon, {
-                                icon: "chevronDown",
-                                size: isCustomBtn ? "100%" : "80%",
-                                fixedWidth: isCustomBtn
-                            })
-                        })
-                    ]
-                })
-            }),
-            showDropdownMenu && /* @__PURE__ */ jsx(Popover, {
-                parentRef: ref,
-                onClose: onClose,
-                placement: "bottom-start",
-                children: /* @__PURE__ */ jsx(StyledDropdownMenu, {
-                    showMenu: true,
-                    items: items,
-                    $fixedWidth: isCustomBtn
-                })
-            })
-        ]
-    });
+import styled$1 from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Elements/DropdownSelect/DropdownSelect.tsx
+const ArrowIcon = styled$1(Icon)`
+  flex-shrink: 0;
+  margin-left: 2;
+`;
+const CustomIconWrap = styled$1.div`
+  margin-right: 1;
+`;
+const StyledDropdownMenu = styled$1(DropdownMenu)`
+  position: absolute;
+  top: 8px;
+  min-width: ${({ $fixedWidth }) => $fixedWidth ? "160px" : "max-content"};
+  width: max-content;
+`;
+const ContentWrapper = styled$1.div`
+  display: flex;
+  align-items: center;
+`;
+const ChevronWrapper = styled$1.div`
+  border-left: ${({ $hasBorder }) => $hasBorder ? "1px solid white" : "none"};
+`;
+const CustomSelectButton = styled$1.button`
+  display: none;
+  min-width: 160px;
+  height: 38px;
+  padding: 0;
+  background-color: red1;
+  color: white;
+  font-size: 14px;
+  line-height: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: lg;
+  outline: none;
+  cursor: pointer;
+  :disabled {
+    border: slim;
+    background-color: bgLightGray;
+    border-color: lightGray5;
+    color: gray3;
+    opacity: 0.6;
+    cursor: auto;
+  }
+
+  @media (min-width: 1024px) {
+    display: block;
+
+    :focus {
+      outline: none;
+    }
+  }
+
+  ${ContentWrapper} {
+    justify-content: space-between;
+    padding-left: 14px;
+  }
+
+  ${ChevronWrapper} {
+    margin-left: 20px;
+    padding: 12px 14px;
+  }
+`;
+const DropdownSelect = ({ label, appearance, variant, options, showChevron, onSelect, disabled, icon, ButtonComponent }) => {
+	const [showDropdownMenu, setShowDropdownMenu] = React.useState(false);
+	const onClose = useCallback(() => {
+		setShowDropdownMenu(false);
+	}, []);
+	const toggleDropdownMenu = React.useCallback(() => {
+		setShowDropdownMenu((prev) => !prev);
+	}, []);
+	const handleSelectItem = React.useCallback((item) => {
+		setShowDropdownMenu(false);
+		onSelect?.(item.value);
+	}, [onSelect]);
+	const ref = useRef(null);
+	const items = options.map((item) => ({
+		title: item.label,
+		onClick: () => {
+			handleSelectItem(item);
+		},
+		link: "#",
+		name: item.name
+	}));
+	const ComponentOfButton = ButtonComponent || Button_default;
+	const isCustomBtn = !!ButtonComponent;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		children: [/* @__PURE__ */ jsx(ComponentOfButton, {
+			type: "button",
+			appearance: appearance || "secondary",
+			variant: variant || "default",
+			onClick: toggleDropdownMenu,
+			disabled,
+			"data-cy": "createProductDropdownMenuBtn",
+			children: /* @__PURE__ */ jsxs(ContentWrapper, { children: [
+				icon && /* @__PURE__ */ jsx(CustomIconWrap, { children: icon }),
+				/* @__PURE__ */ jsx("span", { children: label }),
+				showChevron && /* @__PURE__ */ jsx(ChevronWrapper, {
+					$hasBorder: isCustomBtn,
+					children: /* @__PURE__ */ jsx(ArrowIcon, {
+						icon: "chevronDown",
+						size: isCustomBtn ? "100%" : "80%",
+						fixedWidth: isCustomBtn
+					})
+				})
+			] })
+		}), showDropdownMenu && /* @__PURE__ */ jsx(Popover, {
+			parentRef: ref,
+			onClose,
+			placement: "bottom-start",
+			children: /* @__PURE__ */ jsx(StyledDropdownMenu, {
+				showMenu: true,
+				items,
+				$fixedWidth: isCustomBtn
+			})
+		})]
+	});
 };
-var DropdownSelect_default = DropdownSelect;
-export { CustomSelectButton, DropdownSelect_default as default };
+//#endregion
+export { CustomSelectButton, DropdownSelect as default };

package/ui/Elements/DropdownSelect/index.js

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

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -1,58 +1,64 @@
-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  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: red1;\n    color: white;\n    text-align: center;\n    border-radius: md;\n    padding: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    margin-top: -4px;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 3px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ",
-        " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  color: red1;\n  font-size: 1;\n  display: flex;\n  align-items: flex-start;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  .inline {\n    margin-top: 1;\n  }\n  .tooltip {\n    ",
-        "\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+import "react";
+import styled$1, { css, th } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import styled, { css, th } from "@xstyled/styled-components";
-var tooltip = css(_templateObject(), th.color("red1"));
-var ErrorWrap = styled.div(_templateObject1());
-var StyledWrapper = styled.div(_templateObject2(), tooltip);
-var ErrorMessage = function ErrorMessage(param) {
-    var children = param.children, appearance = param.appearance;
-    return /* @__PURE__ */ jsx(StyledWrapper, {
-        children: /* @__PURE__ */ jsx(ErrorWrap, {
-            className: appearance,
-            children: /* @__PURE__ */ jsx("span", {
-                "data-testid": "error-message",
-                children: children
-            })
-        })
-    });
+//#region packages/ui/Elements/ErrorMessage/ErrorMessage.tsx
+const tooltip = css`
+  span {
+    display: none;
+    position: absolute;
+    width: 120px;
+    background-color: red1;
+    color: white;
+    text-align: center;
+    border-radius: md;
+    padding: 1;
+    z-index: 1;
+    transition: opacity 0.3s;
+    top: 0;
+    margin-top: -4px;
+    left: 100%;
+    margin-left: 2;
+    box-shadow: tooltipBoxShadow;
+
+    :after {
+      content: '';
+      position: absolute;
+      top: 3px;
+      right: 100%;
+      border: mediumThick;
+      border-color: transparent ${th.color("red1")} transparent transparent;
+    }
+  }
+
+  :hover {
+    cursor: pointer;
+    span {
+      display: block;
+    }
+  }
+`;
+const ErrorWrap = styled$1.div`
+  color: red1;
+  font-size: 1;
+  display: flex;
+  align-items: flex-start;
+`;
+const StyledWrapper = styled$1.div`
+  .inline {
+    margin-top: 1;
+  }
+  .tooltip {
+    ${tooltip}
+  }
+`;
+const ErrorMessage = ({ children, appearance }) => {
+	return /* @__PURE__ */ jsx(StyledWrapper, { children: /* @__PURE__ */ jsx(ErrorWrap, {
+		className: appearance,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-testid": "error-message",
+			children
+		})
+	}) });
 };
-var ErrorMessage_default = ErrorMessage;
-export { ErrorMessage_default as default };
+//#endregion
+export { ErrorMessage as default };

package/ui/Elements/ErrorMessage/index.js

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

package/ui/Elements/ErrorMessage/types.js

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