@mailstep/design-system 0.8.45 → 0.8.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.45",
+  "version": "0.8.46",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -40,10 +40,10 @@
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-designs": "^11.1.2",
-    "@storybook/addon-docs": "10.2.8",
-    "@storybook/addon-links": "10.2.8",
-    "@storybook/react-webpack5": "10.2.8",
+    "@storybook/addon-designs": "^11.1.3",
+    "@storybook/addon-docs": "10.4.2",
+    "@storybook/addon-links": "10.4.2",
+    "@storybook/react-webpack5": "10.4.2",
     "@svgr/rollup": "^8.0.1",
     "@swc/core": "^1.15.30",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -73,7 +73,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "10.2.8",
+    "eslint-plugin-storybook": "10.4.2",
     "faker": "^5.1.0",
     "husky": "^9.1.7",
     "immer": "^9.0.19",
@@ -96,7 +96,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "10.2.8",
+    "storybook": "10.4.2",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.d.ts

@@ -4,7 +4,6 @@ import type { HeaderVariant } from '../../../../types';
 type MenuItemProps = {
     item: MenuItemType;
     variant?: HeaderVariant;
-    iconsBreakpoint?: string;
 };
 export declare const MenuItem: FC<MenuItemProps>;
 export {};

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

@@ -1,10 +1,10 @@
 import Icon from "../../../../../../Elements/Icon/Icon.js";
-import { MenuItemDropdownArrow, MenuItemIcon, MenuItemLabel, MenuItemsListItem, SubMenuItemRow, SubMenuList } from "../../styles.js";
+import { MenuItemDropdownArrow, MenuItemLabel, MenuItemsListItem, SubMenuItemRow, SubMenuList } from "../../styles.js";
 import { isItemActive, isLinkExactActive } from "./utils/isItemActive.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Link, useLocation } from "react-router-dom";
 //#region packages/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.tsx
