@mailstep/design-system 0.8.15 → 0.8.16-beta.10

package/ui/Elements/Spinner/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const Svg: import('styled-components').StyledComponent<"svg", import('@xstyled/system').Theme, {
-    $variant: "default" | "sm";
+    $variant: 'default' | 'sm';
 }, never>;
 export declare const Circle: import('styled-components').StyledComponent<"circle", import('@xstyled/system').Theme, {}, never>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type Props = {
     color?: string;
     textColor?: string;

package/ui/Elements/Toast/styles.d.ts

@@ -3,6 +3,6 @@ export declare const Text: import('styled-components').StyledComponent<"span", i
 export declare const ContentWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const CloseWrapper: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
 export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    autoClose?: number;
+    autoClose?: number | undefined;
     fill: string;
 }, never>;

package/ui/Forms/Checkbox/styles.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 export declare const FakeInput: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     size: string | number;
 }, never>;
-export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../..').IconProps>, import('@xstyled/system').Theme, {
+export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../../Elements/Icon').IconProps>, import('@xstyled/system').Theme, {
     size: string | number;
 }, never>;
 export declare const CheckboxWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {

package/ui/Forms/Checkbox/styles.js

@@ -2,9 +2,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { th } from '@xstyled/styled-components';
 import { Icon } from '../../Elements/Icon';
-export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"], ["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"])), function (_a) {
+import styled, { th } from '@xstyled/styled-components';
+export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: transparent;\n    border-color: lightGray5;\n  }\n"], ["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: transparent;\n    border-color: lightGray5;\n  }\n"])), function (_a) {
     var size = _a.size;
     return size;
 }, function (_a) {

package/ui/Forms/Input/styles.d.ts

@@ -32,9 +32,9 @@ export declare const Suffix: import('styled-components').StyledComponent<"div",
 export declare const InputRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     hasValue: boolean;
     disabled: boolean;
-    $icon?: string;
-    $isInvalid?: boolean;
-    variant?: string;
+    $icon?: string | undefined;
+    $isInvalid?: boolean | undefined;
+    variant?: string | undefined;
 }, never>;
 export declare const Tooltip: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export {};

package/ui/Forms/Input/styles.js

