@mailstep/design-system 0.8.25 → 0.8.26-beta.0

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

@@ -1,77 +0,0 @@
-import { Input } from '../Input';
-var meta = {
-    title: 'Forms/Input',
-    component: Input,
-    argTypes: {}
-};
-export default meta;
-export var Primary = {
-    args: {
-        type: 'text',
-        label: 'Primary Input',
-        appearance: 'primary',
-        defaultValue: "primary text"
-    },
-};
-export var Grid = {
-    args: {
-        type: 'text',
-        label: 'Grid Input',
-        appearance: 'grid',
-        defaultValue: "grid text"
-    },
-};
-export var Disabled = {
-    args: {
-        type: 'text',
-        label: 'Disabled Input',
-        appearance: 'primary',
-        disabled: true
-    },
-};
-export var WithIcon = {
-    args: {
-        type: 'text',
-        label: 'With Icon Input',
-        appearance: 'primary',
-        icon: 'calendar',
-        iconPlacement: 'left'
-    },
-};
-export var Loading = {
-    args: {
-        type: 'text',
-        label: 'Loading Input',
-        appearance: 'primary',
-        isLoading: true
-    },
-};
-export var WithSuffix = {
-    args: {
-        type: 'text',
-        suffix: "Eur",
-        label: "Input with a suffix"
-    },
-};
-export var Password = {
-    args: {
-        type: 'password',
-        label: 'Password Input',
-        defaultValue: "Password text"
-    },
-};
-export var Checkbox = {
-    args: {
-        type: 'checkbox',
-        label: 'checkbox input',
-    },
-};
-export var ForceFocus = {
-    args: {
-        type: 'text',
-        label: 'Force Focus Input',
-        forceFocus: true,
-        autoFocus: true,
-        onEnter: function () { return console.log('onEnter'); }
-    },
-};

package/ui/Forms/Input/styles.js

