@mailstep/design-system 0.8.52 → 0.9.1

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

@@ -395,6 +395,230 @@ declare const themes: {
             inputTransition: string;
         };
     };
+    mailwiseDark: {
+        colors: {
+            bgLightGray: string;
+            bgLightGray1: string;
+            bgLightGray2: string;
+            typoPrimary: string;
+            textPrimary: string;
+            white: string;
+            lightGray7: string;
+            neutral10: string;
+            neutral20: string;
+            neutral30: string;
+            neutral300: string;
+            red10: string;
+            red30: string;
+            green10: string;
+            dangerColor: string;
+            lightGray1: string;
+            lightGray2: string;
+            lightGray3: string;
+            lightGray4: string;
+            lightGray6: string;
+            yellow10: string;
+            blue1: string;
+            blue3: string;
+            blue10: string;
+            inputErrorColor: string;
+            sideMenuSelectedText: string;
+            dashboardBackground: string;
+            iconStroke: string;
+            modalBackground: string;
+            black: string;
+            lightGray5: string;
+            neutral500: string;
+            gray: string;
+            gray1: string;
+            gray2: string;
+            gray3: string;
+            gray4: string;
+            gray5: string;
+            blue2: string;
+            blue4: string;
+            textTertiary: string;
+            blue20: string;
+            blue30: string;
+            blue40: string;
+            blue50: string;
+            blue60: string;
+            blue70: string;
+            blue80: string;
+            blue90: string;
+            teal20: string;
+            teal40: string;
+            teal50: string;
+            teal60: string;
+            teal70: string;
+            teal80: string;
+            teal90: string;
+            green20: string;
+            green30: string;
+            green50: string;
+            green60: string;
+            green70: string;
+            green80: string;
+            green90: string;
+            green: string;
+            successColor: string;
+            darkGreen: string;
+            orange20: string;
+            orange30: string;
+            orange50: string;
+            orange60: string;
+            orange80: string;
+            yellow20: string;
+            yellow60: string;
+            yellow70: string;
+            yellow80: string;
+            yellow90: string;
+            yellow1: string;
+            yellow2: string;
+            red20: string;
+            red50: string;
+            red70: string;
+            red1: string;
+            red2: string;
+            red3: string;
+            red60: string;
+            red80: string;
+            purple20: string;
+            purple40: string;
+            purple50: string;
+            purple60: string;
+            purple80: string;
+            purple90: string;
+            magenta10: string;
+            magenta20: string;
+            magenta30: string;
+            magenta40: string;
+            magenta50: string;
+            magenta60: string;
+            magenta70: string;
+            magenta80: string;
+            magenta90: string;
+            error: string;
+        };
+        shadows: {
+            dialogShadow: string;
+            gridShadow: string;
+            boxShadow: string;
+            dropShadow: string;
+            inputFocusBoxShadow: string;
+            dropdownMenuShadow: string;
+            tooltipBoxShadow: string;
+            cardShadow: string;
+            smooth: string;
+            headerShadow: string;
+            headerShadowB: string;
+            headerShadowNotifications: string;
+            cornerDialogShadow: string;
+            tooltipShadow: string;
+        };
+        fontSizes: string[];
+        lineHeights: {
+            none: number;
+            tight: number;
+            snug: number;
+            normal: number;
+            relaxed: number;
+            loose: number;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+        fontWeights: {
+            normal: number;
+            medium: number;
+            semiBold: number;
+            bold: number;
+        };
+        letterSpacings: {
+            tighter: string;
+            tight: string;
+            normal: string;
+            wide: string;
+            wider: string;
+            widest: string;
+        };
+        radii: {
+            sm: string;
+            md: string;
+            ml: string;
+            lg: string;
+            xl: string;
+        };
+        space: {
+            px: string;
+            0: string;
+            0.5: string;
+            1: string;
+            1.5: string;
+            2: string;
+            2.5: string;
+            3: string;
+            3.5: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+            11: string;
+            12: string;
+            14: string;
+            16: string;
+            20: string;
+            24: string;
+            28: string;
+            32: string;
+            36: string;
+            40: string;
+            44: string;
+            48: string;
+            52: string;
+            56: string;
+            60: string;
+            64: string;
+            72: string;
+            80: string;
+            96: string;
+        };
+        zIndices: number[];
+        screens: {
+            _: number;
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+        };
+        breakpoints: string[];
+        fonts: {
+            primary: string;
+            heading: string;
+        };
+        fontLinks: string[];
+        borders: {
+            slim: string;
+            mediumSlim: string;
+            medium: string;
+            mediumThick: string;
+            thick: string;
+        };
+        transitions: {
+            simpleLong: string;
+            inputTransition: string;
+        };
+    };
     dark: {
         colors: {
             bgLightGray: string;

package/ui/ThemeProvider/themes/index.js

@@ -1,10 +1,12 @@
 import defaultTheme from "./default.js";
-import mailwiseTheme from "./mailwise.js";
 import darkTheme from "./dark.js";
+import mailwiseTheme from "./mailwise.js";
+import mailwiseDark from "./mailwiseDark.js";
 //#region packages/ui/ThemeProvider/themes/index.ts
 const themes = {
 	default: defaultTheme,
 	mailwise: mailwiseTheme,
+	mailwiseDark,
 	dark: darkTheme
 };
 //#endregion

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

@@ -0,0 +1,225 @@
+declare const mailwiseDark: {
+    colors: {
+        bgLightGray: string;
+        bgLightGray1: string;
+        bgLightGray2: string;
+        typoPrimary: string;
+        textPrimary: string;
+        white: string;
+        lightGray7: string;
+        neutral10: string;
+        neutral20: string;
+        neutral30: string;
+        neutral300: string;
+        red10: string;
+        red30: string;
+        green10: string;
+        dangerColor: string;
+        lightGray1: string;
+        lightGray2: string;
+        lightGray3: string;
+        lightGray4: string;
+        lightGray6: string;
+        yellow10: string;
+        blue1: string;
+        blue3: string;
+        blue10: string;
+        inputErrorColor: string;
+        sideMenuSelectedText: string;
+        dashboardBackground: string;
+        iconStroke: string;
+        modalBackground: string;
+        black: string;
+        lightGray5: string;
+        neutral500: string;
+        gray: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        gray4: string;
+        gray5: string;
+        blue2: string;
+        blue4: string;
+        textTertiary: string;
+        blue20: string;
+        blue30: string;
+        blue40: string;
+        blue50: string;
+        blue60: string;
+        blue70: string;
+        blue80: string;
+        blue90: string;
+        teal20: string;
+        teal40: string;
+        teal50: string;
+        teal60: string;
+        teal70: string;
+        teal80: string;
+        teal90: string;
+        green20: string;
+        green30: string;
+        green50: string;
+        green60: string;
+        green70: string;
+        green80: string;
+        green90: string;
+        green: string;
+        successColor: string;
+        darkGreen: string;
+        orange20: string;
+        orange30: string;
+        orange50: string;
+        orange60: string;
+        orange80: string;
+        yellow20: string;
+        yellow60: string;
+        yellow70: string;
+        yellow80: string;
+        yellow90: string;
+        yellow1: string;
+        yellow2: string;
+        red20: string;
+        red50: string;
+        red70: string;
+        red1: string;
+        red2: string;
+        red3: string;
+        red60: string;
+        red80: string;
+        purple20: string;
+        purple40: string;
+        purple50: string;
+        purple60: string;
+        purple80: string;
+        purple90: string;
+        magenta10: string;
+        magenta20: string;
+        magenta30: string;
+        magenta40: string;
+        magenta50: string;
+        magenta60: string;
+        magenta70: string;
+        magenta80: string;
+        magenta90: string;
+        error: string;
+    };
+    shadows: {
+        dialogShadow: string;
+        gridShadow: string;
+        boxShadow: string;
+        dropShadow: string;
+        inputFocusBoxShadow: string;
+        dropdownMenuShadow: string;
+        tooltipBoxShadow: string;
+        cardShadow: string;
+        smooth: string;
+        headerShadow: string;
+        headerShadowB: string;
+        headerShadowNotifications: string;
+        cornerDialogShadow: string;
+        tooltipShadow: string;
+    };
+    fontSizes: string[];
+    lineHeights: {
+        none: number;
+        tight: number;
+        snug: number;
+        normal: number;
+        relaxed: number;
+        loose: number;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+    };
+    fontWeights: {
+        normal: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+    };
+    space: {
+        px: string;
+        0: string;
+        0.5: string;
+        1: string;
+        1.5: string;
+        2: string;
+        2.5: string;
+        3: string;
+        3.5: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        14: string;
+        16: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+    };
+    zIndices: number[];
+    screens: {
+        _: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+    };
+    breakpoints: string[];
+    fonts: {
+        primary: string;
+        heading: string;
+    };
+    fontLinks: string[];
+    borders: {
+        slim: string;
+        mediumSlim: string;
+        medium: string;
+        mediumThick: string;
+        thick: string;
+    };
+    transitions: {
+        simpleLong: string;
+        inputTransition: string;
+    };
+};
+export default mailwiseDark;

package/ui/ThemeProvider/themes/mailwiseDark.js

@@ -0,0 +1,16 @@
+import darkTheme from "./dark.js";
+import mailwiseTheme from "./mailwise.js";
+//#region packages/ui/ThemeProvider/themes/mailwiseDark.ts
+const mailwiseDark = {
+	...mailwiseTheme,
+	colors: {
+		...mailwiseTheme.colors,
+		...darkTheme.colors
+	},
+	shadows: {
+		...mailwiseTheme.shadows,
+		...darkTheme.shadows
+	}
+};
+//#endregion
+export { mailwiseDark as default };

package/ui/ThemeProvider/types.d.ts

@@ -25,7 +25,7 @@ export type Theme = {
 export type Themes = Record<string, Theme>;
 export interface Props {
     children: ReactNode;
-    theme: 'default' | 'mailwise' | 'dark';
+    theme: 'default' | 'mailwise' | 'mailwiseDark' | 'dark';
     preflight?: boolean;
     language?: string;
 }

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.d.ts

@@ -1,41 +0,0 @@
-declare const _default: {
-    title: string;
-    decorators: ((story: Function) => import("react/jsx-runtime").JSX.Element)[];
-};
-export default _default;
-export declare const ComplexWithPaginationAndRedux: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ComplexWithReload: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ComplexWithTooManyResults: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ComplexWithCheckbox: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ComplexWithEditButton: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const ComplexWithStickyColumn: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};

package/ui/Blocks/CommonGrid/storybook/stories/default.stories.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    title: string;
-    decorators: ((story: Function) => any)[];
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/ui/Blocks/CommonGrid/storybook/stories/gridStates.stories.d.ts

@@ -1,8 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const LoadingState: () => import("react/jsx-runtime").JSX.Element;
-export declare const ErrorState: () => import("react/jsx-runtime").JSX.Element;
-export declare const WarningSortState: () => import("react/jsx-runtime").JSX.Element;
-export declare const TerminatedSortState: () => import("react/jsx-runtime").JSX.Element;

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNoScrollLayout.stories.d.ts

@@ -1,10 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ManyColumnsNoScrollLayout: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};

package/ui/Blocks/CommonGrid/storybook/stories/manyColumnsNormalLayout.stories.d.ts

@@ -1,10 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ManyColumnsNormalLayoutANoControls: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};

package/ui/Blocks/CommonGrid/storybook/stories/styledCommonGrid.stories.d.ts

@@ -1,6 +0,0 @@
-declare const _default: {
-    title: string;
-    decorators: ((story: Function) => any)[];
-};
-export default _default;
-export declare const Styled: () => import("react/jsx-runtime").JSX.Element;

package/ui/Blocks/CommonGrid/storybook/stories/withCustomGridActions.stories.d.ts

@@ -1,10 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const WithCustomGridActions: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};

