@mailstep/design-system 0.5.1-beta.2 → 0.6.1

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -0,0 +1,197 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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;
+    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.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createFilter } from 'react-select';
+import Select from '../Select';
+import omit from 'lodash/fp/omit';
+import { nanoid } from 'nanoid';
+import { i18n } from '@lingui/core';
+var CREATE = "_create_".concat(nanoid(), "_");
+var defaultFilterOption = createFilter();
+var creatableFilterOption = function (option, rawInput) {
+    if ((option === null || option === void 0 ? void 0 : option.value) == CREATE)
+        return true;
+    return defaultFilterOption(option, rawInput);
+};
+var getOptionValue = function (selectedOption) {
+    if (selectedOption === null) {
+        return null;
+    }
+    else if (Array.isArray(selectedOption)) {
+        return selectedOption.map(function (option) { return option.value; });
+    }
+    else {
+        return selectedOption.value;
+    }
+};
+var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
+var SingleSelect = function (props) {
+    var name = props.name, onChange = props.onChange, onBlur = props.onBlur, onValueChange = props.onValueChange, loadOptions = props.loadOptions, _a = props.asyncLoadMinChars, asyncLoadMinChars = _a === void 0 ? 0 : _a, isLocked = props.isLocked, _b = props.lockedText, lockedText = _b === void 0 ? i18n._({ id: 'components.dropdown.notReact', message: 'Select related values first...' }) : _b, disabled = props.disabled, _c = props.placeholder, placeholder = _c === void 0 ? i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) : _c, preload = props.preload, initialOptions = props.initialOptions, onCreateOption = props.onCreateOption, options = props.options, filterOption = props.filterOption;
+    var _d = useState(false), isCreating = _d[0], setIsCreating = _d[1];
+    var asAsync = !!loadOptions || !!onCreateOption;
+    var noOptionsMessage = useCallback(function (inputValue) {
+        return loadOptions && inputValue.length < asyncLoadMinChars
+            ? i18n._({
+                id: 'components.dropdown.writeMoreChars',
+                message: 'Write at least ${asyncLoadMinChars} characters.',
+            })
+            : i18n._({ id: 'components.dropdown.noOptions', message: 'No options' });
+    }, [loadOptions, asyncLoadMinChars]);
+    var handleLoadOptions = useCallback(function (inputValue) {
+        if (onCreateOption) {
+            if (!inputValue.trim())
+                return Promise.resolve(options || []);
+            return Promise.resolve(__spreadArray(__spreadArray([], (options || []), true), [
+                {
+                    value: CREATE,
+                    label: "".concat(inputValue, " (").concat(i18n._({ id: 'components.dropdown.newOption', message: 'new value' }), ")"),
+                    inputValue: inputValue,
+                },
+            ], false));
+        }
+        else if (!loadOptions || inputValue.length < asyncLoadMinChars) {
+            return Promise.resolve([]);
+        }
+        else {
+            return loadOptions(inputValue, false);
+        }
+    }, [onCreateOption, loadOptions, asyncLoadMinChars, options]);
+    var _e = useState(options || []), loadedDefaultOptions = _e[0], setLoadedDefaultOptions = _e[1];
+    useEffect(function () {
+        if (loadOptions && preload && !props.value)
+            loadOptions('', false).then(setLoadedDefaultOptions);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loadOptions]); // this is intentional
+    var _f = useState(null), storedSelectedOption = _f[0], setStoredSelectedOption = _f[1];
+    useEffect(function () {
+        if (initialOptions && 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) { return setStoredSelectedOption((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0]) || null); });
+        }
+        // ignored because of props.value, this only finds option for initial value
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialOptions, setStoredSelectedOption]);
+    var handleChange = useCallback(function (option) { return __awaiter(void 0, void 0, void 0, function () {
+        var value, newOption;
+        var _a, _b, _c, _d;
+        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 (!((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.' }));
+                    return [2 /*return*/];
+                case 1:
+                    setIsCreating(true);
+                    return [4 /*yield*/, onCreateOption((_d = (_c = option === null || option === void 0 ? void 0 : option.inputValue) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '')];
+                case 2:
+                    newOption = _e.sent();
+                    value = getOptionValue(newOption);
+                    setIsCreating(false);
+                    _e.label = 3;
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    value = getOptionValue(option);
+                    loadOptions && setStoredSelectedOption(option);
+                    _e.label = 5;
+                case 5:
+                    if (onChange) {
+                        onChange({
+                            target: {
+                                name: name !== null && name !== void 0 ? name : '',
+                                type: 'change',
+                                value: value,
+                            },
+                        });
+                    }
+                    if (onValueChange) {
+                        onValueChange(value);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [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;
+    var defaultOptions = useMemo(function () {
+        if (!asAsync)
+            return undefined; // relates only to asAsync true
+        var staticOptions = onCreateOption ? options : loadedDefaultOptions;
+        if (!storedSelectedOption)
+            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 })));
+};
+export default SingleSelect;

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

@@ -0,0 +1,2 @@
+import SingleSelect from './SingleSelect';
+export default SingleSelect;

package/ui/Elements/SingleSelect/index.js

@@ -0,0 +1,2 @@
+import SingleSelect from './SingleSelect';
+export default SingleSelect;

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export type TextProps = {
-    children?: string | number | JSX.Element | (JSX.Element | undefined)[];
+    children?: ReactNode | ReactNode[];
     fontSize?: number;
     fontWeight?: string;
     variant?: 'normal' | 'medium' | 'semiBold' | 'bold';

package/ui/Elements/Toggle/Toggle.d.ts

@@ -1,3 +1,3 @@
 import { Props } from './types';
-declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, ...rest }: Props) => JSX.Element;
+declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, readOnly, ...rest }: Props) => JSX.Element;
 export default Toggle;

package/ui/Elements/Toggle/Toggle.js

@@ -45,8 +45,8 @@ var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTem
 });
 var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
 var Toggle = function (_a) {
-    var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "variant", "spaceBetween"]);
-    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, "$labelPosition": labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch") }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
+    var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "variant", "spaceBetween", "readOnly"]);
+    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, "$labelPosition": labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
 };
 export default Toggle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Toggle/stories/Toggle.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, ...rest }: import("../types").Props) => JSX.Element;
