@epam/ai-dial-builder-form 1.2.0-dev.3 → 1.2.0-dev.300

package/index.js

@@ -1,263 +1,282 @@
-import { RESIZABLE_TEXTAREA_CLASS_NAME as e, TAG_INPUT_TAG_CLASS_NAME as t, buildCssVars as n, mergeClasses as r } from "@epam/ai-dial-chat-shared";
-import { ButtonAppearance as i, ButtonVariant as a, DIAL_ICON_SIZE as o, DIAL_KIT_ICON_STROKE as s, DangerIconButton as c, ElementSize as l, GhostIconButton as u, Input as d, Label as f, LinkButton as p, NeutralButton as m, Popup as h, PrimaryButton as g, Select as _, Spinner as v, TagInput as y, Textarea as b, TextareaResize as x } from "@epam/ai-dial-ui-kit";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { IconArrowLeft as T, IconArrowNarrowLeft as E, IconPhoto as D, IconPlus as O, IconTrashX as ee } from "@tabler/icons-react";
-import { Suspense as k, useCallback as A, useEffect as j, useId as M, useRef as N, useState as P } from "react";
+import { ENTITY_DESCRIPTION_MAX_LENGTH as e, ENTITY_NAME_MAX_LENGTH as t, RESIZABLE_TEXTAREA_CLASS_NAME as n, TAG_INPUT_TAG_CLASS_NAME as r, buildCssVars as i, exceedsMaxLength as a, hasControlCharacters as o, mergeClasses as s } from "@epam/ai-dial-chat-shared";
+import { ButtonAppearance as c, ButtonVariant as l, DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, DangerIconButton as f, ElementSize as p, GhostButton as m, GhostIconButton as h, Input as g, Label as _, LinkButton as v, NeutralButton as y, Popup as b, PrimaryButton as x, Select as S, Spinner as C, TagInput as w, Textarea as ee, TextareaResize as te } from "@epam/ai-dial-ui-kit";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { IconArrowLeft as O, IconArrowNarrowLeft as k, IconPhoto as A, IconPlus as j, IconTrashX as M } from "@tabler/icons-react";
+import { Suspense as N, memo as P, useCallback as F, useEffect as ne, useId as re, useLayoutEffect as I, useMemo as L, useRef as R, useState as z } from "react";
 //#region src/components/BuilderFormActions/BuilderFormActions.tsx
