@mailstep/design-system 0.8.26-beta.3 → 0.8.26-beta.4

package/ui/Forms/Checkbox/styles.js

@@ -0,0 +1,76 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  width: ",
+        ";\n  min-width: ",
+        ";\n  height: ",
+        ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  border-radius: lg;\n  transition: all 200ms ease;\n  & svg {\n    width: 70% !important;\n  }\n  & path {\n    fill: none;\n    stroke: none;\n  }\n\n  input[type='checkbox']:not(:disabled):checked + ",
+        " & {\n    & path {\n      stroke: white;\n      fill: white;\n    }\n  }\n\n  input[type='checkbox']:disabled:checked + ",
+        " & {\n    & path {\n      fill: ",
+        " !important;\n    }\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n\n  input {\n    margin: 0;\n    width: ",
+        ";\n    height: ",
+        ";\n    z-index: 1;\n    position: absolute;\n    opacity: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    cursor: pointer;\n  }\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { th } from "@xstyled/styled-components";
+import { Icon } from "../../Elements/Icon";
+var FakeInput = styled.div(_templateObject(), function(param) {
+    var size = param.size;
+    return size;
+}, function(param) {
+    var size = param.size;
+    return size;
+}, function(param) {
+    var size = param.size;
+    return size;
+});
+var CheckIcon = styled(Icon)(_templateObject1(), FakeInput, FakeInput, th.color("lightGray5"));
+var CheckboxWrap = styled.div(_templateObject2(), function(param) {
+    var size = param.size;
+    return size;
+}, function(param) {
+    var size = param.size;
+    return size;
+});
+var Label = styled.label(_templateObject3());
+export { CheckIcon, CheckboxWrap, FakeInput, Label };

package/ui/Forms/Input/Input.js

