@mailstep/design-system 0.6.2-beta.2 → 0.6.2-beta.4

package/ui/Elements/Pagination/index.js

@@ -1,3 +1,3 @@
-import Pagination from './Pagination';
+import Pagination from './Pagination.js';
 export { Pagination };
 export default Pagination;

package/ui/Elements/Pagination/stories/Pagination.stories.js

@@ -1,4 +1,4 @@
-import { Pagination } from '../';
+import { Pagination } from '../index.js';
 var meta = {
     title: 'Elements/Pagination',
     component: Pagination,

package/ui/Elements/Pagination/styled.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled, { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
-import Icon from '../Icon';
+import Icon from '../Icon/index.js';
 export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"])));
 export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"], ["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;

package/ui/Elements/ProgressBar/ProgressBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StyledProgressBar, Progress, ProgressDescription } from './styles';
+import { StyledProgressBar, Progress, ProgressDescription } from './styles.js';
 var ProgressBar = function (_a) {
     var _b = _a.progress, progress = _b === void 0 ? 0 : _b, status = _a.status, errorMessage = _a.errorMessage, noText = _a.noText, variant = _a.variant;
     if (progress > 100 || progress < 0)

package/ui/Elements/ProgressBar/index.js

@@ -1,3 +1,3 @@
-import ProgressBar from './ProgressBar';
+import ProgressBar from './ProgressBar.js';
 export { ProgressBar };
 export default ProgressBar;

package/ui/Elements/ProgressBar/stories/ProgressBar.stories.js

@@ -1,4 +1,4 @@
-import ProgressBar from '../ProgressBar';
+import ProgressBar from '../ProgressBar.js';
 var meta = {
     title: 'Elements/ProgressBar',
     component: ProgressBar,

package/ui/Elements/ProgressBar/styles.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled, { keyframes, css } from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
-import { createRgba } from '../../utils';
+import { createRgba } from '../../utils/index.js';
 export var StyledProgressBar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ", ";\n  color: ", ";\n  background-color: ", ";\n  justify-content: center;\n  border: slim;\n  border-color: ", ";\n  border-radius: md;\n  overflow: hidden;\n"], ["\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ", ";\n  color: ", ";\n  background-color: ", ";\n  justify-content: center;\n  border: slim;\n  border-color: ", ";\n  border-radius: md;\n  overflow: hidden;\n"])), function (props) { return (props.variant === 'thin' ? "12px" : "35px"); }, th('colors.white'), function (props) {
     return props.status === 'finished' ? createRgba(props.theme.colors.success, 0.4) : "".concat(th('colors.red1'));
 }, function (props) { return (props.status === 'finished' ? "".concat(th('colors.success')) : "".concat(th('colors.red1'))); });

package/ui/Elements/Select/Select.js

@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
-import { Wrapper, StyledReactSelect, StyledAsyncSelect } from './styles';
-import { useStylesAndComponents } from './themes';
+import { Wrapper, StyledReactSelect, StyledAsyncSelect } from './styles.js';
+import { useStylesAndComponents } from './themes/index.js';
 import { useTheme } from '@xstyled/styled-components';
-import SpaceAroundWrap from '../SpaceAround';
-import { FieldLabel } from '../Label';
-import { ErrorMessage } from '../ErrorMessage';
+import SpaceAroundWrap from '../SpaceAround/index.js';
+import { FieldLabel } from '../Label/index.js';
+import { ErrorMessage } from '../ErrorMessage/index.js';
 import { i18n } from '@lingui/core';
 var emptyOptions = [];
 var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };

package/ui/Elements/Select/index.js

@@ -1,2 +1,2 @@
-import Select from './Select';
+import Select from './Select.js';
 export default Select;

package/ui/Elements/Select/themes/CustomComponents.js

@@ -30,10 +30,10 @@ import { components } from 'react-select';
 import styled, { th } from '@xstyled/styled-components';
 import { components as selectComponents } from 'react-select';
 import { Trans } from '@lingui/react';