@@ -1,67 +0,0 @@
-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, system, th } from '@xstyled/styled-components';
-var resolvePaddingRight = function (props) {
-    var $icon = props.$icon, $iconPlacement = props.$iconPlacement, $isClearable = props.$isClearable, $hasSuffix = props.$hasSuffix;
-    var padding = 2;
-    if ($icon && $iconPlacement === 'right')
-        padding += 1;
-    if ($isClearable)
-        padding += 1;
-    if ($hasSuffix)
-        padding += 2;
-    return String(padding);
-};
-export var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n\n  // top: 52%; // TODO fix\n  // transform: translateY(-50%); // TODO why does this do the overlap bug\n  left: ", ";\n  right: ", ";\n\n  svg {\n    stroke: lightGray3;\n    cursor: pointer;\n    color: ", ";\n  }\n"], ["\n  position: absolute;\n\n  // top: 52%; // TODO fix\n  // transform: translateY(-50%); // TODO why does this do the overlap bug\n  left: ", ";\n  right: ", ";\n\n  svg {\n    stroke: lightGray3;\n    cursor: pointer;\n    color: ", ";\n  }\n"])), function (_a) {
-    var right = _a.right;
-    return (right ? 'auto' : '1em');
-}, function (_a) {
-    var right = _a.right;
-    return (right ? '0.5em' : 'auto');
-}, function (_a) {
-    var $isInvalid = _a.$isInvalid, hasValue = _a.hasValue, disabled = _a.disabled;
-    return $isInvalid ? th.color('red1') : disabled || !hasValue ? th.color('lightGray6') : th.color('blue2');
-});
-export var ClearableInputIcon = styled(InputIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  svg {\n    color: gray1;\n  }\n"], ["\n  svg {\n    color: gray1;\n  }\n"])));
-export var IconsController = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"], ["\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"])));
-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) {
-    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) {
-    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        "]))) : '';
-}, function (_a) {
-    var variant = _a.variant;
-    return variant === 'gray'
-        ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background-color: neutral20;\n          :focus {\n            background-color: neutral20;\n          }\n        "], ["\n          background-color: neutral20;\n          :focus {\n            background-color: neutral20;\n          }\n        "]))) : '';
-});
-export var InputWrap = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-export var Suffix = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 14px;\n  font-weight: 700;\n  height: 100%;\n  width: 40px;\n  padding: 2;\n  color: typoPrimary;\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: slim;\n  border-top-right-radius: lg;\n  border-bottom-right-radius: lg;\n  border-left: none;\n\n  ", ";\n\n  input:focus ~ &,\n  textarea:focus ~ & {\n    border-color: blue2;\n  }\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 14px;\n  font-weight: 700;\n  height: 100%;\n  width: 40px;\n  padding: 2;\n  color: typoPrimary;\n  font-family: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: slim;\n  border-top-right-radius: lg;\n  border-bottom-right-radius: lg;\n  border-left: none;\n\n  ", ";\n\n  input:focus ~ &,\n  textarea:focus ~ & {\n    border-color: blue2;\n  }\n"])), th('fonts.primary'), function (_a) {
-    var $isPointer = _a.$isPointer;
-    return $isPointer
-        ? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          cursor: pointer;\n        "], ["\n          cursor: pointer;\n        "]))) : '';
-});
-export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: relative;\n  color: ", ";\n  & > * {\n    border-color: ", ";\n    color: ", ";\n  }\n  :hover > * {\n    border-color: ", ";\n  }\n  &:focus-within {\n    color: typoPrimary;\n  }\n  .primary {\n    line-height: 0;\n    height: 38px;\n    border-radius: lg;\n    ~ ", " {\n      top: 10px;\n    }\n  }\n  .grid {\n    line-height: 1.2px;\n    border-radius: md;\n    ~ ", " {\n      top: 7px;\n    }\n  }\n  .left {\n    padding-left: ", ";\n  }\n  .right {\n    padding-right: 1.4em;\n    padding-left: 1em;\n  }\n"], ["\n  position: relative;\n  color: ", ";\n  & > * {\n    border-color: ", ";\n    color: ", ";\n  }\n  :hover > * {\n    border-color: ", ";\n  }\n  &:focus-within {\n    color: typoPrimary;\n  }\n  .primary {\n    line-height: 0;\n    height: 38px;\n    border-radius: lg;\n    ~ ", " {\n      top: 10px;\n    }\n  }\n  .grid {\n    line-height: 1.2px;\n    border-radius: md;\n    ~ ", " {\n      top: 7px;\n    }\n  }\n  .left {\n    padding-left: ", ";\n  }\n  .right {\n    padding-right: 1.4em;\n    padding-left: 1em;\n  }\n"])), function (_a) {
-    var $isInvalid = _a.$isInvalid;
-    return ($isInvalid ? th.color('red1') : th.color('gray'));
-}, function (_a) {
-    var $isInvalid = _a.$isInvalid, variant = _a.variant;
-    return $isInvalid ? th.color('red1') : variant === 'gray' ? th.color('neutral20') : th.color('lightGray6');
-}, function (_a) {
-    var hasValue = _a.hasValue;
-    return (hasValue ? th.color('typoPrimary') : th.color('gray'));
-}, function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? th.color('lightGray3') : th.color('gray5'));
-}, InputIcon, InputIcon, function (_a) {
-    var $icon = _a.$icon;
-    return ($icon ? '3em' : '1em');
-});
-export var Tooltip = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: white;\n    color: red1;\n    border-color: red1;\n    border: 1px solid;\n    text-align: center;\n    border-radius: lg;\n    padding: 1 3;\n    margin: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 0px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ", " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"], ["\n  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: white;\n    color: red1;\n    border-color: red1;\n    border: 1px solid;\n    text-align: center;\n    border-radius: lg;\n    padding: 1 3;\n    margin: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 0px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ", " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"])), th.color('red1'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/ui/Forms/Input/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Forms/RadioButton/RadioButton.js

