@mailstep/design-system 0.8.16-beta.2 → 0.8.16-beta.20

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

@@ -25,21 +25,21 @@ export type SelectProps = {
     loadOptions?: (text: string) => Promise<Option[]>;
     defaultOptions?: Option[];
     onChange: (value: ValueType) => void;
-    onBlur?: Function;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     error?: string;
     index?: [];
     isInvalid?: boolean;
     isLoading?: boolean;
     spaceAround?: SpaceAround;
     disabled?: boolean;
-    onInputChange?: Function;
+    onInputChange?: (value: string) => void;
     useSimplifiedOptions?: boolean;
     showSelectAllButton?: boolean;
-    showResetGridButton?: boolean;
     isClearable?: boolean;
     isSearchable?: boolean;
     isMulti?: boolean;
     shortValues?: boolean;
+    shortVariant?: 'block' | 'join';
     menuIsOpen?: boolean;
     defaultMenuIsOpen?: boolean;
     isDarkPlaceholderText?: boolean;
@@ -51,18 +51,21 @@ export type SelectProps = {
     innerRef?: RefObject<HTMLElement>;
     className?: string;
     maxMenuHeight?: number;
-    resetGrid?: Function;
-    getOptionValue?: Function;
+    getOptionValue?: (selectedOption: ValueType) => any;
     systemTheme?: Theme;
     menuPlacement?: string;
-    onIconClick?: Function;
+    onIconClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 export type BaseColors = {
+    textPrimary: string;
     primary: string;
     optionTextColor: string;
     inputDisabledColor: string;
     inputBorderColor: string;
-    whiteBackgroundColor: string;
+    backgroundColor: string;
+    backgroundColorDisabled: string;
+    multiValueBackgroundColor: string;
+    menuBackgroundColor: string;
     inputTextColor: string;
     placeholderTextColor: string;
     activeOptionBackground: string;
@@ -72,6 +75,7 @@ export type BaseColors = {
     dropdownIndicatorColor: string;
     hoverToActiveOptionBackground: string;
     defaultControlColor: string;
+    clearIndicatorColor: string;
 };
 type BaseState<ThemeType = BaseColors> = {
     theme: ThemeType;

package/ui/Elements/SingleSelect/SingleSelect.d.ts

@@ -1,12 +1,12 @@
 import { default as React } from 'react';
 import { SelectProps, Option } from '../Select/types';
 
-type FieldValueType = string | number | Array<string | number> | null;
+export type FieldValueType = string | number | Array<string | number> | null;
 export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
     onChange?: (event: {
         target: Record<string, FieldValueType>;
     }) => void;
-    onValueChange?: Function;
+    onValueChange?: (value: FieldValueType) => void;
     asyncLoadMinChars?: number;
     preload?: boolean;
     isLocked?: boolean;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -64,7 +64,7 @@ import omit from 'lodash/fp/omit';
 var CREATE = "_create_".concat(nanoid(), "_");
 var defaultFilterOption = createFilter();
 var creatableFilterOption = function (option, rawInput) {
-    if ((option === null || option === void 0 ? void 0 : option.value) == CREATE)
+    if ((option === null || option === void 0 ? void 0 : option.value) === CREATE)
         return true;
     return defaultFilterOption(option, rawInput);
 };
@@ -88,7 +88,7 @@ var SingleSelect = function (props) {
         if (!loadOptions)
             return i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
         if (inputValue.length < asyncLoadMinChars)
-            return i18n._({ id: 'components.dropdown.writeMoreChars', message: 'Write at least ${asyncLoadMinChars} characters.' });
+            return i18n._({ id: 'components.dropdown.writeMoreChars', message: "Write at least ".concat(asyncLoadMinChars, " characters.") });
         return i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
     }, [loadOptions, asyncLoadMinChars]);
     var handleLoadOptions = useCallback(function (inputValue) { return __awaiter(void 0, void 0, void 0, function () {
@@ -119,19 +119,21 @@ var SingleSelect = function (props) {
     var _f = useState(options || []), loadedDefaultOptions = _f[0], setLoadedDefaultOptions = _f[1];
     useEffect(function () {
         if (loadOptions && preload && !props.value)
-            loadOptions('', false).then(setLoadedDefaultOptions);
+            loadOptions('', false).then(setLoadedDefaultOptions).catch(console.error);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [loadOptions]); // this is intentional
     var _g = useState(null), storedSelectedOption = _g[0], setStoredSelectedOption = _g[1];
     useEffect(function () {
-        if (initialOptions && initialOptions.length) {
-            var selectedOption = initialOptions.find(function (option) { return option.value == props.value; }) || null;
+        if (initialOptions === null || initialOptions === void 0 ? void 0 : initialOptions.length) {
+            var selectedOption = initialOptions.find(function (option) { return option.value === props.value; }) || null;
             setStoredSelectedOption(selectedOption);
         }
         if (loadOptions && !initialOptions && props.value) {
-            loadOptions(String(props.value), true).then(function (selectedOptions) {
+            loadOptions(String(props.value), true)
+                .then(function (selectedOptions) {
                 setStoredSelectedOption((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) || null);
-            });
+            })
+                .catch(console.error);
         }
         // ignored because of props.value, this only finds option for initial value
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -147,7 +149,7 @@ var SingleSelect = function (props) {
         return __generator(this, function (_e) {
             switch (_e.label) {
                 case 0:
-                    if (!(onCreateOption && (option === null || option === void 0 ? void 0 : option.value) == CREATE)) return [3 /*break*/, 4];
+                    if (!(onCreateOption && (option === null || option === void 0 ? void 0 : option.value) === CREATE)) return [3 /*break*/, 4];
                     if (!((option === null || option === void 0 ? void 0 : option.inputValue) && ((_b = (_a = option === null || option === void 0 ? void 0 : option.inputValue) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) < 2)) return [3 /*break*/, 1];
                     props === null || props === void 0 ? void 0 : props.form.setFieldTouched(name, true, true);
                     props === null || props === void 0 ? void 0 : props.form.setFieldError(name, i18n._({ id: 'form.general.min2Chars', message: 'Minimal length is 2 characters.' }));
@@ -182,17 +184,6 @@ var SingleSelect = function (props) {
             }
         });
     }); }, [onCreateOption, loadOptions, onChange, onValueChange, props === null || props === void 0 ? void 0 : props.form, name]);
-    var handleBlur = useCallback(function (option) {
-        if (onBlur) {
-            onBlur({
-                target: {
-                    name: name,
-                    type: 'blur',
-                    value: getOptionValue(option)
-                }
-            });
-        }
-    }, [name, onBlur]);
     var omitted = ['onValueChange', 'placeholder', 'options', 'loadOptions', 'asyncLoadMinChars'];
     var displayLockedText = isLocked && !disabled;
     var placeholderValue = displayLockedText ? lockedText : placeholder;
@@ -204,6 +195,6 @@ var SingleSelect = function (props) {
             return staticOptions || undefined;
         return staticOptions ? __spreadArray(__spreadArray([], staticOptions, true), [storedSelectedOption], false) : [storedSelectedOption];
     }, [asAsync, loadedDefaultOptions, onCreateOption, options, storedSelectedOption]);
-    return (_jsx(Select, __assign({}, omit(omitted, props), { filterOption: (filterOption || creatableFilterOption), disabled: disabled || isLocked, onChange: handleChange, onBlur: handleBlur, placeholder: placeholderValue, loadingMessage: loadingMessage, noOptionsMessage: noOptionsMessage, loadOptions: asAsync ? handleLoadOptions : undefined, containerVariant: asAsync ? 'search' : undefined, defaultOptions: defaultOptions, options: !asAsync ? options : undefined, isLoading: isCreating || props.isLoading })));
+    return (_jsx(Select, __assign({}, omit(omitted, props), { filterOption: (filterOption || creatableFilterOption), disabled: disabled || isLocked, onChange: handleChange, onBlur: onBlur, placeholder: placeholderValue, loadingMessage: loadingMessage, noOptionsMessage: noOptionsMessage, loadOptions: asAsync ? handleLoadOptions : undefined, containerVariant: asAsync ? 'search' : undefined, defaultOptions: defaultOptions, options: !asAsync ? options : undefined, isLoading: isCreating || props.isLoading })));
 };
 export default SingleSelect;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type SpaceAroundProps = {
     marginTop?: number;
     marginRight?: number;

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,8 +2,8 @@ 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';
+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: 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) {
     var size = _a.size;
     return size;

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: white;\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: neutral30;\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: white;\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: neutral30;\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,154 @@
+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;
+        neutral30: 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,7 +11,9 @@ declare const defaultTheme: {
         lightGray5: string;
         lightGray6: string;
         lightGray7: string;
+        neutral10: string;
         neutral20: string;
+        neutral30: string;
         neutral300: string;
         neutral500: string;
         gray: string;

package/ui/ThemeProvider/themes/default.js

@@ -11,7 +11,9 @@ var defaultTheme = {
         lightGray5: '#A3B3C1',
         lightGray6: '#D2D8DF',
         lightGray7: '#E7EBEF',
+        neutral10: '#FAFBFC',
         neutral20: '#F1F5F9',
+        neutral30: '#F1F5F9',
         neutral300: '#5E6C84',
         neutral500: '#42526E',
         gray: '#8594A5',
@@ -91,10 +93,12 @@ var defaultTheme = {
         magenta70: '#D12771',
         magenta80: '#9F1853',
         magenta90: '#7B1340',
+        // specific place for dark / light mode
+        // sideMenuSelectedText: '#ffffff',
     },
     fonts: {
         primary: 'Inter, sans-serif',
-        heading: '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'],
@@ -104,20 +108,20 @@ var defaultTheme = {
         normal: 400,
         medium: 500,
         semiBold: 600,
-        bold: 700,
+        bold: 700
     },
     letterSpacings: {
         default: null,
         sm: '2px',
         md: '4px',
-        lg: '8px',
+        lg: '8px'
     },
     borders: {
         slim: '1px solid',
         mediumSlim: '2px solid',
         medium: '3px solid',
         mediumThick: '6px solid',
-        thick: '10px solid',
+        thick: '10px solid'
     },
     // ...........................
     radii: {
@@ -125,7 +129,7 @@ var defaultTheme = {
         md: '4px',
         ml: '6px',
         lg: '8px',
-        xl: '16px',
+        xl: '16px'
     },
     shadows: {
         boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.1)',
@@ -142,13 +146,13 @@ var defaultTheme = {
         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)',
+        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',
+        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],
+    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999]
 };
 export default defaultTheme;