@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Forms/TextArea/TextArea.js

@@ -1,35 +1,34 @@
-import Icon from "../../Elements/Icon/Icon.js";
-import ErrorMessage from "../../Elements/ErrorMessage/ErrorMessage.js";
-import { FieldLabel } from "../../Elements/Label/Label.js";
-import "../../Elements/Label/index.js";
-import SpaceAroundWrap from "../../Elements/SpaceAround/SpaceAround.js";
-import "../../Elements/SpaceAround/index.js";
-import { BorderWrap, IconWrap, InnerWrap, StyledTextArea, TextAreaWrap } from "./styles.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Forms/TextArea/TextArea.tsx
-const TextArea = ({ name, label, value, disabled, error, spaceAround = false, isInvalid = void 0, className, resize, icon, rows = 4, Footer, ...rest }) => {
-	const $isInvalid = isInvalid !== void 0 ? isInvalid : !!error;
-	return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
-		spaceAround,
-		children: [/* @__PURE__ */ jsxs(TextAreaWrap, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-			htmlFor: name,
-			children: label
-		}), /* @__PURE__ */ jsxs(BorderWrap, {
-			$isInvalid,
-			disabled,
-			children: [/* @__PURE__ */ jsxs(InnerWrap, { children: [icon && /* @__PURE__ */ jsx(IconWrap, { children: /* @__PURE__ */ jsx(Icon, { icon }) }), /* @__PURE__ */ jsx(StyledTextArea, {
-				name,
-				value,
-				disabled,
-				className,
-				$isInvalid,
-				$resize: resize,
-				...rest,
-				rows
-			})] }), Footer]
-		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })]
-	});
+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);
 };
-//#endregion
-export { TextArea as default };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage';
+import FaIcon from '../../Elements/Icon/Icon';
+import { FieldLabel } from '../../Elements/Label';
+import { SpaceAroundWrap } from '../../Elements/SpaceAround';
+import { StyledTextArea, TextAreaWrap, InnerWrap, BorderWrap, IconWrap } from './styles';
+var TextArea = function (_a) {
+    var name = _a.name, label = _a.label, value = _a.value, disabled = _a.disabled, error = _a.error, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, className = _a.className, resize = _a.resize, icon = _a.icon, _d = _a.rows, rows = _d === void 0 ? 4 : _d, Footer = _a.Footer, rest = __rest(_a, ["name", "label", "value", "disabled", "error", "spaceAround", "isInvalid", "className", "resize", "icon", "rows", "Footer"]);
+    var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, children: [_jsxs(TextAreaWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(BorderWrap, { "$isInvalid": $isInvalid, disabled: disabled, children: [_jsxs(InnerWrap, { children: [icon && (_jsx(IconWrap, { children: _jsx(FaIcon, { icon: icon }) })), _jsx(StyledTextArea, __assign({ name: name, value: value, disabled: disabled, className: className, "$isInvalid": $isInvalid, "$resize": resize }, rest, { rows: rows }))] }), Footer] })] }), error && _jsx(ErrorMessage, { children: error })] }));
+};
+export default TextArea;

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

@@ -1,2 +1,3 @@
-import TextArea from './TextArea';
+import { default as TextArea } from './TextArea';
+
 export default TextArea;

package/ui/Forms/TextArea/index.js

@@ -1,5 +1,2 @@
-import TextArea from "./TextArea.js";
-//#region packages/ui/Forms/TextArea/index.ts
-var TextArea_default = TextArea;
-//#endregion
-export { TextArea_default as default };
+import TextArea from './TextArea';
+export default TextArea;

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;
+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 | 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;
+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 | undefined;
+    disabled?: boolean | undefined;
 }, never>;
-export declare const InnerWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const InnerWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/ui/Forms/TextArea/styles.js