-const MenuItem = ({ item, variant = "light", iconsBreakpoint }) => {
+const MenuItem = ({ item, variant = "light" }) => {
 	const hasSubmenu = Array.isArray(item.items) && item.items.length > 0;
 	const { pathname, search } = useLocation();
 	const isActive = isItemActive(pathname, item);
@@ -14,20 +14,10 @@ const MenuItem = ({ item, variant = "light", iconsBreakpoint }) => {
 		$isActive: isActive,
 		children: [/* @__PURE__ */ jsxs(MenuItemLabel, {
 			onClick: item.onClick,
-			children: [
-				item.icon && /* @__PURE__ */ jsx(MenuItemIcon, {
-					$iconsBreakpoint: iconsBreakpoint,
-					children: typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, {
-						icon: item.icon,
-						size: 18
-					}) : item.icon
-				}),
-				item.link && !hasSubmenu ? /* @__PURE__ */ jsx(Link, {
-					to: item.link,
-					children: item.title
-				}) : /* @__PURE__ */ jsx("span", { children: item.title }),
-				hasSubmenu && /* @__PURE__ */ jsx(MenuItemDropdownArrow, { children: /* @__PURE__ */ jsx(Icon, { icon: "goDown" }) })
-			]
+			children: [item.link && !hasSubmenu ? /* @__PURE__ */ jsx(Link, {
+				to: item.link,
+				children: item.title
+			}) : /* @__PURE__ */ jsx("span", { children: item.title }), hasSubmenu && /* @__PURE__ */ jsx(MenuItemDropdownArrow, { children: /* @__PURE__ */ jsx(Icon, { icon: "goDown" }) })]
 		}), hasSubmenu && /* @__PURE__ */ jsx(SubMenuList, { children: item.items?.map((subItem, key) => /* @__PURE__ */ jsx(SubMenuItemRow, {
 			pointer: !!subItem.onClick,
 			onClick: subItem.onClick,

package/ui/Blocks/Header/components/MenuItems/index.d.ts

@@ -4,7 +4,6 @@ import type { HeaderVariant } from '../../types';
 type MenuItemsProps = {
     items?: MenuItemType[];
     variant?: HeaderVariant;
-    iconsBreakpoint?: string;
 };
 export declare const MenuItems: FC<MenuItemsProps>;
 export {};

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

@@ -2,11 +2,10 @@ import { MenuItemsList } from "./styles.js";
 import { MenuItem } from "./components/MenuItem/index.js";
 import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Blocks/Header/components/MenuItems/index.tsx
-const MenuItems = ({ items, variant = "light", iconsBreakpoint }) => {
+const MenuItems = ({ items, variant = "light" }) => {
 	return /* @__PURE__ */ jsx(MenuItemsList, { children: items?.map((item, key) => /* @__PURE__ */ jsx(MenuItem, {
 		item,
-		variant,
-		iconsBreakpoint
+		variant
 	}, key)) });
 };
 //#endregion

package/ui/Blocks/Header/components/MenuItems/styles.d.ts

@@ -7,9 +7,6 @@ export declare const MenuItemsListItem: import("styled-components").StyledCompon
     $isActive?: boolean;
 }, never>;
 export declare const MenuItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
-export declare const MenuItemIcon: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
-    $iconsBreakpoint?: string;
-}, never>;
 export declare const MenuItemDropdownArrow: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const SubMenuItemRow: import("styled-components").StyledComponent<"li", import("@xstyled/styled-components").Theme, {
     pointer?: boolean;

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

@@ -1,4 +1,4 @@
-import styled$1, { css, th } from "@xstyled/styled-components";
+import styled$1, { th } from "@xstyled/styled-components";
 //#region packages/ui/Blocks/Header/components/MenuItems/styles.ts
 const MenuItemsList = styled$1.ul`
   display: flex;
@@ -76,19 +76,6 @@ const MenuItemLabel = styled$1.div`
   user-select: none;
   height: 100%;
 `;
-const MenuItemIcon = styled$1.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  ${({ $iconsBreakpoint }) => $iconsBreakpoint && css`
-      display: none;
-
-      @media (min-width: ${$iconsBreakpoint}) {
-        display: inline-flex;
-      }
-    `}
-`;
 const MenuItemDropdownArrow = styled$1.span`
   display: inline-flex;
   align-items: center;
@@ -134,4 +121,4 @@ const SubMenuItemRow = styled$1.li`
   }
 `;
 //#endregion
-export { MenuItemDropdownArrow, MenuItemIcon, MenuItemLabel, MenuItemsList, MenuItemsListItem, SubMenuItemRow, SubMenuList };
+export { MenuItemDropdownArrow, MenuItemLabel, MenuItemsList, MenuItemsListItem, SubMenuItemRow, SubMenuList };

package/ui/Blocks/Header/index.d.ts

@@ -27,7 +27,6 @@ type Props = {
     height?: string;
     smallLogoBreakpoint?: string;
     mobileMenuBreakpoint?: string;
-    menuIconsBreakpoint?: string;
     languageItems?: LanguageItem[];
     showLanguageWithTitle?: boolean;
     languageFlagWrapBackgroundColor?: string;

package/ui/Blocks/Header/index.js

@@ -11,7 +11,7 @@ import { useCallback, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "react-router-dom";
 //#region packages/ui/Blocks/Header/index.tsx
-const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoVariantSmall, logoWidth = "145px", logoSmallWidth = "45px", logoSrc, logoSrcWidth, user, currentLanguage, hasUserMenu = false, leftMenuItems, rightMenuItems, rightSideStart, userMenuOverride, withInitials = false, withChevron = false, withName = false, variant = "light", height = "60px", smallLogoBreakpoint = "1801px", mobileMenuBreakpoint = "1024px", menuIconsBreakpoint, showLanguageWithTitle, languageFlagWrapBackgroundColor, languageItems: languageItems$1 = languageItems, withLanguageSwitch = true, ignoreClickOutsideClosest, onOpenMobileSideMenu, onChangeLanguage, onLogout }) => {
+const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoVariantSmall, logoWidth = "145px", logoSmallWidth = "45px", logoSrc, logoSrcWidth, user, currentLanguage, hasUserMenu = false, leftMenuItems, rightMenuItems, rightSideStart, userMenuOverride, withInitials = false, withChevron = false, withName = false, variant = "light", height = "60px", smallLogoBreakpoint = "1801px", mobileMenuBreakpoint = "1024px", showLanguageWithTitle, languageFlagWrapBackgroundColor, languageItems: languageItems$1 = languageItems, withLanguageSwitch = true, ignoreClickOutsideClosest, onOpenMobileSideMenu, onChangeLanguage, onLogout }) => {
 	const { handleChangeLanguage } = useChangeLanguage({ onChangeLanguage });
 	const hasLeftMenu = Array.isArray(leftMenuItems) && leftMenuItems.length > 0;
 	const hasInternalMobileMenu = hasLeftMenu && !onOpenMobileSideMenu;
@@ -62,16 +62,14 @@ const Header = ({ isMobileMenuOpen, homeLink, logo, logoVariant, logoVariantSmal
 				$mobileMenuBreakpoint: mobileMenuBreakpoint,
 				children: /* @__PURE__ */ jsx(MenuItems, {
 					items: leftMenuItems,
-					variant,
-					iconsBreakpoint: menuIconsBreakpoint
+					variant
 				})
 			})
 		] }), /* @__PURE__ */ jsxs(RightSide, { children: [
 			rightSideStart,
 			!!rightMenuItems?.length && /* @__PURE__ */ jsx(MenuItems, {
 				items: rightMenuItems,
-				variant,
-				iconsBreakpoint: menuIconsBreakpoint
+				variant
 			}),
 			withLanguageSwitch && /* @__PURE__ */ jsx(LanguageWrapper, { children: /* @__PURE__ */ jsx(LanguageSwitch_default, {
 				languageItems: languageItems$1,

package/ui/Blocks/Header/stories/Header.stories.d.ts

@@ -25,7 +25,6 @@ declare const meta: {
         height?: string;
         smallLogoBreakpoint?: string;
         mobileMenuBreakpoint?: string;
-        menuIconsBreakpoint?: string;
         languageItems?: import("../../LanguageSwitch").LanguageItem[];
         showLanguageWithTitle?: boolean;
         languageFlagWrapBackgroundColor?: string;

package/ui/Blocks/HidePrint/stories/HidePrint.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        children: React.ReactNode;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/ui/Blocks/Popover/stories/Popover.stories.d.ts

@@ -0,0 +1,16 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: FC<{
+        parentRef: React.MutableRefObject<HTMLDivElement | null | undefined>;
+        onClose?: () => void;
+        children: React.ReactNode;
+        placement?: import("@popperjs/core").Placement;
+        wrapper?: import("styled-components").StyledComponent<any, any>;
+        ignoreClickOutsideClosest?: string;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;

package/ui/Elements/Avatar/Avatar.js

@@ -9,7 +9,7 @@ const getInitials = (user) => {
 	if (initials) return initials;
 	return (user?.username ?? "?").slice(0, 2).toUpperCase();
 };
-const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverColorBack, onClick, withInitials, withChevron, withName, children }) => {
+const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverColorBack, onClick, withInitials, withChevron, withName }) => {
 	return /* @__PURE__ */ jsxs(AvatarWrap, {
 		onClick,
 		children: [
@@ -29,7 +29,7 @@ const Avatar = ({ user, src, size = 34, colorFront, colorBack, className, hoverC
 					!src && !withInitials && /* @__PURE__ */ jsx(Profile, { stroke: colorFront })
 				]
 			}),
-			/* @__PURE__ */ jsxs("div", { children: [withName && user?.username, children] }),
+			withName && user?.username,
 			withChevron && /* @__PURE__ */ jsx(Chevron, { children: /* @__PURE__ */ jsx(Icon, {
 				icon: "goDown",
 				fill: "white",

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

@@ -1,4 +1,3 @@
-import { type ReactNode } from 'react';
 export type Props = {
     user?: {
         firstName?: string;
@@ -16,5 +15,4 @@ export type Props = {
     withInitials?: boolean;
     withChevron?: boolean;
     withName?: boolean;
-    children?: ReactNode;
 };

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

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: import("react").NamedExoticComponent<import("../DatePicker").DatePickerType>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;
+export declare const WithTime: FC;
+export declare const Disabled: FC;

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

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: <T extends import("../types").Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import("../types").DropdownMenuProps<T>) => import("react").ReactElement;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;
+export declare const WithCounts: FC;

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

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        label: string | import("react").ReactNode;
+        appearance?: import("../../Button").AppearanceValue;
+        variant?: import("../../Button/types").VariantValue;
+        options: import("../DropdownSelect").DropdownSelectItem[];
+        showChevron?: boolean;
+        onSelect?: (value: import("../DropdownSelect").DropdownSelectItem["value"]) => void;
+        icon?: import("react").ReactNode;
+        disabled?: boolean;
+        ButtonComponent?: React.FC;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutChevron: Story;
+export declare const Disabled: Story;

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

@@ -1,7 +1,8 @@
 import React from 'react';
-export type FlagAppearanceType = 'neutralBold' | 'neutralSubtle' | 'blueBold' | 'blueSubtle' | 'tealBold' | 'tealSubtle' | 'greenBold' | 'greenSubtle' | 'orangeBold' | 'orangeSubtle' | 'yellowBold' | 'yellowSubtle' | 'pinkBold' | 'pinkSubtle' | 'purpleBold' | 'purpleSubtle' | 'redBold' | 'redSubtle';
+export type FlagAppearanceType = 'neutralBold' | 'neutralMedium' | 'neutralSubtle' | 'blueBold' | 'blueSubtle' | 'tealBold' | 'tealSubtle' | 'greenBold' | 'greenSubtle' | 'orangeBold' | 'orangeSubtle' | 'yellowBold' | 'yellowSubtle' | 'pinkBold' | 'pinkSubtle' | 'purpleBold' | 'purpleSubtle' | 'redBold' | 'redSubtle';
 export declare const flagAppearanceToColorMap: {
     neutralBold: string;
+    neutralMedium: string;
     neutralSubtle: string;
     blueBold: string;
     blueSubtle: string;
@@ -22,6 +23,7 @@ export declare const flagAppearanceToColorMap: {
 };
 export declare const flagAppearanceToFontColorMap: {
     neutralBold: string;
+    neutralMedium: string;
     neutralSubtle: string;
     blueBold: string;
     blueSubtle: string;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -48,6 +48,7 @@ const OverflowWrap = styled$1.span`
 `;
 const flagAppearanceToColorMap = {
 	neutralBold: "neutral300",
+	neutralMedium: "#D2D8DF",
 	neutralSubtle: "bgLightGray2",
 	blueBold: "blue70",
 	blueSubtle: "blue20",
@@ -68,6 +69,7 @@ const flagAppearanceToColorMap = {
 };
 const flagAppearanceToFontColorMap = {
 	neutralBold: "white",
+	neutralMedium: "#22394E",
 	neutralSubtle: "#22394E",
 	blueBold: "#ffffff",
 	blueSubtle: "blue80",

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

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        children: React.ReactNode;
+        appearance: import("../HighlightBox").FlagAppearanceType;
+        size?: "default" | "small" | "wide" | "fitContent";
+        className?: string;
+        cursor?: string;
+        prefix?: string;
+    }>;
+    tags: string[];
+    argTypes: {
+        appearance: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Subtle: Story;
+export declare const Small: Story;
+export declare const Wide: Story;
+export declare const FitContent: Story;
+export declare const AllAppearances: Story;

package/ui/Elements/Icon/Icon.js

@@ -14,7 +14,6 @@ import { faPaperclip } from "@fortawesome/pro-light-svg-icons/faPaperclip";
 import { faStopwatch } from "@fortawesome/pro-light-svg-icons/faStopwatch";
 import { faArrowRightToBracket } from "@fortawesome/pro-regular-svg-icons/faArrowRightToBracket";
 import { faBell } from "@fortawesome/pro-regular-svg-icons/faBell";
-import { faBolt } from "@fortawesome/pro-regular-svg-icons/faBolt";
 import { faBox } from "@fortawesome/pro-regular-svg-icons/faBox";
 import { faCalendar } from "@fortawesome/pro-regular-svg-icons/faCalendar";
 import { faCalendarPlus } from "@fortawesome/pro-regular-svg-icons/faCalendarPlus";
@@ -144,7 +143,6 @@ const iconDictionary = {
 	paperPlane: faPaperPlane,
 	flaskRoundPotion: faFlaskRoundPotion,
 	batteryBolt: faBatteryBolt,
-	bolt: faBolt,
 	ellipsisVertical: faEllipsisVertical,
 	greaterThanEqual: faGreaterThanEqual,
 	home: faHome,
@@ -267,8 +265,8 @@ const Icon = ({ icon, fill, stroke, style = "normal", size, width, height, class
 		$colorSecondary: colorSecondary,
 		$fixedWidth: fixedWidth,
 		children: IconComponent ? /* @__PURE__ */ jsx(IconComponent, {
-			...colorFill ? { fill: colorFill } : {},
-			...colorStroke ? { stroke: colorStroke } : {},
+			fill: colorFill,
+			stroke: colorStroke,
 			onClick,
 			cursor: cursor ?? (onClick ? "pointer" : void 0),
 			...width ?? size ? { width: width ?? size } : {},

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

@@ -18,7 +18,6 @@ declare const meta: {
     }>;
     tags: string[];
     argTypes: {};
-    decorators: never[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: FC<{
+        children?: import("react").ReactNode;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;

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

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("styled-components").StyledComponent<typeof import("react-router-dom").Link, import("@xstyled/styled-components").Theme, import("../SimpleLink").Props, never>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Decorated: Story;
+export declare const Disabled: Story;
+export declare const External: Story;

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

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+declare const meta: {
+    title: string;
+    component: FC<import("../SingleSelect").Props>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;
+export declare const Searchable: FC;