@mailstep/design-system 0.7.40-beta.0 → 0.7.40-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.40-beta.0",
+  "version": "0.7.40-beta.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/SideMenu/styles.d.ts

@@ -9,7 +9,7 @@ export declare const ItemLabel: import("styled-components").StyledComponent<"div
     $isCompact?: boolean | undefined;
     isSubitem?: boolean | undefined;
 }, never>;
-export declare const ItemDropdownArrow: import("styled-components").StyledComponent<import("react").FC<import("../..").IconProps>, import("@xstyled/system").Theme, {
+export declare const ItemDropdownArrow: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../..").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     $lightMode?: boolean | undefined;
 }, never>;
 export declare const TooltipItemLabel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Elements/Button/styles.d.ts

@@ -3,7 +3,7 @@ export declare const StyledWrapper: import("styled-components").StyledComponent<
 export declare const LoadingIconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $addMarginRight: boolean;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
+export declare const StyledIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     $addMarginRight?: boolean | undefined;
     $addMarginLeft?: boolean | undefined;
 }, never>;

package/ui/Elements/Icon/Icon.d.ts

@@ -1,9 +1,8 @@
-import type { FC } from 'react';
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
-import type { FlipProp } from '@fortawesome/fontawesome-svg-core';
-import type { IconProps } from './types';
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { FlipProp } from '@fortawesome/fontawesome-svg-core';
+import { IconProps } from './types';
 export declare const iconDictionary: {
     [name: string]: IconDefinition | [IconDefinition, FlipProp];
 };
-declare const Icon: FC<IconProps>;
+declare const Icon: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: IconProps) => JSX.Element;
 export default Icon;

package/ui/Elements/Icon/Icon.js

@@ -20,7 +20,6 @@ import { faBell } from '@fortawesome/pro-regular-svg-icons/faBell';
 import { faBox as faBoxRegular } from '@fortawesome/pro-regular-svg-icons/faBox';
 import { faCalendar } from '@fortawesome/pro-regular-svg-icons/faCalendar';
 import { faCalendarPlus } from '@fortawesome/pro-regular-svg-icons/faCalendarPlus';
