@mailstep/design-system 0.7.65-beta.2 → 0.7.66-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.65-beta.2",
+  "version": "0.7.66-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -1,6 +1,6 @@
 import { type FC } from 'react';
 import type { Brand, Variant } from '../../Elements/Logo';
-import { LanguageItem } from '../LanguageSwitch';
+import { type LanguageItem } from '../LanguageSwitch';
 import type { MenuItemType } from '../SideMenu/types';
 import type { User } from './types';
 type Props = {
@@ -20,6 +20,7 @@ type Props = {
     onOpenMobileSideMenu?: () => void;
     onChangeLanguage?: (language: string) => void;
     onLogout?: () => void;
+    withLanguageSwitch?: boolean;
 };
 export declare const Header: FC<Props>;
 export {};

package/ui/Blocks/Header/index.js

@@ -9,7 +9,7 @@ import { useChangeLanguage } from './hooks/useChangeLanguage';
 import { languageItems as defaultLanguageItems } from './utils/languageItems';
 import { Container, LeftSide, RightSide, LanguageWrapper } from './styles';
 export var Header = function (_a) {
-    var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, showLanguageWithTitle = _a.showLanguageWithTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor, _c = _a.languageItems, languageItems = _c === void 0 ? defaultLanguageItems : _c, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
+    var isMobileMenuOpen = _a.isMobileMenuOpen, homeLink = _a.homeLink, logo = _a.logo, logoVariant = _a.logoVariant, logoSrc = _a.logoSrc, logoSrcWidth = _a.logoSrcWidth, user = _a.user, currentLanguage = _a.currentLanguage, _b = _a.hasUserMenu, hasUserMenu = _b === void 0 ? false : _b, rightMenuItems = _a.rightMenuItems, showLanguageWithTitle = _a.showLanguageWithTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor, _c = _a.languageItems, languageItems = _c === void 0 ? defaultLanguageItems : _c, _d = _a.withLanguageSwitch, withLanguageSwitch = _d === void 0 ? true : _d, onOpenMobileSideMenu = _a.onOpenMobileSideMenu, onChangeLanguage = _a.onChangeLanguage, onLogout = _a.onLogout;
     var handleChangeLanguage = useChangeLanguage({ onChangeLanguage: onChangeLanguage }).handleChangeLanguage;
-    return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [onOpenMobileSideMenu && _jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? (_jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth })) : (_jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" })) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), _jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, withTitle: showLanguageWithTitle, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage, languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor }) }), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
+    return (_jsxs(Container, { children: [_jsxs(LeftSide, { children: [onOpenMobileSideMenu && _jsx(HamburgerMenuButton, { isLeftMenuOpen: isMobileMenuOpen, onClick: onOpenMobileSideMenu }), _jsx(Link, { to: homeLink, children: logoSrc ? (_jsx("img", { src: logoSrc, alt: "logo", width: logoSrcWidth })) : (logo && _jsx(Logo, { brand: logo, variant: logoVariant, width: "145px" })) })] }), _jsxs(RightSide, { children: [Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && _jsx(MenuItems, { items: rightMenuItems }), withLanguageSwitch && (_jsx(LanguageWrapper, { children: _jsx(LanguageSwitch, { languageItems: languageItems, withTitle: showLanguageWithTitle, onLanguageChange: handleChangeLanguage, activeLanguage: currentLanguage, languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor }) })), hasUserMenu && _jsx(UserMenu, { user: user, onLogout: onLogout })] })] }));
 };

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

@@ -18,6 +18,7 @@ declare const meta: {
         onOpenMobileSideMenu?: (() => void) | undefined;
         onChangeLanguage?: ((language: string) => void) | undefined;
         onLogout?: (() => void) | undefined;
+        withLanguageSwitch?: boolean | undefined;
     }>;
     tags: string[];
     argTypes: {};

package/ui/Blocks/SideMenu/MenuItem.js

@@ -49,6 +49,6 @@ var MenuItem = function (_a) {
     }, [items, link]);
     return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName, 
                         // @ts-expect-error
-                        isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: isCompact ? 'center' : 'left', children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
+                        isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: "left", children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
 };
 export default memo(MenuItem);

package/ui/Elements/Icon/icons/index.d.ts

@@ -29,7 +29,6 @@ export { Inventory2 } from './Inventory2';
 export { Logout1 } from './Logout1';
 export { Puzzle1 } from './Puzzle1';
 export { AddPhoto } from './AddPhoto';
-export { Layout } from './Layout';
 export { Link } from './Link';
 export { OpenBox } from './OpenBox';
 export { Box } from './Box';

package/ui/Elements/Icon/icons/index.js

@@ -29,7 +29,6 @@ export { Inventory2 } from './Inventory2';
 export { Logout1 } from './Logout1';
 export { Puzzle1 } from './Puzzle1';
 export { AddPhoto } from './AddPhoto';
-export { Layout } from './Layout';
 export { Link } from './Link';
 export { OpenBox } from './OpenBox';
 export { Box } from './Box';

package/ui/ThemeProvider/themes/default.d.ts

@@ -29,9 +29,6 @@ declare const defaultTheme: {
         typoPrimary: string;
         blue10: string;
         blue20: string;
-        blue30: string;
-        blue40: string;
-        blue50: string;
         blue60: string;
         blue70: string;
         blue80: string;
@@ -82,13 +79,8 @@ declare const defaultTheme: {
         purple60: string;
         purple80: string;
         purple90: string;
-        magenta10: string;
         magenta20: string;
-        magenta30: string;
-        magenta40: string;
-        magenta50: string;
         magenta60: string;
-        magenta70: string;
         magenta80: string;
         magenta90: string;
     };

package/ui/ThemeProvider/themes/default.js

@@ -29,9 +29,6 @@ var defaultTheme = {
         typoPrimary: '#22394E',
         blue10: '#F3F9FF',
         blue20: '#DCEFFF',
-        blue30: '#BFE0FF',
-        blue40: '#6FADFF',
-        blue50: '#2684FF',
         blue60: '#0065FF',
         blue70: '#0052CC',
         blue80: '#0747A6',
@@ -82,15 +79,10 @@ var defaultTheme = {
         purple60: '#6554C0',
         purple80: '#403294',
         purple90: '#03235f',
-        magenta10: '#FFF7FB',
         magenta20: '#FCF1F7',
-        magenta30: '#FFD6E8',
-        magenta40: '#FFAFD2',
-        magenta50: '#FF7EB6',
         magenta60: '#EE5396',
-        magenta70: '#D12771',
         magenta80: '#9F1853',
-        magenta90: '#7B1340',
+        magenta90: '#872e8b',
     },
     fonts: {
         primary: 'Inter, sans-serif',

package/ui/ThemeProvider/themes/index.d.ts

@@ -30,9 +30,6 @@ declare const themes: {
             typoPrimary: string;
             blue10: string;
             blue20: string;
-            blue30: string;
-            blue40: string;
-            blue50: string;
             blue60: string;
             blue70: string;
             blue80: string;
@@ -83,13 +80,8 @@ declare const themes: {
             purple60: string;
             purple80: string;
             purple90: string;
-            magenta10: string;
             magenta20: string;
-            magenta30: string;
-            magenta40: string;
-            magenta50: string;
             magenta60: string;
-            magenta70: string;
             magenta80: string;
             magenta90: string;
         };