@mailstep/design-system 0.8.31-beta.4 → 0.8.31

package/ui/Forms/Input/styles.js

@@ -1,67 +1,220 @@
-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$1, { css, system, th } from "@xstyled/styled-components";
+//#region packages/ui/Forms/Input/styles.ts
+const resolvePaddingRight = (props) => {
+	const { $icon, $iconPlacement, $isClearable, $hasSuffix } = props;
+	let padding = 2;
+	if ($icon && $iconPlacement === "right") padding += 1;
+	if ($isClearable) padding += 1;
+	if ($hasSuffix) padding += 2;
+	return String(padding);
 };
-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  background-color: white;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: neutral30;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  background-color: white;\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ", ";\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: neutral30;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
-    var $isInvalid = _a.$isInvalid;
-    return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
-}, function (props) { return resolvePaddingRight(props); }, function (props) { return (props.type !== 'checkbox' ? '100%' : 'auto'); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
-    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;
+const InputIcon = styled$1.div`
+  position: absolute;
+
+  // top: 52%; // TODO fix
+  // transform: translateY(-50%); // TODO why does this do the overlap bug
+  left: ${({ right }) => right ? "auto" : "1em"};
+  right: ${({ right }) => right ? "0.5em" : "auto"};
+
+  svg {
+    stroke: lightGray3;
+    cursor: pointer;
+    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("red1") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2")};
+  }
+`;
+const ClearableInputIcon = styled$1(InputIcon)`
+  svg {
+    color: gray1;
+  }
+`;
+const IconsController = styled$1.div`
+  position: absolute;
+  top: 0.2em;
+  right: 0.5em;
+`;
+const IconWrapper = styled$1.div`
+  display: flex;
+  svg {
+    :hover {
+      cursor: pointer;
+      color: blue2;
+    }
+  }
+`;
+const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "textarea" : "input" }))`
+  ${system};
+  border: slim;
+  border-color: ${({ $isInvalid }) => $isInvalid ? th.color("red1") : th.color("lightGray6")};
+  background-color: white;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: ${(props) => resolvePaddingRight(props)}em;
+  display: block;
+  width: ${(props) => props.type !== "checkbox" ? "100%" : "auto"};
+  font-family: ${th("fonts.primary")};
+  font-size: 14px;
+  font-weight: normal;
+  transition: inputTransition;
+  resize: none;
+  overflow: hidden;
+
+  ~ ${InputIcon} {
+    svg {
+      stroke: lightGray3;
+    }
+  }
+
+  ::placeholder {
+    color: gray1;
+    opacity: 1;
+  }
+
+  :focus {
+    background-color: white;
+    border-color: blue2;
+    color: typoPrimary;
+    outline: 0;
+
+    ~ ${InputIcon} {
+      svg {
+        stroke: blue2;
+        color: blue2;
+      }
+    }
+  }
+  ${({ big }) => big ? css`
+          font-size: 30px;
+          color: gray;
+          font-weight: semiBold;
+          padding: 0 0.5rem 0 1.25rem;
+        ` : ""};
+  ${({ variant }) => variant === "gray" ? css`
+          background-color: neutral20;
+          :focus {
+            background-color: neutral20;
+          }
+        ` : ""};
+  :disabled,
+  :disabled:hover {
+    background-color: neutral30;
+    border-color: lightGray6;
+    color: neutral300;
+  }
+
+  text-overflow: ellipsis;
+
+  -moz-appearance: textfield;
+  appearance: textfield;
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+`;
+const InputWrap = styled$1.div`
+  position: relative;
+`;
+const Suffix = styled$1.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 14px;
+  font-weight: 700;
+  height: 100%;
+  width: 40px;
+  padding: 2;
+  color: typoPrimary;
+  font-family: ${th("fonts.primary")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  border: slim;
+  border-top-right-radius: lg;
+  border-bottom-right-radius: lg;
+  border-left: none;
+
+  ${({ $isPointer }) => $isPointer ? css`
+          cursor: pointer;
+        ` : ""};
+
+  input:focus ~ &,
+  textarea:focus ~ & {
+    border-color: blue2;
+  }
+`;
+const InputRow = styled$1.div`
+  position: relative;
+  color: ${({ $isInvalid }) => $isInvalid ? th.color("red1") : th.color("gray")};
+  & > * {
+    border-color: ${({ $isInvalid, variant }) => $isInvalid ? th.color("red1") : variant === "gray" ? th.color("neutral20") : th.color("lightGray6")};
+    color: ${({ hasValue }) => hasValue ? th.color("typoPrimary") : th.color("gray")};
+  }
+  :hover > * {
+    border-color: ${({ disabled }) => disabled ? th.color("lightGray3") : th.color("gray5")};
+  }
+  &:focus-within {
+    color: typoPrimary;
+  }
+  .primary {
+    line-height: 0;
+    height: 38px;
+    border-radius: lg;
+    ~ ${InputIcon} {
+      top: 10px;
+    }
+  }
+  .grid {
+    line-height: 1.2px;
+    border-radius: md;
+    ~ ${InputIcon} {
+      top: 7px;
+    }
+  }
+  .left {
+    padding-left: ${({ $icon }) => $icon ? "3em" : "1em"};
+  }
+  .right {
+    padding-right: 1.4em;
+    padding-left: 1em;
+  }
+`;
+const Tooltip = styled$1.div`
+  span {
+    display: none;
+    position: absolute;
+    width: 120px;
+    background-color: white;
+    color: red1;
+    border-color: red1;
+    border: 1px solid;
+    text-align: center;
+    border-radius: lg;
+    padding: 1 3;
+    margin: 1;
+    z-index: 1;
+    transition: opacity 0.3s;
+    top: 0;
+    left: 100%;
+    margin-left: 2;
+    box-shadow: tooltipBoxShadow;
+
+    :after {
+      content: '';
+      position: absolute;
+      top: 0px;
+      right: 100%;
+      border: mediumThick;
+      border-color: transparent ${th.color("red1")} transparent transparent;
+    }
+  }
+
+  :hover {
+    cursor: pointer;
+    span {
+      display: block;
+    }
+  }
+`;
+//#endregion
+export { ClearableInputIcon, IconWrapper, IconsController, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip };

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

@@ -1,5 +1,4 @@
-import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
-
+import type { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
 export type SpaceAround = boolean | SpaceAroundProps;
 export type SpaceAroundProps = {
     marginTop?: number;

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { RadioProps } from './types';
-
+import { type FC } from 'react';
+import { type RadioProps } from './types';
 declare const RadioButton: FC<RadioProps>;
 export default RadioButton;

package/ui/Forms/RadioButton/RadioButton.js

@@ -1,32 +1,24 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from "./styles.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/RadioButton/RadioButton.tsx
+const RadioButton = ({ label, id, name, disabled = false, onChange, ...rest }) => {
+	const customId = useId();
+	const inputId = id || customId;
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(StyledRadio, {
+		type: "radio",
+		id: inputId,
+		name,
+		disabled,
+		onChange,
+		...rest
+	}), /* @__PURE__ */ jsx(PaintoverLayer, {
+		disabled,
+		children: /* @__PURE__ */ jsx(CenterDot, {})
+	})] }), label && /* @__PURE__ */ jsx(Label, {
+		htmlFor: inputId,
+		children: label
+	})] });
 };
-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;
+//#endregion
+export { RadioButton as default };

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

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

package/ui/Forms/RadioButton/index.js

@@ -1,3 +1,5 @@
-import RadioButton from './RadioButton';
-export { RadioButton };
-export default RadioButton;
+import RadioButton from "./RadioButton.js";
+//#region packages/ui/Forms/RadioButton/index.ts
+var RadioButton_default = RadioButton;
+//#endregion
+export { RadioButton, RadioButton_default as default };

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

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').RadioProps>;
+    component: import("react").FC<import("../types").RadioProps>;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,10 +1,10 @@
-export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Item: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const PaintoverLayer: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Item: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const PaintoverLayer: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
 }, never>;
-export declare const CenterDot: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledRadio: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {
+export declare const CenterDot: import("styled-components").StyledComponent<"span", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledRadio: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {
     disabled: boolean;
 }, never>;
-export declare const Label: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Forms/RadioButton/styles.js

@@ -1,15 +1,86 @@
-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;
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Forms/RadioButton/styles.ts
+const Wrapper = styled$1.div`
+  display: flex;
+  align-items: center;
+  height: auto;
+  width: auto;
+  box-sizing: border-box;
+`;
+const Item = styled$1.div`
+  display: flex;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  & > span > span {
+    width: 10px;
+    height: 10px;
+  }
+  & > * {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+`;
+const PaintoverLayer = styled$1.span`
+  border-radius: 50%;
+  background-color: white;
+  border: 1.5px solid;
+  border-color: lightGray5;
+  pointer-events: none;
+  cursor: pointer;
+  position: relative;
+
+  & span {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-sizing: border-box;
+    border-radius: 50%;
+    transition: opacity 100ms ease-out;
+    background-color: white;
+  }
+
+  input[type='radio']:checked + & {
+    border-color: red1;
+  }
+
+  input[type='radio']:disabled + & {
+    border-color: gray1;
+  }
+
+  input[type='radio']:not(:disabled):not(:checked):hover + & {
+    border-color: gray1;
+  }
+
+  input[type='radio']:hover:not(:disabled):not(:checked) + & > span,
+  input[type='radio']:checked:disabled + & > span {
+    background-color: gray1;
+  }
+
+  input[type='radio']:checked + & > span {
+    background-color: red1;
+  }
+`;
+const CenterDot = styled$1.span`
+  width: 10px;
+  height: 10px;
+`;
+const StyledRadio = styled$1.input`
+  opacity: 0;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  cursor: ${({ disabled }) => disabled ? "default" : "pointer"};
+  margin: 0;
+`;
+const Label = styled$1.label`
+  margin: 0;
+  margin-left: 8px;
+  font-size: 14px;
+`;
+//#endregion
+export { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper };

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

@@ -1,5 +1,4 @@
 import { ChangeEvent } from 'react';
-
 export type RadioProps = {
     label?: string;
     id?: string;

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

@@ -1,6 +1,5 @@
-import { FC, ChangeEvent, FocusEvent, ReactNode } from 'react';
-import { SpaceAround } from '../Input/types';
-
+import { type FC, type ChangeEvent, type FocusEvent, type ReactNode } from 'react';
+import { type SpaceAround } from '../Input/types';
 export type Props = {
     name: string;
     label?: string;

package/ui/Forms/TextArea/TextArea.js

@@ -1,34 +1,35 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import Icon from "../../Elements/Icon/Icon.js";
+import ErrorMessage from "../../Elements/ErrorMessage/ErrorMessage.js";
+import { FieldLabel } from "../../Elements/Label/Label.js";
+import "../../Elements/Label/index.js";
+import SpaceAroundWrap from "../../Elements/SpaceAround/SpaceAround.js";
+import "../../Elements/SpaceAround/index.js";
+import { BorderWrap, IconWrap, InnerWrap, StyledTextArea, TextAreaWrap } from "./styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/TextArea/TextArea.tsx
+const TextArea = ({ name, label, value, disabled, error, spaceAround = false, isInvalid = void 0, className, resize, icon, rows = 4, Footer, ...rest }) => {
+	const $isInvalid = isInvalid !== void 0 ? isInvalid : !!error;
+	return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
+		spaceAround,
+		children: [/* @__PURE__ */ jsxs(TextAreaWrap, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: name,
+			children: label
+		}), /* @__PURE__ */ jsxs(BorderWrap, {
+			$isInvalid,
+			disabled,
+			children: [/* @__PURE__ */ jsxs(InnerWrap, { children: [icon && /* @__PURE__ */ jsx(IconWrap, { children: /* @__PURE__ */ jsx(Icon, { icon }) }), /* @__PURE__ */ jsx(StyledTextArea, {
+				name,
+				value,
+				disabled,
+				className,
+				$isInvalid,
+				$resize: resize,
+				...rest,
+				rows
+			})] }), Footer]
+		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })]
+	});
 };
-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;
+//#endregion
+export { TextArea as default };

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

@@ -1,3 +1,2 @@
-import { default as TextArea } from './TextArea';
-
+import TextArea from './TextArea';
 export default TextArea;

package/ui/Forms/TextArea/index.js

@@ -1,2 +1,5 @@
-import TextArea from './TextArea';
-export default TextArea;
+import TextArea from "./TextArea.js";
+//#region packages/ui/Forms/TextArea/index.ts
+var TextArea_default = TextArea;
+//#endregion
+export { TextArea_default as default };