@mailstep/design-system 0.8.31-beta.4 → 0.8.32-beta.1

package/ui/ThemeProvider/themes/default.js

@@ -1,172 +1,203 @@
-var defaultTheme = {
-    screens: {
-        // same as xstyled default
-        _: 0,
-        xs: 479,
-        sm: 721,
-        md: 768,
-        lg: 1024,
-        xl: 1280,
-        '2xl': 1536
-    },
-    breakpoints: ['0'],
-    colors: {
-        black: '#333333',
-        white: '#FFFFFF',
-        bgLightGray: '#FAFBFC',
-        bgLightGray1: '#F1F5F9',
-        bgLightGray2: '#F1F5F9',
-        lightGray1: '#F5F7FA',
-        lightGray2: '#EFF3F8',
-        lightGray3: '#D4D8DE',
-        lightGray4: '#B9BFC9',
-        lightGray5: '#A3B3C1',
-        lightGray6: '#D2D8DF',
-        lightGray7: '#E7EBEF',
-        neutral10: '#FAFBFC',
-        neutral20: '#F1F5F9',
-        neutral30: '#F1F5F9',
-        neutral300: '#5E6C84',
-        neutral500: '#42526E',
-        gray: '#8594A5',
-        gray1: '#7A90A1',
-        gray2: '#9AA1A7',
-        gray3: '#5F6C76',
-        gray4: '#455665',
-        gray5: '#647483',
-        blue1: '#2C4052',
-        blue2: '#22394E',
-        blue3: '#162C3F',
-        blue4: '#0C1F2F',
-        textPrimary: '#091E42',
-        textTertiary: '#7A869A',
-        typoPrimary: '#22394E',
-        blue10: '#F3F9FF',
-        blue20: '#DCEFFF',
-        blue30: '#BFE0FF',
-        blue40: '#6FADFF',
-        blue50: '#2684FF',
-        blue60: '#0065FF',
-        blue70: '#0052CC',
-        blue80: '#0747A6',
-        blue90: '#1d3557',
-        teal20: '#E6FCFF',
-        teal40: '#a8dadc',
-        teal50: '#1aa1a7',
-        teal60: '#00B1D0',
-        teal70: '#1aa1da',
-        teal80: '#06718C',
-        teal90: '#035361',
-        green10: '#F2FFF5',
-        green20: '#DEFBE6',
-        green30: '#b8ecb8',
-        green50: '#81dd91',
-        green60: '#00A445',
-        green70: '#198038',
-        green80: '#0E6027',
-        green90: '#067164',
-        green: '#13CE62',
-        successColor: '#24A148',
-        darkGreen: '#00A445',
-        orange20: '#FFF3E0',
-        orange30: '#FFE6CC',
-        orange50: '#ff9f43',
-        orange60: '#FF9800',
-        orange80: '#9E4800',
-        yellow10: '#FFFDE8',
-        yellow20: '#FFF9C4',
-        yellow60: '#FFE600',
-        yellow70: '#FFD702',
-        yellow80: '#D9B600',
-        yellow90: '#857000',
-        yellow1: '#FFD702',
-        yellow2: '#F2E871',
-        red10: '#FFF6F4',
-        red20: '#FFEBE6',
-        red30: '#FFDAD1',
-        red50: '#ff7c7b',
-        red70: '#CF2013',
-        red1: '#DB2B19',
-        red2: '#E94324',
-        red3: '#991E12',
-        red60: '#DB2B19',
-        red80: '#B71C1C',
-        dangerColor: '#E32C1E',
-        purple20: '#F0EDFF',
-        purple40: '#0072A0',
-        purple50: '#4573B3',
-        purple60: '#6554C0',
-        purple80: '#403294',
-        purple90: '#03235f',
-        magenta10: '#FFF7FB',
-        magenta20: '#FCF1F7',
-        magenta30: '#FFD6E8',
-        magenta40: '#FFAFD2',
-        magenta50: '#FF7EB6',
-        magenta60: '#EE5396',
-        magenta70: '#D12771',
-        magenta80: '#9F1853',
-        magenta90: '#7B1340',
-        error: '#ea5455',
-        // specific place for dark / light mode
-        sideMenuSelectedText: '#ffffff'
-    },
-    fonts: {
-        primary: 'Inter, sans-serif',
-        heading: 'Inter, sans-serif'
-    },
-    fontLinks: ['https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'],
-    fontSizes: ['10px', '12px', '14px', '16px', '18px', '21px', '24px', '32px'],
-    lineHeights: [1.7],
-    fontWeights: {
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semiBold: 600,
-        bold: 700
-    },
-    letterSpacings: {
-        default: null,
-        sm: '2px',
-        md: '4px',
-        lg: '8px'
-    },
-    borders: {
-        slim: '1px solid',
-        mediumSlim: '2px solid',
-        medium: '3px solid',
-        mediumThick: '6px solid',
-        thick: '10px solid'
-    },
-    radii: {
-        sm: '2px',
-        md: '4px',
-        ml: '6px',
-        lg: '8px',
-        xl: '16px'
-    },
-    shadows: {
-        boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.1)',
-        dropShadow: '0px 5px 40px rgba(0, 0, 0, 0.1)',
-        inputFocusBoxShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)',
-        dropdownMenuShadow: '0 5px 25px rgba(0, 0, 0, 0.1)',
-        tooltipBoxShadow: '0px 2px 20px rgba(0, 0, 0, 0.1)',
-        cardShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)',
-        smooth: '0px 4px 25px 0px #0000001a',
-        // redesign:
-        dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
-        headerShadow: '1px 2px 3px #00000029',
-        headerShadowB: '1px 1px 3px #00000029',
-        headerShadowNotifications: '1px 1px 2px #00000029',
-        cornerDialogShadow: '1px 1px 3px 1px #00000029',
-        gridShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.12)',
-        tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.10)'
-    },
-    space: [0, 4, 8, 16, 24, 48, 96, 144, 192, 240],
-    transitions: {
-        simpleLong: 'all 2s',
-        inputTransition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out'
-    },
-    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999]
+//#region packages/ui/ThemeProvider/themes/default.ts
+const defaultTheme = {
+	screens: {
+		_: 0,
+		xs: 479,
+		sm: 721,
+		md: 768,
+		lg: 1024,
+		xl: 1280,
+		"2xl": 1536
+	},
+	breakpoints: ["0"],
+	colors: {
+		black: "#333333",
+		white: "#FFFFFF",
+		bgLightGray: "#FAFBFC",
+		bgLightGray1: "#F1F5F9",
+		bgLightGray2: "#F1F5F9",
+		lightGray1: "#F5F7FA",
+		lightGray2: "#EFF3F8",
+		lightGray3: "#D4D8DE",
+		lightGray4: "#B9BFC9",
+		lightGray5: "#A3B3C1",
+		lightGray6: "#D2D8DF",
+		lightGray7: "#E7EBEF",
+		neutral10: "#FAFBFC",
+		neutral20: "#F1F5F9",
+		neutral30: "#F1F5F9",
+		neutral300: "#5E6C84",
+		neutral500: "#42526E",
+		gray: "#8594A5",
+		gray1: "#7A90A1",
+		gray2: "#9AA1A7",
+		gray3: "#5F6C76",
+		gray4: "#455665",
+		gray5: "#647483",
+		blue1: "#2C4052",
+		blue2: "#22394E",
+		blue3: "#162C3F",
+		blue4: "#0C1F2F",
+		textPrimary: "#091E42",
+		textTertiary: "#7A869A",
+		typoPrimary: "#22394E",
+		blue10: "#F3F9FF",
+		blue20: "#DCEFFF",
+		blue30: "#BFE0FF",
+		blue40: "#6FADFF",
+		blue50: "#2684FF",
+		blue60: "#0065FF",
+		blue70: "#0052CC",
+		blue80: "#0747A6",
+		blue90: "#1d3557",
+		teal20: "#E6FCFF",
+		teal40: "#a8dadc",
+		teal50: "#1aa1a7",
+		teal60: "#00B1D0",
+		teal70: "#1aa1da",
+		teal80: "#06718C",
+		teal90: "#035361",
+		green10: "#F2FFF5",
+		green20: "#DEFBE6",
+		green30: "#b8ecb8",
+		green50: "#81dd91",
+		green60: "#00A445",
+		green70: "#198038",
+		green80: "#0E6027",
+		green90: "#067164",
+		green: "#13CE62",
+		successColor: "#24A148",
+		darkGreen: "#00A445",
+		orange20: "#FFF3E0",
+		orange30: "#FFE6CC",
+		orange50: "#ff9f43",
+		orange60: "#FF9800",
+		orange80: "#9E4800",
+		yellow10: "#FFFDE8",
+		yellow20: "#FFF9C4",
+		yellow60: "#FFE600",
+		yellow70: "#FFD702",
+		yellow80: "#D9B600",
+		yellow90: "#857000",
+		yellow1: "#FFD702",
+		yellow2: "#F2E871",
+		red10: "#FFF6F4",
+		red20: "#FFEBE6",
+		red30: "#FFDAD1",
+		red50: "#ff7c7b",
+		red70: "#CF2013",
+		red1: "#DB2B19",
+		red2: "#E94324",
+		red3: "#991E12",
+		red60: "#DB2B19",
+		red80: "#B71C1C",
+		dangerColor: "#E32C1E",
+		purple20: "#F0EDFF",
+		purple40: "#0072A0",
+		purple50: "#4573B3",
+		purple60: "#6554C0",
+		purple80: "#403294",
+		purple90: "#03235f",
+		magenta10: "#FFF7FB",
+		magenta20: "#FCF1F7",
+		magenta30: "#FFD6E8",
+		magenta40: "#FFAFD2",
+		magenta50: "#FF7EB6",
+		magenta60: "#EE5396",
+		magenta70: "#D12771",
+		magenta80: "#9F1853",
+		magenta90: "#7B1340",
+		error: "#ea5455",
+		sideMenuSelectedText: "#ffffff"
+	},
+	fonts: {
+		primary: "Inter, sans-serif",
+		heading: "Inter, sans-serif"
+	},
+	fontLinks: ["https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"],
+	fontSizes: [
+		"10px",
+		"12px",
+		"14px",
+		"16px",
+		"18px",
+		"21px",
+		"24px",
+		"32px"
+	],
+	lineHeights: [1.7],
+	fontWeights: {
+		light: 300,
+		normal: 400,
+		medium: 500,
+		semiBold: 600,
+		bold: 700
+	},
+	letterSpacings: {
+		default: null,
+		sm: "2px",
+		md: "4px",
+		lg: "8px"
+	},
+	borders: {
+		slim: "1px solid",
+		mediumSlim: "2px solid",
+		medium: "3px solid",
+		mediumThick: "6px solid",
+		thick: "10px solid"
+	},
+	radii: {
+		sm: "2px",
+		md: "4px",
+		ml: "6px",
+		lg: "8px",
+		xl: "16px"
+	},
+	shadows: {
+		boxShadow: "0px 5px 60px rgba(0, 0, 0, 0.1)",
+		dropShadow: "0px 5px 40px rgba(0, 0, 0, 0.1)",
+		inputFocusBoxShadow: "0 3px 10px 0 rgba(0, 0, 0, 0.15)",
+		dropdownMenuShadow: "0 5px 25px rgba(0, 0, 0, 0.1)",
+		tooltipBoxShadow: "0px 2px 20px rgba(0, 0, 0, 0.1)",
+		cardShadow: "0 3px 10px 0 rgba(0, 0, 0, 0.15)",
+		smooth: "0px 4px 25px 0px #0000001a",
+		dialogShadow: "0px 4px 23px 0px rgba(0, 0, 0, 0.08)",
+		headerShadow: "1px 2px 3px #00000029",
+		headerShadowB: "1px 1px 3px #00000029",
+		headerShadowNotifications: "1px 1px 2px #00000029",
+		cornerDialogShadow: "1px 1px 3px 1px #00000029",
+		gridShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.12)",
+		tooltipShadow: "0px 2px 20px 0px rgba(0, 0, 0, 0.10)"
+	},
+	space: [
+		0,
+		4,
+		8,
+		16,
+		24,
+		48,
+		96,
+		144,
+		192,
+		240
+	],
+	transitions: {
+		simpleLong: "all 2s",
+		inputTransition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
+	},
+	zIndices: [
+		0,
+		1,
+		2,
+		3,
+		5,
+		30,
+		40,
+		100,
+		200,
+		300,
+		9999
+	]
 };