@@ -1,32 +0,0 @@
-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 { useId } from 'react';
-import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from './styles';
-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"]);
-    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/index.js

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

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

@@ -1,38 +0,0 @@
-import RadioButton from '../RadioButton';
-var meta = {
-    title: 'Forms/RadioButton',
-    component: RadioButton,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var RadioButtonChecked = {
-    args: {
-        label: 'Radio button',
-        checked: true,
-        onChange: function () { return console.log('onChange'); },
-    },
-};
-export var RadioButtonUnchecked = {
-    args: {
-        label: 'Radio button',
-        checked: false,
-        onChange: function () { return console.log('onChange'); },
-    },
-};
-export var RadioButtonDisabledChecked = {
-    args: {
-        label: 'Radio button',
-        checked: true,
-        disabled: true,
-        onChange: function () { return console.log('onChange'); },
-    },
-};
-export var RadioButtonDisabledUnchecked = {
-    args: {
-        label: 'Radio button',
-        checked: false,
-        disabled: true,
-        onChange: function () { return console.log('onChange'); },
-    },
-};

package/ui/Forms/RadioButton/styles.js

@@ -1,15 +0,0 @@
-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 from '@xstyled/styled-components';
-export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: auto;\n  width: auto;\n  box-sizing: border-box;\n"], ["\n  display: flex;\n  align-items: center;\n  height: auto;\n  width: auto;\n  box-sizing: border-box;\n"])));
-export var Item = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  width: 18px;\n  height: 18px;\n  & > span > span {\n    width: 10px;\n    height: 10px;\n  }\n  & > * {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n"], ["\n  display: flex;\n  position: relative;\n  width: 18px;\n  height: 18px;\n  & > span > span {\n    width: 10px;\n    height: 10px;\n  }\n  & > * {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n"])));
-export var PaintoverLayer = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  background-color: white;\n  border: 1.5px solid;\n  border-color: lightGray5;\n  pointer-events: none;\n  cursor: pointer;\n  position: relative;\n\n  & span {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    box-sizing: border-box;\n    border-radius: 50%;\n    transition: opacity 100ms ease-out;\n    background-color: white;\n  }\n\n  input[type='radio']:checked + & {\n    border-color: red1;\n  }\n\n  input[type='radio']:disabled + & {\n    border-color: gray1;\n  }\n\n  input[type='radio']:not(:disabled):not(:checked):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='radio']:hover:not(:disabled):not(:checked) + & > span,\n  input[type='radio']:checked:disabled + & > span {\n    background-color: gray1;\n  }\n\n  input[type='radio']:checked + & > span {\n    background-color: red1;\n  }\n"], ["\n  border-radius: 50%;\n  background-color: white;\n  border: 1.5px solid;\n  border-color: lightGray5;\n  pointer-events: none;\n  cursor: pointer;\n  position: relative;\n\n  & span {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    box-sizing: border-box;\n    border-radius: 50%;\n    transition: opacity 100ms ease-out;\n    background-color: white;\n  }\n\n  input[type='radio']:checked + & {\n    border-color: red1;\n  }\n\n  input[type='radio']:disabled + & {\n    border-color: gray1;\n  }\n\n  input[type='radio']:not(:disabled):not(:checked):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='radio']:hover:not(:disabled):not(:checked) + & > span,\n  input[type='radio']:checked:disabled + & > span {\n    background-color: gray1;\n  }\n\n  input[type='radio']:checked + & > span {\n    background-color: red1;\n  }\n"])));
-export var CenterDot = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 10px;\n  height: 10px;\n"], ["\n  width: 10px;\n  height: 10px;\n"])));
-export var StyledRadio = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  opacity: 0;\n  border-radius: 50%;\n  width: 18px;\n  height: 18px;\n  cursor: ", ";\n  margin: 0;\n"], ["\n  opacity: 0;\n  border-radius: 50%;\n  width: 18px;\n  height: 18px;\n  cursor: ", ";\n  margin: 0;\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 'default' : 'pointer');
-});
-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/RadioButton/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Forms/TextArea/TextArea.js

