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

package/ui/Elements/DropdownMenu/DropdownMenu.d.ts

@@ -1,4 +1,3 @@
-import { ReactElement } from 'react';
-import { DropdownMenuProps, Item } from './types';
-
+import { type ReactElement } from 'react';
+import type { DropdownMenuProps, Item } from './types';
 export declare const DropdownMenu: <T extends Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: DropdownMenuProps<T>) => ReactElement;

package/ui/Elements/DropdownMenu/DropdownMenu.js

@@ -1,36 +1,35 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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";
+//#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
+		]
+	}) });
 };
-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, Fragment as _Fragment } 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_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])));
-export var DropdownMenu = function (_a) {
-    var items = _a.items, showMenu = _a.showMenu, className = _a.className, _b = _a.ItemComponent, ItemComponent = _b === void 0 ? DefaultItem : _b, header = _a.header, footer = _a.footer, rest = __rest(_a, ["items", "showMenu", "className", "ItemComponent", "header", "footer"]);
-    return (_jsx(_Fragment, { children: showMenu && (_jsxs(StyledDropdownWrap, __assign({ className: className }, rest, { children: [header || null, _jsx(MenuList, { items: items, ItemComponent: ItemComponent }), footer || null] }))) }));
-};
-var templateObject_1;
+//#endregion
+export { DropdownMenu };

package/ui/Elements/DropdownMenu/components/DefaultItem.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { DefaultItem } from '../types';
-
+import { type FC } from 'react';
+import type { DefaultItem } from '../types';
 declare const MenuItem: FC<DefaultItem>;
 export default MenuItem;

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

@@ -1,16 +1,32 @@
-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, { css } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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]
+	});
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css } from '@xstyled/styled-components';
-var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])), function (props) {
-    return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
-});
-var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
-var MenuItem = function (_a) {
-    var icon = _a.icon, title = _a.title, hasSeparator = _a.hasSeparator;
-    return (_jsxs(StyledListItem, { hasSeparator: hasSeparator, children: [icon && _jsx(IconWrap, { children: icon }), title] }));
-};
-export default MenuItem;
-var templateObject_1, templateObject_2, templateObject_3;
+//#endregion
+export { MenuItem as default };

package/ui/Elements/DropdownMenu/components/MenuItem.d.ts

@@ -1,5 +1,4 @@
-import { ReactElement } from 'react';
-import { Item, MenuItemProps } from '../types';
-
+import { type ReactElement } from 'react';
+import { type Item, type MenuItemProps } from '../types';
 declare const MenuItem: <ItemType extends Item>({ item, ItemComponent, onClose }: MenuItemProps<ItemType>) => ReactElement;
 export default MenuItem;

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

@@ -1,50 +1,59 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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";
+//#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 __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);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { useLocation } from 'react-router';
-import Link from '../../Link/Link';
-import styled, { css } from '@xstyled/styled-components';
-var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var $hasSeparator = _a.$hasSeparator;
-    return ($hasSeparator ? '1px solid #D2D8DF' : 'none');
-}, function (_a) {
-    var $hasSeparator = _a.$hasSeparator;
-    return ($hasSeparator ? '4px' : '0');
-}, function (_a) {
-    var $isActive = _a.$isActive;
-    return $isActive && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])));
-});
-var MenuItem = function (_a) {
-    var item = _a.item, ItemComponent = _a.ItemComponent, onClose = _a.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 (_jsx(StyledLink, { to: link, "$isActive": isActive, onClick: onClickCallback, "$hasSeparator": !!hasSeparator, "data-cy": name, size: "inherit", children: _jsx(ItemComponent, __assign({}, item)) }));
-};
-export default MenuItem;
-var templateObject_1, templateObject_2;
+//#endregion
+export { MenuItem as default };

package/ui/Elements/DropdownMenu/components/MenuList.d.ts

@@ -1,5 +1,4 @@
-import { ReactElement } from 'react';
-import { Item, MenuItems } from '../types';
-
+import { type ReactElement } from 'react';
+import type { Item, MenuItems } from '../types';
 declare const MenuList: <ItemType extends Item>({ items, ItemComponent, onClose }: MenuItems<ItemType>) => ReactElement;
 export default MenuList;

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

@@ -1,9 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import MenuItem from './MenuItem';
-var MenuList = function (_a) {
-    var items = _a.items, ItemComponent = _a.ItemComponent, onClose = _a.onClose;
-    return (_jsx("ul", { children: items === null || items === void 0 ? void 0 : items.map(function (item, i) {
-            return !item.hidden && _jsx(MenuItem, { item: item, ItemComponent: ItemComponent, onClose: onClose }, i);
-        }) }));
+import MenuItem from "./MenuItem.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#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);
+	}) });
 };
-export default MenuList;
+//#endregion
+export { MenuList as default };

package/ui/Elements/DropdownMenu/index.js

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

package/ui/Elements/DropdownMenu/types.d.ts

@@ -1,5 +1,4 @@
-import { Ref, ReactNode } from 'react';
-
+import type { Ref, ReactNode } from 'react';
 export type Pathname = {
     pathname: string;
 };

package/ui/Elements/DropdownSelect/DropdownSelect.d.ts

