@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -1,4 +1,5 @@
 import { RefObject } from 'react';
+
 export type DropdownProps = {
     show?: boolean;
     className?: string;

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

@@ -1,3 +1,4 @@
-import { type ReactElement } from 'react';
-import type { DropdownMenuProps, Item } from './types';
+import { ReactElement } from 'react';
+import { 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,35 +1,36 @@
-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 __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { DropdownMenu };
+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;

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

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

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

@@ -1,32 +1,16 @@
-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]
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { MenuItem as default };
+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;

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

@@ -1,4 +1,5 @@
-import { type ReactElement } from 'react';
-import { type Item, type MenuItemProps } from '../types';
+import { ReactElement } from 'react';
+import { Item, 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,59 +1,50 @@
-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 __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { MenuItem as default };
+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;

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

@@ -1,4 +1,5 @@
-import { type ReactElement } from 'react';
-import type { Item, MenuItems } from '../types';
+import { ReactElement } from 'react';
+import { 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,15 +1,9 @@
-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);
-	}) });
+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);
+        }) }));
 };
-//#endregion
-export { MenuList as default };
+export default MenuList;

package/ui/Elements/DropdownMenu/index.js

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

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

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

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

@@ -1,5 +1,6 @@
-import React, { type ReactNode } from 'react';
-import { type VariantValue, type AppearanceValue } from '../Button/types';
+import { default as React, ReactNode } from 'react';
+import { VariantValue, AppearanceValue } from '../Button/types';
+
 type Item = {
     label: string | ReactNode;
     value: string;
@@ -16,7 +17,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/system').Theme, {}, never>;
 declare const DropdownSelect: React.FC<DropdownSelectProps>;
 export default DropdownSelect;
 export type { Item as DropdownSelectItem };

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -1,128 +1,51 @@
-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
-			})
-		})]
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { CustomSelectButton, DropdownSelect as default };
+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;

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

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

package/ui/Elements/DropdownSelect/index.js

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

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

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

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -1,64 +1,15 @@
-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
-		})
-	}) });
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { ErrorMessage as default };
+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;

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

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

package/ui/Elements/ErrorMessage/index.js

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

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { 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: {};
 };