@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Forms/Input/styles.js

@@ -1,219 +1,67 @@
-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);
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-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")};
-  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: bgLightGray1;
-    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 };
+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;

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

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

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

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

package/ui/Forms/RadioButton/RadioButton.js

@@ -1,24 +1,32 @@
-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 __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);
 };
-//#endregion
-export { RadioButton as default };
+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.d.ts

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

package/ui/Forms/RadioButton/index.js

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

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { 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/stories/RadioButton.stories.js

@@ -0,0 +1,38 @@
+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.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/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, {
     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/system').Theme, {}, never>;
+export declare const StyledRadio: import('styled-components').StyledComponent<"input", import('@xstyled/system').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/system').Theme, {}, never>;

package/ui/Forms/RadioButton/styles.js

@@ -1,86 +1,15 @@
-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 };
+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.d.ts

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

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

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