@epam/ai-dial-builder-form 1.1.0-dev.472 → 1.1.0-dev.474

package/components/DeploymentLocalesField/DeploymentLocalesField.d.ts

@@ -6,7 +6,7 @@ export interface DeploymentLocalesFieldProps {
     value: DeploymentCreationFormLocaleEntry[];
     /** Called with the full updated list when the user saves changes in the popup. */
     onChange: (entries: DeploymentCreationFormLocaleEntry[]) => void;
-    /** Selectable language options for new/existing rows. Defaults to an empty list (no locales addable). */
+    /** Selectable language options for new/existing rows. Defaults to an empty list, in which case the whole control renders nothing. */
     availableLocaleOptions?: DeploymentCreationFormLocaleOption[];
     /** Pre-translated labels for the summary row and popup. */
     labels: DeploymentCreationFormLocaleLabels;
@@ -16,9 +16,7 @@ export interface DeploymentLocalesFieldProps {
     summaryClassName?: string;
     /** Typography and color class applied to each row's heading. Defaults to `'dial-tiny-lead-text text-secondary'`, which uppercases the label itself. */
     rowLabelClassName?: string;
-    /** Color class applied to the required-field asterisk on the per-locale name field. Defaults to `'text-error'`. */
-    requiredMarkClassName?: string;
 }
-/** Summary row ("Locales: [DE]  Edit locales") plus the "Add locale" popup for editing additional name/description translations. Shows "Add locales" instead of "Edit locales" until at least one entry exists. */
+/** Summary row ("Locales: [DE]  Edit locales") plus the "Add locale" popup for editing additional name/description translations. Shows "Add locales" instead of "Edit locales" until at least one entry exists, and renders nothing at all when `availableLocaleOptions` is empty. */
 export declare const DeploymentLocalesField: FC<DeploymentLocalesFieldProps>;
 //# sourceMappingURL=DeploymentLocalesField.d.ts.map

package/components/DeploymentLocalesField/DeploymentLocalesField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeploymentLocalesField.d.ts","sourceRoot":"","sources":["../../../src/components/DeploymentLocalesField/DeploymentLocalesField.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAA+B,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EACV,iCAAiC,EACjC,kCAAkC,EAClC,kCAAkC,EACnC,MAAM,uCAAuC,CAAC;AAE/C,gEAAgE;AAChE,MAAM,WAAW,2BAA2B;IAC1C,+DAA+D;IAC/D,KAAK,EAAE,iCAAiC,EAAE,CAAC;IAC3C,kFAAkF;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,iCAAiC,EAAE,KAAK,IAAI,CAAC;IACjE,yGAAyG;IACzG,sBAAsB,CAAC,EAAE,kCAAkC,EAAE,CAAC;IAC9D,2DAA2D;IAC3D,MAAM,EAAE,kCAAkC,CAAC;IAC3C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6GAA6G;IAC7G,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uJAAuJ;IACvJ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mHAAmH;IACnH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAeD,mNAAmN;AACnN,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA0OlE,CAAC"}
+{"version":3,"file":"DeploymentLocalesField.d.ts","sourceRoot":"","sources":["../../../src/components/DeploymentLocalesField/DeploymentLocalesField.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAA+B,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EACV,iCAAiC,EACjC,kCAAkC,EAClC,kCAAkC,EACnC,MAAM,uCAAuC,CAAC;AAE/C,gEAAgE;AAChE,MAAM,WAAW,2BAA2B;IAC1C,+DAA+D;IAC/D,KAAK,EAAE,iCAAiC,EAAE,CAAC;IAC3C,kFAAkF;IAClF,QAAQ,EAAE,CAAC,OAAO,EAAE,iCAAiC,EAAE,KAAK,IAAI,CAAC;IACjE,qIAAqI;IACrI,sBAAsB,CAAC,EAAE,kCAAkC,EAAE,CAAC;IAC9D,2DAA2D;IAC3D,MAAM,EAAE,kCAAkC,CAAC;IAC3C,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6GAA6G;IAC7G,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uJAAuJ;IACvJ,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAeD,sRAAsR;AACtR,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA0OlE,CAAC"}

package/index.js

@@ -2,9 +2,9 @@ import { RESIZABLE_TEXTAREA_CLASS_NAME as e, TAG_INPUT_TAG_CLASS_NAME as t, buil
 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 te, useCallback as k, useEffect as A, useId as j, useRef as M, useState as N } from "react";
+import { Suspense as k, useCallback as A, useEffect as j, useId as M, useRef as N, useState as P } from "react";
 //#region src/components/BuilderFormActions/BuilderFormActions.tsx
-var P = ({ 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 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, {
 	label: e.cancelButtonLabel,
 	onClick: t,
 	disabled: r,
@@ -19,11 +19,11 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		"aria-hidden": !0,
 		children: /* @__PURE__ */ C(v, { size: o.SM })
 	}) : void 0
-})] }), F = "flex w-full flex-col desktop:w-[360px] desktop:shrink-0", I = ({ left: e, children: t, metadata: n }) => /* @__PURE__ */ w("div", {
+})] }), 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: F,
+			className: I,
 			children: e
 		}),
 		/* @__PURE__ */ C("div", {
@@ -31,7 +31,7 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			children: t
 		}),
 		n != null && /* @__PURE__ */ C("div", {
-			className: F,
+			className: I,
 			children: n
 		}),
 		e != null && n == null && /* @__PURE__ */ C("div", {
@@ -39,17 +39,17 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			className: "hidden desktop:block desktop:w-[360px] desktop:shrink-0"
 		})
 	]