-import { faCartFlatbedBoxes } from '@fortawesome/pro-regular-svg-icons/faCartFlatbedBoxes';
 import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown';
 import { faChevronRight as farChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
 import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp';
@@ -49,6 +48,7 @@ import { faPenToSquare } from '@fortawesome/pro-regular-svg-icons/faPenToSquare'
 import { faShareSquare } from '@fortawesome/pro-regular-svg-icons/faShareSquare';
 import { faSquareMinus } from '@fortawesome/pro-regular-svg-icons/faSquareMinus';
 import { faTrashCan } from '@fortawesome/pro-regular-svg-icons/faTrashCan';
+import { faCartFlatbedBoxes } from '@fortawesome/pro-regular-svg-icons/faCartFlatbedBoxes';
 import { faTriangleExclamation as farTriangleExclamation } from '@fortawesome/pro-regular-svg-icons/faTriangleExclamation';
 import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft';
 import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight';
@@ -58,12 +58,12 @@ import { faArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
 import { faArrowsRotate } from '@fortawesome/pro-solid-svg-icons/faArrowsRotate';
 import { faBadgeCheck } from '@fortawesome/pro-solid-svg-icons/faBadgeCheck';
 import { faBan } from '@fortawesome/pro-solid-svg-icons/faBan';
-import { faBatteryBolt } from '@fortawesome/pro-solid-svg-icons/faBatteryBolt';
 import { faBox } from '@fortawesome/pro-solid-svg-icons/faBox';
 import { faBoxArchive } from '@fortawesome/pro-solid-svg-icons/faBoxArchive';
 import { faBoxCircleCheck } from '@fortawesome/pro-solid-svg-icons/faBoxCircleCheck';
 import { faBoxOpen } from '@fortawesome/pro-solid-svg-icons/faBoxOpen';
 import { faBoxesStacked } from '@fortawesome/pro-solid-svg-icons/faBoxesStacked';
+import { faUpDownLeftRight } from '@fortawesome/pro-solid-svg-icons/faUpDownLeftRight';
 import { faCamera } from '@fortawesome/pro-solid-svg-icons/faCamera';
 import { faCartArrowDown } from '@fortawesome/pro-solid-svg-icons/faCartArrowDown';
 import { faChartLine } from '@fortawesome/pro-solid-svg-icons/faChartLine';
@@ -80,10 +80,13 @@ import { faComputerMouseScrollwheel } from '@fortawesome/pro-solid-svg-icons/faC
 import { faCrop } from '@fortawesome/pro-solid-svg-icons/faCrop';
 import { faCube } from '@fortawesome/pro-solid-svg-icons/faCube';
 import { faEquals } from '@fortawesome/pro-solid-svg-icons/faEquals';
+import { faFluxCapacitor } from '@fortawesome/pro-solid-svg-icons/faFluxCapacitor';
+import { faWineGlassCrack } from '@fortawesome/pro-solid-svg-icons/faWineGlassCrack';
+import { faBatteryBolt } from '@fortawesome/pro-solid-svg-icons/faBatteryBolt';
+import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
+import { faFlaskRoundPotion } from '@fortawesome/pro-solid-svg-icons/faFlaskRoundPotion';
 import { faExchange } from '@fortawesome/pro-solid-svg-icons/faExchange';
 import { faFlag } from '@fortawesome/pro-solid-svg-icons/faFlag';
-import { faFlaskRoundPotion } from '@fortawesome/pro-solid-svg-icons/faFlaskRoundPotion';
-import { faFluxCapacitor } from '@fortawesome/pro-solid-svg-icons/faFluxCapacitor';
 import { faGlobe } from '@fortawesome/pro-solid-svg-icons/faGlobe';
 import { faGreaterThanEqual } from '@fortawesome/pro-solid-svg-icons/faGreaterThanEqual';
 import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
@@ -95,7 +98,6 @@ import { faLuggageCart } from '@fortawesome/pro-solid-svg-icons/faLuggageCart';
 import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus';
 import { faNotEqual } from '@fortawesome/pro-solid-svg-icons/faNotEqual';
 import { faNoteSticky } from '@fortawesome/pro-solid-svg-icons/faNoteSticky';
-import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
 import { faPen } from '@fortawesome/pro-solid-svg-icons/faPen';
 import { faPeopleCarry as fasPeopleCarry } from '@fortawesome/pro-solid-svg-icons/faPeopleCarry';
 import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
@@ -108,15 +110,14 @@ import { faTags } from '@fortawesome/pro-solid-svg-icons/faTags';
 import { faTriangleExclamation } from '@fortawesome/pro-solid-svg-icons/faTriangleExclamation';
 import { faTruck } from '@fortawesome/pro-solid-svg-icons/faTruck';
 import { faTruckRampBox } from '@fortawesome/pro-solid-svg-icons/faTruckRampBox';
-import { faUpDownLeftRight } from '@fortawesome/pro-solid-svg-icons/faUpDownLeftRight';
 import { faUser } from '@fortawesome/pro-solid-svg-icons/faUser';
 import { faUsersGear } from '@fortawesome/pro-solid-svg-icons/faUsersGear';
 import { faWatch } from '@fortawesome/pro-solid-svg-icons/faWatch';
 import { faWebhook } from '@fortawesome/pro-solid-svg-icons/faWebhook';
-import { faWineGlassCrack } from '@fortawesome/pro-solid-svg-icons/faWineGlassCrack';
 import { faXmark as fasXmark } from '@fortawesome/pro-solid-svg-icons/faXmark';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styled, { useTheme, th } from '@xstyled/styled-components';
+import styled, { useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
 export var iconDictionary = {
     greaterThan: faAngleRight,
     startsWith: faAnglesRight,
@@ -254,7 +255,7 @@ var Icon = function (_a) {
     var theme = useTheme();
     var colorFill = fill && th.color(fill)({ theme: theme }); // React.Text wont return number here
     var colorSecondary = secondaryColor && th.color(secondaryColor)({ theme: theme });
-    var namedIcon = (typeof icon === 'string' && (iconDictionary === null || iconDictionary === void 0 ? void 0 : iconDictionary[icon])) || false;
+    var namedIcon = (typeof icon == 'string' && (iconDictionary === null || iconDictionary === void 0 ? void 0 : iconDictionary[icon])) || false;
     var iconProp = React.useMemo(function () {
         if (namedIcon) {
             return Array.isArray(namedIcon) ? namedIcon[0] : namedIcon;
@@ -262,10 +263,6 @@ var Icon = function (_a) {
         return [iconPrefixMap[style], icon];
     }, [icon, style, namedIcon]);
     var flipProp = (namedIcon && Array.isArray(namedIcon) && namedIcon[1]) || undefined;
-    if (!namedIcon && typeof icon === 'function') {
-        var IconComponent = icon;
-        return _jsx(IconComponent, { width: size, height: size, fill: colorFill, stroke: colorSecondary });
-    }
     return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: _jsx(FontAwesomeIcon, { color: colorFill, flip: flipProp, icon: iconProp, className: "faIcon ".concat(fixedWidth ? 'fa-fw' : '', " ").concat(spinning ? 'fa-spin' : '') }) }));
 };
 export default Icon;

package/ui/Elements/Icon/icons/Valuable.d.ts

@@ -1,2 +1,3 @@
-import { type FC, type SVGProps } from 'react';
-export declare const Valuable: FC<SVGProps<SVGSVGElement>>;
+import { type FC } from 'react';
+import { type SvgProps } from '../types';
+export declare const Valuable: FC<SvgProps>;

package/ui/Elements/Icon/icons/Valuable.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var Valuable = function (props) { return (_jsxs("svg", __assign({ width: "24", height: "24", viewBox: "0 0 24 24", stroke: "black", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M2 9L6 2H18L22 9L12 22L2 9Z", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 22L8 9M12 22L16 9M2 9H22", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6 2L12 9L18 2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
+export var Valuable = function (props) { return (_jsxs("svg", __assign({ width: "100", height: "100", viewBox: "0 0 24 24", stroke: "black", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { d: "M2 9L6 2H18L22 9L12 22L2 9Z", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 22L8 9M12 22L16 9M2 9H22", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6 2L12 9L18 2", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };

package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts

@@ -7,7 +7,7 @@ declare const meta: {
     } & import("..").IconProps) => JSX.Element;
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
         badge: "warning";
-        icon: string | import("react").FC<import("react").SVGProps<SVGSVGElement>>;
+        icon: string;
         style?: "normal" | "light" | "solid" | undefined;
         fill?: string | undefined;
         size?: string | number | undefined;

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").IconProps>;
+    component: ({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../types").IconProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
@@ -14,4 +14,3 @@ export declare const SmallExpedition: Story;
 export declare const BigExpedition: Story;
 export declare const ExpeditionPink: Story;
 export declare const ExpeditionPinkSolid: Story;
-export declare const CustomIcon: Story;

package/ui/Elements/Icon/stories/Icon.stories.js

@@ -1,57 +1,48 @@
 import { Icon } from '../';
-import { Valuable } from '../icons/Valuable';
 var meta = {
     title: 'Elements/Icon',
     component: Icon,
     tags: ['autodocs'],
-    argTypes: {}
+    argTypes: {},
 };
 export default meta;
 export var Expedition = {
     args: {
         icon: 'expedition',
-        size: '40px'
-    }
+        size: '40px',
+    },
 };
 export var Spinning = {
     args: {
         icon: 'expedition',
         size: '40px',
         spinning: true
-    }
+    },
 };
 export var SmallExpedition = {
     args: {
         icon: 'expedition',
-        size: '20px'
-    }
+        size: '20px',
+    },
 };
 export var BigExpedition = {
     args: {
         icon: 'expedition',
-        size: '80px'
-    }
+        size: '80px',
+    },
 };
 export var ExpeditionPink = {
     args: {
         icon: 'expedition',
         fill: 'pink',
-        size: '40px'
-    }
+        size: '40px',
+    },
 };
 export var ExpeditionPinkSolid = {
     args: {
         icon: 'expedition',
         style: 'solid',
         fill: 'pink',
-        size: '40px'
-    }
-};
-export var CustomIcon = {
-    args: {
-        icon: Valuable,
-        size: '60px',
-        fill: 'pink',
-        secondaryColor: 'red1'
-    }
+        size: '40px',
+    },
 };

package/ui/Elements/Icon/types.d.ts

@@ -1,6 +1,6 @@
-import type { MouseEventHandler, SVGProps } from 'react';
+import { MouseEventHandler } from 'react';
 export type IconProps = {
-    icon: string | React.FC<SVGProps<SVGSVGElement>>;
+    icon: string;
     style?: 'normal' | 'light' | 'solid';
     fill?: string;
     size?: number | string;

package/ui/Elements/Pagination/styled.d.ts

@@ -3,10 +3,10 @@ export declare const Wrapper: import("styled-components").StyledComponent<(props
 export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
     disabled: boolean;
 }, never>;
-export declare const ArrowIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
+export declare const ArrowIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     isActive: boolean;
 }, never>;
-export declare const GoIcon: import("styled-components").StyledComponent<import("react").FC<import("../Icon").IconProps>, import("@xstyled/system").Theme, {
+export declare const GoIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     isActive: boolean;
 }, never>;
 export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { CheckboxProps } from './types';
-declare const _default: import("react").MemoExoticComponent<({ name, label, onChange, checked, defaultChecked, size, className, disabled, inputRef, readOnly, minusIcon, }: CheckboxProps) => JSX.Element>;
+import { type CheckboxProps } from './types';
+declare const _default: import("react").MemoExoticComponent<({ name, label, onChange, checked, defaultChecked, size, className, disabled, inputRef, readOnly, minusIcon }: CheckboxProps) => JSX.Element>;
 export default _default;

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useId } from 'react';
-import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
 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"), id: id }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { htmlFor: id, children: label })] }));
+    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 })] }));
 };
 export default memo(Checkbox);

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

