@mailstep/design-system 0.6.2-beta.8 → 0.6.2-beta.9

package/ui/Forms/Input/styles.js

@@ -1,34 +1,8 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = exports.InputRow = exports.Suffix = exports.InputWrap = exports.StyledInput = exports.IconWrapper = exports.IconsController = exports.InputIcon = void 0;
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+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;
@@ -40,50 +14,50 @@ var resolvePaddingRight = function (props) {
         padding += 2;
     return String(padding);
 };
-exports.InputIcon = styled_components_1.default.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  }\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  }\n"])), function (_a) {
+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  }\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  }\n"])), function (_a) {
     var right = _a.right;
     return (right ? 'auto' : '1em');
 }, function (_a) {
     var right = _a.right;
     return (right ? '0.5em' : 'auto');
 });
-exports.IconsController = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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"])));
-exports.IconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __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"])));
-exports.StyledInput = styled_components_1.default.input.attrs(function (props) { return ({
+export var IconsController = styled.div(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __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_6 || (templateObject_6 = __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: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\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      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\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: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\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      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\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"])), styled_components_1.system, function (_a) {
+}); })(templateObject_6 || (templateObject_6 = __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: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\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      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\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: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\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      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\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 ? styled_components_1.th.color('red1') : styled_components_1.th.color('lightGray6'));
-}, function (props) { return resolvePaddingRight(props); }, (0, styled_components_1.th)('fonts.primary'), exports.InputIcon, exports.InputIcon, function (_a) {
+    return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
+}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
     var big = _a.big;
     return big
-        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __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        "]))) : '';
+        ? css(templateObject_4 || (templateObject_4 = __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'
-        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __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        "]))) : '';
+        ? css(templateObject_5 || (templateObject_5 = __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        "]))) : '';
 });
-exports.InputWrap = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.Suffix = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __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"])), (0, styled_components_1.th)('fonts.primary'), function (_a) {
+export var InputWrap = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var Suffix = styled.div(templateObject_9 || (templateObject_9 = __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
-        ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          cursor: pointer;\n        "], ["\n          cursor: pointer;\n        "]))) : '';
+        ? css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          cursor: pointer;\n        "], ["\n          cursor: pointer;\n        "]))) : '';
 });
-exports.InputRow = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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) {
+export var InputRow = styled.div(templateObject_10 || (templateObject_10 = __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 ? styled_components_1.th.color('red1') : styled_components_1.th.color('gray'));
+    return ($isInvalid ? th.color('red1') : th.color('gray'));
 }, function (_a) {
     var $isInvalid = _a.$isInvalid, variant = _a.variant;
-    return $isInvalid ? styled_components_1.th.color('red1') : variant === 'gray' ? styled_components_1.th.color('neutral20') : styled_components_1.th.color('lightGray6');
+    return $isInvalid ? th.color('red1') : variant === 'gray' ? th.color('neutral20') : th.color('lightGray6');
 }, function (_a) {
     var $isInvalid = _a.$isInvalid, hasValue = _a.hasValue;
-    return $isInvalid ? styled_components_1.th.color('red1') : hasValue ? styled_components_1.th.color('typoPrimary') : styled_components_1.th.color('gray');
+    return $isInvalid ? th.color('red1') : hasValue ? th.color('typoPrimary') : th.color('gray');
 }, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? styled_components_1.th.color('lightGray3') : styled_components_1.th.color('gray5'));
-}, exports.InputIcon, exports.InputIcon, function (_a) {
+    return (disabled ? th.color('lightGray3') : th.color('gray5'));
+}, InputIcon, InputIcon, function (_a) {
     var $icon = _a.$icon;
     return ($icon ? '3em' : '1em');
 });
-exports.Tooltip = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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"])), styled_components_1.th.color('red1'));
+export var Tooltip = styled.div(templateObject_11 || (templateObject_11 = __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;

package/ui/Forms/Input/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Forms/RadioButton/RadioButton.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,14 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("./styles");
-var react_1 = require("react");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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"]);
-    var customId = (0, react_1.useId)();
+    var customId = useId();
     var inputId = id || customId;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Item, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledRadio, __assign({ type: "radio", id: inputId, name: name, disabled: disabled, onChange: onChange }, rest)), (0, jsx_runtime_1.jsx)(styles_1.PaintoverLayer, { disabled: disabled, children: (0, jsx_runtime_1.jsx)(styles_1.CenterDot, {}) })] }), label && (0, jsx_runtime_1.jsx)(styles_1.Label, { htmlFor: inputId, children: label })] }));
+    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 })] }));
 };
-exports.default = RadioButton;
+export default RadioButton;

package/ui/Forms/RadioButton/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButton = void 0;
-var RadioButton_1 = __importDefault(require("./RadioButton"));
-exports.RadioButton = RadioButton_1.default;
-exports.default = RadioButton_1.default;
+import RadioButton from './RadioButton.js';
+export { RadioButton };
+export default RadioButton;

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