-}), L = {
+}), R = {
 	header: "_header_8b0ws_4",
 	title: "_title_8b0ws_8"
-}, R = ({ labels: e, onBack: t, onCancel: i, onSubmit: a, isCancelDisabled: c = !1, isSubmitDisabled: l = !1, isSubmitting: d = !1, styles: f }) => {
+}, 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({
 			"--bfh-border": p?.borderColor,
 			"--bfh-font-family": g ? 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", L.header),
+		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),
 		children: [
 			/* @__PURE__ */ w("div", {
 				className: "flex min-w-0 flex-1 items-center gap-2",
@@ -63,13 +63,13 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 					"aria-label": e.backButtonLabel,
 					onClick: t
 				}), /* @__PURE__ */ C("h1", {
-					className: r("truncate", L.title, h),
+					className: r("truncate", R.title, h),
 					children: e.title
 				})]
 			}),
 			/* @__PURE__ */ C("div", {
 				className: "hidden items-center gap-2 desktop:flex",
-				children: /* @__PURE__ */ C(P, {
+				children: /* @__PURE__ */ C(F, {
 					labels: e,
 					onCancel: i,
 					onSubmit: a,
@@ -86,19 +86,19 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			})
 		]
 	});
-}, z = {
+}, B = {
 	container: "_container_d8tdv_1",
 	footer: "_footer_d8tdv_10"
-}, B = ({ 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 }) => {
+}, 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", {
 		style: {
 			...n({ "--bfc-bg": p?.background }),
 			...h
 		},