@@ -1,76 +1,31 @@
-import styled$1, { css } from "@xstyled/styled-components";
-import { system as system$1, th as th$1 } from "@xstyled/system";
-//#region packages/ui/Forms/TextArea/styles.ts
-const IconWrap = styled$1.div`
-  font-size: 12px;
-  color: ${th$1.color("lightGray5")};
-
-  & svg {
-    margin-top: 2;
-    margin-right: 1;
-  }
-`;
-const StyledTextArea = styled$1.textarea`
-  ${system$1};
-  display: block;
-  width: 100%;
-  font-size: 1;
-  font-family: ${th$1("fonts.primary")};
-  line-height: 0;
-  transition: inputTransition;
-  border: none;
-  font-weight: 800;
-  color: ${({ $isInvalid, disabled }) => $isInvalid ? th$1.color("red1") : disabled ? th$1.color("gray") : th$1.color("typoPrimary")};
-  background-color: transparent;
-  :focus {
-    outline: 0;
-    color: blue2;
-  }
-  ${({ $resize }) => $resize ? css`
-          resize: ${$resize};
-        ` : ""}
-
-  ::placeholder {
-    color: lightGray5;
-    font-size: 14px;
-    font-weight: 400;
-  }
-`;
-const TextAreaWrap = styled$1.div`
-  position: relative;
-`;
-const BorderWrap = styled$1.div`
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  padding-top: 1;
-  padding-bottom: 1;
-  padding-right: 1;
-  padding-left: 12px;
-  border: slim;
-  border-color: ${({ $isInvalid }) => $isInvalid ? th$1.color("red1") : th$1.color("lightGray6")};
-  color: ${({ $isInvalid }) => $isInvalid ? th$1.color("red1") : th$1.color("gray")};
-  background-color: ${({ disabled }) => disabled ? th$1("colors.lightGray1") : "unset"};
-  background-clip: padding-box;
-  border-radius: lg;
-
-  :focus-within {
-    background-color: white;
-    border-color: blue2;
-    color: blue2;
-  }
-
-  :hover {
-    border-color: ${({ disabled }) => disabled ? th$1("colors.lightGray3") : th$1("colors.gray5")};
-  }
-
-  :disabled {
-    background-color: lightGray1;
-  }
-`;
-const InnerWrap = styled$1.div`
-  display: flex;
-  position: relative;
-`;
-//#endregion
-export { BorderWrap, IconWrap, InnerWrap, StyledTextArea, TextAreaWrap };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from '@xstyled/styled-components';
+import { system, th } from '@xstyled/system';
+export var IconWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 12px;\n  color: ", ";\n\n  & svg {\n    margin-top: 2;\n    margin-right: 1;\n  }\n"], ["\n  font-size: 12px;\n  color: ", ";\n\n  & svg {\n    margin-top: 2;\n    margin-right: 1;\n  }\n"])), th.color('lightGray5'));
+export var StyledTextArea = styled.textarea(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  display: block;\n  width: 100%;\n  font-size: 1;\n  font-family: ", ";\n  line-height: 0;\n  transition: inputTransition;\n  border: none;\n  font-weight: 800;\n  color: ", ";\n  background-color: transparent;\n  :focus {\n    outline: 0;\n    color: blue2;\n  }\n  ", "\n\n  ::placeholder {\n    color: lightGray5;\n    font-size: 14px;\n    font-weight: 400;\n  }\n"], ["\n  ", ";\n  display: block;\n  width: 100%;\n  font-size: 1;\n  font-family: ", ";\n  line-height: 0;\n  transition: inputTransition;\n  border: none;\n  font-weight: 800;\n  color: ", ";\n  background-color: transparent;\n  :focus {\n    outline: 0;\n    color: blue2;\n  }\n  ", "\n\n  ::placeholder {\n    color: lightGray5;\n    font-size: 14px;\n    font-weight: 400;\n  }\n"])), system, th('fonts.primary'), function (_a) {
+    var $isInvalid = _a.$isInvalid, disabled = _a.disabled;
+    return ($isInvalid ? th.color('red1') : disabled ? th.color('gray') : th.color('typoPrimary'));
+}, function (_a) {
+    var $resize = _a.$resize;
+    return $resize
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          resize: ", ";\n        "], ["\n          resize: ", ";\n        "])), $resize) : '';
+});
+export var TextAreaWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var BorderWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding-top: 1;\n  padding-bottom: 1;\n  padding-right: 1;\n  padding-left: 12px;\n  border: slim;\n  border-color: ", ";\n  color: ", ";\n  background-color: ", ";\n  background-clip: padding-box;\n  border-radius: lg;\n\n  :focus-within {\n    background-color: white;\n    border-color: blue2;\n    color: blue2;\n  }\n\n  :hover {\n    border-color: ", ";\n  }\n\n  :disabled {\n    background-color: lightGray1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding-top: 1;\n  padding-bottom: 1;\n  padding-right: 1;\n  padding-left: 12px;\n  border: slim;\n  border-color: ", ";\n  color: ", ";\n  background-color: ", ";\n  background-clip: padding-box;\n  border-radius: lg;\n\n  :focus-within {\n    background-color: white;\n    border-color: blue2;\n    color: blue2;\n  }\n\n  :hover {\n    border-color: ", ";\n  }\n\n  :disabled {\n    background-color: lightGray1;\n  }\n"])), function (_a) {
+    var $isInvalid = _a.$isInvalid;
+    return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
+}, function (_a) {
+    var $isInvalid = _a.$isInvalid;
+    return ($isInvalid ? th.color('red1') : th.color('gray'));
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? th('colors.lightGray1') : 'unset');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? th('colors.lightGray3') : th('colors.gray5'));
+});
+export var InnerWrap = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n"], ["\n  display: flex;\n  position: relative;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/System/Fonts/index.js

