@tesouro/embedded-components-react 0.2.324 → 0.2.326

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index298.js

@@ -1,66 +1 @@
-import { cn as e } from "./index49.js";
-import { Label as t } from "./index87.js";
-import * as n from "react";
-import { jsx as r } from "@emotion/react/jsx-runtime";
-import { Slot as i } from "@radix-ui/react-slot";
-import { Controller as a, FormProvider as o, useFormContext as s, useFormState as c } from "react-hook-form";
-//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index298.js
-var l = o, u = n.createContext({}), d = ({ ...e }) => /* @__PURE__ */ r(u.Provider, {
-	value: { name: e.name },
-	children: /* @__PURE__ */ r(a, { ...e })
-}), f = () => {
-	let e = n.useContext(u), t = n.useContext(p), { getFieldState: r } = s(), i = c({ name: e.name }), a = r(e.name, i);
-	if (!e) throw Error("useFormField should be used within <FormField>");
-	let { id: o } = t;
-	return {
-		id: o,
-		name: e.name,
-		formItemId: `${o}-form-item`,
-		formDescriptionId: `${o}-form-item-description`,
-		formMessageId: `${o}-form-item-message`,
-		...a
-	};
-}, p = n.createContext({});
-function m({ className: t, ...i }) {
-	let a = n.useId();
-	return /* @__PURE__ */ r(p.Provider, {
-		value: { id: a },
-		children: /* @__PURE__ */ r("div", {
-			"data-slot": "form-item",
-			className: e("ttw:grid ttw:gap-2", t),
-			...i
-		})
-	});
-}
-function h({ className: n, ...i }) {
-	let { error: a, formItemId: o } = f();
-	return /* @__PURE__ */ r(t, {
-		"data-slot": "form-label",
-		"data-error": !!a,
-		className: e("ttw:data-[error=true]:text-destructive", n),
-		htmlFor: o,
-		...i
-	});
-}
-function g({ ...e }) {
-	let { error: t, formItemId: n, formDescriptionId: a, formMessageId: o } = f();
-	return /* @__PURE__ */ r(i, {
-		"data-slot": "form-control",
-		id: n,
-		"aria-describedby": t ? `${a} ${o}` : `${a}`,
-		"aria-invalid": !!t,
-		...e
-	});
-}
-function _({ className: t, ...n }) {
-	let { error: i, formMessageId: a } = f(), o = i ? String(i?.message ?? "") : n.children;
-	return o ? /* @__PURE__ */ r("p", {
-		"data-slot": "form-message",
-		id: a,
-		className: e("ttw:text-destructive ttw:text-sm", t),
-		...n,
-		children: o
-	}) : null;
-}
-//#endregion
-export { l as Form, g as FormControl, d as FormField, m as FormItem, h as FormLabel, _ as FormMessage, f as useFormField };
+import "./index297.js";

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index299.js

