@epam/ai-dial-builder-form 1.3.0-dev.34 → 1.3.0-dev.342

package/index.js

@@ -1,72 +1,81 @@
 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 T, TextareaResize as E } from "@epam/ai-dial-ui-kit";
-import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
-import { IconArrowLeft as A, IconArrowNarrowLeft as j, IconPhoto as M, IconPlus as N, IconTrashX as P } from "@tabler/icons-react";
-import { Suspense as ee, memo as F, useCallback as I, useEffect as te, useId as ne, useLayoutEffect as L, useMemo as R, useRef as z, useState as B } from "react";
-//#region src/components/BuilderFormActions/BuilderFormActions.tsx
-var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: o }) => /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(y, {
-	label: e.cancelButtonLabel,
-	onClick: t,
-	disabled: r,
-	className: o
-}), /* @__PURE__ */ O(x, {
-	label: e.submitButtonLabel,
-	onClick: n,
-	disabled: i,
-	"aria-busy": a,
-	className: o,
-	iconBefore: a ? /* @__PURE__ */ O("span", {
-		"aria-hidden": !0,
-		children: /* @__PURE__ */ O(C, { size: u.SM })
-	}) : void 0
-})] }), H = {
+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, LiveRegion as y, LiveRegionElement as b, LiveRegionPoliteness as x, NeutralButton as S, Popup as C, PrimaryButton as w, ResizeHandle as T, Select as E, Spinner as D, TagInput as O, Textarea as k, TextareaResize as A } from "@epam/ai-dial-ui-kit";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+import { IconArrowLeft as P, IconArrowNarrowLeft as F, IconPhoto as I, IconPlus as L, IconTrashX as ee } from "@tabler/icons-react";
+import { Suspense as R, memo as te, useCallback as z, useEffect as ne, useId as re, useLayoutEffect as ie, useMemo as B, useRef as V, useState as H } from "react";
+//#region src/models/builder-form-actions-order.ts
+var U = /* @__PURE__ */ function(e) {
+	return e.CancelFirst = "cancelFirst", e.SubmitFirst = "submitFirst", e;
+}({}), W = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: o, order: s = U.CancelFirst }) => {
+	let c = /* @__PURE__ */ M(S, {
+		label: e.cancelButtonLabel,
+		onClick: t,
+		disabled: r,
+		className: o
+	});
+	return /* @__PURE__ */ N(j, { children: [
+		s === U.CancelFirst && c,
+		/* @__PURE__ */ M(w, {
+			label: e.submitButtonLabel,
+			onClick: n,
+			disabled: i,
+			"aria-busy": a,
+			className: o,
+			iconBefore: a ? /* @__PURE__ */ M("span", {
+				"aria-hidden": !0,
+				children: /* @__PURE__ */ M(D, { size: u.SM })
+			}) : void 0
+		}),
+		s === U.SubmitFirst && c
+	] });
+}, G = {
 	body: "_body_1xd7h_2",
 	sideColumn: "_sideColumn_1xd7h_6",
 	reservedColumn: "_reservedColumn_1xd7h_10"
-}, U = s("flex flex-col desktop:min-h-0 desktop:overflow-y-auto", H.sideColumn), re = ({ left: e, children: t, metadata: n, layout: r }) => {
+}, ae = s("flex flex-col desktop:min-h-0 desktop:overflow-y-auto", G.sideColumn), oe = ({ 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__ */ k("div", {
-		className: s("flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden", H.body),
+	return /* @__PURE__ */ N("div", {
+		className: s("flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden", G.body),
 		style: o,
 		children: [
-			e != null && /* @__PURE__ */ O("div", {
-				className: U,
+			e != null && /* @__PURE__ */ M("div", {
+				className: ae,
 				style: a,
 				children: e
 			}),
-			/* @__PURE__ */ O("div", {
+			/* @__PURE__ */ M("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__ */ O("div", {
-				className: U,
+			n != null && /* @__PURE__ */ M("div", {
+				className: ae,
 				style: a,
 				children: n
 			}),
-			i && /* @__PURE__ */ O("div", {
+			i && /* @__PURE__ */ M("div", {
 				"aria-hidden": !0,
 				style: a,
-				className: s(H.reservedColumn, H.sideColumn)
+				className: s(G.reservedColumn, G.sideColumn)
 			})
 		]
 	});
-}, W = {
+}, K = {
 	header: "_header_lon83_4",
 	actions: "_actions_lon83_18",
 	title: "_title_lon83_27"
-}, ie = ({ 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__ */ k("div", {
-		style: i({
-			"--bfh-border": p?.borderColor,
-			"--bfh-font-family": _ ? void 0 : m?.fontFamily
-		}),
-		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", W.header),
+}, se = ({ 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, v = i({
+		"--bfh-border": p?.borderColor,
+		"--bfh-font-family": _ ? void 0 : m?.fontFamily
+	});
+	return /* @__PURE__ */ N("div", {
+		style: v,
+		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", K.header),
 		children: [
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ N("div", {
 				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: [/* @__PURE__ */ O(h, {
-					icon: l === void 0 ? /* @__PURE__ */ O(A, {
+				children: [/* @__PURE__ */ M(h, {
+					icon: l === void 0 ? /* @__PURE__ */ M(P, {
 						size: u.LG,
 						className: "rtl:scale-x-[-1]",
 						"aria-hidden": !0,
@@ -74,14 +83,14 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 					}) : l,
 					"aria-label": e.backButtonLabel,
 					onClick: t
-				}), /* @__PURE__ */ O("h1", {
-					className: s("truncate", W.title, g),
+				}), /* @__PURE__ */ M("h1", {
+					className: s("truncate", K.title, g),
 					children: e.title
 				})]
 			}),
-			/* @__PURE__ */ O("div", {
-				className: s("items-center gap-2", W.actions),
-				children: /* @__PURE__ */ O(V, {
+			/* @__PURE__ */ M("div", {
+				className: s("items-center gap-2", K.actions),
+				children: /* @__PURE__ */ M(W, {
 					labels: e,
 					onCancel: n,
 					onSubmit: r,
@@ -90,27 +99,26 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 					isSubmitting: c
 				})
 			}),
-			/* @__PURE__ */ O("span", {
-				role: "status",
-				"aria-live": "polite",
-				className: "sr-only",
+			/* @__PURE__ */ M(y, {
+				visuallyHidden: !0,
+				as: b.Span,
 				children: c ? e.submittingLabel ?? "Submitting" : ""
 			})
 		]
 	});
-}, G = {
+}, q = {
 	container: "_container_14mfe_1",
 	footer: "_footer_14mfe_10"
-}, K = ({ 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__ */ k("div", {
+}, ce = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, footerActionsOrder: l, backIcon: u, className: d, left: f, children: p, metadata: m, layout: h, styles: g }) => {
+	let { colors: _, header: v, cssVars: y } = g ?? {};
+	return /* @__PURE__ */ N("div", {
 		style: {
-			...i({ "--bfc-bg": g?.background }),
-			...v
+			...i({ "--bfc-bg": _?.background }),
+			...y
 		},
-		className: s("flex h-full min-h-0 w-full flex-col overflow-hidden", u, G.container),
+		className: s("flex h-full min-h-0 w-full flex-col overflow-hidden", d, q.container),
 		children: [
-			/* @__PURE__ */ O(ie, {
+			/* @__PURE__ */ M(se, {
 				labels: e,
 				onBack: t,
 				onCancel: n,
@@ -118,78 +126,92 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				isCancelDisabled: a,
 				isSubmitDisabled: o,
 				isSubmitting: c,
-				backIcon: l,
-				styles: _
+				backIcon: u,
+				styles: v
 			}),
-			/* @__PURE__ */ O(re, {
-				left: d,
-				metadata: p,
-				layout: m,
-				children: f
+			/* @__PURE__ */ M(oe, {
+				left: f,
+				metadata: m,
+				layout: h,
+				children: p
 			}),
-			/* @__PURE__ */ O("div", {
-				className: s("sticky bottom-0 z-10 items-center gap-2 p-3 shadow-sm", G.footer),
-				children: /* @__PURE__ */ O(V, {
+			/* @__PURE__ */ M("div", {
+				className: s("sticky bottom-0 z-10 items-center gap-2 p-3 shadow-sm", q.footer),
+				children: /* @__PURE__ */ M(W, {
 					labels: e,
 					onCancel: n,
 					onSubmit: r,
 					isCancelDisabled: a,
 					isSubmitDisabled: o,
 					isSubmitting: c,
-					buttonClassName: "flex-1"
+					buttonClassName: "flex-1",
+					order: l
 				})
 			})
 		]
 	});
-}, q = {
+}, J = {
 	layout: "dial-builder-form-layout",
 	section: "dial-builder-form-section",
 	metadataSection: "dial-builder-form-metadata-section",
 	setupSection: "dial-builder-form-setup-section",
 	asideSection: "dial-builder-form-aside-section"
-}, J = {
+}, Y = {
 	section: "_section_l1mnx_1",
 	title: "_title_l1mnx_5"
-}, Y = ({ title: e, children: t, styles: n, className: r }) => {
+}, X = ({ 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__ */ k("section", {
-		className: s("flex h-full flex-col gap-4 rounded border p-6", J.section, r, q.section),
+	return /* @__PURE__ */ N("section", {
+		className: s("flex h-full flex-col gap-4 rounded border", Y.section, r, J.section),
 		style: a,
-		children: [e != null && /* @__PURE__ */ O("h2", {
-			className: s("dial-h3-text", J.title),
+		children: [e != null && /* @__PURE__ */ M("h2", {
+			className: s(n?.typography?.titleClassName ?? "dial-h3-text", Y.title),
 			children: e
 		}), t]
 	});
-}, X = {
+}, le = (e, { min: t = 280, max: n = 640, containerWidth: r } = {}) => {
+	let i = r != null && r > 0 ? r - 360 : n;
+	return Math.round(Math.min(Math.max(t, Math.min(n, i)), Math.max(t, Number.isFinite(e) ? e : t)));
+}, Z = {
 	headerBorder: "_headerBorder_1adw2_1",
 	footerBorder: "_footerBorder_1adw2_5",
 	columnBorder: "_columnBorder_1adw2_10"
-}, ae = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: a, centerContent: o, rightContent: c, isSaving: l = !1, labels: f, styles: p, dir: m }) => {
-	let g = ne(), _ = l ? f?.savingStatusLabel ?? "Saving" : "", v = i({
-		"--el-header-border-color": p?.colors?.headerBorderColor,
-		"--el-sidebar-border-color": p?.colors?.sidebarBorderColor
+}, ue = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: a, centerContent: o, rightContent: c, resizableLeftColumn: l, isSaving: f = !1, labels: p, styles: m, dir: g }) => {
+	let _ = re(), v = f ? p?.savingStatusLabel ?? "Saving" : "", x = V(null), [S, C] = H(), w = l != null && o != null, E = l?.minWidth, D = l?.maxWidth, O = {
+		min: E,
+		max: D,
+		containerWidth: S
+	}, k = w ? le(l.width, O) : void 0, A = le(D ?? 640, O);
+	ne(() => {
+		let e = x.current;
+		if (!w || e == null || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => C(e.clientWidth));
+		return t.observe(e), () => t.disconnect();
+	}, [w]);
+	let j = i({
+		"--el-header-border-color": m?.colors?.headerBorderColor,
+		"--el-sidebar-border-color": m?.colors?.sidebarBorderColor
 	});
-	return /* @__PURE__ */ k("div", {
-		dir: m,
-		className: s("flex min-h-0 flex-1 flex-col", q.layout),
-		style: v,
+	return /* @__PURE__ */ N("div", {
+		dir: g,
+		className: s("flex min-h-0 flex-1 flex-col", J.layout),
+		style: j,
 		children: [
-			/* @__PURE__ */ O("span", {
-				role: "status",
-				"aria-live": "polite",
-				className: "sr-only",
-				id: g,
-				children: _
+			/* @__PURE__ */ M(y, {
+				visuallyHidden: !0,
+				as: b.Span,
+				id: _,
+				children: v
 			}),
-			/* @__PURE__ */ k("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", X.headerBorder),
-				children: [/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ N("div", {
+				className: s("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pt-3 desktop:pb-3", Z.headerBorder),
+				children: [/* @__PURE__ */ N("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ O(h, {
-						icon: /* @__PURE__ */ O(j, {
+					children: [/* @__PURE__ */ M(h, {
+						icon: /* @__PURE__ */ M(F, {
 							size: u.LG,
 							stroke: d,
 							"aria-hidden": !0,
@@ -197,71 +219,85 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 						}),
 						"aria-label": n,
 						onClick: t
-					}), /* @__PURE__ */ O("h1", {
-						className: "dial-h2-text min-w-0 truncate",
+					}), /* @__PURE__ */ M("h1", {
+						className: s(m?.typography?.titleClassName ?? "dial-h2-text", "min-w-0 truncate"),
 						children: e
 					})]
-				}), r != null && /* @__PURE__ */ O("div", {
+				}), r != null && /* @__PURE__ */ M("div", {
 					className: "hidden shrink-0 items-center gap-2 desktop:flex",
 					children: r
 				})]
 			}),
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ N("div", {
+				ref: x,
 				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
 				children: [
-					/* @__PURE__ */ O("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 : X.columnBorder),
+					/* @__PURE__ */ M("div", {
+						className: s(o == null ? "desktop:flex-1" : "desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", o != null && !w && "desktop:w-[400px]", w && "desktop:relative desktop:w-(--el-left-width)", "desktop:overflow-y-auto", o == null ? void 0 : Z.columnBorder),
+						style: k == null ? void 0 : { "--el-left-width": `${k}px` },
 						children: a
 					}),
-					o != null && /* @__PURE__ */ O("div", {
+					w && k != null && /* @__PURE__ */ M("div", {
+						className: "relative hidden w-0 shrink-0 desktop:block",
+						children: /* @__PURE__ */ M(T, {
+							width: k,
+							minWidth: E ?? 280,
+							maxWidth: A,
+							defaultWidth: l.defaultWidth ?? 400,
+							onWidthChange: l.onWidthChange,
+							label: p?.resizeHandleLabel ?? "Resize columns",
+							tooltip: p?.resizeHandleTooltip ?? "Drag to resize"
+						})
+					}),
+					o != null && /* @__PURE__ */ M("div", {
 						className: "desktop:flex desktop:min-h-0 desktop:flex-1 desktop:flex-col desktop:overflow-y-auto",
 						children: o
 					}),
-					c != null && /* @__PURE__ */ O("div", {
-						className: s("desktop:w-[400px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-s", X.columnBorder),
+					c != null && /* @__PURE__ */ M("div", {
+						className: s("desktop:w-[400px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-s", Z.columnBorder),
 						children: c
 					})
 				]
 			}),
-			r != null && /* @__PURE__ */ O("div", {
-				className: s("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", X.footerBorder),
+			r != null && /* @__PURE__ */ M("div", {
+				className: s("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 *:flex-1 desktop:hidden", Z.footerBorder),
 				children: r
 			})
 		]
 	});
-}, Z = {
+}, de = {
 	box: "_box_c9as8_1",
 	icon: "_icon_c9as8_6",
 	caption: "_caption_c9as8_10"
-}, oe = ({ 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
+}, fe = ({ label: e, avatarUrl: t, avatarAlt: n = "", addAvatarLabel: r = "Add avatar", captionText: a = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: o, captionClassName: c = "dial-tiny-text", styles: l, className: f }) => {
+	let h = i({
+		"--aa-box-bg": l?.colors?.boxBackgroundColor,
+		"--aa-box-border": l?.colors?.boxBorderColor,
+		"--aa-icon": l?.colors?.placeholderIconColor,
+		"--aa-caption": l?.colors?.captionColor
 	});
-	return /* @__PURE__ */ k("div", {
-		className: s("flex flex-col gap-2", l),
-		style: f,
-		children: [/* @__PURE__ */ O(_, { label: e }), /* @__PURE__ */ k("div", {
+	return /* @__PURE__ */ N("div", {
+		className: s("flex flex-col gap-2", f),
+		style: h,
+		children: [/* @__PURE__ */ M(_, { label: e }), /* @__PURE__ */ N("div", {
 			className: "flex items-start gap-3",
-			children: [/* @__PURE__ */ O("div", {
-				className: s("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", Z.box),
-				children: t ? /* @__PURE__ */ O("img", {
+			children: [/* @__PURE__ */ M("div", {
+				className: s("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", de.box),
+				children: t ? /* @__PURE__ */ M("img", {
 					src: t,
 					alt: n,
 					className: "h-16 w-16 object-cover"
-				}) : /* @__PURE__ */ O(M, {
+				}) : /* @__PURE__ */ M(I, {
 					size: u.LG,
 					stroke: d,
 					"aria-hidden": !0,
-					className: Z.icon
+					className: de.icon
 				})
-			}), /* @__PURE__ */ k("div", {
+			}), /* @__PURE__ */ N("div", {
 				className: "flex flex-col gap-3",
-				children: [/* @__PURE__ */ O(m, {
+				children: [/* @__PURE__ */ M(m, {
 					size: p.Small,
-					iconBefore: /* @__PURE__ */ O(N, {
+					iconBefore: /* @__PURE__ */ M(L, {
 						size: u.SM,
 						stroke: d,
 						"aria-hidden": !0
@@ -269,271 +305,293 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 					className: "w-fit",
 					label: r,
 					onClick: o
-				}), /* @__PURE__ */ O("span", {
-					className: s("dial-tiny-text", Z.caption),
+				}), /* @__PURE__ */ M("span", {
+					className: s(c, de.caption),
 					children: a
 				})]
 			})]
 		})]
 	});
-}, se = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
-	let c = I((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = I((e) => /* @__PURE__ */ O("div", {
-		className: "dial-small-text px-6 py-3",
-		children: /* @__PURE__ */ O("p", {
-			className: "mb-3 text-secondary",
-			children: e.length === 1 ? /* @__PURE__ */ k(D, { children: [
-				s.deleteConfirmSingleText,
+}, pe = {
+	confirmText: "_confirmText_19ec1_1",
+	confirmItem: "_confirmItem_19ec1_5"
+}, me = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: a, allowedMimeTypes: o, maxFileSizeBytes: c, labels: l, confirmBodyClassName: u = "dial-small-text", styles: d }) => {
+	let f = d?.colors?.confirmText, p = d?.colors?.confirmItemText, m = z((e) => e.length === 1 ? l.deleteConfirmTitleSingle : l.deleteConfirmTitleMultiple, [l.deleteConfirmTitleSingle, l.deleteConfirmTitleMultiple]), h = z((e) => /* @__PURE__ */ M("div", {
+		className: s(u, "px-6 py-3"),
+		style: i({
+			"--apm-confirm-text": f,
+			"--apm-confirm-item-text": p
+		}),
+		children: /* @__PURE__ */ M("p", {
+			className: s("mb-3", pe.confirmText),
+			children: e.length === 1 ? /* @__PURE__ */ N(j, { children: [
+				l.deleteConfirmSingleText,
 				" ",
-				/* @__PURE__ */ k("span", {
-					className: "break-words text-primary",
+				/* @__PURE__ */ N("span", {
+					className: s("wrap-break-word", pe.confirmItem),
 					children: [
 						"\"",
 						e[0].split("/").pop(),
 						"\"?"
 					]
 				})
-			] }) : /* @__PURE__ */ k(D, { children: [
-				s.deleteConfirmMultipleText,
+			] }) : /* @__PURE__ */ N(j, { children: [
+				l.deleteConfirmMultipleText,
 				" ",
-				/* @__PURE__ */ k("span", {
-					className: "text-primary",
+				/* @__PURE__ */ N("span", {
+					className: pe.confirmItem,
 					children: [
 						e.length,
 						" ",
-						s.deleteConfirmItemsLabel
+						l.deleteConfirmItemsLabel
 					]
 				})
 			] })
 		})
 	}), [
-		s.deleteConfirmSingleText,
-		s.deleteConfirmMultipleText,
-		s.deleteConfirmItemsLabel
+		l.deleteConfirmSingleText,
+		l.deleteConfirmMultipleText,
+		l.deleteConfirmItemsLabel,
+		f,
+		p,
+		u
 	]);
-	return /* @__PURE__ */ O(ee, {
+	return /* @__PURE__ */ M(R, {
 		fallback: null,
-		children: e && /* @__PURE__ */ O(i, {
+		children: e && /* @__PURE__ */ M(a, {
 			isOpen: e,
 			onClose: t,
 			onAttach: n,
 			bucket: r,
-			allowedTypes: a,
-			maxSelectableFileSize: o,
+			allowedTypes: o,
+			maxSelectableFileSize: c,
 			maximumAttachmentsAmount: 1,
 			canAttachFolders: !1,
-			title: s.title,
-			attachLabel: s.attachLabel,
-			emptyTitle: s.emptyTitle,
-			emptyDescription: s.emptyDescription,
-			errorMessage: s.errorMessage,
-			retryLabel: s.retryLabel,
-			hiddenFilesLabel: s.hiddenFilesLabel,
-			showHiddenFilesLabel: s.showHiddenFilesLabel,
-			hideHiddenFilesLabel: s.hideHiddenFilesLabel,
-			getSelectionLabel: s.getSelectionLabel,
-			uploadFilesLabel: s.uploadFilesLabel,
-			newFolderLabel: s.newFolderLabel,
-			downloadLabel: s.downloadLabel,
-			downloadingLabel: s.downloadingLabel,
-			deleteLabel: s.deleteLabel,
-			deletingLabel: s.deletingLabel,
-			deleteConfirmTitle: c,
-			deleteConfirmBody: l,
-			deleteConfirmLabel: s.deleteConfirmLabel,
-			deleteCancelLabel: s.deleteCancelLabel
+			title: l.title,
+			attachLabel: l.attachLabel,
+			emptyTitle: l.emptyTitle,
+			emptyDescription: l.emptyDescription,
+			errorMessage: l.errorMessage,
+			retryLabel: l.retryLabel,
+			hiddenFilesLabel: l.hiddenFilesLabel,
+			showHiddenFilesLabel: l.showHiddenFilesLabel,
+			hideHiddenFilesLabel: l.hideHiddenFilesLabel,
+			getSelectionLabel: l.getSelectionLabel,
+			uploadFilesLabel: l.uploadFilesLabel,
+			newFolderLabel: l.newFolderLabel,
+			downloadLabel: l.downloadLabel,
+			downloadingLabel: l.downloadingLabel,
+			deleteLabel: l.deleteLabel,
+			deletingLabel: l.deletingLabel,
+			deleteConfirmTitle: m,
+			deleteConfirmBody: h,
+			deleteConfirmLabel: l.deleteConfirmLabel,
+			deleteCancelLabel: l.deleteCancelLabel
 		})
 	});
 }, Q = /* @__PURE__ */ function(e) {
 	return e.Avatar = "avatar", e.Name = "name", e.Version = "version", e.Description = "description", e.Locales = "locales", e.Tags = "tags", e;
-}({}), ce = [
+}({}), he = [
 	"avatar",
 	"name",
 	"version",
 	"description",
 	"locales",
 	"tags"
-], le = (e, t, n) => ({
+], ge = {
+	summary: "_summary_1hlc9_1",
+	rowLabel: "_rowLabel_1hlc9_5"
+}, _e = (e, t, n) => ({
 	id: e,
 	language: n.find((e) => !t.has(e.code))?.code ?? "",
 	name: "",
 	description: ""
-}), ue = ({ 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: D, nameLabel: A, namePlaceholder: j, descriptionLabel: M, descriptionPlaceholder: ee, deleteAriaLabel: F, cancelLabel: I = "Cancel", saveLabel: ne = "Save" } = i, [L, R] = B(!1), [V, H] = B([]), U = z(0);
-	te(() => {
-		L && H(e.length > 0 ? e : [le(`locale-row-${++U.current}`, /* @__PURE__ */ new Set(), r)]);
+}), ve = (e) => e.toUpperCase(), ye = ({ value: e, onChange: t, availableLocaleOptions: r = [], formatLocaleLabel: a = ve, labels: o, className: m, summaryClassName: h = "dial-body-text", rowLabelClassName: _ = "dial-tiny-lead-text", colors: y }) => {
+	let b = i({
+		"--dlf-summary-text": y?.summaryText,
+		"--dlf-row-label-text": y?.rowLabelText
+	}), { summaryLabel: x, addLabel: S, editLabel: w, popupTitle: T, addLocaleLabel: D, localeRowLabel: O = "Locale", languageLabel: j, nameLabel: P, namePlaceholder: F, descriptionLabel: I, descriptionPlaceholder: R, deleteAriaLabel: te, cancelLabel: z = "Cancel", saveLabel: re = "Save" } = o, [ie, B] = H(!1), [U, W] = H([]), G = V(0);
+	ne(() => {
+		ie && W(e.length > 0 ? e : [_e(`locale-row-${++G.current}`, /* @__PURE__ */ new Set(), r)]);
 	}, [
-		L,
+		ie,
 		e,
 		r
 	]);
-	let re = () => R(!0), W = () => R(!1), ie = () => {
-		t(V.filter((e) => e.language && e.name)), R(!1);
-	}, G = () => {
-		let e = new Set(V.map((e) => e.language).filter(Boolean));
-		H((t) => [...t, le(`locale-row-${++U.current}`, e, r)]);
-	}, K = (e, t) => {
-		H((n) => n.map((n) => n.id === e ? {
+	let ae = () => B(!0), oe = () => B(!1), K = () => {
+		t(U.filter((e) => e.language && e.name)), B(!1);
+	}, se = () => {
+		let e = new Set(U.map((e) => e.language).filter(Boolean));
+		W((t) => [...t, _e(`locale-row-${++G.current}`, e, r)]);
+	}, q = (e, t) => {
+		W((n) => n.map((n) => n.id === e ? {
 			...n,
 			...t
 		} : n));
-	}, q = (e) => {
-		H((t) => t.filter((t) => t.id !== e));
-	}, J = (e) => r.find((t) => t.code === e)?.label ?? e.toUpperCase(), Y = V.some((e) => !e.language || !e.name);
-	return r.length === 0 ? null : /* @__PURE__ */ k("div", {
-		className: s("flex items-center gap-2", a),
+	}, ce = (e) => {
+		W((t) => t.filter((t) => t.id !== e));
+	}, J = new Set(r.map((e) => e.code)), Y = (e) => e !== "" && !J.has(e), X = e.some((e) => Y(e.language)), le = new Set(U.map((e) => e.language).filter((e) => J.has(e))).size, Z = (t, n) => {
+		let i = e.find((e) => e.id === t.id)?.language, o = [...new Set([i ?? "", t.language].filter(Y))];
+		return [...r.map((e) => ({
+			value: e.code,
+			label: e.label,
+			disabled: n.has(e.code)
+		})), ...o.map((e) => ({
+			value: e,
+			label: a(e),
+			disabled: n.has(e)
+		}))];
+	}, ue = U.some((e) => !e.language || !e.name);
+	return r.length === 0 && !X ? null : /* @__PURE__ */ N("div", {
+		className: s("flex items-center gap-2", m),
+		style: b,
 		children: [
-			e.length > 0 && /* @__PURE__ */ O("span", {
-				className: o,
-				children: `${h}: ${e.map((e) => `[${J(e.language)}]`).join(", ")}`
+			e.length > 0 && /* @__PURE__ */ M("span", {
+				className: s(ge.summary, h),
+				children: `${x}: ${e.map((e) => `[${e.language.toUpperCase()}]`).join(", ")}`
 			}),
-			/* @__PURE__ */ O(v, {
-				label: e.length > 0 ? y : _,
-				iconBefore: /* @__PURE__ */ O(N, {
+			/* @__PURE__ */ M(v, {
+				label: e.length > 0 ? w : S,
+				iconBefore: /* @__PURE__ */ M(L, {
 					size: u.SM,
 					"aria-hidden": !0,
 					stroke: d
 				}),
-				className: "!px-0",
-				onClick: re
+				className: "px-0!",
+				onClick: ae
 			}),
-			/* @__PURE__ */ O(b, {
-				open: L,
-				header: x,
-				onClose: W,
+			/* @__PURE__ */ M(C, {
+				open: ie,
+				header: T,
+				onClose: oe,
 				mainButtons: [{
-					label: I,
-					onClick: W
+					label: z,
+					onClick: oe
 				}, {
-					label: ne,
+					label: re,
 					variant: l.Primary,
-					disabled: Y,
-					onClick: ie
+					disabled: ue,
+					onClick: K
 				}],
-				children: /* @__PURE__ */ k("div", {
+				children: /* @__PURE__ */ N("div", {
 					className: "flex flex-col gap-8 px-6 py-3",
-					children: [V.map((e, t) => {
-						let i = new Set(V.filter((t) => t.id !== e.id).map((e) => e.language).filter(Boolean));
-						return /* @__PURE__ */ k("div", {
+					style: b,
+					children: [U.map((e, t) => {
+						let r = new Set(U.filter((t) => t.id !== e.id).map((e) => e.language).filter(Boolean));
+						return /* @__PURE__ */ N("div", {
 							className: "flex flex-col gap-2",
-							children: [/* @__PURE__ */ k("div", {
+							children: [/* @__PURE__ */ N("div", {
 								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ k("span", {
-									className: m,
+								children: [/* @__PURE__ */ N("span", {
+									className: s(ge.rowLabel, _),
 									children: [
-										w,
+										O,
 										" ",
 										t + 1
 									]
-								}), /* @__PURE__ */ O(f, {
+								}), /* @__PURE__ */ M(f, {
 									appearance: c.Ghost,
 									size: p.Small,
-									icon: /* @__PURE__ */ O(P, {
+									icon: /* @__PURE__ */ M(ee, {
 										size: u.SM,
 										"aria-hidden": !0,
 										stroke: d
 									}),
-									"aria-label": `${F} ${t + 1}`,
-									onClick: () => q(e.id)
+									"aria-label": `${te} ${t + 1}`,
+									onClick: () => ce(e.id)
 								})]
-							}), /* @__PURE__ */ k("div", {
+							}), /* @__PURE__ */ N("div", {
 								role: "group",
-								"aria-label": `${w} ${t + 1}`,
+								"aria-label": `${O} ${t + 1}`,
 								className: "flex flex-col gap-5",
-								children: [/* @__PURE__ */ k("div", {
+								children: [/* @__PURE__ */ N("div", {
 									className: "flex flex-col gap-5 desktop:flex-row desktop:items-start",
-									children: [/* @__PURE__ */ O(S, {
+									children: [/* @__PURE__ */ M(E, {
 										id: `${e.id}-language`,
 										labelProps: {
-											label: D,
+											label: j,
 											required: !0
 										},
 										className: "desktop:shrink-0 desktop:basis-40",
-										options: r.map((e) => ({
-											value: e.code,
-											label: e.label,
-											disabled: i.has(e.code)
-										})),
+										options: Z(e, r),
 										value: e.language,
-										onChange: (t) => K(e.id, { language: t })
-									}), /* @__PURE__ */ O(g, {
+										onChange: (t) => q(e.id, { language: t })
+									}), /* @__PURE__ */ M(g, {
 										id: `${e.id}-name`,
 										containerClassName: "min-w-0 flex-1",
 										required: !0,
 										value: e.name,
-										onChange: (t) => K(e.id, { name: t ?? "" }),
+										onChange: (t) => q(e.id, { name: t ?? "" }),
 										labelProps: {
-											label: A,
+											label: P,
 											required: !0
 										},
-										placeholder: j
+										placeholder: F
 									})]
-								}), /* @__PURE__ */ O(T, {
+								}), /* @__PURE__ */ M(k, {
 									id: `${e.id}-description`,
 									className: n,
-									resize: E.Vertical,
+									resize: A.Vertical,
 									value: e.description,
-									onChange: (t) => K(e.id, { description: t }),
-									labelProps: { label: M },
-									placeholder: ee
+									onChange: (t) => q(e.id, { description: t }),
+									labelProps: { label: I },
+									placeholder: R
 								})]
 							})]
 						}, e.id);
-					}), /* @__PURE__ */ O(v, {
-						label: C,
-						iconBefore: /* @__PURE__ */ O(N, {
+					}), /* @__PURE__ */ M(v, {
+						label: D,
+						iconBefore: /* @__PURE__ */ M(L, {
 							size: u.SM,
 							"aria-hidden": !0,
 							stroke: d
 						}),
 						className: "self-start",
-						onClick: G,
-						disabled: V.length >= r.length
+						onClick: se,
+						disabled: le >= r.length
 					})]
 				})
 			})
 		]
 	});
-}, de = "Add tags, comma separated", fe = "deployment-creation-form-description", pe = ({ values: e, errors: t, onChange: i, onNameBlur: a, onVersionBlur: o, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: d, availableLocaleOptions: f = [], fields: p = ce, isNameReadOnly: m = !1, nameCaption: h, isDescriptionRequired: _ = !1, renderDescription: v, focusRequestKey: y }) => {
-	let b = z(null), x = z(null), S = z(null), C = z(!1), D = (e) => p.includes(e), A = D(Q.Name), j = D(Q.Version), M = !!(t.name || t.version || t.description), N = z(y);
-	te(() => {
+}, be = "Add tags, comma separated", xe = "The version is changed with \"Save as new version\"", Se = "deployment-creation-form-description", Ce = ({ values: e, errors: t, onChange: i, onNameBlur: a, onVersionBlur: o, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: d, availableLocaleOptions: f = [], formatLocaleLabel: p, fields: m = he, isNameReadOnly: h = !1, nameReadOnlyTooltip: _, isVersionReadOnly: v = !1, versionReadOnlyTooltip: y = xe, nameCaption: b, isDescriptionRequired: x = !1, descriptionCaption: S, renderDescription: C, focusRequestKey: w }) => {
+	let T = V(null), E = V(null), D = V(null), j = V(!1), P = (e) => m.includes(e), F = P(Q.Name), I = P(Q.Version), L = !!(t.name || t.version || t.description), ee = V(w);
+	ne(() => {
 		let e = () => {
-			t.name ? b.current?.focus() : t.version ? x.current?.focus() : t.description && S.current?.focus();
+			t.name ? T.current?.focus() : t.version ? E.current?.focus() : t.description && D.current?.focus();
 		};
-		if (y !== void 0) {
-			y !== N.current && (N.current = y, e());
-			return;
-		}
-		M && !C.current && e(), C.current = M;
+		w === void 0 ? (L && !j.current && e(), j.current = L) : w !== ee.current && (ee.current = w, e());
 	}, [
-		y,
-		M,
+		w,
+		L,
 		t.name,
 		t.version,
 		t.description
 	]);
-	let P = /* @__PURE__ */ O(T, {
-		id: fe,
-		ref: S,
+	let R = /* @__PURE__ */ M(k, {
+		id: Se,
+		ref: D,
 		value: e.description,
 		onChange: (e) => i({ description: e }),
-		"aria-required": _ || void 0,
-		labelProps: v ? void 0 : {
+		"aria-required": x || void 0,
+		labelProps: C ? void 0 : {
 			label: u.description.label,
-			required: _
+			required: x
 		},
 		placeholder: u.description.placeholder,
+		caption: S,
 		error: t.description || void 0,
 		invalid: !!t.description,
-		containerClassName: v ? void 0 : d?.field,
+		containerClassName: C ? void 0 : d?.field,
 		className: n,
-		resize: E.Vertical
+		resize: A.Vertical
 	});
-	return /* @__PURE__ */ k("div", {
+	return /* @__PURE__ */ N("div", {
 		role: u.ariaLabel ? "group" : void 0,
 		"aria-label": u.ariaLabel,
 		className: s("flex flex-col gap-4", d?.root),
 		children: [
-			D(Q.Avatar) && /* @__PURE__ */ O(oe, {
+			P(Q.Avatar) && /* @__PURE__ */ M(fe, {
 				label: u.iconUrl.label,
 				avatarUrl: c,
 				addAvatarLabel: u.iconUrl.addAvatarLabel,
@@ -541,54 +599,61 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				onAddAvatarClick: l,
 				className: d?.field
 			}),
-			(A || j) && /* @__PURE__ */ k("div", {
+			(F || I) && /* @__PURE__ */ N("div", {
 				className: s("flex items-start gap-4", d?.field),
-				children: [A && /* @__PURE__ */ O(g, {
+				children: [F && /* @__PURE__ */ M(g, {
 					id: "deployment-creation-form-name",
-					inputRef: b,
+					inputRef: T,
 					value: e.name,
 					onChange: (e) => i({ name: e ?? "" }),
 					onBlur: a,
-					readOnly: m,
+					disabled: h,
+					tooltipText: h ? _ : void 0,
 					labelProps: {
 						label: u.name.label,
 						required: !0
 					},
 					placeholder: u.name.placeholder,
-					caption: h,
+					caption: b,
 					error: t.name || void 0,
 					invalid: !!t.name,
-					containerClassName: j ? "min-w-0 basis-0 grow-[2]" : "min-w-0 flex-1"
-				}), j && /* @__PURE__ */ O(g, {
+					containerClassName: I ? "min-w-0 basis-0 grow-[2]" : "min-w-0 flex-1"
+				}), I && /* @__PURE__ */ M(g, {
 					id: "deployment-creation-form-version",
-					inputRef: x,
+					inputRef: E,
 					value: e.version,
-					onChange: (e) => i({ version: e ?? "" }),
-					onBlur: o,
+					onChange: (e) => {
+						v || i({ version: e ?? "" });
+					},
+					onBlur: v ? void 0 : o,
+					readOnly: v,
+					tooltipText: v ? y : void 0,
 					labelProps: { label: u.version.label },
 					placeholder: u.version.placeholder,
 					error: t.version || void 0,
 					invalid: !!t.version,
-					containerClassName: A ? "min-w-0 basis-0 grow-[1]" : "min-w-0 flex-1"
+					containerClassName: F ? "min-w-0 basis-0 grow-[1]" : "min-w-0 flex-1"
 				})]
 			}),
-			D(Q.Description) && (v ? /* @__PURE__ */ O("div", {
+			P(Q.Description) && (C ? /* @__PURE__ */ M("div", {
 				className: d?.field,
-				children: v(P, fe)
-			}) : P),
-			D(Q.Locales) && /* @__PURE__ */ O(ue, {
+				children: C(R, Se)
+			}) : R),
+			P(Q.Locales) && /* @__PURE__ */ M(ye, {
 				value: e.otherLocales,
 				onChange: (e) => i({ otherLocales: e }),
 				availableLocaleOptions: f,
+				formatLocaleLabel: p,
 				labels: u.otherLocales,
-				className: d?.field
+				className: d?.field,
+				colors: d?.localesColors
 			}),
-			D(Q.Tags) && /* @__PURE__ */ O("div", {
+			P(Q.Tags) && /* @__PURE__ */ M("div", {
 				className: d?.field,
-				children: /* @__PURE__ */ O(w, {
+				children: /* @__PURE__ */ M(O, {
 					id: "deployment-creation-form-topics",
 					labelProps: { label: u.topics.label },
-					placeholder: u.topics.placeholder ?? de,
+					placeholder: u.topics.placeholder ?? be,
 					value: e.topics,
 					onChange: (e) => i({ topics: e }),
 					tagClassName: r
@@ -596,53 +661,58 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			})
 		]
 	});
-}, me = "border-0 p-4 desktop:p-8", he = "desktop:flex-1", ge = "px-4 pt-4 desktop:px-6 desktop:pt-6", _e = F(({ 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, asideData: h, asideTitle: g, asideSectionClassName: _, alert: v, metadataSectionClassName: b, setupSectionClassName: S, labels: C, styles: w, dir: T }) => {
-	let E = v == null ? null : /* @__PURE__ */ O("div", {
-		role: "alert",
-		className: ge,
+}, we = "border-0 p-4 desktop:p-8", Te = "border-0", Ee = "desktop:flex-1", De = "px-4 pt-4 desktop:px-6 desktop:pt-6", Oe = te(({ 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, asideData: h, asideTitle: g, asideSectionClassName: _, alert: v, resizableLeftColumn: b, metadataSectionClassName: C, setupSectionClassName: T, hasSetupSectionPadding: E = !0, labels: D, styles: O, dir: k }) => {
+	let A = /* @__PURE__ */ M(y, {
+		politeness: x.Assertive,
+		className: v == null ? void 0 : De,
 		children: v
-	}), A = p != null;
-	return /* @__PURE__ */ O(ae, {
+	}), P = p != null;
+	return /* @__PURE__ */ M(ue, {
 		title: e,
 		onBack: t,
-		backAriaLabel: C?.backAriaLabel ?? "Back",
+		backAriaLabel: D?.backAriaLabel ?? "Back",
 		isSaving: a,
-		labels: { savingStatusLabel: C?.savingStatusLabel ?? "Saving" },
-		rightContent: h == null ? void 0 : /* @__PURE__ */ O(Y, {
+		resizableLeftColumn: b,
+		labels: {
+			savingStatusLabel: D?.savingStatusLabel ?? "Saving",
+			resizeHandleLabel: D?.resizeHandleLabel,
+			resizeHandleTooltip: D?.resizeHandleTooltip
+		},
+		rightContent: h == null ? void 0 : /* @__PURE__ */ M(X, {
 			title: g,
-			styles: w?.section,
-			className: s(me, _, q.asideSection),
+			styles: O?.section,
+			className: s(we, _, J.asideSection),
 			children: h
 		}),
-		styles: w?.layout,
-		dir: T,
-		actions: /* @__PURE__ */ k(D, { children: [c, !l && /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(y, {
-			label: C?.cancelLabel ?? "Cancel",
+		styles: O?.layout,
+		dir: k,
+		actions: /* @__PURE__ */ N(j, { children: [c, !l && /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M(S, {
+			label: D?.cancelLabel ?? "Cancel",
 			disabled: a,
 			onClick: n
-		}), /* @__PURE__ */ O(x, {
+		}), /* @__PURE__ */ M(w, {
 			label: i,
 			disabled: a || o,
 			onClick: r
 		})] })] }),
-		leftContent: /* @__PURE__ */ k(D, { children: [
-			!A && E,
-			/* @__PURE__ */ O(Y, {
-				title: d === null ? void 0 : d ?? C?.metadataTitle ?? "Metadata",
-				styles: w?.section,
-				className: s(me, b, q.metadataSection),
+		leftContent: /* @__PURE__ */ N(j, { children: [
+			!P && A,
+			/* @__PURE__ */ M(X, {
+				title: d === null ? void 0 : d ?? D?.metadataTitle ?? "Metadata",
+				styles: O?.section,
+				className: s(we, C, J.metadataSection),
 				children: u
 			}),
 			f
 		] }),
-		centerContent: A ? /* @__PURE__ */ k(D, { children: [E, /* @__PURE__ */ O(Y, {
-			title: m === null ? void 0 : m ?? C?.setupTitle ?? "Setup",
-			styles: w?.section,
-			className: s(me, he, S, q.setupSection),
+		centerContent: P ? /* @__PURE__ */ N(j, { children: [A, /* @__PURE__ */ M(X, {
+			title: m === null ? void 0 : m ?? D?.setupTitle ?? "Setup",
+			styles: O?.section,
+			className: s(E ? we : Te, Ee, T, J.setupSection),
 			children: p
 		})] }) : void 0
 	});
-}), ve = {
+}), ke = {
 	name: {
 		label: "Name",
 		placeholder: "Enter name"
@@ -681,7 +751,7 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		saveLabel: "Save"
 	},
 	ariaLabel: "Metadata"
-}, ye = {
+}, Ae = {
 	title: "Add avatar",
 	attachLabel: "Attach",
 	emptyTitle: "This folder is empty",
@@ -705,64 +775,69 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 	deleteConfirmItemsLabel: "items?",
 	deleteConfirmLabel: "Delete",
 	deleteCancelLabel: "Cancel"
-}, be = F(({ values: e, errors: t, onChange: n, onNameBlur: r, onVersionBlur: i, avatarPicker: a, availableLocaleOptions: o, fields: s = ce, isNameReadOnly: c, nameCaption: l, isDescriptionRequired: u, renderDescription: d, focusRequestKey: f, labels: p }) => {
-	let [m, h] = B(!1), g = R(() => a ? s : s.filter((e) => e !== Q.Avatar), [a, s]), _ = e.iconUrl, v = a?.resolveIconUrl, y = R(() => v ? v(_) : void 0, [_, v]), b = I(() => h(!0), []), x = I(() => h(!1), []), S = a?.resolveAttachedIconUrl, C = I((e) => {
-		let t = S?.(e);
-		t && n({ iconUrl: t }), h(!1);
-	}, [n, S]);
-	return /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(pe, {
+}, je = te(({ values: e, errors: t, onChange: n, onNameBlur: r, onVersionBlur: i, avatarPicker: a, availableLocaleOptions: o, formatLocaleLabel: s, fields: c = he, isNameReadOnly: l, nameReadOnlyTooltip: u, isVersionReadOnly: d, versionReadOnlyTooltip: f, nameCaption: p, isDescriptionRequired: m, descriptionCaption: h, renderDescription: g, focusRequestKey: _, labels: v }) => {
+	let [y, b] = H(!1), x = B(() => a ? c : c.filter((e) => e !== Q.Avatar), [a, c]), S = e.iconUrl, C = a?.resolveIconUrl, w = B(() => C ? C(S) : void 0, [S, C]), T = z(() => b(!0), []), E = z(() => b(!1), []), D = a?.resolveAttachedIconUrl, O = z((e) => {
+		let t = D?.(e);
+		t && n({ iconUrl: t }), b(!1);
+	}, [n, D]);
+	return /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ M(Ce, {
 		values: e,
 		errors: t,
 		onChange: n,
 		onNameBlur: r,
 		onVersionBlur: i,
-		iconPreviewUrl: y,
-		onAddAvatarClick: b,
-		labels: p?.form ?? ve,
+		iconPreviewUrl: w,
+		onAddAvatarClick: T,
+		labels: v?.form ?? ke,
 		availableLocaleOptions: o,
-		fields: g,
-		isNameReadOnly: c,
-		nameCaption: l,
-		isDescriptionRequired: u,
-		renderDescription: d,
-		focusRequestKey: f
-	}), a && /* @__PURE__ */ O(se, {
-		isOpen: m,
-		onClose: x,
-		onAttach: C,
+		formatLocaleLabel: s,
+		fields: x,
+		isNameReadOnly: l,
+		nameReadOnlyTooltip: u,
+		isVersionReadOnly: d,
+		versionReadOnlyTooltip: f,
+		nameCaption: p,
+		isDescriptionRequired: m,
+		descriptionCaption: h,
+		renderDescription: g,
+		focusRequestKey: _
+	}), a && /* @__PURE__ */ M(me, {
+		isOpen: y,
+		onClose: E,
+		onAttach: O,
 		bucket: a.bucket,
 		FileManagerModal: a.FileManagerModal,
 		allowedMimeTypes: a.allowedMimeTypes,
 		maxFileSizeBytes: a.maxFileSizeBytes,
-		labels: p?.avatarPicker ?? ye
+		labels: v?.avatarPicker ?? Ae
 	})] });
 }), $ = /* @__PURE__ */ function(e) {
 	return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e.ControlCharacters = "control-characters", e;
-}({}), xe = (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), Se = (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]) && xe(e.otherLocales, t.otherLocales), Ce = (e) => Object.values(e).every((e) => e == null), we = /^[a-zA-Z0-9 _.-]+$/, Te = /^[a-zA-Z0-9._-]+$/, Ee = /^(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-]+)*)?$/, De = "1.0.0", Oe = (n, r = {}) => {
+}({}), Me = (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), Ne = (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]) && Me(e.otherLocales, t.otherLocales), Pe = (e) => Object.values(e).every((e) => e == null), Fe = /^[a-zA-Z0-9 _.-]+$/, Ie = /^[a-zA-Z0-9._-]+$/, Le = /^\d+(\.\d+)*$/, Re = "1.0.0", ze = (n, r = {}) => {
 	let i = {}, s = n.name.trim();
-	s ? a(s, t) ? i.name = $.TooLong : r.validateNamePattern && !we.test(s) ? i.name = $.InvalidFormat : o(s) && (i.name = $.ControlCharacters) : i.name = $.Required, a(n.description, e) && (i.description = $.TooLong);
+	s ? a(s, t) ? i.name = $.TooLong : r.validateNamePattern && !Fe.test(s) ? i.name = $.InvalidFormat : o(s) && (i.name = $.ControlCharacters) : i.name = $.Required, a(n.description, e) && (i.description = $.TooLong);
 	let c = n.version.trim();
-	return r.validateVersionPattern && c && ((r.validateVersionPattern instanceof RegExp ? r.validateVersionPattern : Te).test(c) || (i.version = $.InvalidFormat)), i;
-}, ke = new Set([$.TooLong, $.ControlCharacters]), Ae = (e, t) => ({
+	return r.validateVersionPattern && c && ((r.validateVersionPattern instanceof RegExp ? r.validateVersionPattern : Ie).test(c) || (i.version = $.InvalidFormat)), i;
+}, Be = /* @__PURE__ */ new Set([$.TooLong, $.ControlCharacters]), Ve = (e, t) => ({
 	reseedKey: t,
 	values: e,
 	baseline: e,
 	touched: {},
 	hasAttemptedSubmit: !1,
 	submitAttemptCount: 0
-}), je = ({ initialValues: e, validationOptions: t, reseedKey: n }) => {
-	let [r, i] = B(() => Ae(e, n));
-	r.reseedKey !== n && i(Ae(e, n));
-	let a = t?.validateNamePattern, o = t?.validateVersionPattern, s = R(() => Oe(r.values, {
+}), He = ({ initialValues: e, validationOptions: t, reseedKey: n }) => {
+	let [r, i] = H(() => Ve(e, n));
+	r.reseedKey !== n && i(Ve(e, n));
+	let a = t?.validateNamePattern, o = t?.validateVersionPattern, s = B(() => ze(r.values, {
 		validateNamePattern: a,
 		validateVersionPattern: o
 	}), [
 		r.values,
 		a,
 		o
-	]), c = R(() => {
+	]), c = B(() => {
 		if (r.hasAttemptedSubmit) return s;
-		let e = (e, t) => e && (t || ke.has(e)) ? e : void 0;
+		let e = (e, t) => e && (t || Be.has(e)) ? e : void 0;
 		return {
 			name: e(s.name, r.touched[Q.Name]),
 			version: e(s.version, r.touched[Q.Version]),
@@ -772,28 +847,28 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		s,
 		r.hasAttemptedSubmit,
 		r.touched
-	]), l = z(s), u = z(e);
-	L(() => {
+	]), l = V(s), u = V(e);
+	ie(() => {
 		l.current = s, u.current = e;
 	});
-	let d = I((e) => i((t) => ({
+	let d = z((e) => i((t) => ({
 		...t,
 		values: {
 			...t.values,
 			...e
 		}
-	})), []), f = I((e) => i((t) => t.touched[e] ? t : {
+	})), []), f = z((e) => i((t) => t.touched[e] ? t : {
 		...t,
 		touched: {
 			...t.touched,
 			[e]: !0
 		}
-	}), []), p = I(() => (i((e) => ({
+	}), []), p = z(() => (i((e) => ({
 		...e,
 		hasAttemptedSubmit: !0,
 		submitAttemptCount: e.submitAttemptCount + 1
-	})), Ce(l.current)), []), m = I((e) => i((t) => Ae(e ?? u.current, t.reseedKey)), []), h = R(() => !Se(r.values, r.baseline), [r.values, r.baseline]);
-	return R(() => ({
+	})), Pe(l.current)), []), m = z((e) => i((t) => Ve(e ?? u.current, t.reseedKey)), []), h = B(() => !Ne(r.values, r.baseline), [r.values, r.baseline]);
+	return B(() => ({
 		values: r.values,
 		setValues: d,
 		touched: r.touched,
@@ -816,6 +891,10 @@ var V = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		h,
 		m
 	]);
-};
+}, Ue = 1048576, We = [
+	"image/png",
+	"image/jpeg",
+	"image/svg+xml"
+];
 //#endregion
-export { oe as AddAvatar, se as AvatarPickerModal, q as BUILDER_FORM_CLASS, K as BuilderFormContainer, De as DEFAULT_DEPLOYMENT_VERSION, ve as DEFAULT_METADATA_FORM_LABELS, $ as DeploymentCreationFieldErrorCode, pe as DeploymentCreationForm, ue as DeploymentLocalesField, ae as EditorLayout, Y as EditorSection, _e as EntityEditor, Q as MetadataField, be as MetadataForm, we as NAME_PATTERN, Ee as SEMVER_VERSION_PATTERN, Te as VERSION_PATTERN, je as useMetadataForm, Oe as validateDeploymentCreationFields };
+export { We as AVATAR_ALLOWED_MIME_TYPES, Ue as AVATAR_MAX_FILE_SIZE_BYTES, fe as AddAvatar, me as AvatarPickerModal, J as BUILDER_FORM_CLASS, U as BuilderFormActionsOrder, ce as BuilderFormContainer, Re as DEFAULT_DEPLOYMENT_VERSION, ke as DEFAULT_METADATA_FORM_LABELS, $ as DeploymentCreationFieldErrorCode, Ce as DeploymentCreationForm, ye as DeploymentLocalesField, ue as EditorLayout, X as EditorSection, Oe as EntityEditor, Q as MetadataField, je as MetadataForm, Fe as NAME_PATTERN, Le as SEMVER_VERSION_PATTERN, Ie as VERSION_PATTERN, He as useMetadataForm, ze as validateDeploymentCreationFields };