-var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: s }) => /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(m, {
+var B = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: o }) => /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(y, {
 	label: e.cancelButtonLabel,
 	onClick: t,
 	disabled: r,
-	className: s
-}), /* @__PURE__ */ C(g, {
+	className: o
+}), /* @__PURE__ */ E(x, {
 	label: e.submitButtonLabel,
 	onClick: n,
 	disabled: i,
 	"aria-busy": a,
-	className: s,
-	iconBefore: a ? /* @__PURE__ */ C("span", {
+	className: o,
+	iconBefore: a ? /* @__PURE__ */ E("span", {
 		"aria-hidden": !0,
-		children: /* @__PURE__ */ C(v, { size: o.SM })
+		children: /* @__PURE__ */ E(C, { size: u.SM })
 	}) : void 0
-})] }), I = "flex w-full flex-col desktop:w-[360px] desktop:shrink-0", L = ({ left: e, children: t, metadata: n }) => /* @__PURE__ */ w("div", {
-	className: "flex flex-1 flex-col desktop:flex-row",
-	children: [
-		e != null && /* @__PURE__ */ C("div", {
-			className: I,
-			children: e
-		}),
-		/* @__PURE__ */ C("div", {
-			className: "flex w-full min-w-0 flex-1 flex-col",
-			children: t
-		}),
-		n != null && /* @__PURE__ */ C("div", {
-			className: I,
-			children: n
-		}),
-		e != null && n == null && /* @__PURE__ */ C("div", {
-			"aria-hidden": !0,
-			className: "hidden desktop:block desktop:w-[360px] desktop:shrink-0"
-		})
-	]
-}), R = {
-	header: "_header_8b0ws_4",
-	title: "_title_8b0ws_8"
-}, z = ({ labels: e, onBack: t, onCancel: i, onSubmit: a, isCancelDisabled: c = !1, isSubmitDisabled: l = !1, isSubmitting: d = !1, styles: f }) => {
-	let { colors: p, typography: m } = f ?? {}, h = m?.fontClassName ?? "dial-h1-text", g = !!m?.fontClassName;
-	return /* @__PURE__ */ w("div", {
-		style: n({
+})] }), V = {
+	body: "_body_1xd7h_2",
+	sideColumn: "_sideColumn_1xd7h_6",
+	reservedColumn: "_reservedColumn_1xd7h_10"
+}, H = s("flex flex-col desktop:min-h-0 desktop:overflow-y-auto", V.sideColumn), ie = ({ left: e, children: t, metadata: n, layout: r }) => {
+	let i = e != null && n == null && r?.reserveEndColumn !== !1, a = r ? { "--bfb-side-column-width": r.sideColumnWidth ?? "400px" } : void 0, o = r ? { columnGap: r.columnGap ?? "0px" } : void 0;
+	return /* @__PURE__ */ D("div", {
+		className: s("flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden", V.body),
+		style: o,
+		children: [
+			e != null && /* @__PURE__ */ E("div", {
+				className: H,
+				style: a,
+				children: e
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "flex w-full min-w-0 flex-1 flex-col desktop:min-h-0 desktop:overflow-y-auto",
+				children: t
+			}),
+			n != null && /* @__PURE__ */ E("div", {
+				className: H,
+				style: a,
+				children: n
+			}),
+			i && /* @__PURE__ */ E("div", {
+				"aria-hidden": !0,
+				style: a,
+				className: s(V.reservedColumn, V.sideColumn)
+			})
+		]
+	});
+}, U = {
+	header: "_header_lon83_4",
+	actions: "_actions_lon83_18",
+	title: "_title_lon83_27"
+}, ae = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, backIcon: l, styles: f }) => {
+	let { colors: p, typography: m } = f ?? {}, g = m?.fontClassName ?? "dial-h1-text", _ = !!m?.fontClassName;
+	return /* @__PURE__ */ D("div", {
+		style: i({
 			"--bfh-border": p?.borderColor,
-			"--bfh-font-family": g ? void 0 : m?.fontFamily
+			"--bfh-font-family": _ ? void 0 : m?.fontFamily
 		}),
-		className: r("flex h-16 items-center justify-between gap-6 border-t px-4 desktop:border-b desktop:border-t-0 desktop:px-8", R.header),
+		className: s("flex min-h-16 shrink-0 items-center justify-between gap-2 px-4 py-2 desktop:h-16 desktop:flex-nowrap desktop:px-8 desktop:py-0", U.header),
 		children: [
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: [/* @__PURE__ */ C(u, {
-					icon: /* @__PURE__ */ C(T, {
-						size: o.LG,
+				children: [/* @__PURE__ */ E(h, {
+					icon: l === void 0 ? /* @__PURE__ */ E(O, {
+						size: u.LG,
 						className: "rtl:scale-x-[-1]",
 						"aria-hidden": !0,
-						stroke: s
-					}),
+						stroke: d
+					}) : l,
 					"aria-label": e.backButtonLabel,
 					onClick: t
-				}), /* @__PURE__ */ C("h1", {
-					className: r("truncate", R.title, h),
+				}), /* @__PURE__ */ E("h1", {
+					className: s("truncate", U.title, g),
 					children: e.title
 				})]
 			}),
-			/* @__PURE__ */ C("div", {
-				className: "hidden items-center gap-2 desktop:flex",
-				children: /* @__PURE__ */ C(F, {
+			/* @__PURE__ */ E("div", {
+				className: s("items-center gap-2", U.actions),
+				children: /* @__PURE__ */ E(B, {
 					labels: e,
-					onCancel: i,
-					onSubmit: a,
-					isCancelDisabled: c,
-					isSubmitDisabled: l,
-					isSubmitting: d
+					onCancel: n,
+					onSubmit: r,
+					isCancelDisabled: a,
+					isSubmitDisabled: o,
+					isSubmitting: c
 				})
 			}),
-			/* @__PURE__ */ C("span", {
+			/* @__PURE__ */ E("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				children: d ? e.submittingLabel ?? "Submitting" : ""
+				children: c ? e.submittingLabel ?? "Submitting" : ""
 			})
 		]
 	});
-}, B = {
-	container: "_container_d8tdv_1",
-	footer: "_footer_d8tdv_10"
-}, V = ({ labels: e, onBack: t, onCancel: i, onSubmit: a, isCancelDisabled: o = !1, isSubmitDisabled: s = !1, isSubmitting: c = !1, left: l, children: u, metadata: d, styles: f }) => {
-	let { colors: p, header: m, cssVars: h } = f ?? {};
-	return /* @__PURE__ */ w("div", {
+}, W = {
+	container: "_container_14mfe_1",
+	footer: "_footer_14mfe_10"
+}, G = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, backIcon: l, className: u, left: d, children: f, metadata: p, layout: m, styles: h }) => {
+	let { colors: g, header: _, cssVars: v } = h ?? {};
+	return /* @__PURE__ */ D("div", {
 		style: {
-			...n({ "--bfc-bg": p?.background }),
-			...h
+			...i({ "--bfc-bg": g?.background }),
+			...v
 		},
-		className: r("flex h-full w-full flex-col overflow-y-auto", B.container),
+		className: s("flex h-full min-h-0 w-full flex-col overflow-hidden", u, W.container),
 		children: [
-			/* @__PURE__ */ C(z, {
+			/* @__PURE__ */ E(ae, {
 				labels: e,
 				onBack: t,
-				onCancel: i,
-				onSubmit: a,
-				isCancelDisabled: o,
-				isSubmitDisabled: s,
+				onCancel: n,
+				onSubmit: r,
+				isCancelDisabled: a,
+				isSubmitDisabled: o,
 				isSubmitting: c,
-				styles: m
+				backIcon: l,
+				styles: _
 			}),
-			/* @__PURE__ */ C(L, {
-				left: l,
-				metadata: d,
-				children: u
+			/* @__PURE__ */ E(ie, {
+				left: d,
+				metadata: p,
+				layout: m,
+				children: f
 			}),
-			/* @__PURE__ */ C("div", {
-				className: r("sticky bottom-0 z-10 flex items-center gap-2 p-3 desktop:hidden", B.footer),
-				children: /* @__PURE__ */ C(F, {
+			/* @__PURE__ */ E("div", {
+				className: s("sticky bottom-0 z-10 items-center gap-2 p-3 shadow-sm", W.footer),
+				children: /* @__PURE__ */ E(B, {
 					labels: e,
-					onCancel: i,
-					onSubmit: a,
-					isCancelDisabled: o,
-					isSubmitDisabled: s,
+					onCancel: n,
+					onSubmit: r,
+					isCancelDisabled: a,
+					isSubmitDisabled: o,
 					isSubmitting: c,
 					buttonClassName: "flex-1"
 				})
 			})
 		]
 	});
-}, H = {
+}, K = {
+	layout: "dial-builder-form-layout",
+	section: "dial-builder-form-section",
+	metadataSection: "dial-builder-form-metadata-section",
+	setupSection: "dial-builder-form-setup-section"
+}, q = {
 	section: "_section_l1mnx_1",
 	title: "_title_l1mnx_5"
-}, U = ({ title: e, children: t, styles: i, className: a }) => {
-	let o = n({
-		"--es-border-color": i?.colors?.borderColor,
-		"--es-title-color": i?.colors?.titleColor
+}, J = ({ title: e, children: t, styles: n, className: r }) => {
+	let a = i({
+		"--es-border-color": n?.colors?.borderColor,
+		"--es-title-color": n?.colors?.titleColor
 	});
-	return /* @__PURE__ */ w("section", {
-		className: r("flex flex-col gap-4 rounded border p-6", H.section, a),
-		style: o,
-		children: [e != null && /* @__PURE__ */ C("h2", {
-			className: r("dial-h3-text", H.title),
+	return /* @__PURE__ */ D("section", {
+		className: s("flex h-full flex-col gap-4 rounded border p-6", q.section, r, K.section),
+		style: a,
+		children: [e != null && /* @__PURE__ */ E("h2", {
+			className: s("dial-h3-text", q.title),
 			children: e
 		}), t]
 	});
-}, W = {
+}, Y = {
 	headerBorder: "_headerBorder_1kidu_1",
 	footerBorder: "_footerBorder_1kidu_5",
 	sidebarBorder: "_sidebarBorder_1kidu_9"
-}, G = ({ title: e, onBack: t, backAriaLabel: i = "Back", actions: a, leftContent: c, rightContent: l, isSaving: d = !1, labels: f, styles: p, dir: m }) => {
-	let h = M(), g = d ? f?.savingStatusLabel ?? "Saving" : "";
-	return /* @__PURE__ */ w("div", {
-		dir: m,
-		className: "flex min-h-0 flex-1 flex-col",
-		style: n({
-			"--el-header-border-color": p?.colors?.headerBorderColor,
-			"--el-sidebar-border-color": p?.colors?.sidebarBorderColor
-		}),
+}, oe = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: a, rightContent: o, isSaving: c = !1, labels: l, styles: f, dir: p }) => {
+	let m = re(), g = c ? l?.savingStatusLabel ?? "Saving" : "", _ = i({
+		"--el-header-border-color": f?.colors?.headerBorderColor,
+		"--el-sidebar-border-color": f?.colors?.sidebarBorderColor
+	});
+	return /* @__PURE__ */ D("div", {
+		dir: p,
+		className: s("flex min-h-0 flex-1 flex-col", K.layout),
+		style: _,
 		children: [
-			/* @__PURE__ */ C("span", {
+			/* @__PURE__ */ E("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				id: h,
+				id: m,
 				children: g
 			}),
-			/* @__PURE__ */ w("div", {
-				className: r("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", W.headerBorder),
-				children: [/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ D("div", {
+				className: s("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", Y.headerBorder),
+				children: [/* @__PURE__ */ D("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ C(u, {
-						icon: /* @__PURE__ */ C(E, {
-							size: o.LG,
-							stroke: s,
+					children: [/* @__PURE__ */ E(h, {
+						icon: /* @__PURE__ */ E(k, {
+							size: u.LG,
+							stroke: d,
 							"aria-hidden": !0,
 							className: "rtl:scale-x-[-1]"
 						}),
-						"aria-label": i,
+						"aria-label": n,
 						onClick: t
-					}), /* @__PURE__ */ C("h1", {
+					}), /* @__PURE__ */ E("h1", {
 						className: "dial-h2-text min-w-0 truncate",
 						children: e
 					})]
-				}), a != null && /* @__PURE__ */ C("div", {
+				}), r != null && /* @__PURE__ */ E("div", {
 					className: "hidden shrink-0 items-center gap-2 desktop:flex",
-					children: a
+					children: r
 				})]
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
-				children: [/* @__PURE__ */ C("div", {
-					className: r(l == null ? "desktop:flex-1" : "desktop:w-[360px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", l == null ? void 0 : W.sidebarBorder),
-					children: c
-				}), l != null && /* @__PURE__ */ C("div", {
-					className: "desktop:flex-1 desktop:overflow-y-auto",
-					children: l
+				children: [/* @__PURE__ */ E("div", {
+					className: s(o == null ? "desktop:flex-1" : "desktop:w-[400px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", o == null ? void 0 : Y.sidebarBorder),
+					children: a
+				}), o != null && /* @__PURE__ */ E("div", {
+					className: "desktop:flex desktop:min-h-0 desktop:flex-1 desktop:flex-col desktop:overflow-y-auto",
+					children: o
 				})]
 			}),
-			a != null && /* @__PURE__ */ C("div", {
-				className: r("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", W.footerBorder),
-				children: a
+			r != null && /* @__PURE__ */ E("div", {
+				className: s("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", Y.footerBorder),
+				children: r
 			})
 		]
 	});
-}, K = {
+}, X = {
 	box: "_box_c9as8_1",
 	icon: "_icon_c9as8_6",
 	caption: "_caption_c9as8_10"
-}, q = ({ label: e, avatarUrl: t, avatarAlt: i = "", addAvatarLabel: a = "Add avatar", captionText: c = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: u, styles: d, className: m }) => {
-	let h = n({
-		"--aa-box-bg": d?.colors?.boxBackgroundColor,
-		"--aa-box-border": d?.colors?.boxBorderColor,
-		"--aa-icon": d?.colors?.placeholderIconColor,
-		"--aa-caption": d?.colors?.captionColor
+}, se = ({ label: e, avatarUrl: t, avatarAlt: n = "", addAvatarLabel: r = "Add avatar", captionText: a = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: o, styles: c, className: l }) => {
+	let f = i({
+		"--aa-box-bg": c?.colors?.boxBackgroundColor,
+		"--aa-box-border": c?.colors?.boxBorderColor,
+		"--aa-icon": c?.colors?.placeholderIconColor,
+		"--aa-caption": c?.colors?.captionColor
 	});
-	return /* @__PURE__ */ w("div", {
-		className: r("flex flex-col gap-2", m),
-		style: h,
-		children: [/* @__PURE__ */ C(f, { label: e }), /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ D("div", {
+		className: s("flex flex-col gap-2", l),
+		style: f,
+		children: [/* @__PURE__ */ E(_, { label: e }), /* @__PURE__ */ D("div", {
 			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ C("div", {
-				className: r("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", K.box),
-				children: t ? /* @__PURE__ */ C("img", {
+			children: [/* @__PURE__ */ E("div", {
+				className: s("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", X.box),
+				children: t ? /* @__PURE__ */ E("img", {
 					src: t,
-					alt: i,
+					alt: n,
 					className: "h-16 w-16 object-cover"
-				}) : /* @__PURE__ */ C(D, {
-					size: o.LG,
-					stroke: s,
+				}) : /* @__PURE__ */ E(A, {
+					size: u.LG,
+					stroke: d,
 					"aria-hidden": !0,
-					className: K.icon
+					className: X.icon
 				})
-			}), /* @__PURE__ */ w("div", {
+			}), /* @__PURE__ */ D("div", {
 				className: "flex flex-col gap-3",
-				children: [/* @__PURE__ */ C(p, {
-					size: l.Small,
-					iconBefore: /* @__PURE__ */ C(O, {
-						size: o.SM,
-						stroke: s,
+				children: [/* @__PURE__ */ E(m, {
+					size: p.Small,
+					iconBefore: /* @__PURE__ */ E(j, {
+						size: u.SM,
+						stroke: d,
 						"aria-hidden": !0
 					}),
 					className: "w-fit",
-					label: a,
-					onClick: u
-				}), /* @__PURE__ */ C("span", {
-					className: r("dial-tiny-text", K.caption),
-					children: c
+					label: r,
+					onClick: o
+				}), /* @__PURE__ */ E("span", {
+					className: s("dial-tiny-text", X.caption),
+					children: a
 				})]
 			})]
 		})]
 	});
-}, J = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
-	let c = A((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = A((e) => /* @__PURE__ */ C("div", {
+}, ce = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
+	let c = F((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = F((e) => /* @__PURE__ */ E("div", {
 		className: "dial-small-text px-6 py-3",
-		children: /* @__PURE__ */ C("p", {
+		children: /* @__PURE__ */ E("p", {
 			className: "mb-3 text-secondary",
-			children: e.length === 1 ? /* @__PURE__ */ w(S, { children: [
+			children: e.length === 1 ? /* @__PURE__ */ D(T, { children: [
 				s.deleteConfirmSingleText,
 				" ",
-				/* @__PURE__ */ w("span", {
+				/* @__PURE__ */ D("span", {
 					className: "break-words text-primary",
 					children: [
 						"\"",
@@ -265,10 +284,10 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 						"\"?"
 					]
 				})
-			] }) : /* @__PURE__ */ w(S, { children: [
+			] }) : /* @__PURE__ */ D(T, { children: [
 				s.deleteConfirmMultipleText,
 				" ",
-				/* @__PURE__ */ w("span", {
+				/* @__PURE__ */ D("span", {
 					className: "text-primary",
 					children: [
 						e.length,
@@ -283,9 +302,9 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		s.deleteConfirmMultipleText,
 		s.deleteConfirmItemsLabel
 	]);
-	return /* @__PURE__ */ C(k, {
+	return /* @__PURE__ */ E(N, {
 		fallback: null,
-		children: e && /* @__PURE__ */ C(i, {
+		children: e && /* @__PURE__ */ E(i, {
 			isOpen: e,
 			onClose: t,
 			onAttach: n,
@@ -313,239 +332,476 @@ var F = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			deleteConfirmTitle: c,
 			deleteConfirmBody: l,
 			deleteConfirmLabel: s.deleteConfirmLabel,
-			deleteCancelLabel: s.deleteCancelLabel,
-			uploadProgressTitle: s.uploadProgressTitle,
-			cancelLabel: s.cancelLabel
+			deleteCancelLabel: s.deleteCancelLabel
 		})
 	});
-}, te = (e, t, n) => ({
+}, Z = /* @__PURE__ */ function(e) {
+	return e.Avatar = "avatar", e.Name = "name", e.Version = "version", e.Description = "description", e.Locales = "locales", e.Tags = "tags", e;
+}({}), le = [
+	"avatar",
+	"name",
+	"version",
+	"description",
+	"locales",
+	"tags"
+], ue = (e, t, n) => ({
 	id: e,
 	language: n.find((e) => !t.has(e.code))?.code ?? "",
 	name: "",
 	description: ""
-}), Y = ({ value: t, onChange: n, availableLocaleOptions: u = [], labels: f, className: m, summaryClassName: g = "dial-body-text text-secondary", rowLabelClassName: v = "dial-tiny-lead-text text-secondary" }) => {
-	let { summaryLabel: y, addLabel: S, editLabel: T, popupTitle: E, addLocaleLabel: D, localeRowLabel: k = "Locale", languageLabel: A, nameLabel: M, namePlaceholder: F, descriptionLabel: I, descriptionPlaceholder: L, deleteAriaLabel: R, cancelLabel: z = "Cancel", saveLabel: B = "Save" } = f, [V, H] = P(!1), [U, W] = P([]), G = N(0);
-	j(() => {
-		V && W(t.length > 0 ? t : [te(`locale-row-${++G.current}`, /* @__PURE__ */ new Set(), u)]);
+}), de = ({ value: e, onChange: t, availableLocaleOptions: r = [], labels: i, className: a, summaryClassName: o = "dial-body-text text-secondary", rowLabelClassName: m = "dial-tiny-lead-text text-secondary" }) => {
+	let { summaryLabel: h, addLabel: _, editLabel: y, popupTitle: x, addLocaleLabel: C, localeRowLabel: w = "Locale", languageLabel: T, nameLabel: O, namePlaceholder: k, descriptionLabel: A, descriptionPlaceholder: N, deleteAriaLabel: P, cancelLabel: F = "Cancel", saveLabel: re = "Save" } = i, [I, L] = z(!1), [B, V] = z([]), H = R(0);
+	ne(() => {
+		I && V(e.length > 0 ? e : [ue(`locale-row-${++H.current}`, /* @__PURE__ */ new Set(), r)]);
 	}, [
-		V,
-		t,
-		u
+		I,
+		e,
+		r
 	]);
-	let K = () => H(!0), q = () => H(!1), J = () => {
-		n(U.filter((e) => e.language && e.name)), H(!1);
-	}, Y = () => {
-		let e = new Set(U.map((e) => e.language).filter(Boolean));
-		W((t) => [...t, te(`locale-row-${++G.current}`, e, u)]);
-	}, X = (e, t) => {
-		W((n) => n.map((n) => n.id === e ? {
+	let ie = () => L(!0), U = () => L(!1), ae = () => {
+		t(B.filter((e) => e.language && e.name)), L(!1);
+	}, W = () => {
+		let e = new Set(B.map((e) => e.language).filter(Boolean));
+		V((t) => [...t, ue(`locale-row-${++H.current}`, e, r)]);
+	}, G = (e, t) => {
+		V((n) => n.map((n) => n.id === e ? {
 			...n,
 			...t
 		} : n));
-	}, Z = (e) => {
-		W((t) => t.filter((t) => t.id !== e));
-	}, Q = (e) => u.find((t) => t.code === e)?.label ?? e.toUpperCase(), $ = U.some((e) => !e.language || !e.name);
-	return u.length === 0 ? null : /* @__PURE__ */ w("div", {
-		className: r("flex items-center gap-2", m),
+	}, K = (e) => {
+		V((t) => t.filter((t) => t.id !== e));
+	}, q = (e) => r.find((t) => t.code === e)?.label ?? e.toUpperCase(), J = B.some((e) => !e.language || !e.name);
+	return r.length === 0 ? null : /* @__PURE__ */ D("div", {
+		className: s("flex items-center gap-2", a),
 		children: [
-			t.length > 0 && /* @__PURE__ */ C("span", {
-				className: g,
-				children: `${y}: ${t.map((e) => `[${Q(e.language)}]`).join(", ")}`
+			e.length > 0 && /* @__PURE__ */ E("span", {
+				className: o,
+				children: `${h}: ${e.map((e) => `[${q(e.language)}]`).join(", ")}`
 			}),
-			/* @__PURE__ */ C(p, {
-				label: t.length > 0 ? T : S,
-				iconBefore: /* @__PURE__ */ C(O, {
-					size: o.SM,
+			/* @__PURE__ */ E(v, {
+				label: e.length > 0 ? y : _,
+				iconBefore: /* @__PURE__ */ E(j, {
+					size: u.SM,
 					"aria-hidden": !0,
-					stroke: s
+					stroke: d
 				}),
 				className: "!px-0",
-				onClick: K
+				onClick: ie
 			}),
-			/* @__PURE__ */ C(h, {
-				open: V,
-				header: E,
-				onClose: q,
+			/* @__PURE__ */ E(b, {
+				open: I,
+				header: x,
+				onClose: U,
 				mainButtons: [{
-					label: z,
-					onClick: q
+					label: F,
+					onClick: U
 				}, {
-					label: B,
-					variant: a.Primary,
-					disabled: $,
-					onClick: J
+					label: re,
+					variant: l.Primary,
+					disabled: J,
+					onClick: ae
 				}],
-				children: /* @__PURE__ */ w("div", {
+				children: /* @__PURE__ */ D("div", {
 					className: "flex flex-col gap-8 px-6 py-3",
-					children: [U.map((t, n) => {
-						let r = new Set(U.filter((e) => e.id !== t.id).map((e) => e.language).filter(Boolean));
-						return /* @__PURE__ */ w("div", {
+					children: [B.map((e, t) => {
+						let i = new Set(B.filter((t) => t.id !== e.id).map((e) => e.language).filter(Boolean));
+						return /* @__PURE__ */ D("div", {
 							className: "flex flex-col gap-2",
-							children: [/* @__PURE__ */ w("div", {
+							children: [/* @__PURE__ */ D("div", {
 								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ w("span", {
-									className: v,
+								children: [/* @__PURE__ */ D("span", {
+									className: m,
 									children: [
-										k,
+										w,
 										" ",
-										n + 1
+										t + 1
 									]
-								}), /* @__PURE__ */ C(c, {
-									appearance: i.Ghost,
-									size: l.Small,
-									icon: /* @__PURE__ */ C(ee, {
-										size: o.SM,
+								}), /* @__PURE__ */ E(f, {
+									appearance: c.Ghost,
+									size: p.Small,
+									icon: /* @__PURE__ */ E(M, {
+										size: u.SM,
 										"aria-hidden": !0,
-										stroke: s
+										stroke: d
 									}),
-									"aria-label": `${R} ${n + 1}`,
-									onClick: () => Z(t.id)
+									"aria-label": `${P} ${t + 1}`,
+									onClick: () => K(e.id)
 								})]
-							}), /* @__PURE__ */ w("div", {
+							}), /* @__PURE__ */ D("div", {
 								role: "group",
-								"aria-label": `${k} ${n + 1}`,
+								"aria-label": `${w} ${t + 1}`,
 								className: "flex flex-col gap-5",
-								children: [/* @__PURE__ */ w("div", {
+								children: [/* @__PURE__ */ D("div", {
 									className: "flex flex-col gap-5 desktop:flex-row desktop:items-start",
-									children: [/* @__PURE__ */ C(_, {
-										id: `${t.id}-language`,
+									children: [/* @__PURE__ */ E(S, {
+										id: `${e.id}-language`,
 										labelProps: {
-											label: A,
+											label: T,
 											required: !0
 										},
 										className: "desktop:shrink-0 desktop:basis-40",
-										options: u.map((e) => ({
+										options: r.map((e) => ({
 											value: e.code,
 											label: e.label,
-											disabled: r.has(e.code)
+											disabled: i.has(e.code)
 										})),
-										value: t.language,
-										onChange: (e) => X(t.id, { language: e })
-									}), /* @__PURE__ */ C(d, {
-										id: `${t.id}-name`,
+										value: e.language,
+										onChange: (t) => G(e.id, { language: t })
+									}), /* @__PURE__ */ E(g, {
+										id: `${e.id}-name`,
 										containerClassName: "min-w-0 flex-1",
 										required: !0,
-										value: t.name,
-										onChange: (e) => X(t.id, { name: e ?? "" }),
+										value: e.name,
+										onChange: (t) => G(e.id, { name: t ?? "" }),
 										labelProps: {
-											label: M,
+											label: O,
 											required: !0
 										},
-										placeholder: F
+										placeholder: k
 									})]
-								}), /* @__PURE__ */ C(b, {
-									id: `${t.id}-description`,
-									className: e,
-									resize: x.Vertical,
-									value: t.description,
-									onChange: (e) => X(t.id, { description: e }),
-									labelProps: { label: I },
-									placeholder: L
+								}), /* @__PURE__ */ E(ee, {
+									id: `${e.id}-description`,
+									className: n,
+									resize: te.Vertical,
+									value: e.description,
+									onChange: (t) => G(e.id, { description: t }),
+									labelProps: { label: A },
+									placeholder: N
 								})]
 							})]
-						}, t.id);
-					}), /* @__PURE__ */ C(p, {
-						label: D,
-						iconBefore: /* @__PURE__ */ C(O, {
-							size: o.SM,
+						}, e.id);
+					}), /* @__PURE__ */ E(v, {
+						label: C,
+						iconBefore: /* @__PURE__ */ E(j, {
+							size: u.SM,
 							"aria-hidden": !0,
-							stroke: s
+							stroke: d
 						}),
 						className: "self-start",
-						onClick: Y,
-						disabled: U.length >= u.length
+						onClick: W,
+						disabled: B.length >= r.length
 					})]
 				})
 			})
 		]
 	});
-}, X = ({ values: n, errors: i, onChange: a, onNameBlur: o, onVersionBlur: s, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: f, availableLocaleOptions: p = [] }) => {
-	let m = N(null), h = N(null), g = N(!1), _ = !!(i.name || i.version);
-	return j(() => {
-		_ && !g.current && (i.name ? m : h).current?.focus(), g.current = _;
+}, fe = "Add tags, comma separated", pe = "deployment-creation-form-description", me = ({ values: e, errors: t, onChange: i, onNameBlur: a, onVersionBlur: o, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: d, availableLocaleOptions: f = [], fields: p = le, isNameReadOnly: m = !1, nameCaption: h, isDescriptionRequired: _ = !1, renderDescription: v, focusRequestKey: y }) => {
+	let b = R(null), x = R(null), S = R(null), C = R(!1), T = (e) => p.includes(e), O = T(Z.Name), k = T(Z.Version), A = !!(t.name || t.version || t.description), j = R(y);
+	ne(() => {
+		let e = () => {
+			t.name ? b.current?.focus() : t.version ? x.current?.focus() : t.description && S.current?.focus();
+		};
+		if (y !== void 0) {
+			y !== j.current && (j.current = y, e());
+			return;
+		}
+		A && !C.current && e(), C.current = A;
 	}, [
-		_,
-		i.name,
-		i.version
-	]), /* @__PURE__ */ w("div", {
+		y,
+		A,
+		t.name,
+		t.version,
+		t.description
+	]);
+	let M = /* @__PURE__ */ E(ee, {
+		id: pe,
+		ref: S,
+		value: e.description,
+		onChange: (e) => i({ description: e }),
+		"aria-required": _ || void 0,
+		labelProps: v ? void 0 : {
+			label: u.description.label,
+			required: _
+		},
+		placeholder: u.description.placeholder,
+		error: t.description || void 0,
+		invalid: !!t.description,
+		containerClassName: v ? void 0 : d?.field,
+		className: n,
+		resize: te.Vertical
+	});
+	return /* @__PURE__ */ D("div", {
 		role: u.ariaLabel ? "group" : void 0,
 		"aria-label": u.ariaLabel,
-		className: r("flex flex-col gap-4", f?.root),
+		className: s("flex flex-col gap-4", d?.root),
 		children: [
-			/* @__PURE__ */ C(q, {
+			T(Z.Avatar) && /* @__PURE__ */ E(se, {
 				label: u.iconUrl.label,
 				avatarUrl: c,
 				addAvatarLabel: u.iconUrl.addAvatarLabel,
 				captionText: u.iconUrl.captionText,
 				onAddAvatarClick: l,
-				className: f?.field
+				className: d?.field
 			}),
-			/* @__PURE__ */ w("div", {
-				className: r("flex items-start gap-4", f?.field),
-				children: [/* @__PURE__ */ C(d, {
+			(O || k) && /* @__PURE__ */ D("div", {
+				className: s("flex items-start gap-4", d?.field),
+				children: [O && /* @__PURE__ */ E(g, {
 					id: "deployment-creation-form-name",
-					inputRef: m,
-					value: n.name,
-					onChange: (e) => a({ name: e ?? "" }),
-					onBlur: o,
+					inputRef: b,
+					value: e.name,
+					onChange: (e) => i({ name: e ?? "" }),
+					onBlur: a,
+					readOnly: m,
 					labelProps: {
 						label: u.name.label,
 						required: !0
 					},
 					placeholder: u.name.placeholder,
-					error: i.name || void 0,
-					invalid: !!i.name,
-					containerClassName: "min-w-0 basis-0 grow-[2]"
-				}), /* @__PURE__ */ C(d, {
+					caption: h,
+					error: t.name || void 0,
+					invalid: !!t.name,
+					containerClassName: k ? "min-w-0 basis-0 grow-[2]" : "min-w-0 flex-1"
+				}), k && /* @__PURE__ */ E(g, {
 					id: "deployment-creation-form-version",
-					inputRef: h,
-					value: n.version,
-					onChange: (e) => a({ version: e ?? "" }),
-					onBlur: s,
+					inputRef: x,
+					value: e.version,
+					onChange: (e) => i({ version: e ?? "" }),
+					onBlur: o,
 					labelProps: { label: u.version.label },
 					placeholder: u.version.placeholder,
-					error: i.version || void 0,
-					invalid: !!i.version,
-					containerClassName: "min-w-0 basis-0 grow-[1]"
+					error: t.version || void 0,
+					invalid: !!t.version,
+					containerClassName: O ? "min-w-0 basis-0 grow-[1]" : "min-w-0 flex-1"
 				})]
 			}),
-			/* @__PURE__ */ C(b, {
-				id: "deployment-creation-form-description",
-				value: n.description,
-				onChange: (e) => a({ description: e }),
-				labelProps: { label: u.description.label },
-				placeholder: u.description.placeholder,
-				containerClassName: f?.field,
-				className: e,
-				resize: x.Vertical
-			}),
-			/* @__PURE__ */ C(Y, {
-				value: n.otherLocales,
-				onChange: (e) => a({ otherLocales: e }),
-				availableLocaleOptions: p,
+			T(Z.Description) && (v ? /* @__PURE__ */ E("div", {
+				className: d?.field,
+				children: v(M, pe)
+			}) : M),
+			T(Z.Locales) && /* @__PURE__ */ E(de, {
+				value: e.otherLocales,
+				onChange: (e) => i({ otherLocales: e }),
+				availableLocaleOptions: f,
 				labels: u.otherLocales,
-				className: f?.field
+				className: d?.field
 			}),
-			/* @__PURE__ */ C("div", {
-				className: f?.field,
-				children: /* @__PURE__ */ C(y, {
+			T(Z.Tags) && /* @__PURE__ */ E("div", {
+				className: d?.field,
+				children: /* @__PURE__ */ E(w, {
 					id: "deployment-creation-form-topics",
 					labelProps: { label: u.topics.label },
-					placeholder: u.topics.placeholder,
-					value: n.topics,
-					onChange: (e) => a({ topics: e }),
-					tagClassName: t
+					placeholder: u.topics.placeholder ?? fe,
+					value: e.topics,
+					onChange: (e) => i({ topics: e }),
+					tagClassName: r
 				})
 			})
 		]
 	});
-}, Z = /* @__PURE__ */ function(e) {
-	return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e;
-}({}), Q = /^[a-zA-Z0-9 _.-]+$/, $ = /^[a-zA-Z0-9._-]+$/, ne = /^\d+(\.\d+)*$/, re = (e, t = {}) => {
-	let n = {}, r = e.name.trim();
-	r ? t.validateNamePattern && !Q.test(r) && (n.name = Z.InvalidFormat) : n.name = Z.Required;
-	let i = e.version.trim();
-	return t.validateVersionPattern && i && ((t.validateVersionPattern instanceof RegExp ? t.validateVersionPattern : $).test(i) || (n.version = Z.InvalidFormat)), n;
+}, he = "border-0 p-4 desktop:p-8", ge = "desktop:flex-1", _e = "px-4 pt-4 desktop:px-6 desktop:pt-6", ve = P(({ title: e, onBack: t, onCancel: n, onSubmit: r, submitLabel: i, isSubmitting: a = !1, isSubmitDisabled: o = !1, extraActions: c, hideStandardActions: l = !1, metadata: u, metadataTitle: d, metadataFooter: f, setup: p, setupTitle: m, alert: h, metadataSectionClassName: g, setupSectionClassName: _, labels: v, styles: b, dir: S }) => {
+	let C = h == null ? null : /* @__PURE__ */ E("div", {
+		role: "alert",
+		className: _e,
+		children: h
+	}), w = p != null;
+	return /* @__PURE__ */ E(oe, {
+		title: e,
+		onBack: t,
+		backAriaLabel: v?.backAriaLabel ?? "Back",
+		isSaving: a,
+		labels: { savingStatusLabel: v?.savingStatusLabel ?? "Saving" },
+		styles: b?.layout,
+		dir: S,
+		actions: /* @__PURE__ */ D(T, { children: [c, !l && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(y, {
+			label: v?.cancelLabel ?? "Cancel",
+			disabled: a,
+			onClick: n
+		}), /* @__PURE__ */ E(x, {
+			label: i,
+			disabled: a || o,
+			onClick: r
+		})] })] }),
+		leftContent: /* @__PURE__ */ D(T, { children: [
+			!w && C,
+			/* @__PURE__ */ E(J, {
+				title: d === null ? void 0 : d ?? v?.metadataTitle ?? "Metadata",
+				styles: b?.section,
+				className: s(he, g, K.metadataSection),
+				children: u
+			}),
+			f
+		] }),
+		rightContent: w ? /* @__PURE__ */ D(T, { children: [C, /* @__PURE__ */ E(J, {
+			title: m === null ? void 0 : m ?? v?.setupTitle ?? "Setup",
+			styles: b?.section,
+			className: s(he, ge, _, K.setupSection),
+			children: p
+		})] }) : void 0
+	});
+}), ye = {
+	name: {
+		label: "Name",
+		placeholder: "Enter name"
+	},
+	description: {
+		label: "Description",
+		placeholder: "Enter description"
+	},
+	iconUrl: {
+		label: "Avatar",
+		addAvatarLabel: "Add avatar",
+		captionText: "PNG, JPG or SVG (max 1 MB)"
+	},
+	version: {
+		label: "Version",
+		placeholder: "e.g. 1.0.0"
+	},
+	topics: {
+		label: "Tags",
+		placeholder: "Add tags, comma separated"
+	},
+	otherLocales: {
+		summaryLabel: "Locales",
+		addLabel: "Add locales",
+		editLabel: "Edit locales",
+		popupTitle: "Add locale",
+		addLocaleLabel: "Add locale",
+		localeRowLabel: "Locale",
+		languageLabel: "Language",
+		nameLabel: "Name",
+		namePlaceholder: "Enter name",
+		descriptionLabel: "About",
+		descriptionPlaceholder: "Enter brief description",
+		deleteAriaLabel: "Delete locale",
+		cancelLabel: "Cancel",
+		saveLabel: "Save"
+	},
+	ariaLabel: "Metadata"
+}, be = {
+	title: "Add avatar",
+	attachLabel: "Attach",
+	emptyTitle: "This folder is empty",
+	emptyDescription: "",
+	errorMessage: "Failed to load files",
+	retryLabel: "Retry",
+	hiddenFilesLabel: "Hidden files",
+	showHiddenFilesLabel: "Show hidden files",
+	hideHiddenFilesLabel: "Hide hidden files",
+	getSelectionLabel: (e) => e === 1 ? "item selected" : "items selected",
+	uploadFilesLabel: "Files",
+	newFolderLabel: "Folder",
+	downloadLabel: "Download",
+	downloadingLabel: "Preparing download…",
+	deleteLabel: "Delete",
+	deletingLabel: "Deleting…",
+	deleteConfirmTitleSingle: "Confirm deleting",
+	deleteConfirmTitleMultiple: "Confirm deleting items",
+	deleteConfirmSingleText: "Are you sure you want to delete",
+	deleteConfirmMultipleText: "Do you want to delete following",
+	deleteConfirmItemsLabel: "items?",
+	deleteConfirmLabel: "Delete",
+	deleteCancelLabel: "Cancel"
+}, xe = P(({ values: e, errors: t, onChange: n, onNameBlur: r, onVersionBlur: i, avatarPicker: a, availableLocaleOptions: o, fields: s = le, isNameReadOnly: c, nameCaption: l, isDescriptionRequired: u, renderDescription: d, focusRequestKey: f, labels: p }) => {
+	let [m, h] = z(!1), g = L(() => a ? s : s.filter((e) => e !== Z.Avatar), [a, s]), _ = e.iconUrl, v = a?.resolveIconUrl, y = L(() => v ? v(_) : void 0, [_, v]), b = F(() => h(!0), []), x = F(() => h(!1), []), S = a?.resolveAttachedIconUrl, C = F((e) => {
+		let t = S?.(e);
+		t && n({ iconUrl: t }), h(!1);
+	}, [n, S]);
+	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(me, {
+		values: e,
+		errors: t,
+		onChange: n,
+		onNameBlur: r,
+		onVersionBlur: i,
+		iconPreviewUrl: y,
+		onAddAvatarClick: b,
+		labels: p?.form ?? ye,
+		availableLocaleOptions: o,
+		fields: g,
+		isNameReadOnly: c,
+		nameCaption: l,
+		isDescriptionRequired: u,
+		renderDescription: d,
+		focusRequestKey: f
+	}), a && /* @__PURE__ */ E(ce, {
+		isOpen: m,
+		onClose: x,
+		onAttach: C,
+		bucket: a.bucket,
+		FileManagerModal: a.FileManagerModal,
+		allowedMimeTypes: a.allowedMimeTypes,
+		maxFileSizeBytes: a.maxFileSizeBytes,
+		labels: p?.avatarPicker ?? be
+	})] });
+}), Q = /* @__PURE__ */ function(e) {
+	return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e.ControlCharacters = "control-characters", e;
+}({}), Se = (e, t) => e.length === t.length && e.every((e, n) => e.id === t[n].id && e.language === t[n].language && e.name === t[n].name && e.description === t[n].description), Ce = (e, t) => e.name === t.name && e.description === t.description && e.iconUrl === t.iconUrl && e.version === t.version && e.topics.length === t.topics.length && e.topics.every((e, n) => e === t.topics[n]) && Se(e.otherLocales, t.otherLocales), we = (e) => Object.values(e).every((e) => e == null), Te = /^[a-zA-Z0-9 _.-]+$/, Ee = /^[a-zA-Z0-9._-]+$/, De = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*)?(?:\+[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*)?$/, Oe = (n, r = {}) => {
+	let i = {}, s = n.name.trim();
+	s ? a(s, t) ? i.name = Q.TooLong : r.validateNamePattern && !Te.test(s) ? i.name = Q.InvalidFormat : o(s) && (i.name = Q.ControlCharacters) : i.name = Q.Required, a(n.description, e) && (i.description = Q.TooLong);
+	let c = n.version.trim();
+	return r.validateVersionPattern && c && ((r.validateVersionPattern instanceof RegExp ? r.validateVersionPattern : Ee).test(c) || (i.version = Q.InvalidFormat)), i;
+}, ke = new Set([Q.TooLong, Q.ControlCharacters]), $ = (e, t) => ({
+	reseedKey: t,
+	values: e,
+	baseline: e,
+	touched: {},
+	hasAttemptedSubmit: !1,
+	submitAttemptCount: 0
+}), Ae = ({ initialValues: e, validationOptions: t, reseedKey: n }) => {
+	let [r, i] = z(() => $(e, n));
+	r.reseedKey !== n && i($(e, n));
+	let a = t?.validateNamePattern, o = t?.validateVersionPattern, s = L(() => Oe(r.values, {
+		validateNamePattern: a,
+		validateVersionPattern: o
+	}), [
+		r.values,
+		a,
+		o
+	]), c = L(() => {
+		if (r.hasAttemptedSubmit) return s;
+		let e = (e, t) => e && (t || ke.has(e)) ? e : void 0;
+		return {
+			name: e(s.name, r.touched[Z.Name]),
+			version: e(s.version, r.touched[Z.Version]),
+			description: e(s.description, r.touched[Z.Description])
+		};
+	}, [
+		s,
+		r.hasAttemptedSubmit,
+		r.touched
+	]), l = R(s), u = R(e);
+	I(() => {
+		l.current = s, u.current = e;
+	});
+	let d = F((e) => i((t) => ({
+		...t,
+		values: {
+			...t.values,
+			...e
+		}
+	})), []), f = F((e) => i((t) => t.touched[e] ? t : {
+		...t,
+		touched: {
+			...t.touched,
+			[e]: !0
+		}
+	}), []), p = F(() => (i((e) => ({
+		...e,
+		hasAttemptedSubmit: !0,
+		submitAttemptCount: e.submitAttemptCount + 1
+	})), we(l.current)), []), m = F((e) => i((t) => $(e ?? u.current, t.reseedKey)), []), h = L(() => !Ce(r.values, r.baseline), [r.values, r.baseline]);
+	return L(() => ({
+		values: r.values,
+		setValues: d,
+		touched: r.touched,
+		markTouched: f,
+		errorCodes: s,
+		visibleErrorCodes: c,
+		attemptSubmit: p,
+		submitAttemptCount: r.submitAttemptCount,
+		isDirty: h,
+		reset: m
+	}), [
+		r.submitAttemptCount,
+		r.values,
+		d,
+		r.touched,
+		f,
+		s,
+		c,
+		p,
+		h,
+		m
+	]);
 };
 //#endregion
-export { q as AddAvatar, J as AvatarPickerModal, V as BuilderFormContainer, Z as DeploymentCreationFieldErrorCode, X as DeploymentCreationForm, Y as DeploymentLocalesField, G as EditorLayout, U as EditorSection, Q as NAME_PATTERN, ne as SEMVER_VERSION_PATTERN, $ as VERSION_PATTERN, re as validateDeploymentCreationFields };
+export { se as AddAvatar, ce as AvatarPickerModal, K as BUILDER_FORM_CLASS, G as BuilderFormContainer, ye as DEFAULT_METADATA_FORM_LABELS, Q as DeploymentCreationFieldErrorCode, me as DeploymentCreationForm, de as DeploymentLocalesField, oe as EditorLayout, J as EditorSection, ve as EntityEditor, Z as MetadataField, xe as MetadataForm, Te as NAME_PATTERN, De as SEMVER_VERSION_PATTERN, Ee as VERSION_PATTERN, Ae as useMetadataForm, Oe as validateDeploymentCreationFields };