package/ui/Blocks/CommonGrid/storybook/stories/withForcedCheckboxes.stories.d.ts

@@ -1,14 +0,0 @@
-import { ActionColumn } from '../../types';
-export declare const ActionColumnCheckboxes: ActionColumn;
-declare const _default: {
-    title: string;
-    decorators: ((story: Function) => import("react/jsx-runtime").JSX.Element)[];
-    excludeStories: string[];
-};
-export default _default;
-export declare const WithForcedCheckboxesAndCustomTitle: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};

package/ui/Blocks/CommonGrid/storybook/stories/withQuickFilter.stories.d.ts

@@ -1,11 +0,0 @@
-declare const _default: {
-    title: string;
-    decorators: ((story: Function) => any)[];
-};
-export default _default;
-export declare const WithQuickFilter: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
-};

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

@@ -1,13 +0,0 @@
-import { StoryObj } from '@storybook/react-webpack5';
-declare const meta: {
-    title: string;
-    component: import("react").FC<import("..").CornerDialogProps>;
-    tags: string[];
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const InfoCornerDialog: Story;
-export declare const SuccessCornerDialog: Story;
-export declare const ErrorCornerDialog: Story;
-export declare const WarningCornerDialog: Story;

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

@@ -1,52 +0,0 @@
-import type { FC } from 'react';
-declare const meta: {
-    title: string;
-    component: FC<{
-        withInitials?: boolean;
-        withChevron?: boolean;
-        withName?: boolean;
-        homeLink: string;
-        isMobileMenuOpen?: boolean;
-        logo?: import("../../..").Brand;
-        logoVariant?: import("../../..").Variant;
-        logoVariantSmall?: import("../../..").Variant;
-        logoWidth?: string;
-        logoSmallWidth?: string;
-        logoSrc?: string;
-        logoSrcWidth?: string;
-        user?: import("../types").User | null;
-        currentLanguage?: string;
-        hasUserMenu?: boolean;
-        leftMenuItems?: import("../../SideMenu").MenuItemType[];
-        rightMenuItems?: import("../../SideMenu").MenuItemType[];
-        rightSideStart?: import("react").ReactNode;
-        userMenuOverride?: import("react").ReactNode;
-        variant?: import("../types").HeaderVariant;
-        height?: string;
-        smallLogoBreakpoint?: string;
-        mobileMenuBreakpoint?: string;
-        menuIconsBreakpoint?: string;
-        languageItems?: import("../../LanguageSwitch").LanguageItem[];
-        showLanguageWithTitle?: boolean;
-        languageFlagWrapBackgroundColor?: string;
-        onOpenMobileSideMenu?: () => void;
-        onChangeLanguage?: (language: string) => void;
-        onLogout?: () => void;
-        withLanguageSwitch?: boolean;
-        ignoreClickOutsideClosest?: string;
-    }>;
-    tags: string[];
-    argTypes: {};
-};
-export default meta;
-export declare const HeaderBasic: FC;
-export declare const HeaderWithUser: FC;
-export declare const HeaderWithRightLinks: FC;
-export declare const HeaderWithLeftMenuAndSubmenus: FC;
-export declare const HeaderWithLanguageSwitch: FC;
-export declare const HeaderWithCustomLogo: FC;
-export declare const HeaderWithAllItems: FC;
-export declare const HeaderWithLeftNestedMenuVariant: FC;
-export declare const HeaderMailwiseWhiteBgLogo: FC;
-export declare const HeaderResponsiveHamburger: FC;
-export declare const HeaderDarkVariantWithCustomSlots: FC;