@@ -1,54 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { Helmet } from "react-helmet";
-import InterLightMailstep from "../../../assets/fonts/Inter-Light_mailstep.woff2";
-import InterRegularMailstep from "../../../assets/fonts/Inter-Regular_mailstep.woff2";
-import InterMediumMailstep from "../../../assets/fonts/Inter-Medium_mailstep.woff2";
-import InterSemiBoldMailstep from "../../../assets/fonts/Inter-SemiBold_mailstep.woff2";
-import InterBoldMailstep from "../../../assets/fonts/Inter-Bold_mailstep.woff2";
-//#region packages/ui/System/Fonts/index.tsx
-const Fonts = () => /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("style", {
-	type: "text/css",
-	children: `
-        @font-face {
-          font-family: 'Inter';
-          font-style: normal;
-          font-weight: 300;
-          font-display: swap;
-          src: url(${InterLightMailstep}) format('woff2');
-        }
-
-        @font-face {
-          font-family: 'Inter';
-          font-style: normal;
-          font-weight: 400;
-          font-display: swap;
-          src: url(${InterRegularMailstep}) format('woff2');
-        }
-      
-        @font-face {
-          font-family: 'Inter';
-          font-style: normal;
-          font-weight: 500;
-          font-display: swap;
-          src: url(${InterMediumMailstep}) format('woff2');
-        }
-
-        @font-face {
-          font-family: 'Inter';
-          font-style: normal;
-          font-weight: 600;
-          font-display: swap;
-          src: url(${InterSemiBoldMailstep}) format('woff2');
-        }
-      
-        @font-face {
-          font-family: 'Inter';
-          font-style: normal;
-          font-weight: 700;
-          font-display: swap;
-          src: url(${InterBoldMailstep}) format('woff2');
-        }
-    `
-}) });
-//#endregion
-export { Fonts as default };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Helmet } from 'react-helmet';
+import InterLightMailstep from '../../../assets/fonts/Inter-Light_mailstep.woff2';
+import InterRegularMailstep from '../../../assets/fonts/Inter-Regular_mailstep.woff2';
+import InterMediumMailstep from '../../../assets/fonts/Inter-Medium_mailstep.woff2';
+import InterSemiBoldMailstep from '../../../assets/fonts/Inter-SemiBold_mailstep.woff2';
+import InterBoldMailstep from '../../../assets/fonts/Inter-Bold_mailstep.woff2';
+var Fonts = function () { return (_jsx(Helmet, { children: _jsx("style", { type: "text/css", children: "\n        @font-face {\n          font-family: 'Inter';\n          font-style: normal;\n          font-weight: 300;\n          font-display: swap;\n          src: url(".concat(InterLightMailstep, ") format('woff2');\n        }\n\n        @font-face {\n          font-family: 'Inter';\n          font-style: normal;\n          font-weight: 400;\n          font-display: swap;\n          src: url(").concat(InterRegularMailstep, ") format('woff2');\n        }\n      \n        @font-face {\n          font-family: 'Inter';\n          font-style: normal;\n          font-weight: 500;\n          font-display: swap;\n          src: url(").concat(InterMediumMailstep, ") format('woff2');\n        }\n\n        @font-face {\n          font-family: 'Inter';\n          font-style: normal;\n          font-weight: 600;\n          font-display: swap;\n          src: url(").concat(InterSemiBoldMailstep, ") format('woff2');\n        }\n      \n        @font-face {\n          font-family: 'Inter';\n          font-style: normal;\n          font-weight: 700;\n          font-display: swap;\n          src: url(").concat(InterBoldMailstep, ") format('woff2');\n        }\n    ") }) })); };
+export default Fonts;

package/ui/ThemeProvider/ThemeProvider.d.ts

@@ -1,5 +1,6 @@
-import type { FC } from 'react';
-import type { Props } from './types';
-export declare const LanguageContext: import("react").Context<string>;
+import { FC } from 'react';
+import { Props } from './types';
+
+export declare const LanguageContext: import('react').Context<string>;
 declare const MailstepThemeProvider: FC<Props>;
 export default MailstepThemeProvider;

package/ui/ThemeProvider/ThemeProvider.js

@@ -1,17 +1,10 @@
-import themes from "./themes/index.js";
-import { createContext } from "react";
-import { Preflight, ThemeProvider } from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/ThemeProvider/ThemeProvider.tsx
-const LanguageContext = createContext("en");
-const MailstepThemeProvider = ({ children, theme = "default", preflight = true, language = "en" }) => {
-	return /* @__PURE__ */ jsx(LanguageContext.Provider, {
-		value: language,
-		children: /* @__PURE__ */ jsxs(ThemeProvider, {
-			theme: themes[theme],
-			children: [preflight && /* @__PURE__ */ jsx(Preflight, {}), children]
-		})
-	});
+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';
+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;
+    return (_jsx(LanguageContext.Provider, { value: language, children: _jsxs(ThemeProvider, { theme: themes[theme], children: [preflight && _jsx(Preflight, {}), children] }) }));
 };