@@ -1,34 +0,0 @@
-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 ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage';
-import FaIcon from '../../Elements/Icon/Icon';
-import { FieldLabel } from '../../Elements/Label';
-import { SpaceAroundWrap } from '../../Elements/SpaceAround';
-import { StyledTextArea, TextAreaWrap, InnerWrap, BorderWrap, IconWrap } from './styles';
-var TextArea = function (_a) {
-    var name = _a.name, label = _a.label, value = _a.value, disabled = _a.disabled, error = _a.error, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, className = _a.className, resize = _a.resize, icon = _a.icon, _d = _a.rows, rows = _d === void 0 ? 4 : _d, Footer = _a.Footer, rest = __rest(_a, ["name", "label", "value", "disabled", "error", "spaceAround", "isInvalid", "className", "resize", "icon", "rows", "Footer"]);
-    var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, children: [_jsxs(TextAreaWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(BorderWrap, { "$isInvalid": $isInvalid, disabled: disabled, children: [_jsxs(InnerWrap, { children: [icon && (_jsx(IconWrap, { children: _jsx(FaIcon, { icon: icon }) })), _jsx(StyledTextArea, __assign({ name: name, value: value, disabled: disabled, className: className, "$isInvalid": $isInvalid, "$resize": resize }, rest, { rows: rows }))] }), Footer] })] }), error && _jsx(ErrorMessage, { children: error })] }));
-};
-export default TextArea;

package/ui/Forms/TextArea/index.js

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

package/ui/Forms/TextArea/styles.js

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

package/ui/System/Fonts/index.js

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

package/ui/ThemeProvider/ThemeProvider.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext } from 'react';
-import { ThemeProvider, Preflight } from '@xstyled/styled-components';
-import themes from './themes';
-export var LanguageContext = createContext('en');
-var MailstepThemeProvider = function (_a) {
-    var children = _a.children, _b = _a.theme, theme = _b === void 0 ? 'default' : _b, _c = _a.preflight, preflight = _c === void 0 ? true : _c, _d = _a.language, language = _d === void 0 ? 'en' : _d;
-    return (_jsx(LanguageContext.Provider, { value: language, children: _jsxs(ThemeProvider, { theme: themes[theme], children: [preflight && _jsx(Preflight, {}), children] }) }));
-};
-export default MailstepThemeProvider;

package/ui/ThemeProvider/index.js

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

package/ui/ThemeProvider/themes/default.js