@@ -0,0 +1,262 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { ErrorMessage } from "../../Elements/ErrorMessage";
+import { Icon } from "../../Elements/Icon";
+import { FieldLabel } from "../../Elements/Label";
+import { SpaceAroundWrap } from "../../Elements/SpaceAround";
+import { Spinner } from "../../Elements/Spinner";
+import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from "./styles";
+var allowedInputTypes = [
+    "text",
+    "number",
+    "password"
+];
+var Input = function Input(_0) {
+    var _0_appearance = _0.appearance, appearance = _0_appearance === void 0 ? "primary" : _0_appearance, type = _0.type, name = _0.name, label = _0.label, value = _0.value, icon = _0.icon, _0_variant = _0.variant, variant = _0_variant === void 0 ? "default" : _0_variant, disabled = _0.disabled, error = _0.error, _0_isInvalid = _0.isInvalid, isInvalid = _0_isInvalid === void 0 ? void 0 : _0_isInvalid, _0_spaceAround = _0.spaceAround, spaceAround = _0_spaceAround === void 0 ? false : _0_spaceAround, inputRef = _0.inputRef, autoComplete = _0.autoComplete, isLoading = _0.isLoading, className = _0.className, suffix = _0.suffix, suffixOnClick = _0.suffixOnClick, errorAppearance = _0.errorAppearance, _0_iconPlacement = _0.iconPlacement, iconPlacement = _0_iconPlacement === void 0 ? "left" : _0_iconPlacement, iconOnClick = _0.iconOnClick, iconTooltip = _0.iconTooltip, big = _0.big, _0_showArrowsController = _0.showArrowsController, showArrowsController = _0_showArrowsController === void 0 ? false : _0_showArrowsController, onClear = _0.onClear, alwaysShowClear = _0.alwaysShowClear, setNumber = _0.setNumber, onEnter = _0.onEnter, _0_forceFocus = _0.forceFocus, forceFocus = _0_forceFocus === void 0 ? false : _0_forceFocus, _0_autoFocus = _0.autoFocus, autoFocus = _0_autoFocus === void 0 ? false : _0_autoFocus, onBlur = _0.onBlur, _0_asTextArea = _0.asTextArea, asTextArea = _0_asTextArea === void 0 ? false : _0_asTextArea, rest = _object_without_properties(_0, [
+        "appearance",
+        "type",
+        "name",
+        "label",
+        "value",
+        "icon",
+        "variant",
+        "disabled",
+        "error",
+        "isInvalid",
+        "spaceAround",
+        "inputRef",
+        "autoComplete",
+        "isLoading",
+        "className",
+        "suffix",
+        "suffixOnClick",
+        "errorAppearance",
+        "iconPlacement",
+        "iconOnClick",
+        "iconTooltip",
+        "big",
+        "showArrowsController",
+        "onClear",
+        "alwaysShowClear",
+        "setNumber",
+        "onEnter",
+        "forceFocus",
+        "autoFocus",
+        "onBlur",
+        "asTextArea"
+    ]);
+    var $isInvalid = isInvalid !== void 0 ? isInvalid : !!error;
+    var $isClearable = !!onClear && (!!value || alwaysShowClear) && !isLoading;
+    var $hasSuffix = !!suffix;
+    var checkIconPlacement = showArrowsController ? "left" : iconPlacement;
+    var onAddItem = useCallback(function() {
+        setNumber === null || setNumber === void 0 ? void 0 : setNumber(function(base) {
+            return base + 1;
+        });
+    }, [
+        setNumber
+    ]);
+    var onRemoveItem = useCallback(function() {
+        setNumber === null || setNumber === void 0 ? void 0 : setNumber(function(base) {
+            return base > 1 ? base - 1 : 1;
+        });
+    }, [
+        setNumber
+    ]);
+    var internalRef = useRef(null);
+    var ref = inputRef || internalRef;
+    useEffect(function() {
+        var _ref_current;
+        forceFocus && !disabled && !isLoading && (ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus());
+    }, [
+        disabled,
+        forceFocus,
+        isLoading
+    ]);
+    var handleBlur = useCallback(function(event) {
+        var _event_relatedTarget_tagName, _event_relatedTarget, _event_relatedTarget_type, _event_relatedTarget1;
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        if (forceFocus && (((_event_relatedTarget = event.relatedTarget) === null || _event_relatedTarget === void 0 ? void 0 : (_event_relatedTarget_tagName = _event_relatedTarget.tagName) === null || _event_relatedTarget_tagName === void 0 ? void 0 : _event_relatedTarget_tagName.toLowerCase()) !== "input" || !allowedInputTypes.includes((_event_relatedTarget1 = event.relatedTarget) === null || _event_relatedTarget1 === void 0 ? void 0 : (_event_relatedTarget_type = _event_relatedTarget1.type) === null || _event_relatedTarget_type === void 0 ? void 0 : _event_relatedTarget_type.toLowerCase()))) {
+            var _event_target;
+            (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.focus();
+        }
+    }, [
+        forceFocus,
+        onBlur
+    ]);
+    var handleKeyDown = useCallback(function(event) {
+        if (event.key === "Enter") {
+            onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+        }
+    }, [
+        onEnter
+    ]);
+    return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
+        spaceAround: spaceAround,
+        className: className,
+        children: [
+            /* @__PURE__ */ jsxs(InputWrap, {
+                children: [
+                    label && /* @__PURE__ */ jsx(FieldLabel, {
+                        htmlFor: name,
+                        children: label
+                    }),
+                    /* @__PURE__ */ jsxs(InputRow, {
+                        hasValue: !!value,
+                        $isInvalid: $isInvalid,
+                        disabled: !!disabled,
+                        $icon: icon,
+                        variant: variant,
+                        children: [
+                            /* @__PURE__ */ jsx(StyledInput, _object_spread({
+                                autoFocus: autoFocus,
+                                className: "".concat(appearance, " ").concat(checkIconPlacement),
+                                type: type,
+                                name: name,
+                                "data-cy": name ? "".concat(name, "Inp") : void 0,
+                                "data-testid": name ? "input-".concat(name) : void 0,
+                                value: value,
+                                $isInvalid: $isInvalid,
+                                $isClearable: $isClearable,
+                                $hasSuffix: $hasSuffix,
+                                disabled: disabled || isLoading,
+                                ref: ref,
+                                autoComplete: autoComplete,
+                                onKeyDown: handleKeyDown,
+                                big: big,
+                                onBlur: handleBlur,
+                                $asTextArea: asTextArea,
+                                variant: variant
+                            }, rest)),
+                            icon && /* @__PURE__ */ jsx(InputIcon, {
+                                right: showArrowsController ? false : iconPlacement === "right",
+                                hasValue: !!value,
+                                $isInvalid: $isInvalid,
+                                disabled: disabled,
+                                onClick: iconOnClick,
+                                children: /* @__PURE__ */ jsxs(Tooltip, {
+                                    children: [
+                                        /* @__PURE__ */ jsx(Icon, {
+                                            icon: icon
+                                        }),
+                                        iconTooltip && /* @__PURE__ */ jsx("span", {
+                                            children: iconTooltip
+                                        })
+                                    ]
+                                })
+                            }),
+                            showArrowsController && /* @__PURE__ */ jsxs(IconsController, {
+                                children: [
+                                    /* @__PURE__ */ jsx(IconWrapper, {
+                                        onClick: onAddItem,
+                                        children: /* @__PURE__ */ jsx(Icon, {
+                                            icon: "goUp",
+                                            fill: "gray1"
+                                        })
+                                    }),
+                                    /* @__PURE__ */ jsx(IconWrapper, {
+                                        onClick: onRemoveItem,
+                                        children: /* @__PURE__ */ jsx(Icon, {
+                                            icon: "goDown",
+                                            fill: "gray1"
+                                        })
+                                    })
+                                ]
+                            }),
+                            $isClearable && /* @__PURE__ */ jsx(ClearableInputIcon, {
+                                right: true,
+                                onClick: onClear,
+                                children: /* @__PURE__ */ jsx(Icon, {
+                                    icon: "deleteX",
+                                    size: "16px",
+                                    fill: "gray1"
+                                })
+                            }),
+                            suffix && !isLoading && /* @__PURE__ */ jsx(Suffix, {
+                                onClick: suffixOnClick,
+                                $isPointer: !!suffixOnClick,
+                                $isInvalid: $isInvalid,
+                                children: suffix
+                            }),
+                            isLoading && /* @__PURE__ */ jsx(InputIcon, {
+                                right: true,
+                                children: /* @__PURE__ */ jsx(Spinner, {
+                                    variant: "sm"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            error && /* @__PURE__ */ jsx(ErrorMessage, {
+                appearance: errorAppearance,
+                children: error
+            })
+        ]
+    });
+};
+export { Input };

package/ui/Forms/Input/index.d.js

@@ -0,0 +1,3 @@
+import { InputProps } from "./types";
+var index_d_default = Input;
+export { InputProps, index_d_default as default };

package/ui/Forms/Input/index.js

@@ -0,0 +1,3 @@
+import { Input } from "./Input";
+var Input_default = Input;
+export { Input, Input_default as default };

package/ui/Forms/Input/styles.js

@@ -0,0 +1,203 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  svg {\n    color: gray1;\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n          background-color: neutral20;\n          :focus {\n            background-color: neutral20;\n          }\n        "
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        ";\n  border: slim;\n  border-color: ",
+        ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ",
+        "em;\n  display: block;\n  width: ",
+        ";\n  font-family: ",
+        ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ",
+        " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ",
+        " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ",
+        ";\n  ",
+        ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n"
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _tagged_template_literal([
+        "\n          cursor: pointer;\n        "
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject9() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject9 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject10() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject10 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject11() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject11 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { css, system, th } from "@xstyled/styled-components";
+var resolvePaddingRight = function resolvePaddingRight(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);
+};
+var InputIcon = styled.div(_templateObject(), function(param) {
+    var right = param.right;
+    return right ? "auto" : "1em";
+}, function(param) {
+    var right = param.right;
+    return right ? "0.5em" : "auto";
+}, function(param) {
+    var $isInvalid = param.$isInvalid, hasValue = param.hasValue, disabled = param.disabled;
+    return $isInvalid ? th.color("red1") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2");
+});
+var ClearableInputIcon = styled(InputIcon)(_templateObject1());
+var IconsController = styled.div(_templateObject2());
+var IconWrapper = styled.div(_templateObject3());
+var StyledInput = styled.input.attrs(function(props) {
+    return {
+        as: props.$asTextArea ? "textarea" : "input"
+    };
+})(_templateObject6(), system, function(param) {
+    var $isInvalid = param.$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(param) {
+    var big = param.big;
+    return big ? css(_templateObject4()) : "";
+}, function(param) {
+    var variant = param.variant;
+    return variant === "gray" ? css(_templateObject5()) : "";
+});
+var InputWrap = styled.div(_templateObject7());
+var Suffix = styled.div(_templateObject9(), th("fonts.primary"), function(param) {
+    var $isPointer = param.$isPointer;
+    return $isPointer ? css(_templateObject8()) : "";
+});
+var InputRow = styled.div(_templateObject10(), function(param) {
+    var $isInvalid = param.$isInvalid;
+    return $isInvalid ? th.color("red1") : th.color("gray");
+}, function(param) {
+    var $isInvalid = param.$isInvalid, variant = param.variant;
+    return $isInvalid ? th.color("red1") : variant === "gray" ? th.color("neutral20") : th.color("lightGray6");
+}, function(param) {
+    var hasValue = param.hasValue;
+    return hasValue ? th.color("typoPrimary") : th.color("gray");
+}, function(param) {
+    var disabled = param.disabled;
+    return disabled ? th.color("lightGray3") : th.color("gray5");
+}, InputIcon, InputIcon, function(param) {
+    var $icon = param.$icon;
+    return $icon ? "3em" : "1em";
+});
+var Tooltip = styled.div(_templateObject11(), th.color("red1"));
+export { ClearableInputIcon, IconWrapper, IconsController, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip };

package/ui/Forms/RadioButton/RadioButton.js

@@ -0,0 +1,103 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from "./styles";
+var RadioButton = function RadioButton(_0) {
+    var label = _0.label, id = _0.id, name = _0.name, _0_disabled = _0.disabled, disabled = _0_disabled === void 0 ? false : _0_disabled, onChange = _0.onChange, rest = _object_without_properties(_0, [
+        "label",
+        "id",
+        "name",
+        "disabled",
+        "onChange"
+    ]);
+    var customId = useId();
+    var inputId = id || customId;
+    return /* @__PURE__ */ jsxs(Wrapper, {
+        children: [
+            /* @__PURE__ */ jsxs(Item, {
+                children: [
+                    /* @__PURE__ */ jsx(StyledRadio, _object_spread({
+                        type: "radio",
+                        id: inputId,
+                        name: name,
+                        disabled: disabled,
+                        onChange: onChange
+                    }, rest)),
+                    /* @__PURE__ */ jsx(PaintoverLayer, {
+                        disabled: disabled,
+                        children: /* @__PURE__ */ jsx(CenterDot, {})
+                    })
+                ]
+            }),
+            label && /* @__PURE__ */ jsx(Label, {
+                htmlFor: inputId,
+                children: label
+            })
+        ]
+    });
+};
+var RadioButton_default = RadioButton;
+export { RadioButton_default as default };

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

@@ -0,0 +1,2 @@
+var index_d_default = RadioButton;
+export { index_d_default as default };

package/ui/Forms/RadioButton/index.js

@@ -0,0 +1,3 @@
+import RadioButton from "./RadioButton";
+var RadioButton_default = RadioButton;
+export { RadioButton, RadioButton_default as default };