+    component: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, readOnly, ...rest }: import("../types").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };

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

@@ -17,5 +17,6 @@ export type Props = {
     disabled?: boolean;
     labelPosition?: 'default' | 'left';
     variant?: 'primary' | 'grid';
+    readOnly?: boolean;
 };
 export {};

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useId } from 'react';
 import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
 import { th, useTheme } from '@xstyled/styled-components';
 var Checkbox = function (_a) {
     var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;
     var theme = useTheme();
     var themeSize = th.fontSize(size)({ theme: theme });
-    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name && "".concat(name, "Checkbox") }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { children: label })] }));
+    var id = useId();
+    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name && "".concat(name, "Checkbox"), id: id }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { htmlFor: id, children: label })] }));
 };
 export default memo(Checkbox);

package/ui/Forms/Checkbox/stories/Checkbox.stories.js

@@ -9,7 +9,7 @@ export default meta;
 export var CheckboxChecked = {
     args: {
         checked: true,
-        onChange: function () { },
+        onChange: function () { return console.log('Clicked'); },
         label: 'Checked',
     },
 };

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

@@ -8,4 +8,4 @@ export declare const CheckIcon: import("styled-components").StyledComponent<({ i
 export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/Checkbox/styles.js

@@ -22,5 +22,5 @@ export var CheckboxWrap = styled.div(templateObject_3 || (templateObject_3 = __m
     var size = _a.size;
     return size;
 });
-export var Label = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
+export var Label = styled.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactNode, RefObject, SetStateAction } from 'react';
+import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
 export type SpaceAround = boolean | SpaceAroundProps;
 export type SpaceAroundProps = {
     marginTop?: number;
@@ -27,7 +27,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     onEnter?: () => void;
     onClear?: () => void;
     alwaysShowClear?: boolean;
-    error?: string;
+    error?: string | ReactElement;
     isInvalid?: boolean;
     spaceAround?: SpaceAround;
     isLoading?: boolean;

package/ui/Forms/RadioButton/RadioButton.js

@@ -22,8 +22,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from './styles';
+import { useId } from 'react';
 var RadioButton = function (_a) {
     var label = _a.label, id = _a.id, name = _a.name, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onChange = _a.onChange, rest = __rest(_a, ["label", "id", "name", "disabled", "onChange"]);
-    return (_jsxs(Wrapper, { children: [_jsxs(Item, { children: [_jsx(StyledRadio, __assign({ type: "radio", id: id, name: name, disabled: disabled, onChange: onChange }, rest)), _jsx(PaintoverLayer, { disabled: disabled, children: _jsx(CenterDot, {}) })] }), label && _jsx(Label, { children: label })] }));
+    var customId = useId();
+    var inputId = id || customId;
+    return (_jsxs(Wrapper, { children: [_jsxs(Item, { children: [_jsx(StyledRadio, __assign({ type: "radio", id: inputId, name: name, disabled: disabled, onChange: onChange }, rest)), _jsx(PaintoverLayer, { disabled: disabled, children: _jsx(CenterDot, {}) })] }), label && _jsx(Label, { htmlFor: inputId, children: label })] }));
 };
 export default RadioButton;

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

@@ -7,4 +7,4 @@ export declare const CenterDot: import("styled-components").StyledComponent<"spa
 export declare const StyledRadio: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
     disabled: boolean;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/RadioButton/styles.js

@@ -11,5 +11,5 @@ export var StyledRadio = styled.input(templateObject_5 || (templateObject_5 = __
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 });
-export var Label = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
+export var Label = styled.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,20 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import { SpaceAround } from '../Input/types';
+export type Props = {
+    name: string;
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    error?: boolean | string;
+    isInvalid?: boolean;
+    spaceAround?: SpaceAround;
+    className?: string;
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit';
+    icon?: string;
+    rows?: HTMLTextAreaElement['rows'];
+    Footer?: JSX.Element;
+};
+declare const TextArea: ({ name, label, value, disabled, error, spaceAround, isInvalid, className, resize, icon, rows, Footer, ...rest }: Props) => JSX.Element;
+export default TextArea;

package/ui/Forms/TextArea/TextArea.js

@@ -0,0 +1,34 @@
+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);
+};
+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 { StyledTextArea, TextAreaWrap, InnerWrap, BorderWrap, IconWrap } from './styles';
+import { SpaceAroundWrap } from '../../Elements/SpaceAround';
+import FaIcon from '../../Elements/Icon/Icon';
+import { FieldLabel } from '../../Elements/Label';
+import ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage';
+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, "$isInvalid": $isInvalid, 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

