@mailstep/design-system 0.13.7 → 0.13.8

package/README.md

@@ -74,3 +74,4 @@ There are Elements, Blocks and Forms components. Also you can use ThemeProvider
 |----------|:-------------:|------:|
 | Theme Provider |  TBD | [More info](ui/ThemeProvider/README.md) |
 
+.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.13.7",
+  "version": "0.13.8",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -20,7 +20,7 @@
     "deploy:win": "npm run build:win && npm publish ./build",
     "dev": "yarn storybook",
     "test": "echo \"The tests are still waiting to be written, but it seems like they're really good at procrastinating!\"",
-    "lint": "eslint ./packages/ui/**/*.{ts,tsx}",
+    "lint": "eslint './packages/ui/**/*.{ts,tsx}'",
     "prepare": "husky"
   },
   "lint-staged": {
@@ -45,6 +45,7 @@
     "@nivo/legends": "^0.73.0",
     "@nivo/pie": "^0.73.0",
     "@popperjs/core": "^2.11.8",
+    "@storybook-community/storybook-dark-mode": "7.1.4",
     "@storybook/addon-designs": "^11.1.4",
     "@storybook/addon-docs": "10.6.0",
     "@storybook/addon-links": "10.6.0",

package/ui/Blocks/Modal/Modal.js

@@ -41,7 +41,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 			style: dialogStyle,
 			$backgroundColor: background,
 			top,
-			"data-cy": "dialogWindow",
 			onClick: closeEverywhere ? closeDialog : void 0,
 			$minWidth: minWidth,
 			$minHeight: minHeight,
@@ -72,7 +71,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 				}),
 				withCloseIcon && /* @__PURE__ */ jsx(CloseButton, {
 					onClick: closeDialog,
-					"data-cy": "dialogCloseBtn",
 					children: /* @__PURE__ */ jsx(Cancel, {
 						width: "11px",
 						height: "11px"
@@ -88,7 +86,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 						type: "button",
 						onClick: onExtraAction,
 						isLoading,
-						"data-cy": "extraActionBtn",
 						appearance: "secondary",
 						variant: "ghost",
 						children: extraActionLabel
@@ -99,7 +96,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 							type: "button",
 							onClick: onCancel,
 							isLoading,
-							"data-cy": "cancelBtn",
 							appearance: "secondary",
 							variant: "default",
 							"data-testid": name ? `button-${name}-cancel` : void 0,
@@ -109,7 +105,6 @@ const Modal = memo(({ children, isShown = true, onExtraAction, onCancel, title,
 							onClick: onDialogConfirmClick,
 							isLoading,
 							disabled: isConfirmDisabled,
-							"data-cy": "submitBtn",
 							appearance: "primary",
 							variant: "default",
 							"data-testid": name ? `button-${name}-confirm` : void 0,

package/ui/Blocks/SideMenu/MenuItem.js

@@ -1,6 +1,6 @@
 import Icon from "../../Elements/Icon/Icon.js";
 import { Paragraph3, Paragraph5 } from "../../Elements/Typography/Typography.js";
-import { ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, SubItemsWrap } from "./styles.js";
+import { ItemCount, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, SubItemsWrap } from "./styles.js";
 import SubitemTooltip from "./components/SubitemTooltip.js";
 import { useLeftMenuContext } from "./context/useLeftMenuContext.js";
 import useOutSideHover from "./hooks/useOutsideHover.js";
@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { matchPath } from "react-router";
 //#region packages/ui/Blocks/SideMenu/MenuItem.tsx
 const removeOptionalEnd = /\?$/;
-const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lightMode = false, separator = false, isLeftMenuOpen, onCloseLeftMenu, onClick }) => {
+const MenuItem = ({ icon, title, link = "", items, id, count, isSubitem, isCompact, lightMode = false, separator = false, isLeftMenuOpen, onCloseLeftMenu, onClick }) => {
 	const hasChildren = items && items?.length > 0;
 	const { expandedItem, expandItem } = useLeftMenuContext();
 	const isExpanded = expandedItem === id;
@@ -61,6 +61,8 @@ const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lig
 				$isCompact: isCompact,
 				className: itemLinkWrapClassName,
 				$lightMode: lightMode,
+				$isHovering: isHovering,
+				"data-testid": id ? `menu-item-${id}` : void 0,
 				as: link ? void 0 : "a",
 				...link ? {
 					exact: true,
@@ -70,20 +72,27 @@ const MenuItem = ({ icon, title, link = "", items, id, isSubitem, isCompact, lig
 				children: [/* @__PURE__ */ jsxs(ItemLabel, {
 					$isCompact: isCompact,
 					isSubitem,
-					children: [!isSubitem && icon && /* @__PURE__ */ jsx(ItemIcon, {
-						className: "mainIcon",
-						$isCompact: isCompact,
-						children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
-							icon,
-							fill: "none"
-						}) : icon
-					}), /* @__PURE__ */ jsx(Title, {
-						variant: "semiBold",
-						mt: 0,
-						mb: 0,
-						textAlign: isCompact ? "center" : "left",
-						children: /* @__PURE__ */ jsx(OverflowWithEllipsis, { children: title })
-					})]
+					children: [
+						!isSubitem && icon && /* @__PURE__ */ jsx(ItemIcon, {
+							className: "mainIcon",
+							$isCompact: isCompact,
+							children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+								icon,
+								fill: "none"
+							}) : icon
+						}),
+						/* @__PURE__ */ jsx(Title, {
+							variant: "semiBold",
+							mt: 0,
+							mb: 0,
+							textAlign: isCompact ? "center" : "left",
+							children: /* @__PURE__ */ jsx(OverflowWithEllipsis, { children: title })
+						}),
+						!!count && /* @__PURE__ */ jsx(ItemCount, {
+							$isCompact: isCompact,
+							children: count
+						})
+					]
 				}), !isCompact && hasChildren && /* @__PURE__ */ jsx(ItemDropdownArrow, {
 					icon: "goDown",
 					$lightMode: lightMode

package/ui/Blocks/SideMenu/SideMenu.js

@@ -1,4 +1,5 @@
 import { useClickOutside } from "../Modal/hooks/useClickOutside.js";
+import { HamburgerMenuButton } from "./components/HamburgerMenu.js";
 import MenuFooter from "./components/Footer.js";
 import { LeftMenuProvider } from "./context/LeftMenuContext.js";
 import { BodyWrap, Container, Overlay, ScrollWrap, TopLevelWrap } from "./styles.js";
@@ -6,7 +7,7 @@ import MenuItem_default from "./MenuItem.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/SideMenu/SideMenu.tsx
-const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlwaysVisible, onCloseLeftMenu, variant = "dark", children }) => {
+const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlwaysVisible, onCloseLeftMenu, showHamburgerMenu = false, variant = "dark", children }) => {
 	const lightMode = variant === "light";
 	return /* @__PURE__ */ jsx(LeftMenuProvider, { children: /* @__PURE__ */ jsxs(Container, {
 		isLeftMenuOpen,
@@ -16,21 +17,28 @@ const SideMenu = ({ menuItems, isCompact, setIsCompact, isLeftMenuOpen, isAlways
 			isLeftMenuOpen,
 			ref: useClickOutside({ onClose: onCloseLeftMenu }),
 			lightMode,
-			children: [/* @__PURE__ */ jsx(ScrollWrap, { children: /* @__PURE__ */ jsxs(BodyWrap, {
-				isCompact,
-				children: [menuItems.map((item, index) => /* @__PURE__ */ jsx(MenuItem_default, {
-					isCompact,
+			children: [
+				showHamburgerMenu && /* @__PURE__ */ jsx(HamburgerMenuButton, {
 					isLeftMenuOpen,
-					onCloseLeftMenu,
-					lightMode,
-					separator: !!item.separator,
-					...item
-				}, `${item.id ?? item.title}-${index}`)), children]
-			}) }), /* @__PURE__ */ jsx(MenuFooter, {
-				isCompact,
-				setIsCompact,
-				lightMode
-			})]
+					onClick: onCloseLeftMenu
+				}),
+				/* @__PURE__ */ jsx(ScrollWrap, { children: /* @__PURE__ */ jsxs(BodyWrap, {
+					isCompact,
+					children: [menuItems.map((item, index) => /* @__PURE__ */ jsx(MenuItem_default, {
+						isCompact,
+						isLeftMenuOpen,
+						onCloseLeftMenu,
+						lightMode,
+						separator: !!item.separator,
+						...item
+					}, `${item.id ?? item.title}-${index}`)), children]
+				}) }),
+				/* @__PURE__ */ jsx(MenuFooter, {
+					isCompact,
+					setIsCompact,
+					lightMode
+				})
+			]
 		}), /* @__PURE__ */ jsx(Overlay, {})]
 	}) });
 };

package/ui/Blocks/SideMenu/components/HamburgerMenu.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 type Props = {
     isLeftMenuOpen?: boolean;
     onClick?: () => void;
+    mr?: string;
 };
-export declare const HamburgerMenuButton: ({ isLeftMenuOpen, onClick }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const HamburgerMenuButton: ({ isLeftMenuOpen, onClick, mr }: Props) => React.ReactElement;
 export {};

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -35,11 +35,11 @@ const HamburgerMenuWrapper = styled$2(x.div)`
     display: none;
   }
 `;
-const HamburgerMenuButton = ({ isLeftMenuOpen, onClick }) => {
+const HamburgerMenuButton = ({ isLeftMenuOpen, onClick, mr = "8px" }) => {
 	const theme = useTheme();
-	const neutralColor = th$1.color("neutral20")({ theme });
+	const neutralColor = th$1.color("bgLightGray2")({ theme });
 	return /* @__PURE__ */ jsx(HamburgerMenuWrapper, {
-		mr: "8px",
+		mr,
 		onClick,
 		isLeftMenuOpen: !!isLeftMenuOpen,
 		children: isLeftMenuOpen ? /* @__PURE__ */ jsx(MobileCancel, { fill: neutralColor }) : /* @__PURE__ */ jsx(HamburgerMenu, {

package/ui/Blocks/SideMenu/components/SubitemTooltip.js

@@ -1,12 +1,12 @@
 import { H6 } from "../../../Elements/Typography/Typography.js";
 import { Portal } from "../../../Elements/Portal/index.js";
-import { ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
+import { ItemCount, ItemLinkWrap, TooltipItemLabel, TooltipWrap } from "../styles.js";
 import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Popper } from "react-popper";
 //#region packages/ui/Blocks/SideMenu/components/SubitemTooltip.tsx
-const TooltipItem = ({ title, link = "", lightMode }) => {
+const TooltipItem = ({ title, link = "", lightMode, count }) => {
 	return /* @__PURE__ */ jsx(ItemLinkWrap, {
 		...useMemo(() => {
 			return link.startsWith("https://") ? {
@@ -16,14 +16,14 @@ const TooltipItem = ({ title, link = "", lightMode }) => {
 		}, [link]),
 		exact: true,
 		$lightMode: lightMode,
-		children: /* @__PURE__ */ jsx(TooltipItemLabel, { children: /* @__PURE__ */ jsx(H6, {
+		children: /* @__PURE__ */ jsxs(TooltipItemLabel, { children: [/* @__PURE__ */ jsx(H6, {
 			variant: "medium",
 			children: title
-		}) })
+		}), !!count && /* @__PURE__ */ jsx(ItemCount, { children: count })] })
 	});
 };
 const PopoverWrapper = styled.div`
-  z-index: 5;
+  z-index: 31;
   display: ${({ isLeftMenuOpen }) => isLeftMenuOpen ? "block" : "none"};
   @media (min-width: 1024px) {
     display: block;

package/ui/Blocks/SideMenu/stories/menuItems.d.ts

@@ -4,6 +4,7 @@ export declare const menuItems: ({
     link: string;
     id: string;
     items?: undefined;
+    count?: undefined;
 } | {
     title: string;
     icon: import("react/jsx-runtime").JSX.Element;
@@ -14,4 +15,22 @@ export declare const menuItems: ({
         link: string;
         id: string;
     }[];
+    count?: undefined;
+} | {
+    title: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    link: string;
+    id: string;
+    count: number;
+    items: ({
+        title: string;
+        link: string;
+        id: string;
+        count?: undefined;
+    } | {
+        title: string;
+        link: string;
+        id: string;
+        count: number;
+    })[];
 })[];

package/ui/Blocks/SideMenu/stories/menuItems.js

@@ -53,6 +53,7 @@ const menuItems = [
 		icon: /* @__PURE__ */ jsx(Expeditions, {}),
 		link: "/expeditions",
 		id: "expeditions",
+		count: 3,
 		items: [
 			{
 				title: "Expeditions",
@@ -62,7 +63,8 @@ const menuItems = [
 			{
 				title: "Outbound receipts",
 				link: "/expeditions/outbound-receipts",
-				id: "outboundReceipts"
+				id: "outboundReceipts",
+				count: 3
 			},
 			{
 				title: "Missing goods",

package/ui/Blocks/SideMenu/styles.d.ts

@@ -16,6 +16,7 @@ export declare const TooltipItemLabel: import("styled-components").StyledCompone
 export declare const ItemLinkWrap: import("styled-components").StyledComponent<typeof NavLink, import("@xstyled/styled-components").Theme, {
     $isCompact?: boolean;
     $lightMode?: boolean;
+    $isHovering?: boolean;
     appearance?: "gray" | "default";
 }, never>;
 export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
@@ -41,3 +42,6 @@ export declare const BodyWrap: import("styled-components").StyledComponent<"div"
     isCompact: boolean;
 }, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ItemCount: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
+    $isCompact?: boolean;
+}, never>;

package/ui/Blocks/SideMenu/styles.js

@@ -67,6 +67,8 @@ const ItemDropdownArrow = styled$1(Icon)`
 const TooltipItemLabel = styled$1.div`
   line-height: 1.5;
   letter-spacing: 0.4px;
+  display: flex;
+  align-items: center;
 `;
 const ItemLinkWrap = styled$1(NavLink)`
   display: flex;
@@ -78,14 +80,17 @@ const ItemLinkWrap = styled$1(NavLink)`
   font-weight: 600;
   letter-spacing: 0.4px;
   position: relative;
-  color: ${({ $lightMode }) => $lightMode ? th$1.color("typoPrimary") : th$1.color("lightGray5")};
+  color: ${({ $lightMode, $isHovering }) => {
+	if ($lightMode) return th$1.color("typoPrimary");
+	if ($isHovering) return "white";
+	return th$1.color("lightGray5");
+}};
   transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
   transition-property: transform;
 
   &.toplevel {
     margin: ${({ $isCompact }) => $isCompact ? "0 0 12px 0" : "16px 0"};
     padding: ${({ $isCompact }) => $isCompact ? "10px 14px 6px 13px" : "9px 10px"};
-    gap: ${({ $isCompact }) => $isCompact ? "none" : "30px"};
     justify-content: ${({ $isCompact }) => $isCompact ? "center" : "space-between"};
     &.active {
       color: ${({ $lightMode }) => $lightMode ? th$1("colors.red1") : "white"};
@@ -130,7 +135,7 @@ const MenuItemContainer = styled$1.div`
    z-index: 1;
    stroke: ${({ $lightMode }) => $lightMode ? th$1.color("blue2") : void 0};
    .selected > ${ItemLabel}, .active > ${ItemLabel} {
-     color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("white")};
+     color: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("sideMenuSelectedText")};
      stroke: ${({ $lightMode }) => $lightMode ? th$1.color("red1") : th$1.color("blue2")};
    }
 
@@ -259,9 +264,10 @@ const OverflowWithEllipsis = styled$1.span`
   max-width: 140px;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 const TopLevelWrap = styled$1.div`
-  background-color: ${({ lightMode }) => lightMode ? "white" : th$1("colors.blue3")};
+  background-color: ${({ lightMode }) => lightMode ? "white" : th$1("colors.sideMenuBackground")};
   border-right: 1px solid ${th$1("colors.lightGray6")};
   height: -webkit-fill-available;
   transition: width 0.5s ease;
@@ -306,5 +312,28 @@ const Overlay = styled$1.div`
     display: none;
   }
 `;
+const ItemCount = styled$1.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background-color: #ffffff;
+  color: ${th$1.color("red1")};
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+  margin-left: 8px;
+
+  ${({ $isCompact }) => $isCompact && css`
+      position: absolute;
+      top: 0;
+      right: 2px;
+      margin-left: 0;
+    `}
+`;
 //#endregion
-export { BodyWrap, Container, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, Overlay, ScrollWrap, SubItemsWrap, TooltipItemLabel, TooltipWrap, TopLevelWrap };
+export { BodyWrap, Container, ItemCount, ItemDropdownArrow, ItemIcon, ItemLabel, ItemLinkWrap, ItemsSeparator, MenuItemContainer, OverflowWithEllipsis, Overlay, ScrollWrap, SubItemsWrap, TooltipItemLabel, TooltipWrap, TopLevelWrap };

package/ui/Blocks/SideMenu/types.d.ts

@@ -10,6 +10,7 @@ export type MenuItemType = {
     lightMode?: boolean;
     separator?: boolean;
     appearance?: 'gray' | 'default';
+    count?: number;
 };
 export type SideMenuProps = {
     menuItems: MenuItemType[];
@@ -18,6 +19,7 @@ export type SideMenuProps = {
     isLeftMenuOpen?: boolean;
     isAlwaysVisible?: boolean;
     onCloseLeftMenu?: () => void;
+    showHamburgerMenu?: boolean;
     variant?: 'dark' | 'light';
     children?: ReactNode;
 };

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

@@ -37,7 +37,7 @@ const StyledLink = styled$1(Link)`
 `}
 `;
 const MenuItem = ({ item, ItemComponent, onClose }) => {
-	const { onClick, link, hasSeparator, name, autoClose, disabled } = item;
+	const { onClick, link, hasSeparator, autoClose, disabled } = item;
 	const isActive = link === useLocation().pathname;
 	const onClickCallback = useCallback((e) => {
 		if (disabled) {
@@ -63,7 +63,6 @@ const MenuItem = ({ item, ItemComponent, onClose }) => {
 		$disabled: !!disabled,
 		onClick: onClickCallback,
 		$hasSeparator: !!hasSeparator,
-		"data-cy": name,
 		size: "inherit",
 		children: /* @__PURE__ */ jsx(ItemComponent, { ...item })
 	});

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -99,7 +99,6 @@ const DropdownSelect = ({ label, appearance, variant, options, showChevron, onSe
 			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 }),

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -48,7 +48,6 @@ type HighlightBoxType = {
     size?: 'default' | 'small' | 'wide' | 'fitContent';
     className?: string;
     cursor?: string;
-    prefix?: string;
 };
 declare const HighlightBox: React.FC<HighlightBoxType>;
 export default HighlightBox;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -88,12 +88,11 @@ const flagAppearanceToFontColorMap = {
 	redBold: "#ffffff",
 	redSubtle: "red80"
 };
-const HighlightBox = ({ children, appearance, size = "default", cursor, className, prefix }) => {
+const HighlightBox = ({ children, appearance, size = "default", cursor, className }) => {
 	const theme = useTheme();
 	return /* @__PURE__ */ jsx(StyledHighlightBox, {
 		$bgcolor: th$1.color(appearance ? flagAppearanceToColorMap[appearance] : "transparent")({ theme }),
 		$fontColor: th$1.color(appearance ? flagAppearanceToFontColorMap[appearance] : "typoPrimary")({ theme }),
-		"data-cy": prefix ? `${prefix}Label` : "label",
 		$cursor: cursor,
 		children: /* @__PURE__ */ jsx(OverflowWrap, {
 			className: size + " " + (className || ""),

package/ui/Elements/Select/components/ChevronOption.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { components } from "react-select";
 //#region packages/ui/Elements/Select/components/ChevronOption.tsx
 const ChevronOption = (props) => {
-	const { theme, isSelected, selectOption, children, data } = props;
+	const { theme, isSelected, selectOption, children } = props;
 	const showCheckbox = !!(theme.optionVariant == "checkbox");
 	const showToggle = !!(theme.optionVariant == "toggle");
 	return /* @__PURE__ */ jsxs(components.Option, {
@@ -22,7 +22,6 @@ const ChevronOption = (props) => {
 			variant: "grid"
 		})] }), /* @__PURE__ */ jsx("span", {
 			className: "label",
-			"data-cy": `dropdownModalOption${data.index}`,
 			children
 		})]
 	});

package/ui/Elements/Select/components/DropdownIndicator.js

@@ -9,13 +9,12 @@ const ChevronDiv = styled$1.div`
   display: flex;
 `;
 const DropdownIndicator = (props) => {
-	const { menuIsOpen, name } = props.selectProps;
+	const { menuIsOpen } = props.selectProps;
 	const iconColor = props.theme.colors.placeholderTextColor;
 	return /* @__PURE__ */ jsx(components.DropdownIndicator, {
 		...props,
 		children: /* @__PURE__ */ jsx(ChevronDiv, {
 			className: "chevron",
-			"data-cy": `${name || ""}ChevronBtn`,
 			children: menuIsOpen ? /* @__PURE__ */ jsx(ArrowUp, {
 				width: "16px",
 				stroke: iconColor

package/ui/Elements/Select/themes/index.js

@@ -1,7 +1,6 @@
 import { ChevronOption } from "../components/ChevronOption.js";
 import ConnectedMenu from "../components/ConnectedMenu.js";
 import CountMultiValue from "../components/CountMultiValue.js";
-import { CustomInput } from "../components/CustomInput.js";
 import { DropdownIndicator } from "../components/DropdownIndicator.js";
 import IconValueContainer from "../components/IconValueContainer.js";
 import SimplifiedOption from "../components/SimplifiedOption.js";
@@ -17,7 +16,6 @@ const useStylesAndComponents = (style = "form", optionVariant = "default", multi
 		if (multiLabelVariant === "count") components.MultiValue = CountMultiValue;
 		if (containerVariant === "search") components.DropdownIndicator = null;
 		if (showSelectAllButton) components.MenuList = ConnectedMenu;
-		components.Input = CustomInput;
 		const themes = getCustomTheme(systemTheme, optionVariant, style === "gridFilter");
 		const styles = CustomStyles;
 		components.Option = ChevronOption;

package/ui/Elements/Toggle/Toggle.js

@@ -108,7 +108,6 @@ const Toggle = ({ onChange, label, name, checked, defaultChecked, spaceAround =
 				defaultChecked,
 				onChange: !disabled ? onChange : void 0,
 				disabled,
-				"data-cy": name ? `${name}Switch` : void 0,
 				"data-testid": name ? `toggle-${name}` : void 0,
 				readOnly
 			}), /* @__PURE__ */ jsx(StyledToggle, {

package/ui/Forms/Checkbox/Checkbox.js

@@ -18,7 +18,6 @@ const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = "18px
 				onChange,
 				value: "",
 				readOnly,
-				"data-cy": name ? `${name}Checkbox` : void 0,
 				"data-testid": name ? `checkbox-${name}` : void 0,
 				id
 			}),

package/ui/Forms/Input/Input.js

@@ -66,7 +66,6 @@ const Input = ({ appearance = "primary", type, name, label, value, icon, variant
 					className: `${appearance} ${checkIconPlacement}`,
 					type,
 					name,
-					"data-cy": name ? `${name}Inp` : void 0,
 					"data-testid": name ? `input-${name}` : void 0,
 					value,
 					$isInvalid,

package/ui/Modules/CommonGrid/components/ActionHead/ActionHead.js

@@ -93,7 +93,6 @@ const ActionHead = ({ gridActions, gridSelectors, actionOptions, onBatchAction,
 			onClick: checkAll,
 			appearance: "secondary",
 			variant: "default",
-			"data-cy": "checkAllBtn",
 			disabled: checked,
 			children: /* @__PURE__ */ jsx(Trans, {
 				id: "dataGrid.checkAll",
@@ -105,7 +104,6 @@ const ActionHead = ({ gridActions, gridSelectors, actionOptions, onBatchAction,
 			onClick: processCheckedValues,
 			appearance: "primary",
 			variant: "default",
-			"data-cy": "exportBtn",
 			disabled: !rowsData.length,
 			children: processCheckedValuesTitle || /* @__PURE__ */ jsx(Trans, {
 				id: "dataGrid.actionOptions.export",

package/ui/Modules/CommonGrid/components/ButtonMore/ButtonMore.js

@@ -32,7 +32,6 @@ const ButtonMore = ({ items, disabled, dropdownPosition }) => {
 			appearance: "secondary",
 			variant: "icon",
 			type: "button",
-			"data-cy": "gridActionBtn",
 			disabled
 		}), /* @__PURE__ */ jsx(StyledDropdownMenu, {
 			showMenu: actionsVisible,

package/ui/Modules/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -67,7 +67,6 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 				onClick: onClearSettings,
 				variant: "default",
 				appearance: "secondary",
-				"data-cy": "resetFiltersBtn",
 				children: /* @__PURE__ */ jsx(Trans, {
 					id: "dataGrid.buttonClearSettings",
 					message: "Reset"
@@ -78,7 +77,6 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 			type: "button",
 			appearance: filtersCount ? "primary" : "tertiary",
 			onClick: onOpenMobileFilters,
-			"data-cy": "mobileFilterBtn",
 			children: [/* @__PURE__ */ jsx(Filter, { fill: filtersCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
 				variant: "semiBold",
 				mt: 0,
@@ -101,7 +99,6 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 				appearance: sortCount ? "primary" : "tertiary",
 				onClick: onOpenMobileSorting,
 				disabled: isSortTerminated,
-				"data-cy": "mobileSortBtn",
 				children: [/* @__PURE__ */ jsx(Sort, { stroke: sortCount ? "white" : red }), /* @__PURE__ */ jsxs(H6, {
 					variant: "semiBold",
 					mt: 0,
@@ -158,8 +155,7 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 			title: i18n._({
 				id: "dataGrid.share.title",
 				message: "Share"
-			}),
-			"data-cy": "shareGridBtn"
+			})
 		})] }),
 		displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
 			type: "button",

package/ui/Modules/CommonGrid/components/Filters/NumberRange/NumberRange.js

@@ -127,7 +127,6 @@ const NumberRange = (props) => {
 			name,
 			value: fieldValue,
 			label,
-			"data-cy": `${name}Inp`,
 			onChange: onChangeTextInput,
 			iconOnClick: togglePicker,
 			icon: "ellipsisVertical",

package/ui/Modules/CommonGrid/components/Filters/TextRange/TextRange.js

@@ -139,7 +139,6 @@ const TextRange = (props) => {
 		children: [/* @__PURE__ */ jsx(Input, {
 			name,
 			"data-test": name,
-			"data-cy": `${name}Inp`,
 			value: fieldValue,
 			label,
 			onChange: onChangeTextInput,

package/ui/Modules/CommonGrid/components/gridCells/EnumInCell.js

@@ -21,7 +21,6 @@ const EnumInCell = ({ value, enumObj, appearanceMap, size }) => {
 		children: /* @__PURE__ */ jsx(HighlightBox_default, {
 			...coloringProp,
 			size,
-			prefix: "grid",
 			children: finalLabel
 		})
 	});

package/ui/Modules/CommonGrid/components/gridCells/IconButtonInCell.js

@@ -8,7 +8,6 @@ import { Link } from "react-router-dom";
 const IconButtonInCell = ({ icon, isLoading, onClick, linkTo }) => {
 	return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsx(Spinner, { variant: "sm" }) : linkTo ? /* @__PURE__ */ jsx(Link, {
 		to: linkTo,
-		"data-cy": `${icon ?? ""}IconBtn`,
 		children: /* @__PURE__ */ jsx(Icon, {
 			icon: icon || "warning",
 			size: "16px",
@@ -16,7 +15,6 @@ const IconButtonInCell = ({ icon, isLoading, onClick, linkTo }) => {
 		})
 	}) : /* @__PURE__ */ jsx(x.span, {
 		onClick,
-		"data-cy": `${icon ?? ""}IconBtn`,
 		cursor: "pointer",
 		h: "100%",
 		display: "flex",

package/ui/Elements/Select/components/CustomInput.d.ts

@@ -1,2 +0,0 @@
-export declare const CustomInput: (props: any) => any;
-export default CustomInput;

package/ui/Elements/Select/components/CustomInput.js

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { components } from "react-select";
-//#region packages/ui/Elements/Select/components/CustomInput.tsx
-const CustomInput = (props) => {
-	const { name } = props.selectProps;
-	const value = !!name ? `${name}Inp` : props.id;
-	return /* @__PURE__ */ jsx(components.Input, {
-		...props,
-		"data-cy": value
-	});
-};
-//#endregion
-export { CustomInput, CustomInput as default };