@mailstep/design-system 0.8.26 → 0.8.27

package/ui/ThemeProvider/themes/default.js

@@ -0,0 +1,194 @@
+var defaultTheme = {
+    breakpoints: [
+        "0"
+    ],
+    colors: {
+        white: "#FFFFFF",
+        bgLightGray: "#FAFBFC",
+        bgLightGray1: "#F1F5F9",
+        lightGray1: "#F5F7FA",
+        lightGray2: "#EFF3F8",
+        lightGray3: "#D4D8DE",
+        lightGray4: "#B9BFC9",
+        lightGray5: "#A3B3C1",
+        lightGray6: "#D2D8DF",
+        lightGray7: "#E7EBEF",
+        neutral20: "#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",
+        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"
+    },
+    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
+    ],
+    // same as xstyled default
+    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
+    ]
+};
+var default_default = defaultTheme;
+export { default_default as default };

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

@@ -150,7 +150,7 @@ declare const themes: {
         };
         zIndices: number[];
     };
-    light: import('..').Theme;
+    light: import("..").Theme;
     mailwise: {
         screens: {
             _: number;

package/ui/ThemeProvider/themes/index.js

@@ -0,0 +1,10 @@
+import defaultTheme from "./default";
+import light from "./light";
+import mailwise from "./mailwise";
+var themes = {
+    default: defaultTheme,
+    light: light,
+    mailwise: mailwise
+};
+var themes_default = themes;
+export { themes_default as default };

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

@@ -1,4 +1,3 @@
-import { Theme } from '../types';
-
+import { Theme } from "../types";
 declare const lightTheme: Theme;
 export default lightTheme;

package/ui/ThemeProvider/themes/light.js

@@ -0,0 +1,8 @@
+var lightTheme = {
+    colors: {
+        primary: "#219615",
+        warning: "purple"
+    }
+};
+var light_default = lightTheme;
+export { light_default as default };

package/ui/ThemeProvider/themes/mailwise.js

@@ -0,0 +1,237 @@
+var defaultTheme = {
+    screens: {
+        // same as xstyled default
+        _: 0,
+        xs: 479,
+        sm: 721,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        "2xl": 1536
+    },
+    colors: {
+        white: "#fff",
+        bgLightGray: "#FAFBFC",
+        bgLightGray1: "#F1F5F9",
+        lightGray1: "#F5F7FA",
+        lightGray2: "#EFF3F8",
+        lightGray3: "#D4D8DE",
+        lightGray4: "#B9BFC9",
+        lightGray5: "#A3B3C1",
+        lightGray6: "#D2D8DF",
+        lightGray7: "#E7EBEF",
+        neutral20: "#F1F5F9",
+        gray: "#8594A5",
+        gray1: "#7A90A1",
+        gray2: "#9AA1A7",
+        gray3: "#5F6C76",
+        gray4: "#455665",
+        gray5: "#647483",
+        neutral300: "#5E6C84",
+        blue1: "#2C4052",
+        blue2: "#22394E",
+        blue3: "#162C3F",
+        blue4: "#0C1F2F",
+        textPrimary: "#091E42",
+        typoPrimary: "#22394E",
+        blue10: "#F3F9FF",
+        blue20: "#dcf2ff",
+        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: "#06d6a0",
+        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",
+        yellow1: "#FFD702",
+        yellow2: "#F2E871",
+        red10: "#FFF6F4",
+        red20: "#FFEBE6",
+        red30: "#FFDAD1",
+        red50: "#ff7c7b",
+        red1: "#DB2B19",
+        red2: "#E94324",
+        red3: "#991E12",
+        red60: "#DB2B19",
+        red80: "#B71C1C",
+        dangerColor: "#E32C1E",
+        purple20: "#F0EDFF",
+        purple40: "#0072A0",
+        purple50: "#4573B3",
+        purple60: "#6554C0",
+        purple80: "#403294",
+        purple90: "#03235f",
+        magenta20: "#FCF1F7",
+        magenta60: "#EE5396",
+        magenta80: "#9F1853",
+        magenta90: "#872e8b",
+        primary: "#626262",
+        black: "#333333",
+        error: "#ea5455",
+        secondary: "#E15B63"
+    },
+    fonts: {
+        primary: "Inter, sans-serif",
+        heading: "Inter, sans-serif"
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    fontSizes: [
+        "0rem",
+        "0.87rem",
+        "1rem",
+        "1.25rem",
+        "1.5rem",
+        "1.8rem",
+        "2.0rem",
+        "2.4rem",
+        "2.8rem",
+        "3.5rem",
+        "4rem"
+    ],
+    // @ts-ignore
+    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"
+    },
+    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)",
+        tooltipShadow: "0px 1px 4px 0 #B1B8C3",
+        // color is grayIII
+        headerShadow: "1px 2px 3px #00000029",
+        headerShadowB: "1px 1px 3px #00000029",
+        headerShadowNotifications: "1px 1px 2px #00000029",
+        gridShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.12)",
+        cornerDialogShadow: "1px 1px 3px 1px #00000029"
+    },
+    space: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        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"
+    },
+    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
+    ]
+};
+var mailwise_default = defaultTheme;
+export { mailwise_default 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/hooks/useToggleAndClose.js

@@ -0,0 +1,65 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useState } from "react";
+var useToggleAndClose = function useToggleAndClose() {
+    var initialValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
+    var _useState = _sliced_to_array(useState(initialValue), 2), state = _useState[0], setState = _useState[1];
+    var toggleHandler = function toggleHandler() {
+        setState(function(prev) {
+            return !prev;
+        });
+    };
+    var onClose = function onClose() {
+        setState(false);
+    };
+    return [
+        state,
+        toggleHandler,
+        onClose
+    ];
+};
+export { useToggleAndClose };

