@athbnb/ui 0.0.2 → 0.0.3

package/dist/ui/TextInput.js

@@ -0,0 +1,538 @@
+import { c as e } from "react/compiler-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as r from "react";
+//#region src/ui/TextInput.tsx
+function i(r) {
+	let i = e(11), { label: a, name: o, required: s, error: c, isFocused: l, hasValue: u, labelBgClassName: d, inactiveTopClassName: f, labelRestClassName: p } = r, m = d === void 0 ? "bg-white" : d, h = l || u ? "-top-2.5 text-sm! text-secondary font-bold" : `${f === void 0 ? "top-2.5" : f} text-secondary/50 ${p === void 0 ? "w-11/12" : p}`, g = c ? "!text-red-500" : "", _;
+	i[0] !== m || i[1] !== h || i[2] !== g ? (_ = [
+		"absolute inline-block left-2 px-1 transition-all duration-300 ease-in-out sm:text-base text-sm pointer-events-none align-middle",
+		m,
+		h,
+		g
+	].filter(Boolean), i[0] = m, i[1] = h, i[2] = g, i[3] = _) : _ = i[3];
+	let v = _.join(" "), y;
+	i[4] === s ? y = i[5] : (y = s ? /* @__PURE__ */ t("span", {
+		className: "text-red-500 ml-0.5",
+		children: "*"
+	}) : null, i[4] = s, i[5] = y);
+	let b;
+	return i[6] !== a || i[7] !== o || i[8] !== v || i[9] !== y ? (b = /* @__PURE__ */ n("label", {
+		htmlFor: o,
+		className: v,
+		children: [a, y]
+	}), i[6] = a, i[7] = o, i[8] = v, i[9] = y, i[10] = b) : b = i[10], b;
+}
+function a(e, t, n, r) {
+	return [e ? "border-red-500" : t || n ? "border-1 border-primary" : "border-1 border-primary/50", r ? "bg-white cursor-not-allowed border-1 border-primary/50 opacity-75" : ""].filter(Boolean).join(" ");
+}
+var o = (r) => {
+	let i = e(2), { open: a } = r, o;
+	return i[0] === a ? o = i[1] : (o = a ? /* @__PURE__ */ n("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		className: "text-primary",
+		"aria-hidden": !0,
+		children: [/* @__PURE__ */ t("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), /* @__PURE__ */ t("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		})]
+	}) : /* @__PURE__ */ n("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		className: "text-secondary",
+		"aria-hidden": !0,
+		children: [/* @__PURE__ */ t("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), /* @__PURE__ */ t("line", {
+			x1: "1",
+			y1: "1",
+			x2: "23",
+			y2: "23"
+		})]
+	}), i[0] = a, i[1] = o), o;
+}, s = () => {
+	let r = e(1), i;
+	return r[0] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ n("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		className: "min-w-6 min-h-6 shrink-0 text-red-500 pe-2",
+		"aria-hidden": !0,
+		children: [
+			/* @__PURE__ */ t("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ t("line", {
+				x1: "12",
+				y1: "8",
+				x2: "12",
+				y2: "12"
+			}),
+			/* @__PURE__ */ t("line", {
+				x1: "12",
+				y1: "16",
+				x2: "12.01",
+				y2: "16"
+			})
+		]
+	}), r[0] = i) : i = r[0], i;
+};
+function c(s) {
+	let c = e(83), u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D;
+	c[0] === s ? (u = c[1], d = c[2], f = c[3], p = c[4], m = c[5], h = c[6], g = c[7], _ = c[8], v = c[9], y = c[10], b = c[11], x = c[12], S = c[13], C = c[14], w = c[15], T = c[16], E = c[17], D = c[18]) : ({label: g, name: f, type: b, value: x, onChange: m, onBlur: p, error: S, description: C, helperText: w, required: T, disabled: E, className: D, leftComponent: _, rightComponent: v, bgColorForLabel: y, dateMin: d, dateMax: u, ...h} = s, c[0] = s, c[1] = u, c[2] = d, c[3] = f, c[4] = p, c[5] = m, c[6] = h, c[7] = g, c[8] = _, c[9] = v, c[10] = y, c[11] = b, c[12] = x, c[13] = S, c[14] = C, c[15] = w, c[16] = T, c[17] = E, c[18] = D);
+	let O = g === void 0 ? "" : g, k = b === void 0 ? "text" : b, A = x === void 0 ? "" : x, j = S === void 0 ? "" : S, M = C === void 0 ? "" : C, N = w === void 0 ? "" : w, P = T === void 0 ? !1 : T, F = E === void 0 ? !1 : E, I = D === void 0 ? "" : D, L = _ === void 0 ? null : _, R = v === void 0 ? null : v, z = y === void 0 ? "bg-white" : y, ee = r.useRef(null), [B, V] = r.useState(!1), [H, U] = r.useState(!1), W = k === "password", G = W ? H ? "text" : "password" : k, K;
+	c[19] !== u || c[20] !== d || c[21] !== k ? (K = k === "date" ? {
+		min: d ?? new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() - 100)).toISOString().split("T")[0],
+		max: u ?? (/* @__PURE__ */ new Date()).toISOString().split("T")[0]
+	} : {}, c[19] = u, c[20] = d, c[21] = k, c[22] = K) : K = c[22];
+	let q = K, J = `${I} ${F ? "opacity-75" : ""}`, Y = !!A, X;
+	c[23] !== F || c[24] !== j || c[25] !== B || c[26] !== Y ? (X = a(j, B, Y, F), c[23] = F, c[24] = j, c[25] = B, c[26] = Y, c[27] = X) : X = c[27];
+	let Z;
+	c[28] === X ? Z = c[29] : (Z = ["relative peer w-full sm:h-[48px] h-[42px] px-3 text-base bg-transparent border rounded-md outline-none transition-all text-[14px] flex items-center", X], c[28] = X, c[29] = Z);
+	let te = Z.join(" "), Q;
+	c[30] !== q || c[31] !== k ? (Q = k === "date" ? q : {}, c[30] = q, c[31] = k, c[32] = Q) : Q = c[32];
+	let $;
+	c[33] === k ? $ = c[34] : ($ = () => {
+		k === "date" && ee.current?.showPicker && ee.current.showPicker(), V(!0);
+	}, c[33] = k, c[34] = $);
+	let ne;
+	c[35] === p ? ne = c[36] : (ne = (e) => {
+		V(!1), p?.(e);
+	}, c[35] = p, c[36] = ne);
+	let re = F ? "cursor-not-allowed" : "", ie = W ? "pr-6" : "", ae;
+	c[37] !== re || c[38] !== ie ? (ae = [
+		"outline-0 w-full text-[16px] sm:text-[14px] bg-transparent",
+		re,
+		ie
+	].filter(Boolean), c[37] = re, c[38] = ie, c[39] = ae) : ae = c[39];
+	let oe = ae.join(" "), se;
+	c[40] !== G || c[41] !== F || c[42] !== f || c[43] !== m || c[44] !== h || c[45] !== Q || c[46] !== $ || c[47] !== ne || c[48] !== oe || c[49] !== A ? (se = /* @__PURE__ */ t("input", {
+		id: f,
+		name: f,
+		type: G,
+		value: A,
+		disabled: F,
+		...Q,
+		onChange: m,
+		onFocus: $,
+		onBlur: ne,
+		placeholder: "",
+		ref: ee,
+		className: oe,
+		...h
+	}), c[40] = G, c[41] = F, c[42] = f, c[43] = m, c[44] = h, c[45] = Q, c[46] = $, c[47] = ne, c[48] = oe, c[49] = A, c[50] = se) : se = c[50];
+	let ce;
+	c[51] !== W || c[52] !== R || c[53] !== H ? (ce = W ? /* @__PURE__ */ t("button", {
+		type: "button",
+		className: "absolute right-3 top-1/2 -translate-y-1/2 text-secondary cursor-pointer border-0 bg-transparent p-0",
+		onClick: () => U(l),
+		tabIndex: -1,
+		"aria-label": H ? "Hide password" : "Show password",
+		children: /* @__PURE__ */ t(o, { open: H })
+	}) : R, c[51] = W, c[52] = R, c[53] = H, c[54] = ce) : ce = c[54];
+	let le;
+	c[55] === ce ? le = c[56] : (le = /* @__PURE__ */ t("div", {
+		className: "z-[5]",
+		children: ce
+	}), c[55] = ce, c[56] = le);
+	let ue = !!F, de = !!A, fe = k === "date" ? "w-10/12" : "w-11/12", pe;
+	c[57] !== z || c[58] !== j || c[59] !== B || c[60] !== O || c[61] !== f || c[62] !== P || c[63] !== ue || c[64] !== de || c[65] !== fe ? (pe = /* @__PURE__ */ t(i, {
+		label: O,
+		name: f,
+		required: P,
+		error: j,
+		disabled: ue,
+		isFocused: B,
+		hasValue: de,
+		labelBgClassName: z,
+		labelRestClassName: fe
+	}), c[57] = z, c[58] = j, c[59] = B, c[60] = O, c[61] = f, c[62] = P, c[63] = ue, c[64] = de, c[65] = fe, c[66] = pe) : pe = c[66];
+	let me;
+	c[67] !== L || c[68] !== te || c[69] !== se || c[70] !== le || c[71] !== pe ? (me = /* @__PURE__ */ n("div", {
+		className: te,
+		children: [
+			L,
+			se,
+			le,
+			pe
+		]
+	}), c[67] = L, c[68] = te, c[69] = se, c[70] = le, c[71] = pe, c[72] = me) : me = c[72];
+	let he;
+	c[73] !== j || c[74] !== N ? (he = (j || N) && /* @__PURE__ */ t("p", {
+		className: `mt-1 text-sm ${j ? "text-red-500" : "text-secondary/50"}`,
+		children: j || N
+	}), c[73] = j, c[74] = N, c[75] = he) : he = c[75];
+	let ge;
+	c[76] === M ? ge = c[77] : (ge = M ? /* @__PURE__ */ t("div", {
+		className: "mt-1 sm:text-base text-sm text-secondary/60",
+		children: M
+	}) : null, c[76] = M, c[77] = ge);
+	let _e;
+	return c[78] !== J || c[79] !== me || c[80] !== he || c[81] !== ge ? (_e = /* @__PURE__ */ n("div", {
+		className: J,
+		children: [
+			me,
+			he,
+			ge
+		]
+	}), c[78] = J, c[79] = me, c[80] = he, c[81] = ge, c[82] = _e) : _e = c[82], _e;
+}
+function l(e) {
+	return !e;
+}
+function u(o) {
+	let s = e(61), c, l, u, d, f, p, m, h, g, _, v, y, b, x, S;
+	s[0] === o ? (c = s[1], l = s[2], u = s[3], d = s[4], f = s[5], p = s[6], m = s[7], h = s[8], g = s[9], _ = s[10], v = s[11], y = s[12], b = s[13], x = s[14], S = s[15]) : ({label: p, name: l, value: h, onChange: d, onBlur: u, error: g, helperText: _, required: v, disabled: y, className: b, rows: x, maxLength: c, bgColorForLabel: S, placeholder: m, ...f} = o, s[0] = o, s[1] = c, s[2] = l, s[3] = u, s[4] = d, s[5] = f, s[6] = p, s[7] = m, s[8] = h, s[9] = g, s[10] = _, s[11] = v, s[12] = y, s[13] = b, s[14] = x, s[15] = S);
+	let C = p === void 0 ? "" : p, w = h === void 0 ? "" : h, T = g === void 0 ? "" : g, E = _ === void 0 ? "" : _, D = v === void 0 ? !1 : v, O = y === void 0 ? !1 : y, k = b === void 0 ? "" : b, A = x === void 0 ? 4 : x, j = S === void 0 ? "bg-white" : S, M = m === void 0 ? "" : m, [N, P] = r.useState(!1), F = N || !!w, I = `${k} ${O ? "opacity-75" : ""}`, L = !!w, R;
+	s[16] !== O || s[17] !== T || s[18] !== N || s[19] !== L ? (R = a(T, N, L, O), s[16] = O, s[17] = T, s[18] = N, s[19] = L, s[20] = R) : R = s[20];
+	let z;
+	s[21] === R ? z = s[22] : (z = ["relative w-full px-3 pt-4 pb-2 text-base bg-transparent border rounded-md outline-none transition-all text-[14px]", R], s[21] = R, s[22] = z);
+	let ee = z.join(" "), B;
+	s[23] === Symbol.for("react.memo_cache_sentinel") ? (B = () => P(!0), s[23] = B) : B = s[23];
+	let V;
+	s[24] === u ? V = s[25] : (V = (e) => {
+		P(!1), u?.(e);
+	}, s[24] = u, s[25] = V);
+	let H = F ? M : "", U = `outline-0 w-full text-[16px] sm:text-[14px] resize-none bg-transparent ${O ? "cursor-not-allowed" : ""}`, W;
+	s[26] !== O || s[27] !== c || s[28] !== l || s[29] !== d || s[30] !== f || s[31] !== A || s[32] !== V || s[33] !== H || s[34] !== U || s[35] !== w ? (W = /* @__PURE__ */ t("textarea", {
+		id: l,
+		name: l,
+		value: w,
+		disabled: O,
+		rows: A,
+		maxLength: c,
+		onChange: d,
+		onFocus: B,
+		onBlur: V,
+		placeholder: H,
+		className: U,
+		...f
+	}), s[26] = O, s[27] = c, s[28] = l, s[29] = d, s[30] = f, s[31] = A, s[32] = V, s[33] = H, s[34] = U, s[35] = w, s[36] = W) : W = s[36];
+	let G = !!O, K = !!w, q;
+	s[37] !== j || s[38] !== T || s[39] !== N || s[40] !== C || s[41] !== l || s[42] !== D || s[43] !== G || s[44] !== K ? (q = /* @__PURE__ */ t(i, {
+		label: C,
+		name: l,
+		required: D,
+		error: T,
+		disabled: G,
+		isFocused: N,
+		hasValue: K,
+		labelBgClassName: j,
+		inactiveTopClassName: "top-3.5",
+		labelRestClassName: "w-11/12"
+	}), s[37] = j, s[38] = T, s[39] = N, s[40] = C, s[41] = l, s[42] = D, s[43] = G, s[44] = K, s[45] = q) : q = s[45];
+	let J;
+	s[46] !== c || s[47] !== w ? (J = c == null ? null : /* @__PURE__ */ n("span", {
+		className: "absolute bottom-2 right-3 text-xs text-secondary/40",
+		children: [
+			String(w).length,
+			"/",
+			c
+		]
+	}), s[46] = c, s[47] = w, s[48] = J) : J = s[48];
+	let Y;
+	s[49] !== ee || s[50] !== W || s[51] !== q || s[52] !== J ? (Y = /* @__PURE__ */ n("div", {
+		className: ee,
+		children: [
+			W,
+			q,
+			J
+		]
+	}), s[49] = ee, s[50] = W, s[51] = q, s[52] = J, s[53] = Y) : Y = s[53];
+	let X;
+	s[54] !== T || s[55] !== E ? (X = (T || E) && /* @__PURE__ */ t("p", {
+		className: `mt-1 text-sm ${T ? "text-red-500" : "text-secondary/50"}`,
+		children: T || E
+	}), s[54] = T, s[55] = E, s[56] = X) : X = s[56];
+	let Z;
+	return s[57] !== I || s[58] !== Y || s[59] !== X ? (Z = /* @__PURE__ */ n("div", {
+		className: I,
+		children: [Y, X]
+	}), s[57] = I, s[58] = Y, s[59] = X, s[60] = Z) : Z = s[60], Z;
+}
+function d(i) {
+	let o = e(65), s, c, l, u, d, p, m, h, g, _, v, y, b, x, S;
+	o[0] === i ? (s = o[1], c = o[2], l = o[3], u = o[4], d = o[5], p = o[6], m = o[7], h = o[8], g = o[9], _ = o[10], v = o[11], y = o[12], b = o[13], x = o[14], S = o[15]) : ({label: m, name: c, value: h, onChange: u, onBlur: l, error: g, description: _, helperText: v, countryOptions: y, countryCode: s, onSelectCountryCode: d, required: b, disabled: x, className: S, ...p} = i, o[0] = i, o[1] = s, o[2] = c, o[3] = l, o[4] = u, o[5] = d, o[6] = p, o[7] = m, o[8] = h, o[9] = g, o[10] = _, o[11] = v, o[12] = y, o[13] = b, o[14] = x, o[15] = S);
+	let C = m === void 0 ? "" : m, w = h === void 0 ? "" : h, T = g === void 0 ? "" : g, E = _ === void 0 ? "" : _, D = v === void 0 ? "" : v, O;
+	o[16] === y ? O = o[17] : (O = y === void 0 ? [] : y, o[16] = y, o[17] = O);
+	let k = O, A = b === void 0 ? !1 : b, j = x === void 0 ? !1 : x, M = S === void 0 ? "" : S, [N, P] = r.useState(!1), F = N || !!w, I = !!s && k && k.length > 0, L = `relative ${M}`, R, z;
+	o[18] === Symbol.for("react.memo_cache_sentinel") ? (R = () => P(!0), z = () => P(!1), o[18] = R, o[19] = z) : (R = o[18], z = o[19]);
+	let ee = !!w, B;
+	o[20] !== j || o[21] !== T || o[22] !== N || o[23] !== ee ? (B = a(T, N, ee, j), o[20] = j, o[21] = T, o[22] = N, o[23] = ee, o[24] = B) : B = o[24];
+	let V;
+	o[25] === B ? V = o[26] : (V = ["flex items-center border sm:h-[48px] h-[42px] px-3 rounded-md transition-all bg-white", B], o[25] = B, o[26] = V);
+	let H = V.join(" "), U;
+	o[27] !== s || o[28] !== k || o[29] !== j || o[30] !== d || o[31] !== I ? (U = I ? /* @__PURE__ */ t("select", {
+		disabled: j,
+		className: "text-sm bg-transparent outline-none border-none mr-2",
+		value: s,
+		onChange: d,
+		children: k.map(f)
+	}) : null, o[27] = s, o[28] = k, o[29] = j, o[30] = d, o[31] = I, o[32] = U) : U = o[32];
+	let W;
+	o[33] !== j || o[34] !== c || o[35] !== l || o[36] !== u || o[37] !== p || o[38] !== w ? (W = /* @__PURE__ */ t("input", {
+		id: c,
+		name: c,
+		type: "tel",
+		value: w,
+		disabled: j,
+		onChange: u,
+		onBlur: l,
+		placeholder: "",
+		className: "peer w-full text-base bg-transparent outline-none text-[16px] sm:text-[14px]",
+		...p
+	}), o[33] = j, o[34] = c, o[35] = l, o[36] = u, o[37] = p, o[38] = w, o[39] = W) : W = o[39];
+	let G;
+	o[40] !== H || o[41] !== U || o[42] !== W ? (G = /* @__PURE__ */ n("div", {
+		className: H,
+		children: [U, W]
+	}), o[40] = H, o[41] = U, o[42] = W, o[43] = G) : G = o[43];
+	let K = F ? "-top-2.5 text-sm! text-secondary bg-white font-bold" : "top-2.5 text-secondary/50 w-11/12", q = T ? "!text-red-500" : "", J;
+	o[44] !== K || o[45] !== q ? (J = [
+		"absolute left-2 px-1 transition-all duration-300 ease-in-out bg-white sm:text-base text-sm pointer-events-none",
+		K,
+		q
+	], o[44] = K, o[45] = q, o[46] = J) : J = o[46];
+	let Y = J.join(" "), X;
+	o[47] === A ? X = o[48] : (X = A ? /* @__PURE__ */ t("span", {
+		className: "text-red-500 ml-0.5",
+		children: "*"
+	}) : null, o[47] = A, o[48] = X);
+	let Z;
+	o[49] !== C || o[50] !== c || o[51] !== Y || o[52] !== X ? (Z = /* @__PURE__ */ n("label", {
+		htmlFor: c,
+		className: Y,
+		children: [C, X]
+	}), o[49] = C, o[50] = c, o[51] = Y, o[52] = X, o[53] = Z) : Z = o[53];
+	let te;
+	o[54] !== T || o[55] !== D ? (te = (T || D) && /* @__PURE__ */ t("p", {
+		className: `mt-1 text-sm ${T ? "text-red-500" : "text-secondary/50"}`,
+		children: T || D
+	}), o[54] = T, o[55] = D, o[56] = te) : te = o[56];
+	let Q;
+	o[57] === E ? Q = o[58] : (Q = E ? /* @__PURE__ */ t("div", {
+		className: "mt-1 sm:text-base text-sm text-secondary/60",
+		children: E
+	}) : null, o[57] = E, o[58] = Q);
+	let $;
+	return o[59] !== L || o[60] !== G || o[61] !== Z || o[62] !== te || o[63] !== Q ? ($ = /* @__PURE__ */ n("div", {
+		className: L,
+		onFocus: R,
+		onBlur: z,
+		children: [
+			G,
+			Z,
+			te,
+			Q
+		]
+	}), o[59] = L, o[60] = G, o[61] = Z, o[62] = te, o[63] = Q, o[64] = $) : $ = o[64], $;
+}
+function f(e) {
+	return /* @__PURE__ */ n("option", {
+		value: e.code,
+		children: [
+			e.code,
+			" (",
+			e.dialCode,
+			")"
+		]
+	}, e.code);
+}
+function p({ label: e = "", name: o, value: s = "", onChange: c, onBlur: l, onSelect: u, fetchSuggestions: d, debounceMs: f = 300, minQueryLength: p = 4, error: m = "", helperText: h = "", required: g = !1, disabled: _ = !1, className: v = "", ...y }) {
+	let [b, x] = r.useState(!1), [S, C] = r.useState([]), [w, T] = r.useState(!1), [E, D] = r.useState(!1), O = r.useRef(null), k = r.useRef(null), A = r.useRef(!1), j = r.useRef(!1);
+	r.useEffect(() => {
+		if (A.current) {
+			A.current = !1, j.current = !1;
+			return;
+		}
+		if (!s || s.length < p) {
+			C([]), D(!1);
+			return;
+		}
+		if (!j.current) return;
+		let e = setTimeout(async () => {
+			try {
+				T(!0);
+				let e = await d(s);
+				C(e), D(e.length > 0);
+			} catch {
+				C([]), D(!1);
+			} finally {
+				T(!1);
+			}
+		}, f);
+		return () => clearTimeout(e);
+	}, [
+		s,
+		d,
+		f,
+		p
+	]), r.useEffect(() => {
+		let e = (e) => {
+			k.current && !k.current.contains(e.target) && O.current && !O.current.contains(e.target) && D(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let M = (e) => {
+		let t = e.value ?? e.postalCode ?? e.description ?? "";
+		A.current = !0, c?.({ target: {
+			value: t,
+			name: o ?? ""
+		} }), u?.(e), D(!1), C([]);
+	};
+	return /* @__PURE__ */ n("div", {
+		className: `relative ${v} ${_ ? "opacity-75" : ""}`,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: ["relative peer w-full sm:h-[48px] h-[42px] px-3 text-base bg-transparent border rounded-md outline-none transition-all text-[14px] flex items-center", a(m, b, !!s, _)].join(" "),
+				children: [
+					/* @__PURE__ */ t("input", {
+						id: o,
+						name: o,
+						type: "text",
+						value: s,
+						disabled: _,
+						onChange: (e) => {
+							j.current = !0, c?.(e);
+						},
+						onFocus: () => x(!0),
+						onBlur: (e) => {
+							setTimeout(() => x(!1), 200), l?.(e);
+						},
+						placeholder: "",
+						ref: O,
+						className: `outline-0 w-full text-[16px] sm:text-[14px] ${_ ? "cursor-not-allowed" : ""}`,
+						autoComplete: "off",
+						...y
+					}),
+					w ? /* @__PURE__ */ t("div", {
+						className: "absolute right-3 top-1/2 -translate-y-1/2",
+						children: /* @__PURE__ */ t("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" })
+					}) : null,
+					/* @__PURE__ */ t(i, {
+						label: e,
+						name: o,
+						required: g,
+						error: m,
+						disabled: !!_,
+						isFocused: b,
+						hasValue: !!s
+					})
+				]
+			}),
+			E && S.length > 0 ? /* @__PURE__ */ t("div", {
+				ref: k,
+				className: "absolute z-50 w-full mt-1 bg-white border border-primary/50 rounded-md shadow-lg max-h-60 overflow-y-auto",
+				children: S.map((e, r) => /* @__PURE__ */ n("div", {
+					role: "option",
+					tabIndex: 0,
+					className: "px-4 py-3 hover:bg-primary/10 cursor-pointer transition-colors border-b border-primary/10 last:border-b-0",
+					onClick: () => M(e),
+					onKeyDown: (t) => {
+						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), M(e));
+					},
+					children: [/* @__PURE__ */ t("p", {
+						className: "text-sm text-secondary font-medium",
+						children: e.formattedAddress || e.description
+					}), e.secondaryText ? /* @__PURE__ */ t("p", {
+						className: "text-xs text-secondary/60 mt-0.5",
+						children: e.secondaryText
+					}) : null]
+				}, e.id ?? r))
+			}) : null,
+			(m || h) && /* @__PURE__ */ t("p", {
+				className: `mt-1 text-sm ${m ? "text-red-500" : "text-secondary/50"}`,
+				children: m || h
+			})
+		]
+	});
+}
+function m(r) {
+	let i = e(32), { placeholder: a, value: o, onChange: c, error: l, inputProps: u, label: d, labelClassName: f, description: p, descriptionClassName: m, leftComponent: h, rightComponent: g, className: _, containerClassName: v, errorClassName: y } = r, b = a === void 0 ? "Enter text" : a, x;
+	i[0] === u ? x = i[1] : (x = u === void 0 ? {} : u, i[0] = u, i[1] = x);
+	let S = x, C = f === void 0 ? "" : f, w = m === void 0 ? "" : m, T = _ === void 0 ? "" : _, E = v === void 0 ? "" : v, D = y === void 0 ? "" : y, O;
+	i[2] !== d || i[3] !== C ? (O = d ? /* @__PURE__ */ t("label", {
+		className: `block text-sm sm:text-lg font-bold text-secondary mb-1 ${C}`,
+		children: d
+	}) : null, i[2] = d, i[3] = C, i[4] = O) : O = i[4];
+	let k;
+	i[5] !== p || i[6] !== w ? (k = p ? /* @__PURE__ */ t("div", {
+		className: `block text-xs sm:text-base text-secondary/50 mb-2 ${w}`,
+		children: p
+	}) : null, i[5] = p, i[6] = w, i[7] = k) : k = i[7];
+	let A = "flex items-center rounded-medium sm:rounded-primary md:rounded-medium lg:rounded-primary bg-white outline -outline-offset-1 outline-primary/50 has-[input:focus-within]:outline-1 has-[input:focus-within]:outline-offset-1 has-[input:focus-within]:outline-primary text-sm sm:text-base " + E, j;
+	i[8] === c ? j = i[9] : (j = (e) => c?.(e.currentTarget.value), i[8] = c, i[9] = j);
+	let M = "block min-w-0 grow sm:py-2.5 py-1.5 pr-3 pl-3 text-[16px] sm:text-[14px] focus:outline-none " + T, N;
+	i[10] !== S || i[11] !== b || i[12] !== j || i[13] !== M || i[14] !== o ? (N = /* @__PURE__ */ t("input", {
+		placeholder: b,
+		value: o,
+		onChange: j,
+		className: M,
+		...S
+	}), i[10] = S, i[11] = b, i[12] = j, i[13] = M, i[14] = o, i[15] = N) : N = i[15];
+	let P;
+	i[16] !== l || i[17] !== g ? (P = l ? /* @__PURE__ */ t(s, {}) : g, i[16] = l, i[17] = g, i[18] = P) : P = i[18];
+	let F;
+	i[19] !== h || i[20] !== A || i[21] !== N || i[22] !== P ? (F = /* @__PURE__ */ n("div", {
+		className: A,
+		children: [
+			h,
+			N,
+			P
+		]
+	}), i[19] = h, i[20] = A, i[21] = N, i[22] = P, i[23] = F) : F = i[23];
+	let I;
+	i[24] !== l || i[25] !== D ? (I = l ? /* @__PURE__ */ t("div", {
+		className: "text-2xs font-semibold text-red-500 mt-0.75 pl-3 " + D,
+		children: l
+	}) : null, i[24] = l, i[25] = D, i[26] = I) : I = i[26];
+	let L;
+	return i[27] !== k || i[28] !== F || i[29] !== I || i[30] !== O ? (L = /* @__PURE__ */ n("div", {
+		className: "w-full",
+		children: [
+			O,
+			k,
+			F,
+			I
+		]
+	}), i[27] = k, i[28] = F, i[29] = I, i[30] = O, i[31] = L) : L = i[31], L;
+}
+function h(n) {
+	let r = e(10);
+	if (n.variant === "stacked") {
+		let e;
+		return r[0] === n ? e = r[1] : (e = /* @__PURE__ */ t(m, { ...n }), r[0] = n, r[1] = e), e;
+	}
+	let i = n.kind ?? "text";
+	if (i === "textarea") {
+		let e = n, i;
+		return r[2] === e ? i = r[3] : (i = /* @__PURE__ */ t(u, { ...e }), r[2] = e, r[3] = i), i;
+	}
+	if (i === "phone") {
+		let e = n, i;
+		return r[4] === e ? i = r[5] : (i = /* @__PURE__ */ t(d, { ...e }), r[4] = e, r[5] = i), i;
+	}
+	if (i === "autocomplete") {
+		let e = n, i;
+		return r[6] === e ? i = r[7] : (i = /* @__PURE__ */ t(p, { ...e }), r[6] = e, r[7] = i), i;
+	}
+	let a = n, o;
+	return r[8] === a ? o = r[9] : (o = /* @__PURE__ */ t(c, { ...a }), r[8] = a, r[9] = o), o;
+}
+//#endregion
+export { h as TextInput };