@@ -1,32 +1,26 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButtonDisabledUnchecked = exports.RadioButtonDisabledChecked = exports.RadioButtonUnchecked = exports.RadioButtonChecked = void 0;
-var RadioButton_1 = __importDefault(require("../RadioButton"));
+import RadioButton from '../RadioButton.js';
 var meta = {
     title: 'Forms/RadioButton',
-    component: RadioButton_1.default,
+    component: RadioButton,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.RadioButtonChecked = {
+export default meta;
+export var RadioButtonChecked = {
     args: {
         label: 'Radio button',
         checked: true,
         onChange: function () { return console.log('onChange'); },
     },
 };
-exports.RadioButtonUnchecked = {
+export var RadioButtonUnchecked = {
     args: {
         label: 'Radio button',
         checked: false,
         onChange: function () { return console.log('onChange'); },
     },
 };
-exports.RadioButtonDisabledChecked = {
+export var RadioButtonDisabledChecked = {
     args: {
         label: 'Radio button',
         checked: true,
@@ -34,7 +28,7 @@ exports.RadioButtonDisabledChecked = {
         onChange: function () { return console.log('onChange'); },
     },
 };
-exports.RadioButtonDisabledUnchecked = {
+export var RadioButtonDisabledUnchecked = {
     args: {
         label: 'Radio button',
         checked: false,

package/ui/Forms/RadioButton/styles.js

@@ -1,21 +1,15 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Label = exports.StyledRadio = exports.CenterDot = exports.PaintoverLayer = exports.Item = exports.Wrapper = void 0;
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-exports.Wrapper = styled_components_1.default.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"])));
-exports.Item = styled_components_1.default.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"])));
-exports.PaintoverLayer = styled_components_1.default.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"])));
-exports.CenterDot = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 10px;\n  height: 10px;\n"], ["\n  width: 10px;\n  height: 10px;\n"])));
-exports.StyledRadio = styled_components_1.default.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) {
+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');
 });
-exports.Label = styled_components_1.default.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"])));
+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,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Forms/TextArea/TextArea.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,19 +20,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("./styles");
-var SpaceAround_1 = require("../../Elements/SpaceAround");
-var Icon_1 = __importDefault(require("../../Elements/Icon/Icon"));
-var Label_1 = require("../../Elements/Label");
-var ErrorMessage_1 = __importDefault(require("../../Elements/ErrorMessage/ErrorMessage"));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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;
-    return ((0, jsx_runtime_1.jsxs)(SpaceAround_1.SpaceAroundWrap, { spaceAround: spaceAround, children: [(0, jsx_runtime_1.jsxs)(styles_1.TextAreaWrap, { children: [label && ((0, jsx_runtime_1.jsx)(Label_1.FieldLabel, { htmlFor: name, "$isInvalid": $isInvalid, children: label })), (0, jsx_runtime_1.jsxs)(styles_1.BorderWrap, { "$isInvalid": $isInvalid, disabled: disabled, children: [(0, jsx_runtime_1.jsxs)(styles_1.InnerWrap, { children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.IconWrap, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { icon: icon }) })), (0, jsx_runtime_1.jsx)(styles_1.StyledTextArea, __assign({ name: name, value: value, disabled: disabled, className: className, "$isInvalid": $isInvalid, "$resize": resize }, rest, { rows: rows }))] }), Footer] })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { children: 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 })] }));
 };
-exports.default = TextArea;
+export default TextArea;

package/ui/Forms/TextArea/index.js

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var TextArea_1 = __importDefault(require("./TextArea"));
-exports.default = TextArea_1.default;
+import TextArea from './TextArea.js';
+export default TextArea;

package/ui/Forms/TextArea/styles.js

@@ -1,57 +1,31 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerWrap = exports.BorderWrap = exports.TextAreaWrap = exports.StyledTextArea = exports.IconWrap = void 0;
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var system_1 = require("@xstyled/system");
-exports.IconWrap = styled_components_1.default.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"])), system_1.th.color('lightGray5'));
-exports.StyledTextArea = styled_components_1.default.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_1.system, (0, system_1.th)('fonts.primary'), function (_a) {
+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 ? system_1.th.color('red1') : disabled ? system_1.th.color('gray') : system_1.th.color('typoPrimary'));
+    return ($isInvalid ? th.color('red1') : disabled ? th.color('gray') : th.color('typoPrimary'));
 }, function (_a) {
     var $resize = _a.$resize;
     return $resize
-        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          resize: ", ";\n        "], ["\n          resize: ", ";\n        "])), $resize) : '';
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          resize: ", ";\n        "], ["\n          resize: ", ";\n        "])), $resize) : '';
 });
-exports.TextAreaWrap = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-exports.BorderWrap = styled_components_1.default.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) {
+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 ? system_1.th.color('red1') : system_1.th.color('lightGray6'));
+    return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
 }, function (_a) {
     var $isInvalid = _a.$isInvalid;
-    return ($isInvalid ? system_1.th.color('red1') : system_1.th.color('gray'));
+    return ($isInvalid ? th.color('red1') : th.color('gray'));
 }, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? (0, system_1.th)('colors.lightGray1') : 'unset');