-export default defaultTheme;
+//#endregion
+export { defaultTheme as default };

package/ui/ThemeProvider/themes/index.js

@@ -1,9 +1,11 @@
-import defaultTheme from './default';
-import mailwise from './mailwise';
-import darkTheme from './dark';
-var themes = {
-    default: defaultTheme,
-    mailwise: mailwise,
-    dark: darkTheme
+import defaultTheme from "./default.js";
+import mailwiseTheme from "./mailwise.js";
+import darkTheme from "./dark.js";
+//#region packages/ui/ThemeProvider/themes/index.ts
+const themes = {
+	default: defaultTheme,
+	mailwise: mailwiseTheme,
+	dark: darkTheme
 };
-export default themes;
+//#endregion
+export { themes as default };

package/ui/ThemeProvider/themes/mailwise.js

@@ -1,83 +1,111 @@
-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 defaultTheme from "./default.js";
+//#region packages/ui/ThemeProvider/themes/mailwise.ts
+const mailwiseTheme = {
+	...defaultTheme,
+	fontSizes: [
+		"0rem",
+		"0.87rem",
+		"1rem",
+		"1.25rem",
+		"1.5rem",
+		"1.8rem",
+		"2.0rem",
+		"2.4rem",
+		"2.8rem",
+		"3.5rem",
+		"4rem"
+	],
+	lineHeights: {
+		none: 1.2,
+		tight: 1.2,
+		snug: 1.2,
+		normal: 1.2,
+		relaxed: 1.2,
+		loose: 1.2,
+		3: "1.2",
+		4: "1.2",
+		5: "1.2",
+		6: "1.2",
+		7: "1.2",
+		8: "1.2",
+		9: "1.2",
+		10: "1.2"
+	},
+	fontWeights: {
+		normal: 400,
+		medium: 500,
+		semiBold: 600,
+		bold: 700
+	},
+	letterSpacings: {
+		tighter: "2",
+		tight: "2",
+		normal: "4",
+		wide: "8",
+		wider: "8",
+		widest: "8"
+	},
+	radii: {
+		sm: "2px",
+		md: "4px",
+		ml: "6px",
+		lg: "8px",
+		xl: "16px"
+	},
+	shadows: {
+		...defaultTheme.shadows,
+		tooltipShadow: "0px 1px 4px 0 #B1B8C3"
+	},
+	space: {
+		px: "1px",
+		0: "0",
+		.5: "0.125rem",
+		1: "0.25rem",
+		1.5: "0.375rem",
+		2: "0.5rem",
+		2.5: "0.625rem",
+		3: "0.75rem",
+		3.5: "0.875rem",
+		4: "1rem",
+		5: "1.25rem",
+		6: "1.5rem",
+		7: "1.75rem",
+		8: "2rem",
+		9: "2.25rem",
+		10: "2.5rem",
+		11: "2.75rem",
+		12: "3rem",
+		14: "3.5rem",
+		16: "4rem",
+		20: "5rem",
+		24: "6rem",
+		28: "7rem",
+		32: "8rem",
+		36: "9rem",
+		40: "10rem",
+		44: "11rem",
+		48: "12rem",
+		52: "13rem",
+		56: "14rem",
+		60: "15rem",
+		64: "16rem",
+		72: "18rem",
+		80: "20rem",
+		96: "24rem"
+	},
+	zIndices: [
+		0,
+		1,
+		2,
+		3,
+		5,
+		30,
+		40,
+		100,
+		200,
+		300,
+		9999
+	]
 };
-import defaultTheme from './default';
-var mailwiseTheme = __assign(__assign({}, defaultTheme), { fontSizes: ['0rem', '0.87rem', '1rem', '1.25rem', '1.5rem', '1.8rem', '2.0rem', '2.4rem', '2.8rem', '3.5rem', '4rem'], lineHeights: {
-        none: 1.2,
-        tight: 1.2,
-        snug: 1.2,
-        normal: 1.2,
-        relaxed: 1.2,
-        loose: 1.2,
-        3: '1.2',
-        4: '1.2',
-        5: '1.2',
-        6: '1.2',
-        7: '1.2',
-        8: '1.2',
-        9: '1.2',
-        10: '1.2'
-    }, fontWeights: {
-        normal: 400,
-        medium: 500,
-        semiBold: 600,
-        bold: 700
-    }, letterSpacings: {
-        tighter: '2',
-        tight: '2',
-        normal: '4',
-        wide: '8',
-        wider: '8',
-        widest: '8'
-    }, radii: {
-        sm: '2px',
-        md: '4px',
-        ml: '6px',
-        lg: '8px',
-        xl: '16px'
-    }, shadows: __assign(__assign({}, defaultTheme.shadows), { tooltipShadow: '0px 1px 4px 0 #B1B8C3' }), space: {
-        px: '1px',
-        0: '0',
-        0.5: '0.125rem',
-        1: '0.25rem',
-        1.5: '0.375rem',
-        2: '0.5rem',
-        2.5: '0.625rem',
-        3: '0.75rem',
-        3.5: '0.875rem',
-        4: '1rem',
-        5: '1.25rem',
-        6: '1.5rem',
-        7: '1.75rem',
-        8: '2rem',
-        9: '2.25rem',
-        10: '2.5rem',
-        11: '2.75rem',
-        12: '3rem',
-        14: '3.5rem',
-        16: '4rem',
-        20: '5rem',
-        24: '6rem',
-        28: '7rem',
-        32: '8rem',
-        36: '9rem',
-        40: '10rem',
-        44: '11rem',
-        48: '12rem',
-        52: '13rem',
-        56: '14rem',
-        60: '15rem',
-        64: '16rem',
-        72: '18rem',
-        80: '20rem',
-        96: '24rem'
-    }, zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999] });
-export default mailwiseTheme;
+//#endregion
+export { mailwiseTheme as default };

package/ui/ThemeProvider/types.d.ts

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import type { ReactNode } from 'react';
 export type Color = Record<string, string>;
 export type Theme = {
     breakpoints?: {

package/ui/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/ui/hooks/useToggleAndClose.js

@@ -1,12 +1,18 @@
-import { useState } from 'react';
-export var useToggleAndClose = function (initialValue) {
-    if (initialValue === void 0) { initialValue = true; }
-    var _a = useState(initialValue), state = _a[0], setState = _a[1];
-    var toggleHandler = function () {
-        setState(function (prev) { return !prev; });
-    };
-    var onClose = function () {
-        setState(false);
-    };
-    return [state, toggleHandler, onClose];
+import { useState } from "react";
+//#region packages/ui/hooks/useToggleAndClose.ts
+const useToggleAndClose = (initialValue = true) => {
+	const [state, setState] = useState(initialValue);
+	const toggleHandler = () => {
+		setState((prev) => !prev);
+	};
+	const onClose = () => {
+		setState(false);
+	};
+	return [
+		state,
+		toggleHandler,
+		onClose
+	];
 };
+//#endregion
+export { useToggleAndClose };