-		className: r("flex h-full w-full flex-col overflow-y-auto", z.container),
+		className: r("flex h-full w-full flex-col overflow-y-auto", B.container),
 		children: [
-			/* @__PURE__ */ C(R, {
+			/* @__PURE__ */ C(z, {
 				labels: e,
 				onBack: t,
 				onCancel: i,
@@ -108,14 +108,14 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				isSubmitting: c,
 				styles: m
 			}),
-			/* @__PURE__ */ C(I, {
+			/* @__PURE__ */ C(L, {
 				left: l,
 				metadata: d,
 				children: u
 			}),
 			/* @__PURE__ */ C("div", {
-				className: r("sticky bottom-0 z-10 flex items-center gap-2 p-3 desktop:hidden", z.footer),
-				children: /* @__PURE__ */ C(P, {
+				className: r("sticky bottom-0 z-10 flex items-center gap-2 p-3 desktop:hidden", B.footer),
+				children: /* @__PURE__ */ C(F, {
 					labels: e,
 					onCancel: i,
 					onSubmit: a,
@@ -127,28 +127,28 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			})
 		]
 	});
-}, V = {
+}, H = {
 	section: "_section_l1mnx_1",
 	title: "_title_l1mnx_5"
-}, H = ({ title: e, children: t, styles: i, className: a }) => {
+}, U = ({ title: e, children: t, styles: i, className: a }) => {
 	let o = n({
 		"--es-border-color": i?.colors?.borderColor,
 		"--es-title-color": i?.colors?.titleColor
 	});
 	return /* @__PURE__ */ w("section", {
-		className: r("flex flex-col gap-4 rounded border p-6", V.section, a),
+		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", V.title),
+			className: r("dial-h3-text", H.title),
 			children: e
 		}), t]
 	});
-}, U = {
+}, W = {
 	headerBorder: "_headerBorder_1kidu_1",
 	footerBorder: "_footerBorder_1kidu_5",
 	sidebarBorder: "_sidebarBorder_1kidu_9"
-}, W = ({ title: e, onBack: t, backAriaLabel: i = "Back", actions: a, leftContent: c, rightContent: l, isSaving: d = !1, labels: f, styles: p, dir: m }) => {
-	let h = j(), g = d ? f?.savingStatusLabel ?? "Saving" : "";
+}, 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",
@@ -165,7 +165,7 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				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", U.headerBorder),
+				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", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
 					children: [/* @__PURE__ */ C(u, {
@@ -189,7 +189,7 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			/* @__PURE__ */ w("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 : U.sidebarBorder),
+					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",
@@ -197,16 +197,16 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 				})]
 			}),
 			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", U.footerBorder),
+				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
 			})
 		]
 	});
-}, G = {
+}, K = {
 	box: "_box_c9as8_1",
 	icon: "_icon_c9as8_6",
 	caption: "_caption_c9as8_10"
-}, K = ({ 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 }) => {
+}, 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,
@@ -219,7 +219,7 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		children: [/* @__PURE__ */ C(f, { label: e }), /* @__PURE__ */ w("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", G.box),
+				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", {
 					src: t,
 					alt: i,
@@ -228,7 +228,7 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 					size: o.LG,
 					stroke: s,
 					"aria-hidden": !0,
-					className: G.icon
+					className: K.icon
 				})
 			}), /* @__PURE__ */ w("div", {
 				className: "flex flex-col gap-3",
@@ -243,14 +243,14 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 					label: a,
 					onClick: u
 				}), /* @__PURE__ */ C("span", {
-					className: r("dial-tiny-text", G.caption),
+					className: r("dial-tiny-text", K.caption),
 					children: c
 				})]
 			})]
 		})]
 	});