@@ -1,154 +0,0 @@
-var defaultTheme = {
-    breakpoints: ['0'],
-    colors: {
-        white: '#FFFFFF',
-        bgLightGray: '#FAFBFC',
-        bgLightGray1: '#F1F5F9',
-        lightGray1: '#F5F7FA',
-        lightGray2: '#EFF3F8',
-        lightGray3: '#D4D8DE',
-        lightGray4: '#B9BFC9',
-        lightGray5: '#A3B3C1',
-        lightGray6: '#D2D8DF',
-        lightGray7: '#E7EBEF',
-        neutral20: '#F1F5F9',
-        neutral300: '#5E6C84',
-        neutral500: '#42526E',
-        gray: '#8594A5',
-        gray1: '#7A90A1',
-        gray2: '#9AA1A7',
-        gray3: '#5F6C76',
-        gray4: '#455665',
-        gray5: '#647483',
-        blue1: '#2C4052',
-        blue2: '#22394E',
-        blue3: '#162C3F',
-        blue4: '#0C1F2F',
-        textPrimary: '#091E42',
-        textTertiary: '#7A869A',
-        typoPrimary: '#22394E',
-        blue10: '#F3F9FF',
-        blue20: '#DCEFFF',
-        blue30: '#BFE0FF',
-        blue40: '#6FADFF',
-        blue50: '#2684FF',
-        blue60: '#0065FF',
-        blue70: '#0052CC',
-        blue80: '#0747A6',
-        blue90: '#1d3557',
-        teal20: '#E6FCFF',
-        teal40: '#a8dadc',
-        teal50: '#1aa1a7',
-        teal60: '#00B1D0',
-        teal70: '#1aa1da',
-        teal80: '#06718C',
-        teal90: '#035361',
-        green10: '#F2FFF5',
-        green20: '#DEFBE6',
-        green30: '#b8ecb8',
-        green50: '#81dd91',
-        green60: '#00A445',
-        green70: '#198038',
-        green80: '#0E6027',
-        green90: '#067164',
-        green: '#13CE62',
-        successColor: '#24A148',
-        darkGreen: '#00A445',
-        orange20: '#FFF3E0',
-        orange30: '#FFE6CC',
-        orange50: '#ff9f43',
-        orange60: '#FF9800',
-        orange80: '#9E4800',
-        yellow10: '#FFFDE8',
-        yellow20: '#FFF9C4',
-        yellow60: '#FFE600',
-        yellow70: '#FFD702',
-        yellow1: '#FFD702',
-        yellow2: '#F2E871',
-        red10: '#FFF6F4',
-        red20: '#FFEBE6',
-        red30: '#FFDAD1',
-        red50: '#ff7c7b',
-        red70: '#CF2013',
-        red1: '#DB2B19',
-        red2: '#E94324',
-        red3: '#991E12',
-        red60: '#DB2B19',
-        red80: '#B71C1C',
-        dangerColor: '#E32C1E',
-        purple20: '#F0EDFF',
-        purple40: '#0072A0',
-        purple50: '#4573B3',
-        purple60: '#6554C0',
-        purple80: '#403294',
-        purple90: '#03235f',
-        magenta10: '#FFF7FB',
-        magenta20: '#FCF1F7',
-        magenta30: '#FFD6E8',
-        magenta40: '#FFAFD2',
-        magenta50: '#FF7EB6',
-        magenta60: '#EE5396',
-        magenta70: '#D12771',
-        magenta80: '#9F1853',
-        magenta90: '#7B1340',
-    },
-    fonts: {
-        primary: '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'],
-    lineHeights: [1.7],
-    fontWeights: {
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semiBold: 600,
-        bold: 700,
-    },
-    letterSpacings: {
-        default: null,
-        sm: '2px',
-        md: '4px',
-        lg: '8px',
-    },
-    borders: {
-        slim: '1px solid',
-        mediumSlim: '2px solid',
-        medium: '3px solid',
-        mediumThick: '6px solid',
-        thick: '10px solid',
-    },
-    // ...........................
-    radii: {
-        sm: '2px',
-        md: '4px',
-        ml: '6px',
-        lg: '8px',
-        xl: '16px',
-    },
-    shadows: {
-        boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.1)',
-        dropShadow: '0px 5px 40px rgba(0, 0, 0, 0.1)',
-        inputFocusBoxShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)',
-        dropdownMenuShadow: '0 5px 25px rgba(0, 0, 0, 0.1)',
-        tooltipBoxShadow: '0px 2px 20px rgba(0, 0, 0, 0.1)',
-        cardShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.15)',
-        smooth: '0px 4px 25px 0px #0000001a',
-        // redesign:
-        dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.08)',
-        headerShadow: '1px 2px 3px #00000029',
-        headerShadowB: '1px 1px 3px #00000029',
-        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)',
-    },
-    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',
-    },
-    zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999],
-};
-export default defaultTheme;

package/ui/ThemeProvider/themes/index.js

@@ -1,9 +0,0 @@
-import defaultTheme from './default';
-import light from './light';
-import mailwise from './mailwise';
-var themes = {
-    default: defaultTheme,
-    light: light,
-    mailwise: mailwise
-};
-export default themes;

package/ui/ThemeProvider/themes/light.js

@@ -1,7 +0,0 @@
-var lightTheme = {
-    colors: {
-        primary: "#219615",
-        warning: "purple",
-    },
-};
-export default lightTheme;