@mailstep/design-system 0.8.26 → 0.8.27-beta.0

package/ui/Forms/Input/Input.js

@@ -0,0 +1,129 @@
+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.js

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

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

@@ -0,0 +1,5 @@
+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/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, {
     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/system").Theme, {}, never>;
+export declare const Suffix: import("styled-components").StyledComponent<"div", import("@xstyled/system").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/system").Theme, {
     hasValue: boolean;
     disabled: boolean;
     $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/system").Theme, {}, never>;
 export {};

package/ui/Forms/Input/styles.js

@@ -0,0 +1,219 @@
+import styled$1, { css, system, th } from "@xstyled/styled-components";
+//#region packages/ui/Forms/Input/styles.ts
+const resolvePaddingRight = (props) => {
+	const { $icon, $iconPlacement, $isClearable, $hasSuffix } = props;
+	let padding = 2;
+	if ($icon && $iconPlacement === "right") padding += 1;
+	if ($isClearable) padding += 1;
+	if ($hasSuffix) padding += 2;
+	return String(padding);
+};
+const InputIcon = styled$1.div`
+  position: absolute;
+
+  // top: 52%; // TODO fix
+  // transform: translateY(-50%); // TODO why does this do the overlap bug
+  left: ${({ right }) => right ? "auto" : "1em"};
+  right: ${({ right }) => right ? "0.5em" : "auto"};
+
+  svg {
+    stroke: lightGray3;
+    cursor: pointer;
+    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("red1") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2")};
+  }
+`;
+const ClearableInputIcon = styled$1(InputIcon)`
+  svg {
+    color: gray1;
+  }
+`;
+const IconsController = styled$1.div`
+  position: absolute;
+  top: 0.2em;
+  right: 0.5em;
+`;
+const IconWrapper = styled$1.div`
+  display: flex;
+  svg {
+    :hover {
+      cursor: pointer;
+      color: blue2;
+    }
+  }
+`;
+const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "textarea" : "input" }))`
+  ${system};
+  border: slim;
+  border-color: ${({ $isInvalid }) => $isInvalid ? th.color("red1") : th.color("lightGray6")};
+  box-sizing: border-box;
+  background-clip: padding-box;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: ${(props) => resolvePaddingRight(props)}em;
+  display: block;
+  width: ${(props) => props.type !== "checkbox" ? "100%" : "auto"};
+  font-family: ${th("fonts.primary")};
+  font-size: 14px;
+  font-weight: normal;
+  transition: inputTransition;
+  resize: none;
+  overflow: hidden;
+
+  ~ ${InputIcon} {
+    svg {
+      stroke: lightGray3;
+    }
+  }
+
+  ::placeholder {
+    color: gray1;
+    opacity: 1;
+  }
+
+  :focus {
+    background-color: white;
+    border-color: blue2;
+    color: typoPrimary;
+    outline: 0;
+
+    ~ ${InputIcon} {
+      svg {
+        stroke: blue2;
+        color: blue2;
+      }
+    }
+  }
+  ${({ big }) => big ? css`
+          font-size: 30px;
+          color: gray;
+          font-weight: semiBold;
+          padding: 0 0.5rem 0 1.25rem;
+        ` : ""};
+  ${({ variant }) => variant === "gray" ? css`
+          background-color: neutral20;
+          :focus {
+            background-color: neutral20;
+          }
+        ` : ""};
+  :disabled,
+  :disabled:hover {
+    background-color: bgLightGray1;
+    border-color: lightGray6;
+    color: neutral300;
+  }
+
+  text-overflow: ellipsis;
+
+  -moz-appearance: textfield;
+  appearance: textfield;
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+`;
+const InputWrap = styled$1.div`
+  position: relative;
+`;
+const Suffix = styled$1.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 14px;
+  font-weight: 700;
+  height: 100%;
+  width: 40px;
+  padding: 2;
+  color: typoPrimary;
+  font-family: ${th("fonts.primary")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  border: slim;
+  border-top-right-radius: lg;
+  border-bottom-right-radius: lg;
+  border-left: none;
+
+  ${({ $isPointer }) => $isPointer ? css`
+          cursor: pointer;
+        ` : ""};
+
+  input:focus ~ &,
+  textarea:focus ~ & {
+    border-color: blue2;
+  }
+`;
+const InputRow = styled$1.div`
+  position: relative;
+  color: ${({ $isInvalid }) => $isInvalid ? th.color("red1") : th.color("gray")};
+  & > * {
+    border-color: ${({ $isInvalid, variant }) => $isInvalid ? th.color("red1") : variant === "gray" ? th.color("neutral20") : th.color("lightGray6")};
+    color: ${({ hasValue }) => hasValue ? th.color("typoPrimary") : th.color("gray")};
+  }
+  :hover > * {
+    border-color: ${({ disabled }) => disabled ? th.color("lightGray3") : th.color("gray5")};
+  }
+  &:focus-within {
+    color: typoPrimary;
+  }
+  .primary {
+    line-height: 0;
+    height: 38px;
+    border-radius: lg;
+    ~ ${InputIcon} {
+      top: 10px;
+    }
+  }
+  .grid {
+    line-height: 1.2px;
+    border-radius: md;
+    ~ ${InputIcon} {
+      top: 7px;
+    }
+  }
+  .left {
+    padding-left: ${({ $icon }) => $icon ? "3em" : "1em"};
+  }
+  .right {
+    padding-right: 1.4em;
+    padding-left: 1em;
+  }
+`;
+const Tooltip = styled$1.div`
+  span {
+    display: none;
+    position: absolute;
+    width: 120px;
+    background-color: white;
+    color: red1;
+    border-color: red1;
+    border: 1px solid;
+    text-align: center;
+    border-radius: lg;
+    padding: 1 3;
+    margin: 1;
+    z-index: 1;
+    transition: opacity 0.3s;
+    top: 0;
+    left: 100%;
+    margin-left: 2;
+    box-shadow: tooltipBoxShadow;
+
+    :after {
+      content: '';
+      position: absolute;
+      top: 0px;
+      right: 100%;
+      border: mediumThick;
+      border-color: transparent ${th.color("red1")} transparent transparent;
+    }
+  }
+
+  :hover {
+    cursor: pointer;
+    span {
+      display: block;
+    }
+  }
+`;
+//#endregion
+export { ClearableInputIcon, IconWrapper, IconsController, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip };

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

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

package/ui/Forms/Input/types.js

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

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

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

package/ui/Forms/RadioButton/RadioButton.js

@@ -0,0 +1,24 @@
+import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from "./styles.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/RadioButton/RadioButton.tsx
+const RadioButton = ({ label, id, name, disabled = false, onChange, ...rest }) => {
+	const customId = useId();
+	const inputId = id || customId;
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(StyledRadio, {
+		type: "radio",
+		id: inputId,
+		name,
+		disabled,
+		onChange,
+		...rest
+	}), /* @__PURE__ */ jsx(PaintoverLayer, {
+		disabled,
+		children: /* @__PURE__ */ jsx(CenterDot, {})
+	})] }), label && /* @__PURE__ */ jsx(Label, {
+		htmlFor: inputId,
+		children: label
+	})] });
+};
+//#endregion
+export { RadioButton as default };

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

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

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

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

package/ui/Forms/RadioButton/index.js

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

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

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

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

@@ -1,10 +1,10 @@
-export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Item: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const PaintoverLayer: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Item: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const PaintoverLayer: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
     disabled: boolean;
 }, never>;
-export declare const CenterDot: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledRadio: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {
+export declare const CenterDot: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledRadio: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
     disabled: boolean;
 }, never>;
-export declare const Label: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/RadioButton/styles.js

@@ -0,0 +1,86 @@
+import styled$1 from "@xstyled/styled-components";
+//#region packages/ui/Forms/RadioButton/styles.ts
+const Wrapper = styled$1.div`
+  display: flex;
+  align-items: center;
+  height: auto;
+  width: auto;
+  box-sizing: border-box;
+`;
+const Item = styled$1.div`
+  display: flex;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  & > span > span {
+    width: 10px;
+    height: 10px;
+  }
+  & > * {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+`;
+const PaintoverLayer = styled$1.span`
+  border-radius: 50%;
+  background-color: white;
+  border: 1.5px solid;
+  border-color: lightGray5;
+  pointer-events: none;
+  cursor: pointer;
+  position: relative;
+
+  & span {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    box-sizing: border-box;
+    border-radius: 50%;
+    transition: opacity 100ms ease-out;
+    background-color: white;
+  }
+
+  input[type='radio']:checked + & {
+    border-color: red1;
+  }
+
+  input[type='radio']:disabled + & {
+    border-color: gray1;
+  }
+
+  input[type='radio']:not(:disabled):not(:checked):hover + & {
+    border-color: gray1;
+  }
+
+  input[type='radio']:hover:not(:disabled):not(:checked) + & > span,
+  input[type='radio']:checked:disabled + & > span {
+    background-color: gray1;
+  }
+
+  input[type='radio']:checked + & > span {
+    background-color: red1;
+  }
+`;
+const CenterDot = styled$1.span`
+  width: 10px;
+  height: 10px;
+`;
+const StyledRadio = styled$1.input`
+  opacity: 0;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  cursor: ${({ disabled }) => disabled ? "default" : "pointer"};
+  margin: 0;
+`;
+const Label = styled$1.label`
+  margin: 0;
+  margin-left: 8px;
+  font-size: 14px;
+`;
+//#endregion
+export { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper };

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

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

package/ui/Forms/RadioButton/types.js

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

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

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

package/ui/Forms/TextArea/TextArea.js

@@ -0,0 +1,35 @@
+import Icon from "../../Elements/Icon/Icon.js";
+import ErrorMessage from "../../Elements/ErrorMessage/ErrorMessage.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 { BorderWrap, IconWrap, InnerWrap, StyledTextArea, TextAreaWrap } from "./styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/TextArea/TextArea.tsx
+const TextArea = ({ name, label, value, disabled, error, spaceAround = false, isInvalid = void 0, className, resize, icon, rows = 4, Footer, ...rest }) => {
+	const $isInvalid = isInvalid !== void 0 ? isInvalid : !!error;
+	return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
+		spaceAround,
+		children: [/* @__PURE__ */ jsxs(TextAreaWrap, { children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+			htmlFor: name,
+			children: label
+		}), /* @__PURE__ */ jsxs(BorderWrap, {
+			$isInvalid,
+			disabled,
+			children: [/* @__PURE__ */ jsxs(InnerWrap, { children: [icon && /* @__PURE__ */ jsx(IconWrap, { children: /* @__PURE__ */ jsx(Icon, { icon }) }), /* @__PURE__ */ jsx(StyledTextArea, {
+				name,
+				value,
+				disabled,
+				className,
+				$isInvalid,
+				$resize: resize,
+				...rest,
+				rows
+			})] }), Footer]
+		})] }), error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })]
+	});
+};
+//#endregion
+export { TextArea as default };

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

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

package/ui/Forms/TextArea/index.js

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