-}, q = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
-	let c = k((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = k((e) => /* @__PURE__ */ C("div", {
+}, 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", {
 		className: "dial-small-text px-6 py-3",
 		children: /* @__PURE__ */ C("p", {
 			className: "mb-3 text-secondary",
@@ -283,7 +283,7 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		s.deleteConfirmMultipleText,
 		s.deleteConfirmItemsLabel
 	]);
-	return /* @__PURE__ */ C(te, {
+	return /* @__PURE__ */ C(k, {
 		fallback: null,
 		children: e && /* @__PURE__ */ C(i, {
 			isOpen: e,
@@ -318,67 +318,67 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 			cancelLabel: s.cancelLabel
 		})
 	});
-}, J = (e, t, n) => ({
+}, te = (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", requiredMarkClassName: y = "text-error" }) => {
-	let { summaryLabel: T, addLabel: E, editLabel: D, popupTitle: te, addLocaleLabel: k, localeRowLabel: j = "Locale", languageLabel: P, nameLabel: F, namePlaceholder: I, descriptionLabel: L, descriptionPlaceholder: R, deleteAriaLabel: z, cancelLabel: B = "Cancel", saveLabel: V = "Save" } = f, [H, U] = N(!1), [W, G] = N([]), K = M(0);
-	A(() => {
-		H && G(t.length > 0 ? t : [J(`locale-row-${++K.current}`, /* @__PURE__ */ new Set(), u)]);
+}), 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)]);
 	}, [
-		H,
+		V,
 		t,
 		u
 	]);
-	let q = () => U(!0), Y = () => U(!1), X = () => {
-		n(W.filter((e) => e.language && e.name)), U(!1);
-	}, Z = () => {
-		let e = new Set(W.map((e) => e.language).filter(Boolean));
-		G((t) => [...t, J(`locale-row-${++K.current}`, e, u)]);
-	}, Q = (e, t) => {
-		G((n) => n.map((n) => n.id === e ? {
+	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 ? {
 			...n,
 			...t
 		} : n));
-	}, $ = (e) => {
-		G((t) => t.filter((t) => t.id !== e));
-	}, ne = (e) => u.find((t) => t.code === e)?.label ?? e.toUpperCase(), re = W.some((e) => !e.language || !e.name);
-	return /* @__PURE__ */ w("div", {
+	}, 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),
 		children: [
 			t.length > 0 && /* @__PURE__ */ C("span", {
 				className: g,
-				children: `${T}: ${t.map((e) => `[${ne(e.language)}]`).join(", ")}`
+				children: `${y}: ${t.map((e) => `[${Q(e.language)}]`).join(", ")}`
 			}),
 			/* @__PURE__ */ C(p, {
-				label: t.length > 0 ? D : E,
+				label: t.length > 0 ? T : S,
 				iconBefore: /* @__PURE__ */ C(O, {
 					size: o.SM,
 					"aria-hidden": !0,
 					stroke: s
 				}),
 				className: "!px-0",
-				onClick: q
+				onClick: K
 			}),
 			/* @__PURE__ */ C(h, {
-				open: H,
-				header: te,
-				onClose: Y,
+				open: V,
+				header: E,
+				onClose: q,
 				mainButtons: [{
-					label: B,
-					onClick: Y
+					label: z,
+					onClick: q
 				}, {
-					label: V,
+					label: B,
 					variant: a.Primary,
-					disabled: re,
-					onClick: X
+					disabled: $,
+					onClick: J
 				}],
 				children: /* @__PURE__ */ w("div", {
 					className: "flex flex-col gap-8 px-6 py-3",
-					children: [W.map((t, n) => {
-						let r = new Set(W.filter((e) => e.id !== t.id).map((e) => e.language).filter(Boolean));
+					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", {
 							className: "flex flex-col gap-2",
 							children: [/* @__PURE__ */ w("div", {
@@ -386,7 +386,7 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 								children: [/* @__PURE__ */ w("span", {
 									className: v,
 									children: [
-										j,
+										k,
 										" ",
 										n + 1
 									]
@@ -398,68 +398,70 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 										"aria-hidden": !0,
 										stroke: s
 									}),
-									"aria-label": `${z} ${n + 1}`,
-									onClick: () => $(t.id)
+									"aria-label": `${R} ${n + 1}`,
+									onClick: () => Z(t.id)
 								})]
 							}), /* @__PURE__ */ w("div", {
 								role: "group",
-								"aria-label": `${j} ${n + 1}`,
+								"aria-label": `${k} ${n + 1}`,
 								className: "flex flex-col gap-5",
 								children: [/* @__PURE__ */ w("div", {
-									className: "flex items-start gap-5",
+									className: "flex flex-col gap-5 desktop:flex-row desktop:items-start",
 									children: [/* @__PURE__ */ C(_, {
 										id: `${t.id}-language`,
-										labelProps: { label: P },
-										className: "shrink-0 basis-20",
+										labelProps: {
+											label: A,
+											required: !0
+										},
+										className: "desktop:shrink-0 desktop:basis-40",
 										options: u.map((e) => ({
 											value: e.code,
 											label: e.label,
 											disabled: r.has(e.code)
 										})),
 										value: t.language,
-										onChange: (e) => Q(t.id, { language: e })
+										onChange: (e) => X(t.id, { language: e })
 									}), /* @__PURE__ */ C(d, {
 										id: `${t.id}-name`,
 										containerClassName: "min-w-0 flex-1",
 										required: !0,
 										value: t.name,
-										onChange: (e) => Q(t.id, { name: e ?? "" }),
-										labelProps: { label: /* @__PURE__ */ w(S, { children: [F, /* @__PURE__ */ C("span", {
-											"aria-hidden": !0,
-											className: y,
-											children: "*"
-										})] }) },
-										placeholder: I
+										onChange: (e) => X(t.id, { name: e ?? "" }),
+										labelProps: {
+											label: M,
+											required: !0
+										},
+										placeholder: F
 									})]
 								}), /* @__PURE__ */ C(b, {
 									id: `${t.id}-description`,
 									className: e,
 									resize: x.Vertical,
 									value: t.description,
-									onChange: (e) => Q(t.id, { description: e }),
-									labelProps: { label: L },
-									placeholder: R
+									onChange: (e) => X(t.id, { description: e }),
+									labelProps: { label: I },
+									placeholder: L
 								})]
 							})]
 						}, t.id);
 					}), /* @__PURE__ */ C(p, {
-						label: k,
+						label: D,
 						iconBefore: /* @__PURE__ */ C(O, {
 							size: o.SM,
 							"aria-hidden": !0,
 							stroke: s
 						}),
 						className: "self-start",
-						onClick: Z,
-						disabled: W.length >= u.length
+						onClick: Y,
+						disabled: U.length >= u.length
 					})]
 				})
 			})
 		]
 	});
 }, X = ({ values: n, errors: i, onChange: a, onNameBlur: o, onVersionBlur: s, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: f, availableLocaleOptions: p = [] }) => {
-	let m = M(null), h = M(null), g = M(!1), _ = !!(i.name || i.version);
-	return A(() => {
+	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 = _;
 	}, [
 		_,
@@ -470,7 +472,7 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 		"aria-label": u.ariaLabel,
 		className: r("flex flex-col gap-4", f?.root),
 		children: [
-			/* @__PURE__ */ C(K, {
+			/* @__PURE__ */ C(q, {
 				label: u.iconUrl.label,
 				avatarUrl: c,
 				addAvatarLabel: u.iconUrl.addAvatarLabel,
@@ -546,4 +548,4 @@ var P = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
 	return t.validateVersionPattern && i && ((t.validateVersionPattern instanceof RegExp ? t.validateVersionPattern : $).test(i) || (n.version = Z.InvalidFormat)), n;
 };
 //#endregion
-export { K as AddAvatar, q as AvatarPickerModal, B as BuilderFormContainer, Z as DeploymentCreationFieldErrorCode, X as DeploymentCreationForm, Y as DeploymentLocalesField, W as EditorLayout, H as EditorSection, Q as NAME_PATTERN, ne as SEMVER_VERSION_PATTERN, $ as VERSION_PATTERN, re as validateDeploymentCreationFields };
+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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-builder-form",
   "description": "Presentational builder form shells, editor layouts, and shared deployment field sets for composing and editing DIAL entities",
-  "version": "1.1.0-dev.472",
+  "version": "1.1.0-dev.474",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,7 +20,7 @@
     "@tabler/icons-react": "^3.44.0"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.1.0-dev.472",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.474",
     "@epam/ai-dial-ui-kit": "^0.14.0-dev.15",
     "react": "^19.0.0"
   },