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

package/ui/packages/ui/Forms/Checkbox/Checkbox.js

@@ -1,42 +0,0 @@
-import { th as e } from "../../../../node_modules/@xstyled/system/dist/index.js";
-import { useTheme as t } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
-import { require_jsx_runtime as n } from "../../../../node_modules/react/jsx-runtime.js";
-import { CheckIcon as r, CheckboxWrap as i, FakeInput as a, Label as o } from "./styles.js";
-import { memo as s, useId as c } from "react";
-//#region packages/ui/Forms/Checkbox/Checkbox.tsx
-var l = n(), u = s(({ name: n, label: s, onChange: u, checked: d, defaultChecked: f, size: p = 4, className: m, disabled: h, inputRef: g, readOnly: _, minusIcon: v = !1 }) => {
-	let y = t(), b = e.fontSize(p)({ theme: y }), x = c();
-	return /* @__PURE__ */ (0, l.jsxs)(i, {
-		size: b,
-		className: m,
-		children: [
-			/* @__PURE__ */ (0, l.jsx)("input", {
-				type: "checkbox",
-				ref: g,
-				name: n,
-				checked: d,
-				defaultChecked: f,
-				disabled: h,
-				onChange: u,
-				value: "",
-				readOnly: _,
-				"data-cy": n ? `${n}Checkbox` : void 0,
-				"data-testid": n ? `checkbox-${n}` : void 0,
-				id: x
-			}),
-			/* @__PURE__ */ (0, l.jsx)(a, {
-				size: b,
-				children: /* @__PURE__ */ (0, l.jsx)(r, {
-					icon: v ? "minus" : "check",
-					size: b
-				})
-			}),
-			s && /* @__PURE__ */ (0, l.jsx)(o, {
-				htmlFor: x,
-				children: s
-			})
-		]
-	});
-});
-//#endregion
-export { u as default };

package/ui/packages/ui/Forms/Checkbox/index.js

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

package/ui/packages/ui/Forms/Checkbox/styles.js