package/ui/index.d.ts

@@ -1,51 +1,50 @@
-import { default as CommonGrid } from './Blocks/CommonGrid';
-import { default as CornerDialog } from './Blocks/CornerDialog';
-import { default as ImageList } from './Blocks/ImageList';
-import { default as LanguageSwitch } from './Blocks/LanguageSwitch';
-import { default as LightBox } from './Blocks/LightBox';
-import { default as LoginPage } from './Blocks/LoginPage';
-import { default as Modal } from './Blocks/Modal';
-import { default as Popover } from './Blocks/Popover';
-import { default as Scheduler } from './Blocks/Scheduler';
-import { default as SideMenu } from './Blocks/SideMenu';
-import { default as Stepper } from './Blocks/Stepper';
-import { default as Tabs } from './Blocks/Tabs';
-import { default as Alert } from './Elements/Alert';
-import { default as AsyncSelect } from './Elements/AsyncSelect';
-import { default as Avatar } from './Elements/Avatar';
-import { default as Badge } from './Elements/Badge';
-import { default as BorderedBox } from './Elements/BorderedBox';
-import { default as Button } from './Elements/Button';
-import { default as Card } from './Elements/Card';
-import { default as DatePicker } from './Elements/DatePicker';
-import { default as Dropdown } from './Elements/Dropdown';
-import { default as DropdownSelect } from './Elements/DropdownSelect';
-import { default as ErrorMessage } from './Elements/ErrorMessage';
-import { default as Icon } from './Elements/Icon';
-import { default as Image } from './Elements/Image';
-import { default as Label } from './Elements/Label';
-import { default as Line } from './Elements/Line';
-import { default as Link } from './Elements/Link';
-import { default as Logo } from './Elements/Logo';
-import { default as Pagination } from './Elements/Pagination';
-import { default as Portal } from './Elements/Portal';
-import { default as ProgressBar } from './Elements/ProgressBar';
-import { default as Select } from './Elements/Select';
-import { default as SimpleLink } from './Elements/SimpleLink';
-import { default as SingleSelect } from './Elements/SingleSelect';
-import { default as SpaceAround } from './Elements/SpaceAround';
-import { default as Spinner } from './Elements/Spinner';
-import { default as Tag } from './Elements/Tag';
-import { default as Toast } from './Elements/Toast';
-import { default as Toggle } from './Elements/Toggle';
-import { default as Typography } from './Elements/Typography';
-import { default as Checkbox } from './Forms/Checkbox';
-import { default as Input } from './Forms/Input';
-import { default as RadioButton } from './Forms/RadioButton';
-import { default as TextArea } from './Forms/TextArea';
-import { default as ThemeProvider } from './ThemeProvider';
-import { default as utils } from './utils';
-
+import CommonGrid from './Blocks/CommonGrid';
+import CornerDialog from './Blocks/CornerDialog';
+import ImageList from './Blocks/ImageList';
+import LanguageSwitch from './Blocks/LanguageSwitch';
+import LightBox from './Blocks/LightBox';
+import LoginPage from './Blocks/LoginPage';
+import Modal from './Blocks/Modal';
+import Popover from './Blocks/Popover';
+import Scheduler from './Blocks/Scheduler';
+import SideMenu from './Blocks/SideMenu';
+import Stepper from './Blocks/Stepper';
+import Tabs from './Blocks/Tabs';
+import Alert from './Elements/Alert';
+import AsyncSelect from './Elements/AsyncSelect';
+import Avatar from './Elements/Avatar';
+import Badge from './Elements/Badge';
+import BorderedBox from './Elements/BorderedBox';
+import Button from './Elements/Button';
+import Card from './Elements/Card';
+import DatePicker from './Elements/DatePicker';
+import Dropdown from './Elements/Dropdown';
+import DropdownSelect from './Elements/DropdownSelect';
+import ErrorMessage from './Elements/ErrorMessage';
+import Icon from './Elements/Icon';
+import Image from './Elements/Image';
+import Label from './Elements/Label';
+import Line from './Elements/Line';
+import Link from './Elements/Link';
+import Logo from './Elements/Logo';
+import Pagination from './Elements/Pagination';
+import Portal from './Elements/Portal';
+import ProgressBar from './Elements/ProgressBar';
+import Select from './Elements/Select';
+import SimpleLink from './Elements/SimpleLink';
+import SingleSelect from './Elements/SingleSelect';
+import SpaceAround from './Elements/SpaceAround';
+import Spinner from './Elements/Spinner';
+import Tag from './Elements/Tag';
+import Toast from './Elements/Toast';
+import Toggle from './Elements/Toggle';
+import Typography from './Elements/Typography';
+import Checkbox from './Forms/Checkbox';
+import Input from './Forms/Input';
+import RadioButton from './Forms/RadioButton';
+import TextArea from './Forms/TextArea';
+import ThemeProvider from './ThemeProvider';
+import utils from './utils';
 export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, AsyncSelect, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils, TextArea, LoginPage, LanguageSwitch, SideMenu, Stepper, Scheduler };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';