@epam/ai-dial-toolset-editor 1.3.0-dev.29 → 1.3.0-dev.290

package/index.js

@@ -1,25 +1,64 @@
-import { DEFAULT_DEPLOYMENT_VERSION as e, DeploymentCreationFieldErrorCode as t, EntityEditor as n, MetadataField as r, MetadataForm as i, SEMVER_VERSION_PATTERN as a, useMetadataForm as o, validateDeploymentCreationFields as s } from "@epam/ai-dial-builder-form";
-import { ToolsetAuthTypes as c, ToolsetCredentialsLevel as l, WithLogin as u, dialFileToAttachment as d, getApiErrorDetails as f } from "@epam/ai-dial-chat-hooks";
-import { CopyButton as p, ENTITY_DESCRIPTION_MAX_LENGTH as m, ENTITY_NAME_MAX_LENGTH as h, TAG_INPUT_TAG_CLASS_NAME as g, TextRefinementField as _, mergeClasses as v, useCodeCopy as y, useTextRefinement as b } from "@epam/ai-dial-chat-shared";
-import { memo as x, useCallback as S, useEffect as C, useMemo as w, useRef as T, useState as E } from "react";
-import { IconBrandOauth as ee, IconKey as te, IconLockOff as D, IconLogin as ne, IconLogout as re } from "@tabler/icons-react";
-import { jsx as O, jsxs as k } from "react/jsx-runtime";
-import { ConfirmationPopup as ie, ConfirmationPopupVariant as ae, DIAL_ICON_SIZE as A, DIAL_KIT_ICON_STROKE as j, Input as M, NeutralButton as N, PasswordInput as P, Radio as F, RadioGroup as I, SegmentedControl as L, Select as oe, TagInput as R } from "@epam/ai-dial-ui-kit";
+import { DEFAULT_DEPLOYMENT_VERSION as e, DeploymentCreationFieldErrorCode as t, EntityEditor as n, MetadataField as r, MetadataForm as i, useMetadataForm as a, validateDeploymentCreationFields as o } from "@epam/ai-dial-builder-form";
+import { ToolsetAuthTypes as s, ToolsetCredentialsLevel as c, WithLogin as l, getApiErrorDetails as ee } from "@epam/ai-dial-chat-hooks";
+import { CopyButton as u, ENTITY_DESCRIPTION_MAX_LENGTH as d, ENTITY_NAME_MAX_LENGTH as f, TAG_INPUT_TAG_CLASS_NAME as p, TextRefinementField as m, buildCssVars as h, mergeClasses as g, useCodeCopy as _, useTextRefinement as v } from "@epam/ai-dial-chat-shared";
+import { memo as y, useCallback as b, useEffect as x, useMemo as S, useRef as C, useState as w } from "react";
+import { IconBrandOauth as T, IconKey as E, IconLockOff as te, IconLogin as ne, IconLogout as re } from "@tabler/icons-react";
+import { CaptionText as D, ConfirmationPopup as ie, ConfirmationPopupVariant as ae, DIAL_ICON_SIZE as O, DIAL_KIT_ICON_STROKE as k, Input as A, LiveRegion as oe, LiveRegionElement as j, NeutralButton as se, PasswordInput as M, Radio as N, RadioGroup as P, SegmentedControl as ce, Select as F, TagInput as I } from "@epam/ai-dial-ui-kit";
+import { jsx as L, jsxs as R } from "react/jsx-runtime";
 //#region src/constants/public-class-names.ts