@@ -0,0 +1,2 @@
+import TextArea from './TextArea';
+export default TextArea;

package/ui/Forms/TextArea/index.js

@@ -0,0 +1,2 @@
+import TextArea from './TextArea';
+export default TextArea;

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

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

package/ui/Forms/TextArea/styles.js

@@ -0,0 +1,31 @@
+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/ThemeProvider/ThemeProvider.d.ts

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

package/ui/ThemeProvider/ThemeProvider.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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;
-    return (_jsxs(ThemeProvider, { theme: themes[theme], children: [preflight && _jsx(Preflight, {}), children] }));
+    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] }) }));
 };
 export default MailstepThemeProvider;

package/ui/ThemeProvider/types.d.ts

@@ -47,4 +47,5 @@ export interface Props {
     children: React.ReactNode;
     theme: 'default' | 'light' | 'mailwise';
     preflight?: boolean;
+    language?: string;
 }

package/ui/index.d.ts

@@ -18,7 +18,6 @@ import Line from './Elements/Line';
 import Link from './Elements/Link';
 import Logo from './Elements/Logo';
 import Pagination from './Elements/Pagination';
-import Paragraph from './Elements/Paragraph';
 import Portal from './Elements/Portal';
 import ProgressBar from './Elements/ProgressBar';
 import SimpleLink from './Elements/SimpleLink';
@@ -33,7 +32,15 @@ import Input from './Forms/Input';
 import RadioButton from './Forms/RadioButton';
 import ThemeProvider from './ThemeProvider';
 import utils from './utils';
-export { Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, Badge, BorderedBox, Button, Dropdown, ErrorMessage, Icon, Image, Label, Line, Link, Logo, Pagination, Paragraph, Portal, ProgressBar, SimpleLink, SpaceAround, Spinner, Tag, Toast, Toggle, Typography, Checkbox, Input, RadioButton, ThemeProvider, utils };
+import DatePicker from './Elements/DatePicker';
+import CommonGrid from './Blocks/CommonGrid';
+import Popover from './Blocks/Popover';
+import SingleSelect from './Elements/SingleSelect';
+import MultiSelect from './Elements/MultiSelect';
+import Select from './Elements/Select';
+import DropdownSelect from './Elements/DropdownSelect';
+import TextArea from './Forms/TextArea';
+export { DropdownSelect, DatePicker, CommonGrid, Popover, SingleSelect, MultiSelect, Select, Card, CornerDialog, ImageList, LightBox, Modal, Tabs, Alert, Avatar, 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, };
 export * from './Blocks/CornerDialog';
 export * from './Blocks/ImageList';
 export * from './Blocks/LightBox';
@@ -54,7 +61,6 @@ export * from './Elements/Line';
 export * from './Elements/Link';
 export * from './Elements/Logo';
 export * from './Elements/Pagination';
-export * from './Elements/Paragraph';
 export * from './Elements/Portal';
 export * from './Elements/ProgressBar';
 export * from './Elements/SimpleLink';
@@ -69,3 +75,11 @@ 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/MultiSelect';
+export * from './Elements/Select';
+export * from './Elements/DropdownSelect';
+export * from './Forms/TextArea';