@@ -1,92 +0,0 @@
-import { th as e } from "../../../../node_modules/@xstyled/system/dist/index.js";
-import { styled as t } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
-import n from "../../Elements/Icon/Icon.js";
-import "../../Elements/Icon/index.js";
-//#region packages/ui/Forms/Checkbox/styles.ts
-var r = t.div`
-  width: ${({ size: e }) => e};
-  min-width: ${({ size: e }) => e};
-  height: ${({ size: e }) => e};
-  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;
-  }
-`, i = t(n)`
-  border-radius: lg;
-  transition: all 200ms ease;
-  & svg {
-    width: 70% !important;
-  }
-  & path {
-    fill: none;
-    stroke: none;
-  }
-
-  input[type='checkbox']:not(:disabled):checked + ${r} & {
-    & path {
-      stroke: white;
-      fill: white;
-    }
-  }
-
-  input[type='checkbox']:disabled:checked + ${r} & {
-    & path {
-      fill: ${e.color("lightGray5")} !important;
-    }
-  }
-`, a = t.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-
-  input {
-    margin: 0;
-    width: ${({ size: e }) => e};
-    height: ${({ size: e }) => e};
-    z-index: 1;
-    position: absolute;
-    opacity: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-    cursor: pointer;
-  }
-`, o = t.label`
-  margin: 0;
-  margin-left: 8px;
-  font-size: 14px;
-`;
-//#endregion
-export { i as CheckIcon, a as CheckboxWrap, r as FakeInput, o as Label };

package/ui/packages/ui/Forms/Input/Input.js

@@ -1,119 +0,0 @@
-import { require_jsx_runtime as e } from "../../../../node_modules/react/jsx-runtime.js";
-import t from "../../Elements/Icon/Icon.js";
-import "../../Elements/Icon/index.js";
-import n from "../../Elements/Spinner/Spinner.js";
-import "../../Elements/Spinner/index.js";
-import r from "../../Elements/ErrorMessage/ErrorMessage.js";
-import "../../Elements/ErrorMessage/index.js";
-import { FieldLabel as i } from "../../Elements/Label/Label.js";
-import "../../Elements/Label/index.js";
-import a from "../../Elements/SpaceAround/SpaceAround.js";
-import "../../Elements/SpaceAround/index.js";
-import { ClearableInputIcon as o, IconWrapper as s, IconsController as c, InputIcon as l, InputRow as u, InputWrap as d, StyledInput as f, Suffix as p, Tooltip as m } from "./styles.js";
-import { useCallback as h, useEffect as g, useRef as _ } from "react";
-//#region packages/ui/Forms/Input/Input.tsx
-var v = e(), y = [
-	"text",
-	"number",
-	"password"
-], b = ({ appearance: e = "primary", type: b, name: x, label: S, value: C, icon: w, variant: T = "default", disabled: E, error: D, isInvalid: O = void 0, spaceAround: k = !1, inputRef: ee, autoComplete: A, isLoading: j, className: M, suffix: N, suffixOnClick: P, errorAppearance: F, iconPlacement: I = "left", iconOnClick: L, iconTooltip: R, big: z, showArrowsController: B = !1, onClear: V, alwaysShowClear: H, setNumber: U, onEnter: W, forceFocus: G = !1, autoFocus: K = !1, onBlur: q, asTextArea: J = !1, ...Y }) => {
-	let X = O === void 0 ? !!D : O, Z = !!V && (!!C || H) && !j, Q = !!N, te = B ? "left" : I, ne = h(() => {
-		U?.((e) => e + 1);
-	}, [U]), re = h(() => {
-		U?.((e) => e > 1 ? e - 1 : 1);
-	}, [U]), ie = _(null), $ = ee || ie;
-	g(() => {
-		G && !E && !j && $?.current?.focus();
-	}, [
-		E,
-		G,
-		j
-	]);
-	let ae = h((e) => {
-		q?.(e), G && (e.relatedTarget?.tagName?.toLowerCase() !== "input" || !y.includes(e.relatedTarget?.type?.toLowerCase())) && e.target?.focus();
-	}, [G, q]), oe = h((e) => {
-		e.key === "Enter" && W?.();
-	}, [W]);
-	return /* @__PURE__ */ (0, v.jsxs)(a, {
-		spaceAround: k,
-		className: M,
-		children: [/* @__PURE__ */ (0, v.jsxs)(d, { children: [S && /* @__PURE__ */ (0, v.jsx)(i, {
-			htmlFor: x,
-			children: S
-		}), /* @__PURE__ */ (0, v.jsxs)(u, {
-			hasValue: !!C,
-			$isInvalid: X,
-			disabled: !!E,
-			$icon: w,
-			variant: T,
-			children: [
-				/* @__PURE__ */ (0, v.jsx)(f, {
-					autoFocus: K,
-					className: `${e} ${te}`,
-					type: b,
-					name: x,
-					"data-cy": x ? `${x}Inp` : void 0,
-					"data-testid": x ? `input-${x}` : void 0,
-					value: C,
-					$isInvalid: X,
-					$isClearable: Z,
-					$hasSuffix: Q,
-					disabled: E || j,
-					ref: $,
-					autoComplete: A,
-					onKeyDown: oe,
-					big: z,
-					onBlur: ae,
-					$asTextArea: J,
-					variant: T,
-					...Y
-				}),
-				w && /* @__PURE__ */ (0, v.jsx)(l, {
-					right: B ? !1 : I === "right",
-					hasValue: !!C,
-					$isInvalid: X,
-					disabled: E,
-					onClick: L,
-					children: /* @__PURE__ */ (0, v.jsxs)(m, { children: [/* @__PURE__ */ (0, v.jsx)(t, { icon: w }), R && /* @__PURE__ */ (0, v.jsx)("span", { children: R })] })
-				}),
-				B && /* @__PURE__ */ (0, v.jsxs)(c, { children: [/* @__PURE__ */ (0, v.jsx)(s, {
-					onClick: ne,
-					children: /* @__PURE__ */ (0, v.jsx)(t, {
-						icon: "goUp",
-						fill: "gray1"
-					})
-				}), /* @__PURE__ */ (0, v.jsx)(s, {
-					onClick: re,
-					children: /* @__PURE__ */ (0, v.jsx)(t, {
-						icon: "goDown",
-						fill: "gray1"
-					})
-				})] }),
-				Z && /* @__PURE__ */ (0, v.jsx)(o, {
-					right: !0,
-					onClick: V,
-					children: /* @__PURE__ */ (0, v.jsx)(t, {
-						icon: "deleteX",
-						size: "16px",
-						fill: "gray1"
-					})
-				}),
-				N && !j && /* @__PURE__ */ (0, v.jsx)(p, {
-					onClick: P,
-					$isPointer: !!P,
-					$isInvalid: X,
-					children: N
-				}),
-				j && /* @__PURE__ */ (0, v.jsx)(l, {
-					right: !0,
-					children: /* @__PURE__ */ (0, v.jsx)(n, { variant: "sm" })
-				})
-			]
-		})] }), D && /* @__PURE__ */ (0, v.jsx)(r, {
-			appearance: F,
-			children: D
-		})]
-	});
-};
-//#endregion
-export { b as Input };

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

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

package/ui/packages/ui/Forms/Input/styles.js

@@ -1,207 +0,0 @@
-import { system as e, th as t } from "../../../../node_modules/@xstyled/system/dist/index.js";
-import { css as n, styled as r } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
-//#region packages/ui/Forms/Input/styles.ts
-var i = (e) => {
-	let { $icon: t, $iconPlacement: n, $isClearable: r, $hasSuffix: i } = e, a = 2;
-	return t && n === "right" && (a += 1), r && (a += 1), i && (a += 2), String(a);
-}, a = r.div`
-  position: absolute;
-
-  // top: 52%; // TODO fix
-  // transform: translateY(-50%); // TODO why does this do the overlap bug
-  left: ${({ right: e }) => e ? "auto" : "1em"};
-  right: ${({ right: e }) => e ? "0.5em" : "auto"};
-
-  svg {
-    stroke: lightGray3;
-    cursor: pointer;
-    color: ${({ $isInvalid: e, hasValue: n, disabled: r }) => e ? t.color("red1") : r || !n ? t.color("lightGray6") : t.color("blue2")};
-  }
-`, o = r(a)`
-  svg {
-    color: gray1;
-  }
-`, s = r.div`
-  position: absolute;
-  top: 0.2em;
-  right: 0.5em;
-`, c = r.div`
-  display: flex;
-  svg {
-    :hover {
-      cursor: pointer;
-      color: blue2;
-    }
-  }
-`, l = r.input.attrs((e) => ({ as: e.$asTextArea ? "textarea" : "input" }))`
-  ${e};
-  border: slim;
-  border-color: ${({ $isInvalid: e }) => e ? t.color("red1") : t.color("lightGray6")};
-  box-sizing: border-box;
-  background-clip: padding-box;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  padding-right: ${(e) => i(e)}em;
-  display: block;
-  width: ${(e) => e.type === "checkbox" ? "auto" : "100%"};
-  font-family: ${t("fonts.primary")};
-  font-size: 14px;
-  font-weight: normal;
-  transition: inputTransition;
-  resize: none;
-  overflow: hidden;
-
-  ~ ${a} {
-    svg {
-      stroke: lightGray3;
-    }
-  }
-
-  ::placeholder {
-    color: gray1;
-    opacity: 1;
-  }
-
-  :focus {
-    background-color: white;
-    border-color: blue2;
-    color: typoPrimary;
-    outline: 0;
-
-    ~ ${a} {
-      svg {
-        stroke: blue2;
-        color: blue2;
-      }
-    }
-  }
-  ${({ big: e }) => e ? n`
-          font-size: 30px;
-          color: gray;
-          font-weight: semiBold;
-          padding: 0 0.5rem 0 1.25rem;
-        ` : ""};
-  ${({ variant: e }) => e === "gray" ? n`
-          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;
-  }
-`, u = r.div`
-  position: relative;
-`, d = r.div`
-  position: absolute;
-  right: 0;
-  top: 0;
-  font-size: 14px;
-  font-weight: 700;
-  height: 100%;
-  width: 40px;
-  padding: 2;
-  color: typoPrimary;
-  font-family: ${t("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: e }) => e ? n`
-          cursor: pointer;
-        ` : ""};
-
-  input:focus ~ &,
-  textarea:focus ~ & {
-    border-color: blue2;
-  }
-`, f = r.div`
-  position: relative;
-  color: ${({ $isInvalid: e }) => e ? t.color("red1") : t.color("gray")};
-  & > * {
-    border-color: ${({ $isInvalid: e, variant: n }) => e ? t.color("red1") : n === "gray" ? t.color("neutral20") : t.color("lightGray6")};
-    color: ${({ hasValue: e }) => e ? t.color("typoPrimary") : t.color("gray")};
-  }
-  :hover > * {
-    border-color: ${({ disabled: e }) => e ? t.color("lightGray3") : t.color("gray5")};
-  }
-  &:focus-within {
-    color: typoPrimary;
-  }
-  .primary {
-    line-height: 0;
-    height: 38px;
-    border-radius: lg;
-    ~ ${a} {
-      top: 10px;
-    }
-  }
-  .grid {
-    line-height: 1.2px;
-    border-radius: md;
-    ~ ${a} {
-      top: 7px;
-    }
-  }
-  .left {
-    padding-left: ${({ $icon: e }) => e ? "3em" : "1em"};
-  }
-  .right {
-    padding-right: 1.4em;
-    padding-left: 1em;
-  }
-`, p = r.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 ${t.color("red1")} transparent transparent;
-    }
-  }
-
-  :hover {
-    cursor: pointer;
-    span {
-      display: block;
-    }
-  }
-`;
-//#endregion
-export { o as ClearableInputIcon, c as IconWrapper, s as IconsController, a as InputIcon, f as InputRow, u as InputWrap, l as StyledInput, d as Suffix, p as Tooltip };

package/ui/packages/ui/Forms/RadioButton/RadioButton.js

@@ -1,23 +0,0 @@
-import { require_jsx_runtime as e } from "../../../../node_modules/react/jsx-runtime.js";
-import { CenterDot as t, Item as n, Label as r, PaintoverLayer as i, StyledRadio as a, Wrapper as o } from "./styles.js";
-import { useId as s } from "react";
-//#region packages/ui/Forms/RadioButton/RadioButton.tsx
-var c = e(), l = ({ label: e, id: l, name: u, disabled: d = !1, onChange: f, ...p }) => {
-	let m = s(), h = l || m;
-	return /* @__PURE__ */ (0, c.jsxs)(o, { children: [/* @__PURE__ */ (0, c.jsxs)(n, { children: [/* @__PURE__ */ (0, c.jsx)(a, {
-		type: "radio",
-		id: h,
-		name: u,
-		disabled: d,
-		onChange: f,
-		...p
-	}), /* @__PURE__ */ (0, c.jsx)(i, {
-		disabled: d,
-		children: /* @__PURE__ */ (0, c.jsx)(t, {})
-	})] }), e && /* @__PURE__ */ (0, c.jsx)(r, {
-		htmlFor: h,
-		children: e
-	})] });
-};
-//#endregion
-export { l as default };

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

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

package/ui/packages/ui/Forms/RadioButton/styles.js

@@ -1,81 +0,0 @@
-import { styled as e } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
-//#region packages/ui/Forms/RadioButton/styles.ts
-var t = e.div`
-  display: flex;
-  align-items: center;
-  height: auto;
-  width: auto;
-  box-sizing: border-box;
-`, n = e.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;
-  }
-`, r = e.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;
-  }
-`, i = e.span`
-  width: 10px;
-  height: 10px;
-`, a = e.input`
-  opacity: 0;
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  cursor: ${({ disabled: e }) => e ? "default" : "pointer"};
-  margin: 0;
-`, o = e.label`
-  margin: 0;
-  margin-left: 8px;
-  font-size: 14px;
-`;
-//#endregion
-export { i as CenterDot, n as Item, o as Label, r as PaintoverLayer, a as StyledRadio, t as Wrapper };

package/ui/packages/ui/Forms/TextArea/TextArea.js

@@ -1,35 +0,0 @@
-import { require_jsx_runtime as e } from "../../../../node_modules/react/jsx-runtime.js";
-import t from "../../Elements/Icon/Icon.js";
-import n from "../../Elements/ErrorMessage/ErrorMessage.js";
-import { FieldLabel as r } from "../../Elements/Label/Label.js";
-import "../../Elements/Label/index.js";
-import i from "../../Elements/SpaceAround/SpaceAround.js";
-import "../../Elements/SpaceAround/index.js";
-import { BorderWrap as a, IconWrap as o, InnerWrap as s, StyledTextArea as c, TextAreaWrap as l } from "./styles.js";
-import "react";
-//#region packages/ui/Forms/TextArea/TextArea.tsx
-var u = e(), d = ({ name: e, label: d, value: f, disabled: p, error: m, spaceAround: h = !1, isInvalid: g = void 0, className: _, resize: v, icon: y, rows: b = 4, Footer: x, ...S }) => {
-	let C = g === void 0 ? !!m : g;
-	return /* @__PURE__ */ (0, u.jsxs)(i, {
-		spaceAround: h,
-		children: [/* @__PURE__ */ (0, u.jsxs)(l, { children: [d && /* @__PURE__ */ (0, u.jsx)(r, {
-			htmlFor: e,
-			children: d
-		}), /* @__PURE__ */ (0, u.jsxs)(a, {
-			$isInvalid: C,
-			disabled: p,
-			children: [/* @__PURE__ */ (0, u.jsxs)(s, { children: [y && /* @__PURE__ */ (0, u.jsx)(o, { children: /* @__PURE__ */ (0, u.jsx)(t, { icon: y }) }), /* @__PURE__ */ (0, u.jsx)(c, {
-				name: e,
-				value: f,
-				disabled: p,
-				className: _,
-				$isInvalid: C,
-				$resize: v,
-				...S,
-				rows: b
-			})] }), x]
-		})] }), m && /* @__PURE__ */ (0, u.jsx)(n, { children: m })]
-	});
-};
-//#endregion
-export { d as default };

package/ui/packages/ui/Forms/TextArea/index.js

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

package/ui/packages/ui/Forms/TextArea/styles.js

@@ -1,72 +0,0 @@
-import { system as e, th as t } from "../../../../node_modules/@xstyled/system/dist/index.js";
-import { css as n, styled as r } from "../../../../node_modules/@xstyled/styled-components/dist/index.js";
-//#region packages/ui/Forms/TextArea/styles.ts
-var i = r.div`
-  font-size: 12px;
-  color: ${t.color("lightGray5")};
-
-  & svg {
-    margin-top: 2;
-    margin-right: 1;
-  }
-`, a = r.textarea`
-  ${e};
-  display: block;
-  width: 100%;
-  font-size: 1;
-  font-family: ${t("fonts.primary")};
-  line-height: 0;
-  transition: inputTransition;
-  border: none;
-  font-weight: 800;
-  color: ${({ $isInvalid: e, disabled: n }) => e ? t.color("red1") : n ? t.color("gray") : t.color("typoPrimary")};
-  background-color: transparent;
-  :focus {
-    outline: 0;
-    color: blue2;
-  }
-  ${({ $resize: e }) => e ? n`
-          resize: ${e};
-        ` : ""}
-
-  ::placeholder {
-    color: lightGray5;
-    font-size: 14px;
-    font-weight: 400;
-  }
-`, o = r.div`
-  position: relative;
-`, s = r.div`
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  padding-top: 1;
-  padding-bottom: 1;
-  padding-right: 1;
-  padding-left: 12px;
-  border: slim;
-  border-color: ${({ $isInvalid: e }) => e ? t.color("red1") : t.color("lightGray6")};
-  color: ${({ $isInvalid: e }) => e ? t.color("red1") : t.color("gray")};
-  background-color: ${({ disabled: e }) => e ? t("colors.lightGray1") : "unset"};
-  background-clip: padding-box;
-  border-radius: lg;
-
-  :focus-within {
-    background-color: white;
-    border-color: blue2;
-    color: blue2;
-  }
-
-  :hover {
-    border-color: ${({ disabled: e }) => t(e ? "colors.lightGray3" : "colors.gray5")};
-  }
-
-  :disabled {
-    background-color: lightGray1;
-  }
-`, c = r.div`
-  display: flex;
-  position: relative;
-`;
-//#endregion
-export { s as BorderWrap, i as IconWrap, c as InnerWrap, a as StyledTextArea, o as TextAreaWrap };