@@ -2,7 +2,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").MemoExoticComponent<({ name, label, onChange, checked, defaultChecked, size, className, disabled, inputRef, readOnly, minusIcon, }: import("../types").CheckboxProps) => JSX.Element>;
+    component: import("react").MemoExoticComponent<({ name, label, onChange, checked, defaultChecked, size, className, disabled, inputRef, readOnly, minusIcon }: import("../types").CheckboxProps) => JSX.Element>;
     tags: string[];
     argTypes: {};
 };

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

@@ -2,7 +2,7 @@
 export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").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<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning }: import("../../Elements/Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
     size: string | number;
 }, never>;
 export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {

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

@@ -1,2 +1,2 @@
-import { InputProps } from './types';
+import { type InputProps } from './types';
 export declare const Input: ({ 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, ...rest }: InputProps) => JSX.Element;

package/ui/Forms/Input/Input.js

@@ -35,7 +35,9 @@ export var Input = function (_a) {
     var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;
     var $hasSuffix = !!suffix;
     var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;
-    var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);
+    var onAddItem = useCallback(function () {
+        setNumber && setNumber(function (base) { return base + 1; });
+    }, [setNumber]);
     var onRemoveItem = useCallback(function () {
         setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
     }, [setNumber]);
@@ -60,5 +62,5 @@ export var Input = function (_a) {
             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": "".concat(name, "Inp"), 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 })] }));
+    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 })] }));
 };