@mailstep/design-system 0.8.26-beta.3 → 0.8.26-beta.4

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/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.js

@@ -0,0 +1,94 @@
+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 * from "./Blocks/CornerDialog";
+export * from "./Blocks/ImageList";
+export * from "./Blocks/LightBox";
+export * from "./Blocks/Scheduler";
+export * from "./Blocks/Modal";
+export * from "./Blocks/Tabs";
+export * from "./Elements/Alert";
+export * from "./Elements/Avatar";
+export * from "./Elements/AsyncSelect";
+export * from "./Elements/Badge";
+export * from "./Elements/BorderedBox";
+export * from "./Elements/Button";
+export * from "./Elements/Dropdown";
+export * from "./Elements/ErrorMessage";
+export * from "./Elements/Icon";
+export * from "./Elements/Image";
+export * from "./Elements/Label";
+export * from "./Elements/Line";
+export * from "./Elements/Link";
+export * from "./Elements/Logo";
+export * from "./Elements/Pagination";
+export * from "./Elements/Portal";
+export * from "./Elements/ProgressBar";
+export * from "./Elements/SimpleLink";
+export * from "./Elements/SpaceAround";
+export * from "./Elements/Spinner";
+export * from "./Elements/Tag";
+export * from "./Elements/Toast";
+export * from "./Elements/Toggle";
+export * from "./Elements/Typography";
+export * from "./Forms/Checkbox";
+export * from "./Forms/Input";
+export * from "./Forms/RadioButton";
+export * from "./ThemeProvider";
+export * from "./utils";
+export * from "./Elements/DatePicker";
+export * from "./Blocks/CommonGrid";
+export * from "./Blocks/Popover";
+export * from "./Elements/SingleSelect";
+export * from "./Elements/Select";
+export * from "./Elements/DropdownSelect";
+export * from "./Forms/TextArea";
+export * from "./Blocks/LoginPage";
+export * from "./Blocks/LanguageSwitch";
+export * from "./Blocks/SideMenu";
+export * from "./Blocks/Stepper";
+export { Alert, AsyncSelect, Avatar, Badge, BorderedBox, Button, Card, Checkbox, CommonGrid, CornerDialog, DatePicker, Dropdown, DropdownSelect, ErrorMessage, Icon, Image, ImageList, Input, Label, LanguageSwitch, LightBox, Line, Link, LoginPage, Logo, Modal, Pagination, Popover, Portal, ProgressBar, RadioButton, Scheduler, Select, SideMenu, SimpleLink, SingleSelect, SpaceAround, Spinner, Stepper, Tabs, Tag, TextArea, ThemeProvider, Toast, Toggle, Typography, utils };

package/ui/utils/CheckDeviceWidth/checkDeviceWidth.js

@@ -0,0 +1,66 @@
+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 { useEffect, useState } from "react";
+var useCheckDeviceWidth = function useCheckDeviceWidth() {
+    var _useState = _sliced_to_array(useState(false), 2), isMobile = _useState[0], setIsMobile = _useState[1];
+    useEffect(function() {
+        var handleResize = function handleResize() {
+            if (window.innerWidth < 1024) {
+                setIsMobile === null || setIsMobile === void 0 ? void 0 : setIsMobile(true);
+            } else setIsMobile(false);
+        };
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return function() {
+            return window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+    return {
+        isMobile: isMobile
+    };
+};
+export { useCheckDeviceWidth };

package/ui/utils/CreateRgba/createRgba.js

@@ -0,0 +1,17 @@
+import { themes } from "../../ThemeProvider";
+import getOr from "lodash/fp/getOr";
+var createRgba = function createRgba(color, alpha) {
+    color = getOr(false, "colors[".concat(color, "]"), themes.default) || color;
+    if (/^rgb/.test(color)) {
+        return "rgba(".concat(color.substring(color.indexOf("(") + 1, color.length - 1), ", ").concat(alpha, ")");
+    }
+    if (/^#/.test(color)) {
+        var r = parseInt("0x".concat(color.substr(1, 2)));
+        var g = parseInt("0x".concat(color.substr(3, 2)));
+        var b = parseInt("0x".concat(color.substr(5, 2)));
+        return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+    }
+    return color;
+};
+var createRgba_default = createRgba;
+export { createRgba, createRgba_default as default };

package/ui/utils/KeyPress/KeyPress.js

@@ -0,0 +1,23 @@
+import { useEffect, useCallback } from "react";
+var OnKeyPress = function OnKeyPress(param) {
+    var action = param.action, keyCode = param.keyCode;
+    var testKeyCode = useCallback(function(event) {
+        if (event.keyCode === keyCode) {
+            action();
+        }
+    }, [
+        keyCode,
+        action
+    ]);
+    useEffect(function() {
+        document.addEventListener("keydown", testKeyCode, false);
+        return function() {
+            document.removeEventListener("keydown", testKeyCode, false);
+        };
+    }, [
+        testKeyCode
+    ]);
+    return null;
+};
+var KeyPress_default = OnKeyPress;
+export { KeyPress_default as default };

package/ui/utils/KeyPress/index.js

@@ -0,0 +1,3 @@
+import KeyPress from "./KeyPress";
+var KeyPress_default = KeyPress;
+export { KeyPress_default as default };

package/ui/utils/LinguiContainer/index.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+import { I18nProvider } from "@lingui/react";
+var LinguiContainer = function LinguiContainer(param) {
+    var children = param.children;
+    i18n.activate("en");
+    return /* @__PURE__ */ jsx(I18nProvider, {
+        i18n: i18n,
+        children: children
+    });
+};
+export { LinguiContainer };

package/ui/utils/index.d.js

@@ -0,0 +1,3 @@
+import { KeyPress } from "./KeyPress/types";
+var index_d_default = Utils;
+export { KeyPress, index_d_default as default };

package/ui/utils/index.js

@@ -0,0 +1,7 @@
+import createRgba from "./CreateRgba/createRgba";
+import KeyPress from "./KeyPress";
+var utils_default = {
+    createRgba: createRgba,
+    KeyPress: KeyPress
+};
+export { KeyPress, createRgba, utils_default as default };