-var se = {
+var le = {
 	metadataSection: "dial-toolset-editor-metadata-section",
 	setupSection: "dial-toolset-editor-setup-section"
 }, z = /* @__PURE__ */ function(e) {
 	return e.Http = "HTTP", e.Sse = "SSE", e;
-}({}), B = e, ce = { validateVersionPattern: a }, V = {
-	[c.OAuth]: ee,
-	[c.ApiKey]: te,
-	[c.None]: D
-}, le = () => ({
-	authenticationType: c.None,
-	withLogin: u.WithoutLogin,
+}({}), B = e, ue = {
+	name: {
+		label: "Name",
+		placeholder: "Enter name"
+	},
+	description: {
+		label: "Description",
+		placeholder: "Describe what this toolset does"
+	},
+	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: "General"
+}, V = {
+	[s.OAuth]: T,
+	[s.ApiKey]: E,
+	[s.None]: te
+}, H = () => ({
+	authenticationType: s.None,
+	withLogin: l.WithoutLogin,
 	isLoggedIn: !1
-}), H = () => ({
+}), de = () => ({
 	name: "",
 	version: B,
 	iconUrl: "",
@@ -29,7 +68,7 @@ var se = {
 	endpoint: "",
 	protocol: z.Http,
 	allowedTools: [],
-	auth: le()
+	auth: H()
 }), U = (e) => {
 	if (!/^https?:\/\//.test(e) || e.endsWith(".") || e.endsWith("//")) return !1;
 	try {
@@ -50,262 +89,190 @@ var se = {
 		if (U(t)) return t;
 	}
 	return t;
-}, q = (e) => !e?.trim() || W(e), J = (e, t = !1) => e.isLoggedIn ? !0 : e.authenticationType === c.ApiKey ? e.keyHeader?.trim() ? e.withLogin === u.WithoutLogin ? !0 : !!(e.keyHeader?.trim() && e.apiKey?.trim()) : !1 : e.authenticationType === c.OAuth && e.withLogin === u.WithConfig ? !!e.clientId?.trim() && (t || !!e.clientSecret?.trim()) && q(e.authorizationEndpoint) && q(e.tokenEndpoint) : !0, ue = (e, t = !1) => Object.keys(s(e, ce)).length === 0 && W(e.endpoint) && J(e.auth, t), Y = new Set([
+}, q = (e, t = !1) => e.isLoggedIn ? !0 : e.authenticationType === s.ApiKey ? e.keyHeader?.trim() ? e.withLogin === l.WithoutLogin || !!(e.keyHeader?.trim() && e.apiKey?.trim()) : !1 : e.authenticationType === s.OAuth && e.withLogin === l.WithConfig ? !!e.clientId?.trim() && (t || !!e.clientSecret?.trim()) && W(e.authorizationEndpoint ?? "") && W(e.tokenEndpoint ?? "") : !0, fe = (e, t = !1) => Object.keys(o(e, { validateVersionPattern: !0 })).length === 0 && W(e.endpoint) && q(e.auth, t), J = /* @__PURE__ */ new Set([
 	"name",
 	"description",
 	"iconUrl",
 	"version",
 	"topics",
 	"otherLocales"
-]), de = (e) => ({
+]), pe = (e) => ({
 	name: e.name,
 	description: e.description,
 	iconUrl: e.iconUrl,
 	version: e.version,
 	topics: e.topics,
 	otherLocales: e.otherLocales
-}), fe = (e) => {
+}), me = (e) => {
 	let t = {}, n = {};
-	for (let [r, i] of Object.entries(e)) (Y.has(r) ? t : n)[r] = i;
+	for (let [r, i] of Object.entries(e)) (J.has(r) ? t : n)[r] = i;
 	return {
 		metadata: t,
 		setup: n
 	};
-}, pe = {
-	name: {
-		label: "Name",
-		placeholder: "Enter name"
-	},
-	description: {
-		label: "Description",
-		placeholder: "Describe what this toolset does"
-	},
-	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: "General"
-}, me = ({ form: e, errors: t, bucket: n, FileManagerModal: r, resolveIconUrl: a, allowedMimeTypes: o, maxFileSizeBytes: s, availableLocaleOptions: c, onChange: l, onNameBlur: u, onVersionBlur: f, renderDescription: p, labels: m }) => {
-	let h = S((e) => {
-		let [t] = e.files;
-		return (t ? d(t, n, { resolvePreviewUrl: a }) : null)?.url;
-	}, [n, a]);
-	return /* @__PURE__ */ O(i, {
-		values: e,
-		errors: t,
-		onChange: l,
-		onNameBlur: u,
-		onVersionBlur: f,
-		avatarPicker: w(() => ({
-			bucket: n,
-			FileManagerModal: r,
-			resolveIconUrl: a,
-			resolveAttachedIconUrl: h,
-			allowedMimeTypes: o,
-			maxFileSizeBytes: s
-		}), [
-			n,
-			r,
-			a,
-			h,
-			o,
-			s
-		]),
-		availableLocaleOptions: c,
-		renderDescription: p,
-		labels: w(() => ({
-			form: m?.form ?? pe,
-			avatarPicker: m?.avatarPicker
-		}), [m?.form, m?.avatarPicker])
-	});
-}, X = /* @__PURE__ */ function(e) {
+}, Y = /* @__PURE__ */ function(e) {
 	return e.Success = "success", e.Cancelled = "cancelled", e.PopupBlocked = "popup-blocked", e.InvalidConfig = "invalid-config", e.Failed = "failed", e;
-}({}), Z = (e) => e === c.None ? u.WithoutLogin : u.WithLogin, Q = (e, t) => e === c.None ? t?.typeNone ?? "Open access" : e === c.OAuth ? t?.typeOAuth ?? "OAuth" : t?.typeApiKey ?? "API Key", he = ({ auth: e, errors: t, isSaving: n, toolsetId: r, isEditMode: i, endpoint: a, authActions: o, onOAuthLogin: s, onNotifySuccess: d, onNotifyError: p, onAuthChange: m, onEnsureSaved: h, labels: _ }) => {
-	let [v, y] = E(!1), [b, x] = E(!1), S = e.isLoggedIn || n || v, C = W(a) && J(e, i) && !S, w = (t) => {
-		S || t === e.authenticationType || m({
+}({}), he = { openAccessDescription: "_openAccessDescription_1ltst_1" }, X = "toolset-client-secret-keep-caption", ge = (e) => `******${e}`, _e = (e) => e === s.None ? l.WithoutLogin : l.WithLogin, Z = (e, t) => e === s.None ? t?.typeNone ?? "Open access" : e === s.OAuth ? t?.typeOAuth ?? "OAuth" : t?.typeApiKey ?? "API Key", Q = ({ auth: e, errors: t, isSaving: n, toolsetId: r, isEditMode: i, endpoint: a, authActions: o, onOAuthLogin: u, onNotifySuccess: d, onNotifyError: f, onAuthChange: m, onEnsureSaved: h, labels: _, titleClassName: v = "dial-h3-text", openAccessDescriptionClassName: y = "dial-small-text" }) => {
+	let [b, x] = w(!1), [S, C] = w(!1), T = e.isLoggedIn || n || b, E = i && e.clientSecretHint && !e.clientSecret ? e.clientSecretHint : void 0, te = W(a) && q(e, i) && !T, oe = (t) => {
+		T || t === e.authenticationType || m({
 			authenticationType: t,
-			withLogin: Z(t)
+			withLogin: _e(t)
 		});
-	}, T = (e) => {
+	}, j = (e) => {
 		m({ withLogin: e });
-	}, ee = (e) => {
+	}, P = (e) => {
 		switch (e.auth != null && m(e.auth), e.status) {
-			case X.Success:
+			case Y.Success:
 				m({ isLoggedIn: !0 }), d(_?.loginSuccessMessage ?? "Successfully logged in.");
 				return;
-			case X.PopupBlocked:
-				p(_?.errorPopupBlocked ?? "The login popup was blocked by your browser. Please allow popups for this site and try again.");
+			case Y.PopupBlocked:
+				f(_?.errorPopupBlocked ?? "The login popup was blocked by your browser. Please allow popups for this site and try again.");
 				return;
-			case X.InvalidConfig:
-				p(_?.errorOAuthConfigMissing ?? "The OAuth provider did not return a valid client configuration. Please check the endpoint or contact your administrator.");
+			case Y.InvalidConfig:
+				f(_?.errorOAuthConfigMissing ?? "The OAuth provider did not return a valid client configuration. Please check the endpoint or contact your administrator.");
 				return;
-			case X.Failed:
-				p(_?.errorLoginFailed ?? "Failed to log in. Please check your credentials and try again.", e.traceId);
+			case Y.Failed:
+				f(_?.errorLoginFailed ?? "Failed to log in. Please check your credentials and try again.", e.traceId);
 				return;
-			case X.Cancelled: return;
+			case Y.Cancelled: return;
 		}
-	}, te = async () => {
-		if (!C) return;
-		if (e.authenticationType === c.OAuth) {
-			y(!0);
+	}, F = async () => {
+		if (!te) return;
+		if (e.authenticationType === s.OAuth) {
+			x(!0);
 			try {
-				ee(await s({
+				P(await u({
 					auth: e,
 					ensureSaved: h
 				}));
 			} finally {
-				y(!1);
+				x(!1);
 			}
 			return;
 		}
 		let t = await h();
 		if (t) {
-			y(!0);
+			x(!0);
 			try {
 				let n = {
 					url: t,
-					credentialsLevel: l.User,
+					credentialsLevel: c.User,
 					authenticationType: e.authenticationType,
 					apiKey: e.apiKey?.trim()
 				};
 				await o.login(t, n), m({ isLoggedIn: !0 }), d(_?.loginSuccessMessage ?? "Successfully logged in.");
 			} catch (e) {
-				let { traceId: t } = await f(e);
-				p(_?.errorLoginFailed ?? "Failed to log in. Please check your credentials and try again.", t);
+				let { traceId: t } = await ee(e);
+				f(_?.errorLoginFailed ?? "Failed to log in. Please check your credentials and try again.", t);
 			} finally {
-				y(!1);
+				x(!1);
 			}
 		}
-	}, D = async () => {
-		y(!0);
+	}, le = async () => {
+		x(!0);
 		try {
 			let t = {
 				url: r,
-				credentialsLevel: l.User,
+				credentialsLevel: c.User,
 				authenticationType: e.authenticationType
 			};
-			await o.logout(r, t), m({ isLoggedIn: !1 }), x(!1), d(_?.logoutSuccessMessage ?? "Successfully logged out.");
+			await o.logout(r, t), m({ isLoggedIn: !1 }), C(!1), d(_?.logoutSuccessMessage ?? "Successfully logged out.");
 		} catch (e) {
-			let { traceId: t } = await f(e);
-			p(_?.errorLogoutFailed ?? "Failed to log out. Please try again.", t);
+			let { traceId: t } = await ee(e);
+			f(_?.errorLogoutFailed ?? "Failed to log out. Please try again.", t);
 		} finally {
-			y(!1);
+			x(!1);
 		}
-	}, I = () => e.isLoggedIn ? /* @__PURE__ */ O("div", {
+	}, z = () => e.isLoggedIn ? /* @__PURE__ */ L("div", {
 		className: "flex",
-		children: /* @__PURE__ */ O(N, {
+		children: /* @__PURE__ */ L(se, {
 			label: _?.logOutLabel ?? "Log out",
-			iconBefore: /* @__PURE__ */ O(re, {
-				size: A.MD,
-				stroke: j
+			iconBefore: /* @__PURE__ */ L(re, {
+				size: O.MD,
+				stroke: k
 			}),
-			onClick: () => x(!0),
-			disabled: n || v
+			onClick: () => C(!0),
+			disabled: n || b
 		})
-	}) : /* @__PURE__ */ O("div", {
+	}) : /* @__PURE__ */ L("div", {
 		className: "flex",
-		children: /* @__PURE__ */ O(N, {
+		children: /* @__PURE__ */ L(se, {
 			label: _?.logInLabel ?? "Log in",
-			iconBefore: /* @__PURE__ */ O(ne, {
-				size: A.MD,
-				stroke: j
+			iconBefore: /* @__PURE__ */ L(ne, {
+				size: O.MD,
+				stroke: k
 			}),
-			onClick: te,
-			disabled: !C
+			onClick: F,
+			disabled: !te
 		})
 	});
-	return /* @__PURE__ */ k("section", {
+	return /* @__PURE__ */ R("section", {
 		className: "flex flex-col gap-2",
 		children: [
-			/* @__PURE__ */ O("h3", {
-				className: "dial-h3-text",
+			/* @__PURE__ */ L("h3", {
+				className: v,
 				children: _?.sectionTitle ?? "Authentication"
 			}),
-			/* @__PURE__ */ O(L, {
+			/* @__PURE__ */ L(ce, {
 				"aria-label": _?.sectionTitle ?? "Authentication",
 				value: e.authenticationType,
-				onChange: (e) => w(e),
+				onChange: (e) => oe(e),
 				segmentClassName: "px-2",
 				items: [
-					c.None,
-					c.OAuth,
-					c.ApiKey
+					s.None,
+					s.OAuth,
+					s.ApiKey
 				].map((t) => {
 					let n = V[t];
 					return {
 						value: t,
-						label: /* @__PURE__ */ k("div", {
+						label: /* @__PURE__ */ R("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ O(n, {
+							children: [/* @__PURE__ */ L(n, {
 								className: "shrink-0",
-								size: A.SM,
-								stroke: j,
+								size: O.SM,
+								stroke: k,
 								"aria-hidden": !0
-							}), /* @__PURE__ */ O("span", {
+							}), /* @__PURE__ */ L("span", {
 								className: "sr-only desktop:not-sr-only",
-								children: Q(t, _)
+								children: Z(t, _)
 							})]
 						}),
-						disabled: S && e.authenticationType !== t
+						disabled: T && e.authenticationType !== t
 					};
 				})
 			}),
-			e.authenticationType === c.None && /* @__PURE__ */ O("p", {
-				className: "dial-small-text pt-2 text-secondary",
+			e.authenticationType === s.None && /* @__PURE__ */ L("p", {
+				className: g("pt-2", y, he.openAccessDescription),
 				children: _?.openAccessDescription ?? "Open endpoint, no credentials"
 			}),
-			e.authenticationType === c.OAuth && /* @__PURE__ */ k("div", {
+			e.authenticationType === s.OAuth && /* @__PURE__ */ R("div", {
 				className: "flex flex-col gap-3 pt-2",
 				children: [
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ R("div", {
 						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ O(F, {
+						children: [/* @__PURE__ */ L(N, {
 							name: "oauth-login-mode",
 							id: "oauth-with-login",
-							value: u.WithLogin,
+							value: l.WithLogin,
 							labelProps: { label: _?.withLoginOAuthLabel ?? "Standard login" },
-							isSelected: e.withLogin === u.WithLogin,
-							disabled: S,
-							onChange: T
-						}), /* @__PURE__ */ O(F, {
+							isSelected: e.withLogin === l.WithLogin,
+							disabled: T,
+							onChange: j
+						}), /* @__PURE__ */ L(N, {
 							name: "oauth-login-mode",
 							id: "oauth-with-config",
-							value: u.WithConfig,
+							value: l.WithConfig,
 							labelProps: { label: _?.withConfigOAuthLabel ?? "Custom login" },
-							isSelected: e.withLogin === u.WithConfig,
-							disabled: S,
-							onChange: T
+							isSelected: e.withLogin === l.WithConfig,
+							disabled: T,
+							onChange: j
 						})]
 					}),
-					e.withLogin === u.WithConfig && /* @__PURE__ */ k("div", {
+					e.withLogin === l.WithConfig && /* @__PURE__ */ R("div", {
 						className: "flex flex-col gap-3",
 						children: [
-							/* @__PURE__ */ O(M, {
+							/* @__PURE__ */ L(A, {
 								id: "toolset-client-id",
 								value: e.clientId ?? "",
 								onChange: (e) => m({ clientId: e ?? "" }),
@@ -316,83 +283,96 @@ var se = {
 								placeholder: _?.clientIdPlaceholder ?? "Enter client ID",
 								error: t.clientId || void 0,
 								invalid: !!t.clientId,
-								disabled: S
+								disabled: T
 							}),
-							/* @__PURE__ */ O(P, {
-								id: "toolset-client-secret",
-								value: e.clientSecret ?? "",
-								onChange: (e) => m({ clientSecret: e ?? "" }),
-								labelProps: {
-									label: _?.clientSecretLabel ?? "Client secret",
-									required: !i
-								},
-								placeholder: _?.clientSecretPlaceholder ?? "Enter client secret",
-								showPasswordLabel: _?.showClientSecretLabel ?? "Show client secret",
-								hidePasswordLabel: _?.hideClientSecretLabel ?? "Hide client secret",
-								error: t.clientSecret || void 0,
-								invalid: !!t.clientSecret,
-								disabled: S
+							/* @__PURE__ */ R("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ L(M, {
+									id: "toolset-client-secret",
+									value: e.clientSecret ?? "",
+									onChange: (e) => m({ clientSecret: e ?? "" }),
+									labelProps: {
+										label: _?.clientSecretLabel ?? "Client secret",
+										required: !i
+									},
+									placeholder: E == null ? _?.clientSecretPlaceholder ?? "Enter client secret" : (_?.clientSecretHintPlaceholder ?? ge)(E),
+									"aria-describedby": E == null ? void 0 : X,
+									showPasswordLabel: _?.showClientSecretLabel ?? "Show client secret",
+									hidePasswordLabel: _?.hideClientSecretLabel ?? "Hide client secret",
+									error: t.clientSecret || void 0,
+									invalid: !!t.clientSecret,
+									disabled: T
+								}), E != null && /* @__PURE__ */ L(D, {
+									id: X,
+									text: _?.clientSecretKeepCaption ?? "Leave empty to keep the saved secret."
+								})]
 							}),
-							/* @__PURE__ */ O(M, {
+							/* @__PURE__ */ L(A, {
 								id: "toolset-authorization-endpoint",
 								value: e.authorizationEndpoint ?? "",
 								onChange: (e) => m({ authorizationEndpoint: e ?? "" }),
-								labelProps: { label: _?.authorizationEndpointLabel ?? "Authorization endpoint" },
+								labelProps: {
+									label: _?.authorizationEndpointLabel ?? "Authorization endpoint",
+									required: !0
+								},
 								placeholder: _?.authorizationEndpointPlaceholder ?? "Enter authorization endpoint",
 								error: t.authorizationEndpoint || void 0,
 								invalid: !!t.authorizationEndpoint,
-								disabled: S
+								disabled: T
 							}),
-							/* @__PURE__ */ O(M, {
+							/* @__PURE__ */ L(A, {
 								id: "toolset-token-endpoint",
 								value: e.tokenEndpoint ?? "",
 								onChange: (e) => m({ tokenEndpoint: e ?? "" }),
-								labelProps: { label: _?.tokenEndpointLabel ?? "Token endpoint" },
+								labelProps: {
+									label: _?.tokenEndpointLabel ?? "Token endpoint",
+									required: !0
+								},
 								placeholder: _?.tokenEndpointPlaceholder ?? "Enter token endpoint",
 								error: t.tokenEndpoint || void 0,
 								invalid: !!t.tokenEndpoint,
-								disabled: S
+								disabled: T
 							}),
-							/* @__PURE__ */ O(R, {
+							/* @__PURE__ */ L(I, {
 								id: "toolset-scopes",
 								labelProps: { label: _?.scopesLabel ?? "Scopes" },
 								placeholder: _?.scopesPlaceholder ?? "Enter scopes",
 								value: e.scopes ?? [],
 								onChange: (e) => m({ scopes: e }),
-								disabled: S,
-								tagClassName: g
+								disabled: T,
+								tagClassName: p
 							})
 						]
 					}),
-					I()
+					z()
 				]
 			}),
-			e.authenticationType === c.ApiKey && /* @__PURE__ */ k("div", {
+			e.authenticationType === s.ApiKey && /* @__PURE__ */ R("div", {
 				className: "flex flex-col gap-3 pt-2",
 				children: [
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ R("div", {
 						className: "flex flex-col gap-2",
-						children: [/* @__PURE__ */ O(F, {
+						children: [/* @__PURE__ */ L(N, {
 							name: "apikey-login-mode",
 							id: "apikey-with-login",
-							value: u.WithLogin,
+							value: l.WithLogin,
 							labelProps: { label: _?.withLoginLabel ?? "With login" },
-							isSelected: e.withLogin === u.WithLogin,
-							disabled: S,
-							onChange: T
-						}), /* @__PURE__ */ O(F, {
+							isSelected: e.withLogin === l.WithLogin,
+							disabled: T,
+							onChange: j
+						}), /* @__PURE__ */ L(N, {
 							name: "apikey-login-mode",
 							id: "apikey-without-login",
-							value: u.WithoutLogin,
+							value: l.WithoutLogin,
 							labelProps: { label: _?.withoutLoginLabel ?? "Without login" },
-							isSelected: e.withLogin === u.WithoutLogin,
-							disabled: S,
-							onChange: T
+							isSelected: e.withLogin === l.WithoutLogin,
+							disabled: T,
+							onChange: j
 						})]
 					}),
-					/* @__PURE__ */ k("div", {
+					/* @__PURE__ */ R("div", {
 						className: "flex flex-col gap-3",
-						children: [/* @__PURE__ */ O(M, {
+						children: [/* @__PURE__ */ L(A, {
 							id: "toolset-key-header",
 							value: e.keyHeader ?? "",
 							onChange: (e) => m({ keyHeader: e ?? "" }),
@@ -403,8 +383,8 @@ var se = {
 							placeholder: _?.keyHeaderPlaceholder ?? "Enter API key parameter name",
 							error: t.keyHeader || void 0,
 							invalid: !!t.keyHeader,
-							disabled: S
-						}), e.withLogin === u.WithLogin && /* @__PURE__ */ O(P, {
+							disabled: T
+						}), e.withLogin === l.WithLogin && /* @__PURE__ */ L(M, {
 							id: "toolset-api-key",
 							value: e.apiKey ?? "",
 							onChange: (e) => m({ apiKey: e ?? "" }),
@@ -417,76 +397,78 @@ var se = {
 							hidePasswordLabel: _?.hideApiKeyLabel ?? "Hide API key",
 							error: t.apiKey || void 0,
 							invalid: !!t.apiKey,
-							disabled: S
+							disabled: T
 						})]
 					}),
-					e.withLogin !== u.WithoutLogin && I()
+					e.withLogin !== l.WithoutLogin && z()
 				]
 			}),
-			b && /* @__PURE__ */ O(ie, {
-				open: b,
+			S && /* @__PURE__ */ L(ie, {
+				open: S,
 				header: _?.logoutConfirmTitle ?? "Log out?",
 				description: _?.logoutConfirmDescription ?? "Are you sure you want to log out? You will need to re-enter your credentials to use this toolset again.",
 				confirmLabel: _?.logOutLabel ?? "Log out",
 				cancelLabel: _?.cancelLabel ?? "Cancel",
 				variant: ae.Danger,
-				isLoading: v,
-				disableConfirmButton: v,
-				onConfirm: D,
-				onCancel: () => x(!1),
-				onClose: () => x(!1)
+				isLoading: b,
+				disableConfirmButton: b,
+				onConfirm: le,
+				onCancel: () => C(!1),
+				onClose: () => C(!1)
 			})
 		]
 	});
-}, ge = x(({ url: e, className: t, labels: n }) => {
-	let { isCopied: r, copy: i } = y(e), a = n?.copiedLabel ?? "Copied!";
-	return /* @__PURE__ */ k("div", {
-		className: v("flex flex-col gap-3", t),
+}, ve = {
+	title: "_title_17wsg_1",
+	description: "_description_17wsg_5"
+}, ye = y(({ url: e, className: t, labels: n, titleClassName: r = "dial-body-semi-text", descriptionClassName: i = "dial-small-text" }) => {
+	let { isCopied: a, copy: o } = _(e), s = n?.copiedLabel ?? "Copied!";
+	return /* @__PURE__ */ R("div", {
+		className: g("flex flex-col gap-3", t),
 		children: [
-			/* @__PURE__ */ k("div", {
+			/* @__PURE__ */ R("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ O("p", {
-					className: "dial-body-semi-text text-start text-primary",
+				children: [/* @__PURE__ */ L("p", {
+					className: g("text-start", r, ve.title),
 					children: n?.title ?? "Connect toolset"
-				}), /* @__PURE__ */ O("p", {
-					className: "dial-small-text text-start text-secondary",
+				}), /* @__PURE__ */ L("p", {
+					className: g("text-start", i, ve.description),
 					children: n?.description ?? "Copy endpoint URL to easily integrate toolset into your workflows"
 				})]
 			}),
-			/* @__PURE__ */ O("div", { children: /* @__PURE__ */ O(p, {
-				copiedLabel: a,
+			/* @__PURE__ */ L("div", { children: /* @__PURE__ */ L(u, {
+				copiedLabel: s,
 				copyLabel: n?.copyLabel ?? "Copy URL",
-				isCopied: r,
-				onClick: i
+				isCopied: a,
+				onClick: o
 			}) }),
-			/* @__PURE__ */ O("span", {
-				role: "status",
-				"aria-live": "polite",
-				className: "sr-only",
-				children: r ? a : ""
+			/* @__PURE__ */ L(oe, {
+				visuallyHidden: !0,
+				as: j.Span,
+				children: a ? s : ""
 			})
 		]
 	});
-}), _e = ({ form: e, errors: t, isSaving: n, toolsetId: r, isEditMode: i, connectUrl: a, listToolNames: o, authActions: s, onOAuthLogin: c, onNotifySuccess: l, onNotifyError: u, onChange: d, onAuthChange: f, onEnsureSaved: p, labels: m }) => {
-	let [h, _] = E(null), v = !!a && !!r, y = w(() => [{
+}), be = { connectDivider: "_connectDivider_obfkd_1" }, xe = ({ form: e, errors: t, isSaving: n, toolsetId: r, isEditMode: i, connectUrl: a, listToolNames: o, authActions: s, onOAuthLogin: c, onNotifySuccess: l, onNotifyError: ee, onChange: u, onAuthChange: d, onEnsureSaved: f, labels: m, colors: _, typography: v }) => {
+	let [y, b] = w(null), C = !!a && !!r, T = S(() => [{
 		value: z.Http,
 		label: "HTTP"
 	}, {
 		value: z.Sse,
 		label: "SSE"
 	}], []);
-	return C(() => {
-		if (!r || !o || !J(e.auth, i)) {
-			_(null);
+	return x(() => {
+		if (!r || !o || !q(e.auth, i)) {
+			b(null);
 			return;
 		}
 		let t = !1;
 		return (async () => {
 			try {
 				let e = await o(r);
-				t || _(e.length > 0 ? e : null);
+				t || b(e.length > 0 ? e : null);
 			} catch {
-				t || _(null);
+				t || b(null);
 			}
 		})(), () => {
 			t = !0;
@@ -497,13 +479,19 @@ var se = {
 		e.auth,
 		e.endpoint,
 		o
-	]), /* @__PURE__ */ k("div", {
+	]), /* @__PURE__ */ R("div", {
 		className: "flex max-w-[1060px] flex-col gap-4",
+		style: h({
+			"--te-connect-title": _?.connectTitle,
+			"--te-connect-description": _?.connectDescription,
+			"--te-connect-divider": _?.connectDivider,
+			"--te-open-access-description": _?.openAccessDescription
+		}),
 		children: [
-			/* @__PURE__ */ O(M, {
+			/* @__PURE__ */ L(A, {
 				id: "toolset-endpoint",
 				value: e.endpoint,
-				onChange: (e) => d({ endpoint: e ?? "" }),
+				onChange: (e) => u({ endpoint: e ?? "" }),
 				labelProps: {
 					label: m?.endpointLabel ?? "Endpoint",
 					required: !0
@@ -513,40 +501,40 @@ var se = {
 				error: t.endpoint || void 0,
 				invalid: !!t.endpoint
 			}),
-			/* @__PURE__ */ O(I, {
+			/* @__PURE__ */ L(P, {
 				labelProps: {
 					label: m?.protocolLabel ?? "Protocol",
 					required: !0
 				},
 				id: "toolset-protocol",
-				items: y,
+				items: T,
 				value: e.protocol,
 				onChange: (e) => {
-					d({ protocol: e });
+					u({ protocol: e });
 				}
 			}),
-			h ? /* @__PURE__ */ O(oe, {
+			y ? /* @__PURE__ */ L(F, {
 				id: "toolset-allowed-tools",
 				multiple: !0,
 				searchable: !0,
 				selectAll: !0,
 				labelProps: { label: m?.allowedToolsLabel ?? "Allowed tools" },
 				placeholder: m?.allowedToolsSelectPlaceholder ?? "Select allowed tools",
-				options: h.map((e) => ({
+				options: y.map((e) => ({
 					value: e,
 					label: e
 				})),
 				value: e.allowedTools,
-				onChange: (e) => d({ allowedTools: e })
-			}) : /* @__PURE__ */ O(R, {
+				onChange: (e) => u({ allowedTools: e })
+			}) : /* @__PURE__ */ L(I, {
 				id: "toolset-allowed-tools",
 				labelProps: { label: m?.allowedToolsLabel ?? "Allowed tools" },
 				placeholder: m?.allowedToolsPlaceholder ?? "Add tools, comma separated",
 				value: e.allowedTools,
-				onChange: (e) => d({ allowedTools: e }),
-				tagClassName: g
+				onChange: (e) => u({ allowedTools: e }),
+				tagClassName: p
 			}),
-			/* @__PURE__ */ O(he, {
+			/* @__PURE__ */ L(Q, {
 				auth: e.auth,
 				errors: t,
 				isSaving: n,
@@ -556,207 +544,216 @@ var se = {
 				authActions: s,
 				onOAuthLogin: c,
 				onNotifySuccess: l,
-				onNotifyError: u,
-				onAuthChange: f,
-				onEnsureSaved: p,
-				labels: m?.auth
+				onNotifyError: ee,
+				onAuthChange: d,
+				onEnsureSaved: f,
+				labels: m?.auth,
+				titleClassName: v?.authTitleClassName,
+				openAccessDescriptionClassName: v?.openAccessDescriptionClassName
 			}),
-			v && /* @__PURE__ */ O(ge, {
+			C && /* @__PURE__ */ L(ye, {
 				url: a ?? "",
 				labels: m?.connect,
-				className: "border-t border-tertiary pt-4"
+				titleClassName: v?.connectTitleClassName,
+				descriptionClassName: v?.connectDescriptionClassName,
+				className: g("border-t pt-4", be.connectDivider)
 			})
 		]
 	});
-}, ve = [
+}, Se = [
 	"keyHeader",
 	"apiKey",
 	"clientId",
 	"clientSecret",
 	"authorizationEndpoint",
 	"tokenEndpoint"
-], ye = ["endpoint", ...ve], be = new Set(ye), xe = (e) => {
+], Ce = ["endpoint", ...Se], $ = new Set(Ce), we = { validateVersionPattern: !0 }, Te = (e) => {
 	let t = {};
-	for (let n of Object.keys(e)) be.has(n) && (t[n] = !0);
+	for (let n of Object.keys(e)) $.has(n) && (t[n] = !0);
 	return t;
-}, $ = ({ initialForm: e, toolsetId: i, onPersist: a, onPostSaveLogin: s, onToolsetsChanged: l, onSaveSuccess: d, onSaveComplete: p, onBack: g, buildMcpUrl: v, listToolNames: y, authActions: x, onOAuthLogin: ee, onNotifySuccess: te, onNotifyError: D, bucket: ne, FileManagerModal: re, resolveIconUrl: k, allowedMimeTypes: ie, maxFileSizeBytes: ae, availableLocaleOptions: A, onRefineDescription: j, labels: M }) => {
-	let N = !!i, [P, F] = E(""), I = i || P, [L, oe] = E({
+}, Ee = ({ initialForm: e, toolsetId: o, onPersist: c, onPostSaveLogin: u, onToolsetsChanged: p, onSaveSuccess: h, onSaveComplete: g, onBack: _, onDirtyChange: y, buildMcpUrl: T, listToolNames: E, authActions: te, onOAuthLogin: ne, onNotifySuccess: re, onNotifyError: D, avatarPicker: ie, availableLocaleOptions: ae, onRefineDescription: O, labels: k, colors: A, typography: oe }) => {
+	let j = !!o, [se, M] = w(""), N = o || se, [P, ce] = w({
 		initialForm: e,
 		key: 0
-	});
-	L.initialForm !== e && oe({
+	}), [F, I] = w(e);
+	P.initialForm !== e && (ce({
 		initialForm: e,
-		key: L.key + 1
-	});
-	let { values: R, setValues: z, markTouched: B, visibleErrorCodes: V, attemptSubmit: le } = o({
-		initialValues: w(() => de(e), [e]),
-		validationOptions: ce,
-		reseedKey: L.key
-	}), [H, U] = E(e), G = w(() => ({
-		...H,
-		...R
-	}), [H, R]), [K, q] = E(!1), [J, Y] = E({}), [pe, X] = E({}), Z = T(null);
-	C(() => {
-		U(e), Z.current = e, Y({}), X({}), F("");
+		key: P.key + 1
+	}), I(e));
+	let R = S(() => pe(e), [e]), { values: z, setValues: B, markTouched: V, visibleErrorCodes: H, attemptSubmit: de } = a({
+		initialValues: R,
+		validationOptions: we,
+		reseedKey: P.key
+	}), [U, G] = w(e), K = S(() => ({
+		...U,
+		...z
+	}), [U, z]), q = S(() => JSON.stringify(K) !== JSON.stringify(F), [K, F]);
+	x(() => {
+		y?.(q);
+	}, [q, y]);
+	let [J, Y] = w(!1), [he, X] = w({}), [ge, _e] = w({}), Z = C(null);
+	x(() => {
+		G(e), Z.current = e, X({}), _e({}), M("");
 	}, [e]);
-	let Q = S((e) => {
-		let { metadata: t, setup: n } = fe(e);
-		Object.keys(t).length > 0 && (z(t), "name" in t && B(r.Name), "version" in t && B(r.Version)), Object.keys(n).length !== 0 && (U((e) => ({
+	let Q = b((e) => {
+		let { metadata: t, setup: n } = me(e);
+		Object.keys(t).length > 0 && (B(t), "name" in t && V(r.Name), "version" in t && V(r.Version)), Object.keys(n).length !== 0 && (G((e) => ({
 			...e,
 			...n
-		})), X((e) => ({
+		})), _e((e) => ({
 			...e,
-			...xe(n)
-		})), Y((e) => {
+			...Te(n)
+		})), X((e) => {
 			let t = { ...e };
 			for (let e of Object.keys(n)) delete t[e];
 			return t;
 		}));
-	}, [z, B]), he = S((e) => {
-		U((t) => ({
+	}, [B, V]), ve = b((e) => {
+		G((t) => ({
 			...t,
 			auth: {
 				...t.auth,
 				...e
 			}
-		})), X((t) => ({
+		})), _e((t) => ({
 			...t,
-			...xe(e)
-		})), Y((t) => {
+			...Te(e)
+		})), X((t) => {
 			let n = { ...t };
-			if ("authenticationType" in e || "withLogin" in e || "isLoggedIn" in e) for (let e of ve) delete n[e];
+			if ("authenticationType" in e || "withLogin" in e || "isLoggedIn" in e) for (let e of Se) delete n[e];
 			else for (let t of Object.keys(e)) delete n[t];
 			return n;
-		}), "isLoggedIn" in e && l();
-	}, [l]), ge = S(async () => {
-		if (I && Z.current != null && JSON.stringify(Z.current) === JSON.stringify(G)) return I;
-		q(!0);
+		}), "isLoggedIn" in e && p();
+	}, [p]), ye = b(async () => {
+		if (N && Z.current != null && JSON.stringify(Z.current) === JSON.stringify(K)) return N;
+		Y(!0);
 		try {
-			let e = await a(G, I);
-			return e ? (I || F(e), Z.current = G, await l(), e) : null;
+			let e = await c(K, N);
+			return e ? (N || M(e), Z.current = K, I(K), y?.(!1), await p(), e) : null;
 		} catch {
 			return null;
 		} finally {
-			q(!1);
+			Y(!1);
 		}
 	}, [
-		G,
-		I,
-		a,
-		l
-	]), be = S(async () => await ge() ?? !1, [ge]), $ = S((e) => {
-		let t = M?.validation, n = {};
-		return e.endpoint.trim() ? W(e.endpoint) || (n.endpoint = t?.endpointInvalid ?? "Enter a valid http(s) URL") : n.endpoint = t?.endpointRequired ?? "Endpoint is required", e.auth.isLoggedIn || (e.auth.authenticationType === c.ApiKey && (e.auth.keyHeader?.trim() || (n.keyHeader = t?.keyHeaderRequired ?? "Key name is required"), e.auth.withLogin === u.WithLogin && !e.auth.apiKey?.trim() && (n.apiKey = t?.apiKeyRequired ?? "API key is required")), e.auth.authenticationType === c.OAuth && e.auth.withLogin === u.WithConfig && (e.auth.clientId?.trim() || (n.clientId = t?.clientIdRequired ?? "Client ID is required"), !N && !e.auth.clientSecret?.trim() && (n.clientSecret = t?.clientSecretRequired ?? "Client secret is required"), e.auth.authorizationEndpoint?.trim() && !W(e.auth.authorizationEndpoint) && (n.authorizationEndpoint = t?.endpointInvalid ?? "Enter a valid http(s) URL"), e.auth.tokenEndpoint?.trim() && !W(e.auth.tokenEndpoint) && (n.tokenEndpoint = t?.endpointInvalid ?? "Enter a valid http(s) URL"))), n;
-	}, [M, N]), Se = S(async () => {
-		let e = le(), t = $(G);
-		if (!e || Object.keys(t).length > 0) {
-			Y(t);
-			return;
-		}
-		Y({}), q(!0);
-		try {
-			let e = await a(G, I);
-			if (!e) return;
-			await l(), d(G);
+		K,
+		N,
+		c,
+		p,
+		y
+	]), be = b(async () => await ye() ?? !1, [ye]), $ = b((e) => {
+		let t = k?.validation, n = {};
+		return e.endpoint.trim() ? W(e.endpoint) || (n.endpoint = t?.endpointInvalid ?? "Enter a valid http(s) URL") : n.endpoint = t?.endpointRequired ?? "Endpoint is required", e.auth.isLoggedIn || (e.auth.authenticationType === s.ApiKey && (e.auth.keyHeader?.trim() || (n.keyHeader = t?.keyHeaderRequired ?? "Key name is required"), e.auth.withLogin === l.WithLogin && !e.auth.apiKey?.trim() && (n.apiKey = t?.apiKeyRequired ?? "API key is required")), e.auth.authenticationType === s.OAuth && e.auth.withLogin === l.WithConfig && (e.auth.clientId?.trim() || (n.clientId = t?.clientIdRequired ?? "Client ID is required"), !j && !e.auth.clientSecret?.trim() && (n.clientSecret = t?.clientSecretRequired ?? "Client secret is required"), e.auth.authorizationEndpoint?.trim() ? W(e.auth.authorizationEndpoint) || (n.authorizationEndpoint = t?.endpointInvalid ?? "Enter a valid http(s) URL") : n.authorizationEndpoint = t?.authorizationEndpointRequired ?? "Authorization endpoint is required", e.auth.tokenEndpoint?.trim() ? W(e.auth.tokenEndpoint) || (n.tokenEndpoint = t?.endpointInvalid ?? "Enter a valid http(s) URL") : n.tokenEndpoint = t?.tokenEndpointRequired ?? "Token endpoint is required")), n;
+	}, [k, j]), Ee = b(async () => {
+		let e = de(), t = $(K);
+		if (!e || Object.keys(t).length > 0) X(t);
+		else {
+			X({}), Y(!0);
 			try {
-				await s(e, G.auth), p();
-			} catch (e) {
-				let { traceId: t } = await f(e);
-				D(M?.settings?.auth?.errorLoginFailed ?? "Failed to log in. Please check your credentials and try again.", t);
+				let e = await c(K, N);
+				if (!e) return;
+				I(K), await p(), h(K);
+				try {
+					await u(e, K.auth), g();
+				} catch (e) {
+					let { traceId: t } = await ee(e);
+					D(k?.settings?.auth?.errorLoginFailed ?? "Failed to log in. Please check your credentials and try again.", t);
+				}
+			} catch {} finally {
+				Y(!1);
 			}
-		} catch {} finally {
-			q(!1);
 		}
 	}, [
-		le,
-		G,
+		de,
+		K,
 		$,
-		I,
-		a,
-		l,
-		d,
+		N,
+		c,
 		p,
-		s,
+		h,
+		g,
+		u,
 		D,
-		M
-	]), Ce = b({
-		value: R.description,
+		k
+	]), De = v({
+		value: z.description,
 		onChange: (e) => Q({ description: e }),
-		onRefine: j,
-		disabled: K,
-		resetKey: L.key
-	}), we = j ? (e, t) => /* @__PURE__ */ O(_, {
+		onRefine: O,
+		disabled: J,
+		resetKey: P.key
+	}), Oe = O ? (e, t) => /* @__PURE__ */ L(m, {
 		isEnabled: !0,
 		fieldId: t,
-		label: M?.general?.form?.description.label ?? "Description",
-		labels: M?.refinement,
-		refinement: Ce,
-		disabled: Ce.isPending || K,
+		label: k?.general?.form?.description.label ?? "Description",
+		labels: k?.refinement,
+		refinement: De,
+		disabled: De.isPending || J,
 		children: e
-	}) : void 0, Te = w(() => !ue(G, N), [G, N]), Ee = w(() => {
-		let e = M?.validation, n = $(G), r = { ...J };
-		for (let e of ye) {
-			if (!pe[e]) continue;
+	}) : void 0, ke = S(() => ({
+		form: k?.general?.form ?? ue,
+		avatarPicker: k?.general?.avatarPicker
+	}), [k?.general?.form, k?.general?.avatarPicker]), Ae = S(() => !fe(K, j), [K, j]), je = S(() => {
+		let e = k?.validation, n = $(K), r = { ...he };
+		for (let e of Ce) {
+			if (!ge[e]) continue;
 			let t = n[e];
 			t ? r[e] = t : delete r[e];
 		}
-		return V.name === t.Required ? r.name = e?.nameRequired ?? "Name is required" : V.name === t.TooLong ? r.name = e?.nameTooLong ?? `Use ${h} characters or fewer.` : V.name === t.ControlCharacters && (r.name = e?.nameControlCharacters ?? "Remove line breaks, tabs and other control characters."), V.description === t.TooLong && (r.description = e?.descriptionTooLong ?? `Use ${m} characters or fewer.`), V.version === t.InvalidFormat && (r.version = e?.versionInvalid ?? "Version must follow semantic versioning (e.g., 1.0.0)"), r;
+		return H.name === t.Required ? r.name = e?.nameRequired ?? "Name is required" : H.name === t.TooLong ? r.name = e?.nameTooLong ?? `Use ${f} characters or fewer.` : H.name === t.ControlCharacters && (r.name = e?.nameControlCharacters ?? "Remove line breaks, tabs and other control characters."), H.description === t.TooLong && (r.description = e?.descriptionTooLong ?? `Use ${d} characters or fewer.`), H.version === t.InvalidFormat && (r.version = e?.versionInvalid ?? "Version may only contain letters, digits, dots, underscores, and dashes"), r;
 	}, [
-		pe,
-		J,
-		G,
-		M,
-		V,
+		ge,
+		he,
+		K,
+		k,
+		H,
 		$
-	]), De = v && I ? v(I) : void 0;
-	return /* @__PURE__ */ O(n, {
-		title: N ? M?.layout?.editTitle ?? "Edit toolset" : M?.layout?.createTitle ?? "Create toolset",
-		onBack: g,
-		onCancel: g,
-		onSubmit: Se,
-		submitLabel: N ? M?.layout?.saveLabel ?? "Save" : M?.layout?.createLabel ?? "Create",
-		isSubmitting: K,
-		isSubmitDisabled: Te || Ce.isPending,
-		metadataSectionClassName: se.metadataSection,
-		setupSectionClassName: se.setupSection,
+	]), Me = T && N ? T(N) : void 0;
+	return /* @__PURE__ */ L(n, {
+		title: j ? k?.layout?.editTitle ?? "Edit toolset" : k?.layout?.createTitle ?? "Create toolset",
+		onBack: _,
+		onCancel: _,
+		onSubmit: Ee,
+		submitLabel: j ? k?.layout?.saveLabel ?? "Save" : k?.layout?.createLabel ?? "Create",
+		isSubmitting: J,
+		isSubmitDisabled: Ae || De.isPending,
+		metadataSectionClassName: le.metadataSection,
+		setupSectionClassName: le.setupSection,
 		labels: {
-			backAriaLabel: M?.layout?.backAriaLabel ?? "Back to catalog",
-			savingStatusLabel: M?.layout?.savingStatusLabel ?? "Saving",
-			metadataTitle: M?.layout?.metadataSectionTitle ?? "Metadata",
-			setupTitle: M?.layout?.setupSectionTitle ?? "Setup",
-			cancelLabel: M?.layout?.cancelLabel ?? "Cancel"
+			backAriaLabel: k?.layout?.backAriaLabel ?? "Back to catalog",
+			savingStatusLabel: k?.layout?.savingStatusLabel ?? "Saving",
+			metadataTitle: k?.layout?.metadataSectionTitle ?? "Metadata",
+			setupTitle: k?.layout?.setupSectionTitle ?? "Setup",
+			cancelLabel: k?.layout?.cancelLabel ?? "Cancel"
 		},
-		metadata: /* @__PURE__ */ O(me, {
-			form: G,
-			errors: Ee,
-			bucket: ne,
-			FileManagerModal: re,
-			resolveIconUrl: k,
-			allowedMimeTypes: ie,
-			maxFileSizeBytes: ae,
-			availableLocaleOptions: A,
+		metadata: /* @__PURE__ */ L(i, {
+			values: K,
+			errors: je,
 			onChange: Q,
-			renderDescription: we,
-			labels: M?.general
+			avatarPicker: ie,
+			availableLocaleOptions: ae,
+			renderDescription: Oe,
+			labels: ke
 		}),
-		setup: /* @__PURE__ */ O(_e, {
-			form: G,
-			errors: Ee,
-			isSaving: K,
-			toolsetId: I,
-			isEditMode: N,
-			connectUrl: De,
-			listToolNames: y,
-			authActions: x,
-			onOAuthLogin: ee,
-			onNotifySuccess: te,
+		setup: /* @__PURE__ */ L(xe, {
+			form: K,
+			errors: je,
+			isSaving: J,
+			toolsetId: N,
+			isEditMode: j,
+			connectUrl: Me,
+			listToolNames: E,
+			authActions: te,
+			onOAuthLogin: ne,
+			onNotifySuccess: re,
 			onNotifyError: D,
 			onChange: Q,
-			onAuthChange: he,
+			onAuthChange: ve,
 			onEnsureSaved: be,
-			labels: M?.settings
+			labels: k?.settings,
+			colors: A?.settings,
+			typography: oe?.settings
 		})
 	});
 };
 //#endregion
-export { V as AUTH_TYPE_ICONS, B as DEFAULT_TOOLSET_VERSION, me as GeneralForm, se as TOOLSET_EDITOR_CLASS, $ as ToolsetEditor, X as ToolsetOAuthLoginStatus, z as ToolsetTransportType, H as getDefaultToolsetForm, J as isToolsetAuthValid, ue as isToolsetFormValid, W as isValidEndpointUrl, K as normalizeReturnedEndpointUrl };
+export { V as AUTH_TYPE_ICONS, B as DEFAULT_TOOLSET_VERSION, le as TOOLSET_EDITOR_CLASS, Ee as ToolsetEditor, Y as ToolsetOAuthLoginStatus, z as ToolsetTransportType, de as getDefaultToolsetForm, q as isToolsetAuthValid, fe as isToolsetFormValid, W as isValidEndpointUrl, K as normalizeReturnedEndpointUrl };