-import Icon from '../../Icon/Icon';
-import { Paragraph3 } from '../../Typography/Typography';
-import Checkbox from '../../../Forms/Checkbox/Checkbox';
-import Toggle from '../../Toggle/Toggle';
+import Icon from '../../Icon/Icon.js';
+import { Paragraph3 } from '../../Typography/Typography.js';
+import Checkbox from '../../../Forms/Checkbox/Checkbox.js';
+import Toggle from '../../Toggle/Toggle.js';
 // Option for big lists
 var SimplifiedOptionInner = function (props) {
     var styles = props.getStyles('option', props);

package/ui/Elements/Select/themes/baseStyles.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import createRgba from '../../../utils/CreateRgba/createRgba';
+import createRgba from '../../../utils/CreateRgba/createRgba.js';
 // style object https://react-select.com/styles
 export var baseStylesConfig = {
     control: function (styles, _a) {

package/ui/Elements/Select/themes/formStyles.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { baseStylesConfig } from './baseStyles';
+import { baseStylesConfig } from './baseStyles.js';
 import { th } from '@xstyled/system';
 // style object https://react-select.com/styles
 export var CustomStyles = __assign(__assign({}, baseStylesConfig), { control: function (styles, _a) {

package/ui/Elements/Select/themes/index.js

@@ -1,5 +1,5 @@
-import { SimplifiedOption, IconValueContainer, CountMultiValue, ChevronOption, DropdownIndicator, CustomInput, ConnectedMenu, } from './CustomComponents';
-import { getCustomTheme as getFormCustomTheme, CustomStyles as FormCustomStyles } from './formStyles';
+import { SimplifiedOption, IconValueContainer, CountMultiValue, ChevronOption, DropdownIndicator, CustomInput, ConnectedMenu, } from './CustomComponents.js';
+import { getCustomTheme as getFormCustomTheme, CustomStyles as FormCustomStyles } from './formStyles.js';
 import { useTheme } from '@xstyled/styled-components';
 import { useMemo } from 'react';
 export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton) {

package/ui/Elements/SimpleLink/index.js

@@ -1,3 +1,3 @@
-import SimpleLink from './SimpleLink';
+import SimpleLink from './SimpleLink.js';
 export { SimpleLink };
 export default SimpleLink;

package/ui/Elements/SingleSelect/SingleSelect.js

@@ -57,7 +57,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 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 Select from '../Select/index.js';
 import omit from 'lodash/fp/omit';
 import { nanoid } from 'nanoid';
 import { i18n } from '@lingui/core';

package/ui/Elements/SingleSelect/index.js

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

package/ui/Elements/SpaceAround/index.js

@@ -1,3 +1,3 @@
-import SpaceAroundWrap from './SpaceAround';
+import SpaceAroundWrap from './SpaceAround.js';
 export { SpaceAroundWrap };
 export default SpaceAroundWrap;

package/ui/Elements/SpaceAround/stories/SpaceAround.stories.js

@@ -1,4 +1,4 @@
-import { SpaceAroundWrap } from '../';
+import { SpaceAroundWrap } from '../index.js';
 var meta = {
     title: 'Elements/SpaceAround',
     component: SpaceAroundWrap,

package/ui/Elements/Spinner/Spinner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Svg, Circle } from './styles';
+import { Svg, Circle } from './styles.js';
 export var appearanceToColorMap = {
     error: 'red1',
     concept: 'bgLightGray1',

package/ui/Elements/Spinner/index.js

@@ -1,3 +1,3 @@
-import Spinner from './Spinner';
+import Spinner from './Spinner.js';
 export { Spinner };
 export default Spinner;

package/ui/Elements/Spinner/stories/Spinner.stories.js

@@ -1,4 +1,4 @@
-import { Spinner } from '../';
+import { Spinner } from '../index.js';
 var meta = {
     title: 'Elements/Spinner',
     component: Spinner,

package/ui/Elements/Tag/index.js

@@ -1,3 +1,3 @@
-import Tag from './Tag';
-export { palletes } from './palletes';
+import Tag from './Tag.js';
+export { palletes } from './palletes.js';
 export default Tag;

package/ui/Elements/Tag/stories/Tag.stories.js

@@ -1,5 +1,5 @@
-import PredefinedTags from './components/predefinedTags';
-import Tag from '../';
+import PredefinedTags from './components/predefinedTags.js';
+import Tag from '../index.js';
 var meta = {
     title: 'Elements/Tag',
     component: Tag,

package/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { x } from '@xstyled/styled-components';
-import Tag from '../../';
-import { palletes } from '../../palletes';
+import Tag from '../../index.js';
+import { palletes } from '../../palletes.js';
 var PredefinedTags = function () {
     return (_jsx(x.div, { display: "flex", flexWrap: "wrap", fontFamily: "monospace", children: Object.keys(palletes).map(function (pallete, i) { return (_jsx(Tag, { color: palletes[pallete].color, textColor: palletes[pallete].textColor, children: pallete })); }) }));
 };

package/ui/Elements/Text/index.js

@@ -1,2 +1,2 @@
-import Text from './Text';
+import Text from './Text.js';
 export { Text };

package/ui/Elements/Text/stories/Text.stories.js

@@ -1,4 +1,4 @@
-import Text from '../Text';
+import Text from '../Text.js';
 var meta = {
     title: 'Elements/Text',
     component: Text,

package/ui/Elements/Toast/Toast.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
-import { Icon } from '../Icon';
+import { Icon } from '../Icon/index.js';
 var toastTitleMap = {
     info: 'Info',
     success: 'Success',

package/ui/Elements/Toast/index.js

@@ -1,3 +1,3 @@
-import Toast from './Toast';
+import Toast from './Toast.js';
 export { Toast };
 export default Toast;

package/ui/Elements/Toggle/Toggle.js

@@ -26,8 +26,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from '@xstyled/styled-components';
-import { FieldLabel } from '../Label';
-import { SpaceAroundWrap } from '../SpaceAround';
+import { FieldLabel } from '../Label/index.js';
+import { SpaceAroundWrap } from '../SpaceAround/index.js';
 var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var $labelPosition = _a.$labelPosition;
     return ($labelPosition === 'left' ? 'display: flex; align-items: center; margin-top: 1rem' : '');

package/ui/Elements/Toggle/index.js

@@ -1,3 +1,3 @@
-import Toggle from './Toggle';
+import Toggle from './Toggle.js';
 export { Toggle };
 export default Toggle;

package/ui/Elements/Toggle/stories/Toggle.stories.js

@@ -1,4 +1,4 @@
-import Toggle from '../Toggle';
+import Toggle from '../Toggle.js';
 var meta = {
     title: 'Elements/Toggle',
     component: Toggle,

package/ui/Elements/Typography/Typography.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Text as BaseText } from '../Text';
+import { Text as BaseText } from '../Text/index.js';
 export var Text = function (props) { return _jsx(BaseText, __assign({}, props, { fontWeight: props.variant })); };
 Text.defaultProps = { fontFamily: 'primary' };
 // Paragraphs

package/ui/Elements/Typography/index.js

@@ -1,3 +1,3 @@
-import { Text } from './Typography';
-export * from './Typography';
+import { Text } from './Typography.js';
+export * from './Typography.js';
 export default Text;

package/ui/Elements/Typography/stories/Typography.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5 } from '../';
+import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5 } from '../index.js';
 var meta = {
     title: 'Elements/Typography',
     tags: ['autodocs'],

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useId } from 'react';
-import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
+import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles.js';
 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;

package/ui/Forms/Checkbox/index.js

@@ -1,3 +1,3 @@
-import Checkbox from './Checkbox';
+import Checkbox from './Checkbox.js';
 export { Checkbox };
 export default Checkbox;

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

@@ -1,4 +1,4 @@
-import Checkbox from '../Checkbox';
+import Checkbox from '../Checkbox.js';
 var meta = {
     title: 'Forms/Checkbox',
     component: Checkbox,

package/ui/Forms/Checkbox/styles.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-import { Icon } from '../../Elements/Icon';
+import { Icon } from '../../Elements/Icon/index.js';
 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/Input.js

@@ -22,12 +22,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
-import { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
-import { FieldLabel } from '../../Elements/Label';
-import { SpaceAroundWrap } from '../../Elements/SpaceAround';
-import { ErrorMessage } from '../../Elements/ErrorMessage';
-import { Icon } from '../../Elements/Icon';
-import { Spinner } from '../../Elements/Spinner';
+import { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles.js';
+import { FieldLabel } from '../../Elements/Label/index.js';
+import { SpaceAroundWrap } from '../../Elements/SpaceAround/index.js';
+import { ErrorMessage } from '../../Elements/ErrorMessage/index.js';
+import { Icon } from '../../Elements/Icon/index.js';
+import { Spinner } from '../../Elements/Spinner/index.js';
 var allowedInputTypes = ['text', 'number', 'password'];
 export var Input = function (_a) {
     var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "variant", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);

package/ui/Forms/Input/index.js

@@ -1,3 +1,3 @@
-import { Input } from './Input';
+import { Input } from './Input.js';
 export { Input };
 export default Input;

package/ui/Forms/Input/stories/Input.stories.js

@@ -1,4 +1,4 @@
-import { Input } from '../Input';
+import { Input } from '../Input.js';
 var meta = {
     title: 'Forms/Input',
     component: Input,

package/ui/Forms/RadioButton/RadioButton.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from './styles';
+import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from './styles.js';
 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"]);

package/ui/Forms/RadioButton/index.js

@@ -1,3 +1,3 @@
-import RadioButton from './RadioButton';
+import RadioButton from './RadioButton.js';
 export { RadioButton };
 export default RadioButton;

package/ui/Forms/RadioButton/stories/RadioButton.stories.js

@@ -1,4 +1,4 @@
-import RadioButton from '../RadioButton';
+import RadioButton from '../RadioButton.js';
 var meta = {
     title: 'Forms/RadioButton',
     component: RadioButton,

package/ui/Forms/TextArea/TextArea.js

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     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';
+import { StyledTextArea, TextAreaWrap, InnerWrap, BorderWrap, IconWrap } from './styles.js';
+import { SpaceAroundWrap } from '../../Elements/SpaceAround/index.js';
+import FaIcon from '../../Elements/Icon/Icon.js';
+import { FieldLabel } from '../../Elements/Label/index.js';
+import ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage.js';
 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;

package/ui/Forms/TextArea/index.js

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

package/ui/ThemeProvider/ThemeProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ThemeProvider, Preflight } from '@xstyled/styled-components';
-import themes from './themes';
+import themes from './themes/index.js';
 import { createContext } from 'react';
 export var LanguageContext = createContext('en');
 var MailstepThemeProvider = function (_a) {

package/ui/ThemeProvider/index.js

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

package/ui/ThemeProvider/themes/index.js

@@ -1,6 +1,6 @@
-import defaultTheme from './default';
-import light from './light';
-import mailwise from './mailwise';
+import defaultTheme from './default.js';
+import light from './light.js';
+import mailwise from './mailwise.js';
 var themes = {
     default: defaultTheme,
     light: light,