@@ -1,53 +1,11 @@
-import { cn as e } from "./index49.js";
-import { Button as t } from "./index56.js";
-import { Badge as n } from "./index195.js";
-import * as r from "react";
-import { XIcon as i } from "lucide-react";
-import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+import { Scope as e } from "../../shared/data-access/dist/lib/scopes.js";
+import "../../shared/data-access/dist/index.js";
+import { useMoniteContext as t } from "./index47.js";
+import { useUserPermissions as n } from "./index112.js";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index299.js
-var s = ({ className: s, value: c, onChange: l, ref: u, ...d }) => {
-	let [f, p] = r.useState("");
-	r.useEffect(() => {
-		if (f.includes(",")) {
-			let e = /* @__PURE__ */ new Set([...c, ...f.split(",").map((e) => e.trim())]);
-			l(Array.from(e)), p("");
-		}
-	}, [
-		f,
-		l,
-		c
-	]);
-	let m = () => {
-		if (f) {
-			let e = /* @__PURE__ */ new Set([...c, f]);
-			l(Array.from(e)), p("");
-		}
-	};
-	return /* @__PURE__ */ o("div", {
-		className: e("ttw:has-[:focus-visible]:ttw:outline-none ttw:has-[:focus-visible]:ttw:ring-2 ttw:has-[:focus-visible]:ttw:ring-neutral-950 ttw:has-[:focus-visible]:ttw:ring-offset-2 dark:ttw:has-[:focus-visible]:ttw:ring-neutral-300 ttw:min-h-10 ttw:flex ttw:w-full ttw:flex-wrap ttw:gap-2 ttw:rounded-md ttw:border ttw:border-neutral-200 ttw:bg-white ttw:px-3 ttw:py-2 ttw:text-sm ttw:ring-offset-white ttw:disabled:ttw:cursor-not-allowed ttw:disabled:ttw:opacity-50 dark:ttw:border-neutral-800 dark:ttw:bg-neutral-950 dark:ttw:ring-offset-neutral-950", s),
-		children: [c.map((e) => /* @__PURE__ */ o(n, {
-			variant: "secondary",
-			children: [e, /* @__PURE__ */ a(t, {
-				variant: "ghost",
-				size: "icon",
-				className: "ttw:ml-2 ttw:h-3 ttw:w-3",
-				onClick: () => {
-					l(c.filter((t) => t !== e));
-				},
-				children: /* @__PURE__ */ a(i, { className: "ttw:w-3" })
-			})]
-		}, e)), /* @__PURE__ */ a("input", {
-			className: "ttw:flex-1 ttw:outline-none ttw:placeholder:ttw:text-neutral-500 dark:ttw:placeholder:ttw:text-neutral-400",
-			value: f,
-			onChange: (e) => p(e.target.value),
-			onKeyDown: (e) => {
-				e.key === "Enter" || e.key === "," ? (e.preventDefault(), m()) : e.key === "Backspace" && f.length === 0 && c.length > 0 && (e.preventDefault(), l(c.slice(0, -1)));
-			},
-			...d,
-			ref: u
-		})]
-	});
+var r = () => {
+	let { api: r } = t(), i = n().has(e.AccountingConfigReadOrg);
+	return { tagsQuery: r.finops.getTags.useQuery({}, { enabled: i }) };
 };
-s.displayName = "InputTags";
 //#endregion
-export { s as InputTags };
+export { r as useTags };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index300.js

@@ -1,169 +1,23 @@
-import { Button as e } from "./index56.js";
-import { Input as t } from "./index89.js";
-import { useRootElements as n } from "./index178.js";
-import "./index179.js";
-import { MoniteScopedProviders as r } from "./index209.js";
-import { Sheet as i, SheetContent as a, SheetDescription as o, SheetFooter as s, SheetHeader as c, SheetTitle as l } from "./index50.js";
-import { Select as u, SelectContent as d, SelectItem as f, SelectTrigger as p, SelectValue as m } from "./index101.js";
-import { getTagCategoryLabel as h, tagCategories as g } from "./index296.js";
-import { useTags as _ } from "./index297.js";
-import { Form as v, FormControl as y, FormField as b, FormItem as x, FormLabel as S, FormMessage as C } from "./index298.js";
-import { InputTags as w } from "./index299.js";
-import { useEffect as T, useId as E } from "react";
-import { z as D } from "zod";
-import { Fragment as O, jsx as k, jsxs as A } from "@emotion/react/jsx-runtime";
-import { toast as j } from "react-hot-toast";
-import { useLingui as M } from "@lingui/react";
-import { useForm as N } from "react-hook-form";
-import { zodResolver as P } from "@hookform/resolvers/zod";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index300.js
-var F = (e) => D.object({
-	name: D.string().min(1, e._("Required")).max(255, e._("Value must be at most '255' characters")),
-	category: D.union([D.literal(""), D.enum(g)]),
-	keywords: D.array(D.string().min(2, e._("Keyword should be at least 2 characters long")).max(25, e._("Keyword should be at most 25 characters long")))
-}), I = (e) => /* @__PURE__ */ k(r, { children: /* @__PURE__ */ k(L, { ...e }) }), L = ({ tag: r, onCreate: D, onUpdate: I, onDelete: L, onClose: R, open: z, isDeleteAllowed: B }) => {
-	let { i18n: V } = M(), H = F(V), U = N({
-		resolver: P(H),
-		defaultValues: {
-			name: "",
-			category: "",
-			keywords: []
-		}
-	}), { control: W, handleSubmit: G, reset: K, setError: q } = U;
-	T(() => {
-		let e = [];
-		r?.keywords && (Array.isArray(r.keywords) ? e = r.keywords : typeof r.keywords == "string" && (e = r.keywords.split(",").map((e) => e.trim()).filter(Boolean))), K({
-			name: r?.name || "",
-			category: r?.category || "",
-			keywords: e
-		});
-	}, [K, r]);
-	let { createTag: J, updateTag: Y, inProgress: X, updateOcrAutoTagging: Z } = _({
-		setNameError: (e) => {
-			q("name", {
-				type: "custom",
-				message: e
-			});
-		},
-		onTagCreated: (e) => {
-			j.success(V._("New tag “{createdTagName}” created", { createdTagName: e.name })), D?.(e), R?.(), K();
-		},
-		onTagUpdated: (e) => {
-			r && j.success(r.name === e.name ? V._("Tag “{tagName}” was updated”", { tagName: r.name }) : V._("Tag “{tagName}” renamed to “{updatedTagName}”", {
-				tagName: r.name,
-				updatedTagName: e.name
-			})), I?.(e), R?.(), K();
-		}
-	}), { root: Q } = n(), $ = `Monite-Form-tag-${E()}`;
-	return /* @__PURE__ */ k(O, { children: /* @__PURE__ */ k(i, {
-		open: z,
-		onOpenChange: R,
-		children: /* @__PURE__ */ A(a, {
-			container: Q,
-			className: "Monite-Payables ttw:w-[600px]",
-			children: [
-				/* @__PURE__ */ A(c, { children: [/* @__PURE__ */ k(l, { children: r ? V._("Edit tag ”{tagName}”", { tagName: r.name }) : V._("Create new tag") }), /* @__PURE__ */ k(o, {
-					className: "ttw:sr-only",
-					children: r ? V._("Edit tag ”{tagName}”", { tagName: r.name }) : V._("Create new tag")
-				})] }),
-				/* @__PURE__ */ k(v, {
-					...U,
-					children: /* @__PURE__ */ k("form", {
-						id: $,
-						name: $,
-						onSubmit: (e) => {
-							e.preventDefault(), e.stopPropagation(), G(async (e) => {
-								let { keywords: t, name: n, category: i } = e, a = {
-									name: n,
-									...i ? { category: i } : {}
-								}, o = await (r ? Y(r.id, a) : J(a));
-								Z(o.id, t);
-							})(e);
-						},
-						children: /* @__PURE__ */ A("div", {
-							className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:px-6 ttw:pt-8 ttw:pb-6",
-							children: [
-								/* @__PURE__ */ k(b, {
-									name: "name",
-									control: W,
-									render: ({ field: e }) => /* @__PURE__ */ A(x, { children: [
-										/* @__PURE__ */ k(S, { children: V._("Name") }),
-										/* @__PURE__ */ k(y, { children: /* @__PURE__ */ k(t, {
-											autoFocus: !0,
-											...e
-										}) }),
-										/* @__PURE__ */ k(C, {})
-									] })
-								}),
-								/* @__PURE__ */ k(b, {
-									name: "category",
-									control: W,
-									render: ({ field: e }) => /* @__PURE__ */ A(x, { children: [
-										/* @__PURE__ */ k(S, { children: V._("Category") }),
-										/* @__PURE__ */ A(u, {
-											onValueChange: e.onChange,
-											defaultValue: e.value,
-											children: [/* @__PURE__ */ k(y, { children: /* @__PURE__ */ k(p, {
-												className: "ttw:w-full",
-												children: /* @__PURE__ */ k(m, { placeholder: V._("Not set") })
-											}) }), /* @__PURE__ */ k(d, { children: g.map((e) => /* @__PURE__ */ k(f, {
-												value: e,
-												children: h(e, V)
-											}, e)) })]
-										}),
-										/* @__PURE__ */ k(C, {})
-									] })
-								}),
-								/* @__PURE__ */ k(b, {
-									name: "keywords",
-									control: W,
-									render: ({ field: e }) => /* @__PURE__ */ A(x, {
-										className: "ttw:flex ttw:flex-col",
-										children: [
-											/* @__PURE__ */ k(S, { children: V._("Keywords") }),
-											/* @__PURE__ */ k(w, {
-												...e,
-												value: e.value ?? []
-											}),
-											/* @__PURE__ */ k(C, {})
-										]
-									})
-								})
-							]
-						})
-					})
-				}),
-				/* @__PURE__ */ A(s, {
-					className: "ttw:flex ttw:flex-row ttw:justify-end ttw:gap-2",
-					children: [
-						r && /* @__PURE__ */ k(e, {
-							className: "ttw:mr-auto",
-							variant: "destructive",
-							size: "lg",
-							onClick: () => {
-								L?.(r), R?.();
-							},
-							disabled: !B,
-							children: V._("Delete")
-						}),
-						/* @__PURE__ */ k(e, {
-							variant: "ghost",
-							size: "lg",
-							onClick: R,
-							children: V._("Cancel")
-						}),
-						/* @__PURE__ */ k(e, {
-							type: "submit",
-							form: $,
-							size: "lg",
-							disabled: X,
-							children: r ? V._("Save") : V._("Create")
-						})
-					]
-				})
-			]
-		})
-	}) });
-};
+var e = [
+	"document_type",
+	"department",
+	"project",
+	"cost_center",
+	"vendor_type",
+	"payment_method",
+	"approval_status"
+], t = (e) => ({
+	document_type: e._("Document Type"),
+	department: e._("Department"),
+	project: e._("Project"),
+	cost_center: e._("Cost Center"),
+	vendor_type: e._("Vendor Type"),
+	payment_method: e._("Payment Method"),
+	approval_status: e._("Approval Status")
+});
+function n(e, n) {
+	return e ? t(n)[e] : "";
+}
 //#endregion
-export { I as TagFormModal };
+export { n as getTagCategoryLabel, e as tagCategories };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index301.js

@@ -1 +1,54 @@
-import "./index300.js";
+import { getAPIErrorMessage as e } from "./index26.js";
+import { useMoniteContext as t } from "./index47.js";
+import { useEntitySettings as n, usePatchEntitiesIdSettings as r } from "./index136.js";
+import "./index138.js";
+import { toast as i } from "react-hot-toast";
+import { useLingui as a } from "@lingui/react";
+//#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index301.js
+var o = ({ setNameError: o, onTagCreated: s, onTagUpdated: c }) => {
+	let { i18n: l } = a(), { api: u, queryClient: d } = t(), { data: f } = n(), { mutateAsync: p } = r(), m = f?.payables_ocr_auto_tagging || [], h = u.finops.postTags.useMutation({}, {
+		onSuccess: () => u.finops.getTags.invalidateQueries(d),
+		onError: (t) => {
+			let n = e(l, t);
+			n === "This tag already exists." ? o?.(n) : i.error(n);
+		}
+	}), g = u.finops.patchTagsId.useMutation(void 0, {
+		onSuccess: (e) => {
+			Promise.all([u.finops.getTags.invalidateQueries(d), u.finops.getTagsId.invalidateQueries({ parameters: { path: { tag_id: e.id } } }, d)]), c?.(e);
+		},
+		onError: (t) => {
+			i.error(e(l, t));
+		}
+	});
+	return {
+		tagsWithKeywords: Object.fromEntries(m.map((e) => [e.tag_id, e.keywords])),
+		inProgress: h.isPending || g.isPending,
+		createTag: (e) => h.mutateAsync({ ...e }, { onSuccess: (e) => s?.(e) }),
+		updateTag: (e, t) => g.mutateAsync({
+			path: { tag_id: e },
+			body: t
+		}),
+		updateOcrAutoTagging: (e, t = []) => {
+			let n = m.filter((t) => t.tag_id !== e);
+			if (n.length === m.length && !t.length) return;
+			let r = t.length ? [...n, {
+				tag_id: e,
+				keywords: [...new Set(t)],
+				enabled: !0
+			}] : n;
+			r.length && p({
+				tax_mode: f.tax_mode,
+				payment_priority: f.payment_priority,
+				quote_signature_required: f.quote_signature_required,
+				receivable_edit_flow: f.receivable_edit_flow,
+				allow_purchase_order_autolinking: f.allow_purchase_order_autolinking,
+				generate_paid_invoice_pdf: f.generate_paid_invoice_pdf,
+				payables_ocr_auto_tagging: r,
+				payables_skip_approval_flow: f.payables_skip_approval_flow,
+				tax_inclusive_discount_mode: f.tax_inclusive_discount_mode
+			});
+		}
+	};
+};
+//#endregion
+export { o as useTags };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index302.js

@@ -1,86 +1,66 @@
-import { useRootElements as e } from "./index178.js";
-import "./index179.js";
-import { TagFormModal as t } from "./index300.js";
-import { useTags as n } from "./index295.js";
-import "./index301.js";
-import { useMemo as r, useState as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
-import { Autocomplete as c, Button as l, TextField as u } from "@mui/material";
-import { useLingui as d } from "@lingui/react";
-import { createElement as f } from "@emotion/react";
-import p from "@mui/icons-material/Add";
-import { createFilterOptions as m } from "@mui/material/Autocomplete";
+import { cn as e } from "./index49.js";
+import { Label as t } from "./index87.js";
+import * as n from "react";
+import { jsx as r } from "@emotion/react/jsx-runtime";
+import { Slot as i } from "@radix-ui/react-slot";
+import { Controller as a, FormProvider as o, useFormContext as s, useFormState as c } from "react-hook-form";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index302.js
-var h = (e) => e ? e.map(({ id: e, name: t }) => ({
-	value: e,
-	label: t
-})) : [], g = "__create-new__";
-function _(e) {
-	return e?.value === g;
-}
-var v = m(), y = ({ disabled: m, value: y, onChange: b, label: x, variant: S = "filled", error: C = !1, helperText: w, required: T = !1 }) => {
-	let { i18n: E } = d(), { root: D } = e(), { tagsQuery: O } = n(), [k, A] = i(!1), j = r(() => y ? h(y) : [], [y]), M = r(() => {
-		let e = O.data?.data || [], t = y || [], n = [...e];
-		return t.forEach((e) => {
-			n.find((t) => t.id === e.id) || n.push(e);
-		}), h(n);
-	}, [O.data?.data, y]), N = (e) => {
-		let t = e.map((e) => e.value), n = O.data?.data?.filter((e) => t.includes(e.id)) || [];
-		b?.(n);
-	}, P = () => {
-		A(!0);
+var l = o, u = n.createContext({}), d = ({ ...e }) => /* @__PURE__ */ r(u.Provider, {
+	value: { name: e.name },
+	children: /* @__PURE__ */ r(a, { ...e })
+}), f = () => {
+	let e = n.useContext(u), t = n.useContext(p), { getFieldState: r } = s(), i = c({ name: e.name }), a = r(e.name, i);
+	if (!e) throw Error("useFormField should be used within <FormField>");
+	let { id: o } = t;
+	return {
+		id: o,
+		name: e.name,
+		formItemId: `${o}-form-item`,
+		formDescriptionId: `${o}-form-item-description`,
+		formMessageId: `${o}-form-item-message`,
+		...a
 	};
-	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
-		open: k,
-		onClose: () => A(!1),
-		onCreate: (e) => {
-			let t = [...y || [], e];
-			b?.(t);
-		},
-		isDeleteAllowed: !1
-	}), /* @__PURE__ */ o(c, {
-		disabled: m,
-		multiple: !0,
-		filterSelectedOptions: !0,
-		getOptionLabel: (e) => e.label,
-		options: M,
-		slotProps: { popper: { container: D } },
-		isOptionEqualToValue: (e, t) => e.value === t.value,
-		value: j,
-		onChange: (e, t) => {
-			N(t || []);
-		},
-		filterOptions: (e, t) => {
-			let n = v(e, t);
-			return n.unshift({
-				value: g,
-				label: E._("Create new tag")
-			}), n;
-		},
-		renderOption: (e, t) => _(t) ? /* @__PURE__ */ o(l, {
-			variant: "text",
-			startIcon: /* @__PURE__ */ o(p, {}),
-			fullWidth: !0,
-			sx: {
-				justifyContent: "flex-start",
-				px: 2
-			},
-			onClick: P,
-			children: t.label
-		}, t.value) : /* @__PURE__ */ f("li", {
-			...e,
-			key: t.value
-		}, t.label),
-		renderInput: (e) => /* @__PURE__ */ o(u, {
-			...e,
-			label: x,
-			variant: S,
-			fullWidth: !0,
-			error: C,
-			helperText: w,
-			required: T
+}, p = n.createContext({});
+function m({ className: t, ...i }) {
+	let a = n.useId();
+	return /* @__PURE__ */ r(p.Provider, {
+		value: { id: a },
+		children: /* @__PURE__ */ r("div", {
+			"data-slot": "form-item",
+			className: e("ttw:grid ttw:gap-2", t),
+			...i
 		})
-	})] });
-};
+	});
+}
+function h({ className: n, ...i }) {
+	let { error: a, formItemId: o } = f();
+	return /* @__PURE__ */ r(t, {
+		"data-slot": "form-label",
+		"data-error": !!a,
+		className: e("ttw:data-[error=true]:text-destructive", n),
+		htmlFor: o,
+		...i
+	});
+}
+function g({ ...e }) {
+	let { error: t, formItemId: n, formDescriptionId: a, formMessageId: o } = f();
+	return /* @__PURE__ */ r(i, {
+		"data-slot": "form-control",
+		id: n,
+		"aria-describedby": t ? `${a} ${o}` : `${a}`,
+		"aria-invalid": !!t,
+		...e
+	});
+}
+function _({ className: t, ...n }) {
+	let { error: i, formMessageId: a } = f(), o = i ? String(i?.message ?? "") : n.children;
+	return o ? /* @__PURE__ */ r("p", {
+		"data-slot": "form-message",
+		id: a,
+		className: e("ttw:text-destructive ttw:text-sm", t),
+		...n,
+		children: o
+	}) : null;
+}
 //#endregion