@@ -29,10 +29,10 @@ export var IconsController = styled.div(templateObject_3 || (templateObject_3 =
 export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"])));
 export var StyledInput = styled.input.attrs(function (props) { return ({
     as: props.$asTextArea ? 'textarea' : 'input'
-}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
+}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: transparent;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: transparent;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
     var $isInvalid = _a.$isInvalid;
     return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
-}, function (props) { return resolvePaddingRight(props); }, function (props) { return props.type !== 'checkbox' ? '100%' : 'auto'; }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
+}, function (props) { return resolvePaddingRight(props); }, function (props) { return (props.type !== 'checkbox' ? '100%' : 'auto'); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
     var big = _a.big;
     return big
         ? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "], ["\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "]))) : '';

package/ui/Forms/TextArea/styles.d.ts

@@ -1,12 +1,12 @@
 export declare const IconWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const StyledTextArea: import('styled-components').StyledComponent<"textarea", import('@xstyled/system').Theme, {
-    $resize?: string;
-    $isInvalid?: boolean;
-    disabled?: boolean;
+    $resize?: string | undefined;
+    $isInvalid?: boolean | undefined;
+    disabled?: boolean | undefined;
 }, never>;
 export declare const TextAreaWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const BorderWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
-    $isInvalid?: boolean;
-    disabled?: boolean;
+    $isInvalid?: boolean | undefined;
+    disabled?: boolean | undefined;
 }, never>;
 export declare const InnerWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,6 @@
+import { FC } from 'react';
 import { Props } from './types';
 
 export declare const LanguageContext: import('react').Context<string>;
-declare const MailstepThemeProvider: ({ children, theme, preflight, language }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const MailstepThemeProvider: FC<Props>;
 export default MailstepThemeProvider;

package/ui/ThemeProvider/ThemeProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext } from 'react';
 import { ThemeProvider, Preflight } from '@xstyled/styled-components';
 import themes from './themes';
-import { createContext } from 'react';
 export var LanguageContext = createContext('en');
 var MailstepThemeProvider = function (_a) {
     var children = _a.children, _b = _a.theme, theme = _b === void 0 ? 'default' : _b, _c = _a.preflight, preflight = _c === void 0 ? true : _c, _d = _a.language, language = _d === void 0 ? 'en' : _d;

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

@@ -0,0 +1,153 @@
+declare const darkTheme: {
+    colors: {
+        bgLightGray: string;
+        bgLightGray1: string;
+        typoPrimary: string;
+        textPrimary: string;
+        white: string;
+        lightGray7: string;
+        neutral20: string;
+        red1: string;
+        red20: string;
+        red30: string;
+        blue2: string;
+        lightGray1: string;
+        blue3: string;
+        lightGray2: string;
+        lightGray3: string;
+        lightGray4: string;
+        lightGray5: string;
+        lightGray6: string;
+        neutral10: string;
+        neutral300: string;
+        neutral500: string;
+        gray: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        gray4: string;
+        gray5: string;
+        blue1: string;
+        blue4: string;
+        textTertiary: string;
+        blue10: 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;
+        green10: 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;
+        yellow10: string;
+        yellow20: string;
+        yellow60: string;
+        yellow70: string;
+        yellow1: string;
+        yellow2: string;
+        red10: string;
+        red50: string;
+        red70: string;
+        red2: string;
+        red3: string;
+        red60: string;
+        red80: string;
+        dangerColor: 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;
+    };
+    shadows: {
+        dialogShadow: string;
+        boxShadow: string;
+        dropShadow: string;
+        inputFocusBoxShadow: string;
+        dropdownMenuShadow: string;
+        tooltipBoxShadow: string;
+        cardShadow: string;
+        smooth: string;
+        headerShadow: string;
+        headerShadowB: string;
+        headerShadowNotifications: string;
+        cornerDialogShadow: string;
+        gridShadow: string;
+        tooltipShadow: string;
+    };
+    breakpoints: string[];
+    fonts: {
+        primary: string;
+        heading: string;
+    };
+    fontLinks: string[];
+    fontSizes: string[];
+    lineHeights: number[];
+    fontWeights: {
+        light: number;
+        normal: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    letterSpacings: {
+        default: null;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    borders: {
+        slim: string;
+        mediumSlim: string;
+        medium: string;
+        mediumThick: string;
+        thick: string;
+    };
+    radii: {
+        sm: string;
+        md: string;
+        ml: string;
+        lg: string;
+        xl: string;
+    };
+    space: number[];
+    transitions: {
+        simpleLong: string;
+        inputTransition: string;
+    };
+    zIndices: number[];
+};
+export default darkTheme;

package/ui/ThemeProvider/themes/dark.js

@@ -0,0 +1,14 @@
+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';
+var darkTheme = __assign(__assign({}, defaultTheme), { colors: __assign(__assign({}, defaultTheme.colors), { bgLightGray: '#131A27', bgLightGray1: '#2a4054', typoPrimary: '#ffffff', textPrimary: '#ffffff', white: '#2a4054', lightGray7: '#5f5f5f', neutral20: '#2a4054', red1: '#d0d0d0', red20: '#5f5f5f', red30: '#8594A5', blue2: '#ffffff', lightGray1: '#162C3F', blue3: '#2a4054' }), shadows: __assign(__assign({}, defaultTheme.shadows), { dialogShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)' }) });
+export default darkTheme;

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

@@ -11,6 +11,7 @@ declare const defaultTheme: {
         lightGray5: string;
         lightGray6: string;
         lightGray7: string;
+        neutral10: string;
         neutral20: string;
         neutral300: string;
         neutral500: string;

package/ui/ThemeProvider/themes/default.js

@@ -11,6 +11,7 @@ var defaultTheme = {
         lightGray5: '#A3B3C1',
         lightGray6: '#D2D8DF',
         lightGray7: '#E7EBEF',
+        neutral10: '#FAFBFC',
         neutral20: '#F1F5F9',
         neutral300: '#5E6C84',
         neutral500: '#42526E',
@@ -144,7 +145,7 @@ var defaultTheme = {
         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], // same as xstyled default
+    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',

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

@@ -12,6 +12,7 @@ declare const themes: {
             lightGray5: string;
             lightGray6: string;
             lightGray7: string;
+            neutral10: string;
             neutral20: string;
             neutral300: string;
             neutral500: string;
@@ -150,7 +151,6 @@ declare const themes: {
         };
         zIndices: number[];
     };
-    light: import('..').Theme;
     mailwise: {
         screens: {
             _: number;
@@ -354,5 +354,157 @@ declare const themes: {
         };
         zIndices: number[];
     };
+    dark: {
+        colors: {
+            bgLightGray: string;
+            bgLightGray1: string;
+            typoPrimary: string;
+            textPrimary: string;
+            white: string;
+            lightGray7: string;
+            neutral20: string;
+            red1: string;
+            red20: string;
+            red30: string;
+            blue2: string;
+            lightGray1: string;
+            blue3: string;
+            lightGray2: string;
+            lightGray3: string;
+            lightGray4: string;
+            lightGray5: string;
+            lightGray6: string;
+            neutral10: string;
+            neutral300: string;
+            neutral500: string;
+            gray: string;
+            gray1: string;
+            gray2: string;
+            gray3: string;
+            gray4: string;
+            gray5: string;
+            blue1: string;
+            blue4: string;
+            textTertiary: string;
+            blue10: 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;
+            green10: 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;
+            yellow10: string;
+            yellow20: string;
+            yellow60: string;
+            yellow70: string;
+            yellow1: string;
+            yellow2: string;
+            red10: string;
+            red50: string;
+            red70: string;
+            red2: string;
+            red3: string;
+            red60: string;
+            red80: string;
+            dangerColor: 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;
+        };
+        shadows: {
+            dialogShadow: string;
+            boxShadow: string;
+            dropShadow: string;
+            inputFocusBoxShadow: string;
+            dropdownMenuShadow: string;
+            tooltipBoxShadow: string;
+            cardShadow: string;
+            smooth: string;
+            headerShadow: string;
+            headerShadowB: string;
+            headerShadowNotifications: string;
+            cornerDialogShadow: string;
+            gridShadow: string;
+            tooltipShadow: string;
+        };
+        breakpoints: string[];
+        fonts: {
+            primary: string;
+            heading: string;
+        };
+        fontLinks: string[];
+        fontSizes: string[];
+        lineHeights: number[];
+        fontWeights: {
+            light: number;
+            normal: number;
+            medium: number;
+            semiBold: number;
+            bold: number;
+        };
+        letterSpacings: {
+            default: null;
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        borders: {
+            slim: string;
+            mediumSlim: string;
+            medium: string;
+            mediumThick: string;
+            thick: string;
+        };
+        radii: {
+            sm: string;
+            md: string;
+            ml: string;
+            lg: string;
+            xl: string;
+        };
+        space: number[];
+        transitions: {
+            simpleLong: string;
+            inputTransition: string;
+        };
+        zIndices: number[];
+    };
 };
 export default themes;

package/ui/ThemeProvider/themes/index.js

@@ -1,9 +1,9 @@
 import defaultTheme from './default';
-import light from './light';
 import mailwise from './mailwise';
+import darkTheme from './dark';
 var themes = {
     default: defaultTheme,
-    light: light,
-    mailwise: mailwise
+    mailwise: mailwise,
+    dark: darkTheme
 };
 export default themes;

package/ui/ThemeProvider/themes/mailwise.js

@@ -156,7 +156,7 @@ var defaultTheme = {
         smooth: '0px 4px 25px 0px #0000001a',
         // redesign:
         dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
-        tooltipShadow: '0px 1px 4px 0 #B1B8C3', // color is grayIII
+        tooltipShadow: '0px 1px 4px 0 #B1B8C3',
         headerShadow: '1px 2px 3px #00000029',
         headerShadowB: '1px 1px 3px #00000029',
         headerShadowNotifications: '1px 1px 2px #00000029',

package/ui/ThemeProvider/types.d.ts

@@ -1,8 +1,6 @@
-import { default as React } from 'react';
+import { ReactNode } from 'react';
 
-export type Color = {
-    [key: string]: string;
-};
+export type Color = Record<string, string>;
 export type Theme = {
     breakpoints?: {
         xs: number;
@@ -11,42 +9,24 @@ export type Theme = {
         lg: number;
         xl: number;
     };
-    colors?: {
-        [key: string]: string | Color;
-    };
-    fonts?: {
-        [key: string]: string;
-    };
+    colors?: Record<string, string | Color>;
+    fonts?: Record<string, string>;
     fontLinks?: string[];
     fontSizes?: string[];
-    fontWeights?: {
-        [key: string]: number | null;
-    };
-    letterSpacings?: {
-        [key: string]: string | null;
-    };
-    borders?: {
-        [key: string]: string;
-    };
-    radii?: {
-        [key: string]: string;
-    };
-    shadows?: {
-        [key: string]: string;
-    };
+    fontWeights?: Record<string, number | null>;
+    letterSpacings?: Record<string, string | null>;
+    borders?: Record<string, string>;
+    radii?: Record<string, string>;
+    shadows?: Record<string, string>;
     spaces?: number[];
     lineHeights?: number[];
-    transitions?: {
-        [key: string]: string;
-    };
+    transitions?: Record<string, string>;
     zIndices?: number[];
 };
-export type Themes = {
-    [key: string]: Theme;
-};
+export type Themes = Record<string, Theme>;
 export interface Props {
-    children: React.ReactNode;
-    theme: 'default' | 'light' | 'mailwise';
+    children: ReactNode;
+    theme: 'default' | 'mailwise' | 'dark';
     preflight?: boolean;
     language?: string;
 }