-//#endregion
-export { LanguageContext, MailstepThemeProvider as default };
+export default MailstepThemeProvider;

package/ui/ThemeProvider/index.d.ts

@@ -1,5 +1,6 @@
-import ThemeProvider from './ThemeProvider';
-import themes from './themes';
+import { default as ThemeProvider } from './ThemeProvider';
+import { default as themes } from './themes';
+
 export * from './types';
 export { themes };
 export default ThemeProvider;

package/ui/ThemeProvider/index.js

@@ -1,6 +1,5 @@
-import themes from "./themes/index.js";
-import MailstepThemeProvider from "./ThemeProvider.js";
-//#region packages/ui/ThemeProvider/index.ts
-var ThemeProvider_default = MailstepThemeProvider;
-//#endregion
-export { ThemeProvider_default as default, themes };
+import ThemeProvider from './ThemeProvider';
+import themes from './themes';
+export * from './types';
+export { themes };
+export default ThemeProvider;

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

@@ -0,0 +1,169 @@
+declare const darkTheme: {
+    colors: {
+        bgLightGray: string;
+        bgLightGray1: string;
+        bgLightGray2: string;
+        typoPrimary: string;
+        textPrimary: string;
+        white: string;
+        lightGray7: string;
+        neutral10: string;
+        neutral20: string;
+        neutral30: string;
+        neutral300: string;
+        red1: string;
+        red20: string;
+        red30: string;
+        red60: string;
+        red70: string;
+        red80: string;
+        yellow20: string;
+        yellow60: string;
+        neutral500: string;
+        lightGray1: string;
+        lightGray2: string;
+        lightGray3: string;
+        lightGray4: string;
+        lightGray6: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue10: string;
+        sideMenuSelectedText: string;
+        black: string;
+        lightGray5: string;
+        gray: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        gray4: string;
+        gray5: 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;
+        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;
+        yellow70: string;
+        yellow80: string;
+        yellow90: string;
+        yellow1: string;
+        yellow2: string;
+        red10: string;
+        red50: string;
+        red2: string;
+        red3: 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;
+        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;
+    };
+    screens: {
+        _: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+    };
+    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: '#355069', bgLightGray1: '#3a667b', bgLightGray2: '#F1F5F9', typoPrimary: '#ededed', textPrimary: '#ededed', white: '#1b2b38', lightGray7: '#5f5f5f', neutral10: '#1e2532', neutral20: '#2e475d', neutral30: '#42505d', neutral300: '#d6d9df', red1: '#73e1ff', red20: '#3a667b', red30: '#8594A5', red60: '#55d1f3', red70: '#d1f5ff', red80: '#d1f5ff', yellow20: '#857000', yellow60: '#e77c00', neutral500: '#55d1f3', lightGray1: '#162C3F', lightGray2: '#1a2b38', lightGray3: '#7e8489', lightGray4: '#7A90A1', lightGray6: '#7A90A1', blue1: '#ffffff', blue2: '#d9fffa', blue3: '#081724', blue10: '#2e475d', sideMenuSelectedText: '#fff' }), shadows: __assign(__assign({}, defaultTheme.shadows), { dialogShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)', gridShadow: '0px 4px 23px 0px rgba(255, 255, 255, 0.08)' }) });
+export default darkTheme;

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

@@ -1,9 +1,20 @@
 declare const defaultTheme: {
+    screens: {
+        _: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+    };
     breakpoints: string[];
     colors: {
+        black: string;
         white: string;
         bgLightGray: string;
         bgLightGray1: string;
+        bgLightGray2: string;
         lightGray1: string;
         lightGray2: string;
         lightGray3: string;
@@ -11,7 +22,9 @@ declare const defaultTheme: {
         lightGray5: string;
         lightGray6: string;
         lightGray7: string;
+        neutral10: string;
         neutral20: string;
+        neutral30: string;
         neutral300: string;
         neutral500: string;
         gray: string;
@@ -63,6 +76,8 @@ declare const defaultTheme: {
         yellow20: string;
         yellow60: string;
         yellow70: string;
+        yellow80: string;
+        yellow90: string;
         yellow1: string;
         yellow2: string;
         red10: string;
@@ -91,6 +106,8 @@ declare const defaultTheme: {
         magenta70: string;
         magenta80: string;
         magenta90: string;
+        error: string;
+        sideMenuSelectedText: string;
     };
     fonts: {
         primary: string;