+    return (disabled ? th('colors.lightGray1') : 'unset');
 }, function (_a) {
     var disabled = _a.disabled;
-    return (disabled ? (0, system_1.th)('colors.lightGray3') : (0, system_1.th)('colors.gray5'));
+    return (disabled ? th('colors.lightGray3') : th('colors.gray5'));
 });
-exports.InnerWrap = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n"], ["\n  display: flex;\n  position: relative;\n"])));
+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,14 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_helmet_1 = require("react-helmet");
-var Inter_Light_mailstep_woff2_1 = __importDefault(require("../../../assets/fonts/Inter-Light_mailstep.woff2"));
-var Inter_Regular_mailstep_woff2_1 = __importDefault(require("../../../assets/fonts/Inter-Regular_mailstep.woff2"));
-var Inter_Medium_mailstep_woff2_1 = __importDefault(require("../../../assets/fonts/Inter-Medium_mailstep.woff2"));
-var Inter_SemiBold_mailstep_woff2_1 = __importDefault(require("../../../assets/fonts/Inter-SemiBold_mailstep.woff2"));
-var Inter_Bold_mailstep_woff2_1 = __importDefault(require("../../../assets/fonts/Inter-Bold_mailstep.woff2"));
-var Fonts = function () { return ((0, jsx_runtime_1.jsx)(react_helmet_1.Helmet, { children: (0, jsx_runtime_1.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(Inter_Light_mailstep_woff2_1.default, ") 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(Inter_Regular_mailstep_woff2_1.default, ") 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(Inter_Medium_mailstep_woff2_1.default, ") 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(Inter_SemiBold_mailstep_woff2_1.default, ") 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(Inter_Bold_mailstep_woff2_1.default, ") format('woff2');\n        }\n    ") }) })); };
-exports.default = Fonts;
+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,16 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LanguageContext = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = require("@xstyled/styled-components");
-var themes_1 = __importDefault(require("./themes"));
-var react_1 = require("react");
-exports.LanguageContext = (0, react_1.createContext)('en');
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ThemeProvider, Preflight } from '@xstyled/styled-components';
+import themes from './themes/index.js';
+import { createContext } from 'react';
+export var LanguageContext = createContext('en');
 var MailstepThemeProvider = function (_a) {
     var children = _a.children, _b = _a.theme, theme = _b === void 0 ? 'default' : _b, _c = _a.preflight, preflight = _c === void 0 ? true : _c, _d = _a.language, language = _d === void 0 ? 'en' : _d;
-    return ((0, jsx_runtime_1.jsx)(exports.LanguageContext.Provider, { value: language, children: (0, jsx_runtime_1.jsxs)(styled_components_1.ThemeProvider, { theme: themes_1.default[theme], children: [preflight && (0, jsx_runtime_1.jsx)(styled_components_1.Preflight, {}), children] }) }));
+    return (_jsx(LanguageContext.Provider, { value: language, children: _jsxs(ThemeProvider, { theme: themes[theme], children: [preflight && _jsx(Preflight, {}), children] }) }));
 };
-exports.default = MailstepThemeProvider;
+export default MailstepThemeProvider;

package/ui/ThemeProvider/index.js

@@ -1,25 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.themes = void 0;
-var ThemeProvider_1 = __importDefault(require("./ThemeProvider"));
-var themes_1 = __importDefault(require("./themes"));
-exports.themes = themes_1.default;
-__exportStar(require("./types"), exports);
-exports.default = ThemeProvider_1.default;
+import ThemeProvider from './ThemeProvider.js';
+import themes from './themes/index.js';
+export * from './types.js';
+export { themes };
+export default ThemeProvider;

package/ui/ThemeProvider/themes/default.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 var defaultTheme = {
     breakpoints: ['0'],
     colors: {
@@ -145,4 +143,4 @@ var defaultTheme = {
     },
     zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999],
 };
-exports.default = defaultTheme;
+export default defaultTheme;

package/ui/ThemeProvider/themes/index.js

@@ -1,14 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var default_1 = __importDefault(require("./default"));
-var light_1 = __importDefault(require("./light"));
-var mailwise_1 = __importDefault(require("./mailwise"));
+import defaultTheme from './default.js';
+import light from './light.js';
+import mailwise from './mailwise.js';
 var themes = {
-    default: default_1.default,
-    light: light_1.default,
-    mailwise: mailwise_1.default
+    default: defaultTheme,
+    light: light,
+    mailwise: mailwise
 };
-exports.default = themes;
+export default themes;

package/ui/ThemeProvider/themes/light.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 var lightTheme = {
     colors: {
         primary: "#219615",
         warning: "purple",
     },
 };
-exports.default = lightTheme;
+export default lightTheme;

package/ui/ThemeProvider/themes/mailwise.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 var defaultTheme = {
     screens: {
         // same as xstyled default
@@ -209,4 +207,4 @@ var defaultTheme = {
     },
     zIndices: [0, 1, 2, 3, 5, 30, 40, 100, 200, 300, 9999],
 };
-exports.default = defaultTheme;
+export default defaultTheme;

package/ui/ThemeProvider/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};