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

package/ui/Elements/Typography/index.js

@@ -1,3 +1,5 @@
-import { Text } from './Typography';
-export * from './Typography';
-export default Text;
+import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text } from "./Typography.js";
+//#region packages/ui/Elements/Typography/index.ts
+var Typography_default = Text;
+//#endregion
+export { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5, Text, Typography_default as default };

package/ui/Elements/Typography/stories/Typography.stories.d.ts

@@ -1,5 +1,4 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
     tags: string[];

package/ui/Forms/Checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-import { CheckboxProps } from './types';
-
+import React from 'react';
+import { type CheckboxProps } from './types';
 declare const _default: React.NamedExoticComponent<CheckboxProps>;
 export default _default;

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,12 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useId } from 'react';
-import { th, useTheme } from '@xstyled/styled-components';
-import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
-var Checkbox = function (_a) {
-    var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;
-    var theme = useTheme();
-    var themeSize = th.fontSize(size)({ theme: theme });
-    var id = useId();
-    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name ? "".concat(name, "Checkbox") : undefined, "data-testid": name ? "checkbox-".concat(name) : undefined, id: id }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { htmlFor: id, children: label })] }));
+import { CheckIcon, CheckboxWrap, FakeInput, Label } from "./styles.js";
+import { memo, useId } from "react";
+import { th, useTheme } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/Checkbox/Checkbox.tsx
+const Checkbox = ({ name, label, onChange, checked, defaultChecked, size = 4, className, disabled, inputRef, readOnly, minusIcon = false }) => {
+	const theme = useTheme();
+	const themeSize = th.fontSize(size)({ theme });
+	const id = useId();
+	return /* @__PURE__ */ jsxs(CheckboxWrap, {
+		size: themeSize,
+		className,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				ref: inputRef,
+				name,
+				checked,
+				defaultChecked,
+				disabled,
+				onChange,
+				value: "",
+				readOnly,
+				"data-cy": name ? `${name}Checkbox` : void 0,
+				"data-testid": name ? `checkbox-${name}` : void 0,
+				id
+			}),
+			/* @__PURE__ */ jsx(FakeInput, {
+				size: themeSize,
+				children: /* @__PURE__ */ jsx(CheckIcon, {
+					icon: minusIcon ? "minus" : "check",
+					size: themeSize
+				})
+			}),
+			label && /* @__PURE__ */ jsx(Label, {
+				htmlFor: id,
+				children: label
+			})
+		]
+	});
 };
-export default memo(Checkbox);
+var Checkbox_default = memo(Checkbox);
+//#endregion
+export { Checkbox_default as default };

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

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

package/ui/Forms/Checkbox/index.js

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

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

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

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

@@ -1,11 +1,10 @@
-/// <reference types="react" />
-export declare const FakeInput: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     size: string | number;
 }, never>;
-export declare const CheckIcon: import('styled-components').StyledComponent<import('react').FC<import('../../Elements/Icon').IconProps>, import('@xstyled/system').Theme, {
+export declare const CheckIcon: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/styled-components").Theme, {
     size: string | number;
 }, never>;
-export declare const CheckboxWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     size: string | number;
 }, 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/Checkbox/styles.js

@@ -1,26 +1,94 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { Icon } from '../../Elements/Icon';
-import styled, { th } from '@xstyled/styled-components';
-export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var size = _a.size;
-    return size;
-});
-export var CheckIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])), FakeInput, FakeInput, th.color('lightGray5'));
-export var CheckboxWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var size = _a.size;
-    return size;
-});
-export var Label = styled.label(templateObject_4 || (templateObject_4 = __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;
+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;
+    }
+  }
+
+  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.d.ts

@@ -1,5 +1,4 @@
-import { ChangeEvent, RefObject, ReactNode } from 'react';
-
+import { type ChangeEvent, type RefObject, type ReactNode } from 'react';
 export type CheckboxProps = {
     name?: string;
     label?: string | ReactNode;

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { InputProps } from './types';
-
+import { type FC } from 'react';
+import { type InputProps } from './types';
 export declare const Input: FC<InputProps>;

package/ui/Forms/Input/Input.js

@@ -1,66 +1,129 @@
-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);
-};
-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 { 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'];
-export var Input = function (_a) {
-    var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["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 !== undefined ? 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 _a;
-        forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }, [disabled, forceFocus, isLoading]);
-    var handleBlur = useCallback(function (event) {
-        var _a, _b, _c, _d, _e;
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        //  If the related target is not an input element or its input type is not included in the allowed input types, keep the focus on the input with forceFocus
-        if (forceFocus &&
-            (((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' ||
-                !allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {
-            (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();
-        }
-    }, [forceFocus, onBlur]);
-    var handleKeyDown = useCallback(function (event) {
-        if (event.key === 'Enter') {
-            onEnter === null || onEnter === void 0 ? void 0 : onEnter();
-        }
-    }, [onEnter]);
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": name ? "".concat(name, "Inp") : undefined, "data-testid": name ? "input-".concat(name) : undefined, 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 && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
+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 { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/Input/Input.tsx
+const allowedInputTypes = [
+	"text",
+	"number",
+	"password"
+];
+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.d.ts

@@ -1,6 +1,5 @@
 import { Input } from './Input';
 import { InputProps } from './types';
-
 export { Input };
 export type { InputProps };
 export default Input;

package/ui/Forms/Input/index.js

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

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

@@ -1,9 +1,8 @@
 import { StoryObj } from '@storybook/react-webpack5';
-import { default as React } from 'react';
-
+import React from 'react';
 declare const meta: {
     title: string;
-    component: React.FC<import('..').InputProps>;
+    component: React.FC<import("..").InputProps>;
     argTypes: {};
 };
 export default meta;

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

@@ -17,24 +17,24 @@ type InputIconProps = {
     hasValue?: boolean;
     $isInvalid?: boolean;
 };
-export declare const InputIcon: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, InputIconProps, never>;
-export declare const ClearableInputIcon: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, InputIconProps, never>;
-export declare const IconsController: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const IconWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledInput: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {
+export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, InputIconProps, never>;
+export declare const ClearableInputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, InputIconProps, never>;
+export declare const IconsController: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {
     as: string;
 } & StyledInputProps, "as">;
-export declare const InputWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Suffix: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const InputWrap: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Suffix: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     $isPointer: boolean;
     $isInvalid: boolean;
 }, never>;
-export declare const InputRow: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const InputRow: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
     hasValue: boolean;
     disabled: boolean;
-    $icon?: string | undefined;
-    $isInvalid?: boolean | undefined;
-    variant?: string | undefined;
+    $icon?: string;
+    $isInvalid?: boolean;
+    variant?: string;
 }, never>;
-export declare const Tooltip: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export {};