-export { y as TagsAutocomplete, h as tagsToSelect };
+export { l as Form, g as FormControl, d as FormField, m as FormItem, h as FormLabel, _ as FormMessage, f as useFormField };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index303.js

@@ -1,29 +1,60 @@
-import { TagsAutocomplete as e } from "./index302.js";
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import { FormControl as n } from "@mui/material";
-import { Controller as r } from "react-hook-form";
+import { cn as e } from "./index49.js";
+import { Button as t } from "./index56.js";
+import { Badge as n } from "./index195.js";
+import * as r from "react";
+import { XIcon as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/monite-sdk/dist/index303.js
-var i = ({ control: i, name: a, label: o, variant: s = "filled", disabled: c = !1, required: l = !1, helperText: u }) => /* @__PURE__ */ t(r, {
-	name: a,
-	control: i,
-	render: ({ field: r, fieldState: { error: i } }) => /* @__PURE__ */ t(n, {
-		variant: s,
-		fullWidth: !0,
-		required: l,
-		error: !!i,
-		children: /* @__PURE__ */ t(e, {
-			disabled: c,
-			value: r.value || [],
-			onChange: (e) => {
-				r.onChange(e);
+var s = ({ className: s, value: c, onChange: l, onPendingChange: u, ref: d, ...f }) => {
+	let [p, m] = r.useState(""), h = (e) => {
+		m(e), u?.(e);
+	};
+	r.useEffect(() => {
+		if (p.includes(",")) {
+			let e = /* @__PURE__ */ new Set([...c, ...p.split(",").map((e) => e.trim())]);
+			l(Array.from(e)), m(""), u?.("");
+		}
+	}, [
+		p,
+		l,
+		u,
+		c
+	]);
+	let g = () => {
+		let e = p.trim();
+		if (e) {
+			let t = /* @__PURE__ */ new Set([...c, e]);
+			l(Array.from(t)), h("");
+		}
+	};
+	return /* @__PURE__ */ o("div", {
+		className: e("ttw:has-[:focus-visible]:ttw:outline-none ttw:has-[:focus-visible]:ttw:ring-2 ttw:has-[:focus-visible]:ttw:ring-neutral-950 ttw:has-[:focus-visible]:ttw:ring-offset-2 dark:ttw:has-[:focus-visible]:ttw:ring-neutral-300 ttw:min-h-10 ttw:flex ttw:w-full ttw:flex-wrap ttw:gap-2 ttw:rounded-md ttw:border ttw:border-neutral-200 ttw:bg-white ttw:px-3 ttw:py-2 ttw:text-sm ttw:ring-offset-white ttw:disabled:ttw:cursor-not-allowed ttw:disabled:ttw:opacity-50 dark:ttw:border-neutral-800 dark:ttw:bg-neutral-950 dark:ttw:ring-offset-neutral-950", s),
+		children: [c.map((e) => /* @__PURE__ */ o(n, {
+			variant: "secondary",
+			children: [e, /* @__PURE__ */ a(t, {
+				variant: "ghost",
+				size: "icon",
+				className: "ttw:ml-2 ttw:h-3 ttw:w-3",
+				onClick: () => {
+					l(c.filter((t) => t !== e));
+				},
+				children: /* @__PURE__ */ a(i, { className: "ttw:w-3" })
+			})]
+		}, e)), /* @__PURE__ */ a("input", {
+			className: "ttw:flex-1 ttw:outline-none ttw:placeholder:ttw:text-neutral-500 dark:ttw:placeholder:ttw:text-neutral-400",
+			value: p,
+			onChange: (e) => h(e.target.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" || e.key === "," ? (e.preventDefault(), g()) : e.key === "Backspace" && p.length === 0 && c.length > 0 && (e.preventDefault(), l(c.slice(0, -1)));
 			},
-			label: o,
-			variant: s,
-			error: !!i,
-			helperText: i?.message || u,
-			required: l
-		})
-	})
-});
+			...f,
+			onBlur: (e) => {
+				g(), f.onBlur?.(e);
+			},
+			ref: d
+		})]
+	});
+};
+s.displayName = "InputTags";
 //#endregion
-export { i as TagsAutocompleteInput };
+export { s as InputTags };