@@ -1,6 +1,5 @@
-import { default as React, ReactNode } from 'react';
-import { VariantValue, AppearanceValue } from '../Button/types';
-
+import React, { type ReactNode } from 'react';
+import { type VariantValue, type AppearanceValue } from '../Button/types';
 type Item = {
     label: string | ReactNode;
     value: string;
@@ -17,7 +16,7 @@ type DropdownSelectProps = {
     disabled?: boolean;
     ButtonComponent?: React.FC;
 };
-export declare const CustomSelectButton: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {}, never>;
+export declare const CustomSelectButton: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {}, never>;
 declare const DropdownSelect: React.FC<DropdownSelectProps>;
 export default DropdownSelect;
 export type { Item as DropdownSelectItem };

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -1,51 +1,128 @@
-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/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 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
+			})
+		})]
+	});
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-shrink: 0;\n  margin-left: 2;\n"], ["\n  flex-shrink: 0;\n  margin-left: 2;\n"])));
-var CustomIconWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 1;\n"], ["\n  margin-right: 1;\n"])));
-var StyledDropdownMenu = styled(DropdownMenu)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"], ["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"])), function (_a) {
-    var $fixedWidth = _a.$fixedWidth;
-    return ($fixedWidth ? '160px' : 'max-content');
-});
-var ContentWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var ChevronWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-left: ", ";\n"], ["\n  border-left: ", ";\n"])), function (_a) {
-    var $hasBorder = _a.$hasBorder;
-    return ($hasBorder ? '1px solid white' : 'none');
-});
-export var CustomSelectButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\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"], ["\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"])), ContentWrapper, ChevronWrapper);
-var DropdownSelect = function (_a) {
-    var label = _a.label, appearance = _a.appearance, variant = _a.variant, options = _a.options, showChevron = _a.showChevron, onSelect = _a.onSelect, disabled = _a.disabled, icon = _a.icon, ButtonComponent = _a.ButtonComponent;
-    var _b = React.useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[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 () {
-            handleSelectItem(item);
-        },
-        link: '#',
-        name: item.name
-    }); });
-    var ComponentOfButton = ButtonComponent || Button;
-    var isCustomBtn = !!ButtonComponent;
-    return (_jsxs("div", { ref: ref, children: [_jsx(ComponentOfButton, { type: "button", appearance: appearance || 'secondary', variant: variant || 'default', onClick: toggleDropdownMenu, disabled: disabled, "data-cy": "createProductDropdownMenuBtn", children: _jsxs(ContentWrapper, { children: [icon && _jsx(CustomIconWrap, { children: icon }), _jsx("span", { children: label }), showChevron && (_jsx(ChevronWrapper, { "$hasBorder": isCustomBtn, children: _jsx(ArrowIcon, { icon: "chevronDown", size: isCustomBtn ? '100%' : '80%', fixedWidth: isCustomBtn }) }))] }) }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "bottom-start", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items, "$fixedWidth": isCustomBtn }) }))] }));
-};
-export default DropdownSelect;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//#endregion
+export { CustomSelectButton, DropdownSelect as default };

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

@@ -1,5 +1,4 @@
-import { default as DropdownSelect } from './DropdownSelect';
-
+import DropdownSelect from './DropdownSelect';
 export { CustomSelectButton } from './DropdownSelect';
 export type { DropdownSelectItem } from './DropdownSelect';
 export default DropdownSelect;

package/ui/Elements/DropdownSelect/index.js

@@ -1,3 +1,5 @@
-import DropdownSelect from './DropdownSelect';
-export { CustomSelectButton } from './DropdownSelect';
-export default 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.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-import { Props } from './types';
-
+import React from 'react';
+import { type Props } from './types';
 declare const ErrorMessage: React.FC<Props>;
 export default ErrorMessage;

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -1,15 +1,64 @@
-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, { css, th } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#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
+		})
+	}) });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled, { css, th } from '@xstyled/styled-components';
-var tooltip = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), th.color('red1'));
-var ErrorWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: red1;\n  font-size: 1;\n  display: flex;\n  align-items: flex-start;\n"], ["\n  color: red1;\n  font-size: 1;\n  display: flex;\n  align-items: flex-start;\n"])));
-var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .inline {\n    margin-top: 1;\n  }\n  .tooltip {\n    ", "\n  }\n"], ["\n  .inline {\n    margin-top: 1;\n  }\n  .tooltip {\n    ", "\n  }\n"])), tooltip);
-var ErrorMessage = function (_a) {
-    var children = _a.children, appearance = _a.appearance;
-    return (_jsx(StyledWrapper, { children: _jsx(ErrorWrap, { className: appearance, children: _jsx("span", { "data-testid": "error-message", children: children }) }) }));
-};
-export default ErrorMessage;
-var templateObject_1, templateObject_2, templateObject_3;
+//#endregion
+export { ErrorMessage as default };

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

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

package/ui/Elements/ErrorMessage/index.js

@@ -1,3 +1,5 @@
-import ErrorMessage from './ErrorMessage';
-export { ErrorMessage };
-export default 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/stories/ErrorMessage.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').Props>;
+    component: import("react").FC<import("../types").Props>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/ErrorMessage/types.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 export type Props = {
     children: ReactNode;
     appearance?: 'inline' | 'tooltip';