@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Forms/Checkbox/styles.js

@@ -1,76 +1,94 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
+import Icon from "../../Elements/Icon/Icon.js";
+import "../../Elements/Icon/index.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Forms/Checkbox/styles.ts
+const FakeInput = styled$1.div`
+  width: ${({ size }) => size};
+  min-width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border-radius: md;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  transform: rotate(0);
+  overflow: hidden;
+  border: slim;
+  border-color: lightGray5;
+
+  input[type='checkbox']:not(:disabled):hover + & {
+    border-color: gray1;
+  }
+
+  input[type='checkbox']:disabled + & {
+    background-color: white;
+    border-color: lightGray7;
+  }
+
+  input[type='checkbox']:checked:disabled + & {
+    background-color: bgLightGray1;
+    border-color: bgLightGray1;
+  }
+
+  input[type='checkbox']:checked:not(:disabled) + & {
+    transform: rotate(0deg);
+    background-color: red1;
+    border-color: red1;
+  }
+
+  input[type='checkbox']:not(:checked):not(:disabled) + & {
+    transform: rotate(90deg);
+    background-color: white;
+    border-color: lightGray5;
+  }
+`;
+const CheckIcon = styled$1(Icon)`
+  border-radius: lg;
+  transition: all 200ms ease;
+  & svg {
+    width: 70% !important;
+  }
+  & path {
+    fill: none;
+    stroke: none;
+  }
+
+  input[type='checkbox']:not(:disabled):checked + ${FakeInput} & {
+    & path {
+      stroke: white;
+      fill: white;
     }
-    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());
+  }
+
+  input[type='checkbox']:disabled:checked + ${FakeInput} & {
+    & path {
+      fill: ${th.color("lightGray5")} !important;
+    }
+  }
+`;
+const CheckboxWrap = styled$1.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  input {
+    margin: 0;
+    width: ${({ size }) => size};
+    height: ${({ size }) => size};
+    z-index: 1;
+    position: absolute;
+    opacity: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    cursor: pointer;
+  }
+`;
+const Label = styled$1.label`
+  margin: 0;
+  margin-left: 8px;
+  font-size: 14px;
+`;
+//#endregion
 export { CheckIcon, CheckboxWrap, FakeInput, Label };

package/ui/Forms/Checkbox/types.js

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

package/ui/Forms/Input/Input.js

@@ -1,262 +1,129 @@
-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 Icon from "../../Elements/Icon/Icon.js";
+import "../../Elements/Icon/index.js";
+import { Spinner } from "../../Elements/Spinner/Spinner.js";
+import "../../Elements/Spinner/index.js";
+import ErrorMessage from "../../Elements/ErrorMessage/ErrorMessage.js";
+import "../../Elements/ErrorMessage/index.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 { ClearableInputIcon, IconWrapper, IconsController, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from "./styles.js";
 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"
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/Input/Input.tsx
+const 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
-            })
-        ]
-    });
+const Input = ({ appearance = "primary", type, name, label, value, icon, variant = "default", disabled, error, isInvalid = void 0, spaceAround = false, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement = "left", iconOnClick, iconTooltip, big, showArrowsController = false, onClear, alwaysShowClear, setNumber, onEnter, forceFocus = false, autoFocus = false, onBlur, asTextArea = false, ...rest }) => {
+	const $isInvalid = isInvalid !== void 0 ? isInvalid : !!error;
+	const $isClearable = !!onClear && (!!value || alwaysShowClear) && !isLoading;
+	const $hasSuffix = !!suffix;
+	const checkIconPlacement = showArrowsController ? "left" : iconPlacement;
+	const onAddItem = useCallback(() => {
+		setNumber?.((base) => base + 1);
+	}, [setNumber]);
+	const onRemoveItem = useCallback(() => {
+		setNumber?.((base) => base > 1 ? base - 1 : 1);
+	}, [setNumber]);
+	const internalRef = useRef(null);
+	const ref = inputRef || internalRef;
+	useEffect(() => {
+		forceFocus && !disabled && !isLoading && ref?.current?.focus();
+	}, [
+		disabled,
+		forceFocus,
+		isLoading
+	]);
+	const handleBlur = useCallback((event) => {
+		onBlur?.(event);
+		if (forceFocus && (event.relatedTarget?.tagName?.toLowerCase() !== "input" || !allowedInputTypes.includes(event.relatedTarget?.type?.toLowerCase()))) event.target?.focus();
+	}, [forceFocus, onBlur]);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter") onEnter?.();
+	}, [onEnter]);
+	return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
+		spaceAround,
+		className,
+		children: [/* @__PURE__ */ jsxs(InputWrap, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: name,
+			children: label
+		}), /* @__PURE__ */ jsxs(InputRow, {
+			hasValue: !!value,
+			$isInvalid,
+			disabled: !!disabled,
+			$icon: icon,
+			variant,
+			children: [
+				/* @__PURE__ */ jsx(StyledInput, {
+					autoFocus,
+					className: `${appearance} ${checkIconPlacement}`,
+					type,
+					name,
+					"data-cy": name ? `${name}Inp` : void 0,
+					"data-testid": name ? `input-${name}` : void 0,
+					value,
+					$isInvalid,
+					$isClearable,
+					$hasSuffix,
+					disabled: disabled || isLoading,
+					ref,
+					autoComplete,
+					onKeyDown: handleKeyDown,
+					big,
+					onBlur: handleBlur,
+					$asTextArea: asTextArea,
+					variant,
+					...rest
+				}),
+				icon && /* @__PURE__ */ jsx(InputIcon, {
+					right: showArrowsController ? false : iconPlacement === "right",
+					hasValue: !!value,
+					$isInvalid,
+					disabled,
+					onClick: iconOnClick,
+					children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(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,
+					children: suffix
+				}),
+				isLoading && /* @__PURE__ */ jsx(InputIcon, {
+					right: true,
+					children: /* @__PURE__ */ jsx(Spinner, { variant: "sm" })
+				})
+			]
+		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, {
+			appearance: errorAppearance,
+			children: error
+		})]
+	});
 };
+//#endregion
 export { Input };

package/ui/Forms/Input/index.js

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