@epam/ai-dial-catalog 1.0.0-dev.484 → 1.0.0-dev.486

package/components/Catalog/Catalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Catalog.d.ts","sourceRoot":"","sources":["../../../src/components/Catalog/Catalog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAqB/D;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAobpC,CAAC"}
+{"version":3,"file":"Catalog.d.ts","sourceRoot":"","sources":["../../../src/components/Catalog/Catalog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAqD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAqB/D;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA8bpC,CAAC"}

package/components/ListView/columns.d.ts

@@ -1,4 +1,5 @@
 import { ColDef } from 'ag-grid-community';
 import { CatalogItem } from '../../models/catalog-item';
-export declare const CATALOG_COLUMNS: () => ColDef<CatalogItem>[];
+/** Column definitions for the catalog ag-grid list view. A stable module-level constant so ag-grid never sees a new array/closures on each render. */
+export declare const CATALOG_COLUMNS: ColDef<CatalogItem>[];
 //# sourceMappingURL=columns.d.ts.map

package/components/ListView/columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../src/components/ListView/columns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAOxD,eAAO,MAAM,eAAe,QAAO,MAAM,CAAC,WAAW,CAAC,EA6CrD,CAAC"}
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../src/components/ListView/columns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAOxD,sJAAsJ;AACtJ,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,WAAW,CAAC,EA6ChD,CAAC"}

package/index.js

@@ -28172,69 +28172,53 @@ var Cx = {
 	listContainer: "_listContainer_1lje3_5",
 	starFilledIcon: "_starFilledIcon_1lje3_16",
 	selectedRow: "_selectedRow_1lje3_20"
-}, CS = ({ data: e, context: t }) => {
-	let n = t?.searchQuery ?? "", r = t?.typography, i = r?.nameClassName ?? "dial-h3-text", a = r?.versionClassName ?? "dial-tiny-text", o = r?.descriptionClassName ?? "dial-small-text", s = e != null && e.id === t?.selectedItemId;
-	return e ? /* @__PURE__ */ R("div", {
-		className: "flex h-full items-center gap-2.5",
-		children: [
-			/* @__PURE__ */ L(lr, {
-				src: e.iconUrl,
-				size: 48,
-				initialsName: e.name
-			}),
-			/* @__PURE__ */ R("div", {
-				className: "flex min-w-0 flex-col gap-0.5",
-				children: [/* @__PURE__ */ L(wx, {
-					title: e.name,
-					postfix: e.version,
-					postfixClassName: a,
-					query: n,
-					titleClassName: i,
-					className: "items-baseline gap-1.5",
-					trailing: s ? /* @__PURE__ */ L(z, {
-						size: m.SM,
-						className: "shrink-0 text-accent-primary",
-						"aria-hidden": !0
-					}) : void 0
-				}), /* @__PURE__ */ L("p", {
-					className: G(o, SS.secondaryText),
-					children: /* @__PURE__ */ L(pr, {
-						text: e.description,
-						query: n,
-						maxLines: 2
-					})
-				})]
-			}),
-			/* @__PURE__ */ L(ix, {
-				credentials: e.credentials,
-				loggedOutLabel: t?.credentialsBadgeLoggedOutLabel,
-				className: "ms-2 shrink-0"
-			})
-		]
-	}) : null;
-}, wS = ({ data: e, context: t }) => {
-	let [n, r] = d(e?.isStarred ?? !1);
-	return e ? /* @__PURE__ */ L("div", {
-		className: "flex h-full items-center justify-center pe-4",
-		children: /* @__PURE__ */ L(ux, {
-			isStarred: n,
-			onClick: (i) => {
-				i.stopPropagation();
-				let a = !n;
-				r(a), t?.onToggleFavorite?.(e.id, a);
-			}
-		})
-	}) : null;
-}, TS = ({ data: e }) => e ? /* @__PURE__ */ L("div", {
-	className: "flex h-full flex-wrap items-center gap-1",
-	children: e.topics.map((e) => /* @__PURE__ */ L(fx, { label: e }, e))
-}) : null, ES = () => [
+}, CS = [
 	{
 		headerName: "Name",
 		flex: 4,
 		field: "name",
 		filter: !1,
-		cellRenderer: CS,
+		cellRenderer: ({ data: e, context: t }) => {
+			let n = t?.searchQuery ?? "", r = t?.typography, i = r?.nameClassName ?? "dial-h3-text", a = r?.versionClassName ?? "dial-tiny-text", o = r?.descriptionClassName ?? "dial-small-text", s = e != null && e.id === t?.selectedItemId;
+			return e ? /* @__PURE__ */ R("div", {
+				className: "flex h-full items-center gap-2.5",
+				children: [
+					/* @__PURE__ */ L(lr, {
+						src: e.iconUrl,
+						size: 48,
+						initialsName: e.name
+					}),
+					/* @__PURE__ */ R("div", {
+						className: "flex min-w-0 flex-col gap-0.5",
+						children: [/* @__PURE__ */ L(wx, {
+							title: e.name,
+							postfix: e.version,
+							postfixClassName: a,
+							query: n,
+							titleClassName: i,
+							className: "items-baseline gap-1.5",
+							trailing: s ? /* @__PURE__ */ L(z, {
+								size: m.SM,
+								className: "shrink-0 text-accent-primary",
+								"aria-hidden": !0
+							}) : void 0
+						}), /* @__PURE__ */ L("p", {
+							className: G(o, SS.secondaryText),
+							children: /* @__PURE__ */ L(pr, {
+								text: e.description,
+								query: n,
+								maxLines: 2
+							})
+						})]
+					}),
+					/* @__PURE__ */ L(ix, {
+						credentials: e.credentials,
+						loggedOutLabel: t?.credentialsBadgeLoggedOutLabel,
+						className: "ms-2 shrink-0"
+					})
+				]
+			}) : null;
+		},
 		valueGetter: (e) => e.data?.name
 	},
 	{
@@ -28260,7 +28244,10 @@ var Cx = {
 		flex: 2,
 		filter: !1,
 		sortable: !1,
-		cellRenderer: TS,
+		cellRenderer: ({ data: e }) => e ? /* @__PURE__ */ L("div", {
+			className: "flex h-full flex-wrap items-center gap-1",
+			children: e.topics.map((e) => /* @__PURE__ */ L(fx, { label: e }, e))
+		}) : null,
 		valueGetter: (e) => e.data?.topics
 	},
 	{
@@ -28271,28 +28258,41 @@ var Cx = {
 		filter: !1,
 		sortable: !1,
 		resizable: !1,
-		cellRenderer: wS
+		cellRenderer: ({ data: e, context: t }) => {
+			let [n, r] = d(e?.isStarred ?? !1);
+			return e ? /* @__PURE__ */ L("div", {
+				className: "flex h-full items-center justify-center pe-4",
+				children: /* @__PURE__ */ L(ux, {
+					isStarred: n,
+					onClick: (i) => {
+						i.stopPropagation();
+						let a = !n;
+						r(a), t?.onToggleFavorite?.(e.id, a);
+					}
+				})
+			}) : null;
+		}
 	}
-], DS = 50, OS = (e) => {
+], wS = 50, TS = (e) => {
 	if (!e || e === document.body) return null;
 	let { overflow: t, overflowY: n } = getComputedStyle(e);
-	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : OS(e.parentElement);
-}, kS = ({ items: e, query: t = "", ariaLabel: n = "Catalog", emptyStateTitle: r, styles: i, onToggleFavorite: a, onItemClick: s, stickyHeaderTop: c, selectedItemId: f, credentialsBadgeLoggedOutLabel: p }) => {
+	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : TS(e.parentElement);
+}, ES = ({ items: e, query: t = "", ariaLabel: n = "Catalog", emptyStateTitle: r, styles: i, onToggleFavorite: a, onItemClick: s, stickyHeaderTop: c, selectedItemId: f, credentialsBadgeLoggedOutLabel: p }) => {
 	let m = i?.typography ?? {}, h = i?.colors, g = {
 		"--cat-list-name-text": h?.nameText,
 		"--cat-list-secondary-text": h?.secondaryText,
 		...c == null ? {} : { "--list-header-sticky-top": `${c}px` }
-	}, _ = u(null), v = u(null), [y, b] = d(() => Math.min(e.length, DS)), x = u(e);
+	}, _ = u(null), v = u(null), [y, b] = d(() => Math.min(e.length, wS)), x = u(e);
 	o(() => {
-		x.current !== e && (x.current = e, b(Math.min(e.length, DS)));
+		x.current !== e && (x.current = e, b(Math.min(e.length, wS)));
 	}, [e]), o(() => {
 		let t = v.current;
 		if (!t) return;
-		let n = OS(t.parentElement);
+		let n = TS(t.parentElement);
 		if (!n) return;
 		let r = () => {
 			let r = n.getBoundingClientRect(), i = t.getBoundingClientRect();
-			i.top < r.bottom && i.bottom > r.top && b((t) => Math.min(e.length, t + DS));
+			i.top < r.bottom && i.bottom > r.top && b((t) => Math.min(e.length, t + wS));
 		};
 		return n.addEventListener("scroll", r, { passive: !0 }), r(), () => n.removeEventListener("scroll", r);
 	}, [e.length]);
@@ -28305,7 +28305,7 @@ var Cx = {
 		style: g,
 		className: F("w-full px-4", SS.listContainer),
 		children: [/* @__PURE__ */ L(D, {
-			columnDefs: ES(),
+			columnDefs: CS,
 			rowData: S,
 			getRowId: (e) => e.id,
 			alternateOddRowColors: !0,
@@ -28340,7 +28340,7 @@ var Cx = {
 			"aria-hidden": !0
 		})]
 	});
-}, AS = {
+}, DS = {
 	filterBtn: "_filterBtn_6kwgr_5",
 	filterBtnActive: "_filterBtnActive_6kwgr_21",
 	filterBtnOpen: "_filterBtnOpen_6kwgr_25",
@@ -28356,14 +28356,14 @@ var Cx = {
 	divider: "_divider_6kwgr_117",
 	sectionLabel: "_sectionLabel_6kwgr_123",
 	footer: "_footer_6kwgr_131"
-}, jS = (e, t, n, r, i) => {
+}, OS = (e, t, n, r, i) => {
 	let a = e.size > 0;
 	return n && a ? `${r} · ${e.size}` : n ? r : a ? Be(e, t, i) : i;
-}, MS = (e, t) => {
+}, kS = (e, t) => {
 	let n = new Set(t);
 	return n.has(e) ? n.delete(e) : n.add(e), n;
-}, NS = ({ checked: e, onChange: t, values: n, isMyAppsActive: r, onMyAppsChange: i, myAppsLabel: s = "My", topicsLabel: c = "Topics", defaultLabel: f = "From", clearLabel: p = "Clear", applyLabel: h = "Apply" }) => {
-	let g = (r ?? !1) || e.size > 0, [_, v] = d(!1), y = l(() => n == null ? [] : [...n].sort(), [n]), b = jS(e, n, r, s, f), [S, C] = d(() => new Set(e)), [w, T] = d(r ?? !1);
+}, AS = ({ checked: e, onChange: t, values: n, isMyAppsActive: r, onMyAppsChange: i, myAppsLabel: s = "My", topicsLabel: c = "Topics", defaultLabel: f = "From", clearLabel: p = "Clear", applyLabel: h = "Apply" }) => {
+	let g = (r ?? !1) || e.size > 0, [_, v] = d(!1), y = l(() => n == null ? [] : [...n].sort(), [n]), b = OS(e, n, r, s, f), [S, C] = d(() => new Set(e)), [w, T] = d(r ?? !1);
 	o(() => {
 		_ && (C(new Set(e)), T(r ?? !1));
 	}, [
@@ -28406,7 +28406,7 @@ var Cx = {
 			role: "menu",
 			"aria-label": f,
 			tabIndex: -1,
-			className: G("min-w-[360px] rounded-xl p-[6px]", AS.overlay),
+			className: G("min-w-[360px] rounded-xl p-[6px]", DS.overlay),
 			onKeyDown: te,
 			children: [
 				/* @__PURE__ */ R("div", {
@@ -28416,32 +28416,32 @@ var Cx = {
 					ref: (e) => {
 						k.current[0] = e;
 					},
-					className: G("flex cursor-pointer select-none items-center gap-3 rounded-lg px-[10px] py-[9px] outline-none", AS.row, w && AS.rowChecked),
+					className: G("flex cursor-pointer select-none items-center gap-3 rounded-lg px-[10px] py-[9px] outline-none", DS.row, w && DS.rowChecked),
 					onClick: () => T(!w),
 					onKeyDown: N(() => T(!w)),
 					children: [/* @__PURE__ */ L("span", {
-						className: G("flex size-5 shrink-0 items-center justify-center rounded-[6px]", AS.checkbox, w && AS.checkboxChecked),
+						className: G("flex size-5 shrink-0 items-center justify-center rounded-[6px]", DS.checkbox, w && DS.checkboxChecked),
 						"aria-hidden": !0
 					}), /* @__PURE__ */ L("span", {
-						className: AS.rowLabel,
+						className: DS.rowLabel,
 						children: s
 					})]
 				}),
 				y.length > 0 && /* @__PURE__ */ R(I, { children: [
 					/* @__PURE__ */ L("div", {
 						role: "separator",
-						className: G("my-1 h-px", AS.divider),
+						className: G("my-1 h-px", DS.divider),
 						"aria-hidden": !0
 					}),
 					/* @__PURE__ */ L("div", {
-						className: G("px-[10px] pb-1 pt-[10px] uppercase tracking-[0.06em]", AS.sectionLabel),
+						className: G("px-[10px] pb-1 pt-[10px] uppercase tracking-[0.06em]", DS.sectionLabel),
 						"aria-hidden": !0,
 						children: c
 					}),
 					/* @__PURE__ */ L("div", {
 						className: "flex max-h-[220px] flex-col gap-1 overflow-y-auto",
 						children: y.map((e, t) => {
-							let n = S.has(e), r = t + 1, i = () => C(MS(e, S));
+							let n = S.has(e), r = t + 1, i = () => C(kS(e, S));
 							return /* @__PURE__ */ R("div", {
 								role: "menuitemcheckbox",
 								"aria-checked": n,
@@ -28449,14 +28449,14 @@ var Cx = {
 								ref: (e) => {
 									k.current[r] = e;
 								},
-								className: G("flex cursor-pointer select-none items-center gap-3 rounded-lg px-[10px] py-[9px] outline-none", AS.row, n && AS.rowChecked),
+								className: G("flex cursor-pointer select-none items-center gap-3 rounded-lg px-[10px] py-[9px] outline-none", DS.row, n && DS.rowChecked),
 								onClick: i,
 								onKeyDown: N(i),
 								children: [/* @__PURE__ */ L("span", {
-									className: G("flex size-5 shrink-0 items-center justify-center rounded-[6px]", AS.checkbox, n && AS.checkboxChecked),
+									className: G("flex size-5 shrink-0 items-center justify-center rounded-[6px]", DS.checkbox, n && DS.checkboxChecked),
 									"aria-hidden": !0
 								}), /* @__PURE__ */ L("span", {
-									className: AS.rowLabel,
+									className: DS.rowLabel,
 									children: e
 								})]
 							}, e);
@@ -28464,7 +28464,7 @@ var Cx = {
 					})
 				] }),
 				/* @__PURE__ */ R("div", {
-					className: G("mt-1 flex items-center px-1 py-3", AS.footer),
+					className: G("mt-1 flex items-center px-1 py-3", DS.footer),
 					onKeyDown: (e) => {
 						(e.key === "ArrowUp" || e.key === "ArrowDown") && e.stopPropagation();
 					},
@@ -28485,28 +28485,28 @@ var Cx = {
 			"aria-haspopup": "menu",
 			"aria-expanded": _,
 			onKeyDown: M,
-			className: G("flex h-[50px] shrink-0 cursor-pointer items-center gap-[7px] whitespace-nowrap rounded-xl px-[18px]", AS.filterBtn, g && AS.filterBtnActive, _ && AS.filterBtnOpen),
+			className: G("flex h-[50px] shrink-0 cursor-pointer items-center gap-[7px] whitespace-nowrap rounded-xl px-[18px]", DS.filterBtn, g && DS.filterBtnActive, _ && DS.filterBtnOpen),
 			children: [
 				/* @__PURE__ */ L(de, {
 					size: m.SM,
 					strokeWidth: 1.8,
-					className: G("shrink-0", AS.filterBtnFunnel),
+					className: G("shrink-0", DS.filterBtnFunnel),
 					"aria-hidden": !0
 				}),
 				/* @__PURE__ */ L("span", {
-					className: AS.filterBtnLabel,
+					className: DS.filterBtnLabel,
 					children: b
 				}),
 				/* @__PURE__ */ L(oe, {
 					size: 14,
 					strokeWidth: 2.2,
-					className: G("shrink-0 transition-transform duration-150", AS.filterBtnChevron, _ && "rotate-180"),
+					className: G("shrink-0 transition-transform duration-150", DS.filterBtnChevron, _ && "rotate-180"),
 					"aria-hidden": !0
 				})
 			]
 		})
 	});
-}, PS = ({ placeholder: e = "Search", className: t, ...n }) => /* @__PURE__ */ L("div", {
+}, jS = ({ placeholder: e = "Search", className: t, ...n }) => /* @__PURE__ */ L("div", {
 	className: "flex-1",
 	children: /* @__PURE__ */ L(Ib, {
 		placeholder: e,
@@ -28517,7 +28517,7 @@ var Cx = {
 		inputClassName: "text-[15px]",
 		clearButtonClassName: "size-11 desktop:size-auto"
 	})
-}), FS = ({ totalCount: e, viewMode: t, onViewModeChange: n, title: r = "Browse", styles: i, query: a, onQueryChange: o, searchPlaceholder: s, gridViewLabel: c = "Grid view", listViewLabel: l = "List view", sortKey: u, onSortChange: d, sortOptions: f, filters: p, onFiltersChange: h, filterValues: g, isMyAppsActive: _, onMyAppsChange: v, filterFromLabel: y, filterMyAppsLabel: b, filterTopicsLabel: S }) => {
+}), MS = ({ totalCount: e, viewMode: t, onViewModeChange: n, title: r = "Browse", styles: i, query: a, onQueryChange: o, searchPlaceholder: s, gridViewLabel: c = "Grid view", listViewLabel: l = "List view", sortKey: u, onSortChange: d, sortOptions: f, filters: p, onFiltersChange: h, filterValues: g, isMyAppsActive: _, onMyAppsChange: v, filterFromLabel: y, filterMyAppsLabel: b, filterTopicsLabel: S }) => {
 	let C = i?.typography?.titleClassName ?? "dial-body-semi-text", w = i?.typography?.countClassName ?? "dial-tiny-semi-text", T = f?.find((e) => e.value === u)?.label ?? "";
 	return /* @__PURE__ */ R("div", {
 		className: "flex flex-col gap-3",
@@ -28577,12 +28577,12 @@ var Cx = {
 			})]
 		}), /* @__PURE__ */ R("div", {
 			className: "mb-5 flex items-center gap-3",
-			children: [/* @__PURE__ */ L(PS, {
+			children: [/* @__PURE__ */ L(jS, {
 				value: a,
 				onChange: o,
 				placeholder: s,
 				className: "flex-1"
-			}), /* @__PURE__ */ L(NS, {
+			}), /* @__PURE__ */ L(AS, {
 				checked: p ?? /* @__PURE__ */ new Set(),
 				onChange: h ?? (() => void 0),
 				values: g,
@@ -28594,12 +28594,12 @@ var Cx = {
 			})]
 		})]
 	});
-}, IS = {
+}, NS = {
 	section: "_section_qj3lh_1",
 	icon: "_icon_qj3lh_5",
 	divider: "_divider_qj3lh_9",
 	clearAll: "_clearAll_qj3lh_13"
-}, LS = ({ query: e, onQueryChange: t, searchPlaceholder: n = "Search models, tools, agents…", styles: r, filters: i, onFiltersChange: a, filterValues: o, isMyAppsActive: s, onMyAppsChange: c, filterFromLabel: l, filterMyAppsLabel: u, filterTopicsLabel: d, gridViewLabel: f, listViewLabel: p, sortKey: m, onSortChange: h, sortOptions: g, ..._ }) => {
+}, PS = ({ query: e, onQueryChange: t, searchPlaceholder: n = "Search models, tools, agents…", styles: r, filters: i, onFiltersChange: a, filterValues: o, isMyAppsActive: s, onMyAppsChange: c, filterFromLabel: l, filterMyAppsLabel: u, filterTopicsLabel: d, gridViewLabel: f, listViewLabel: p, sortKey: m, onSortChange: h, sortOptions: g, ..._ }) => {
 	let v = {
 		"--cat-browse-bg": r?.colors?.background,
 		"--cat-browse-title-text": r?.colors?.titleText,
@@ -28609,9 +28609,9 @@ var Cx = {
 		"--cat-browse-clear-all": r?.colors?.clearAll
 	};
 	return /* @__PURE__ */ L("section", {
-		className: G("flex-shrink-0 px-4", IS.section),
+		className: G("flex-shrink-0 px-4", NS.section),
 		style: v,
-		children: /* @__PURE__ */ L(FS, {
+		children: /* @__PURE__ */ L(MS, {
 			styles: r,
 			query: e,
 			onQueryChange: t,
@@ -28632,13 +28632,13 @@ var Cx = {
 			..._
 		})
 	});
-}, RS = {
+}, FS = {
 	root: "_root_1jtp2_1",
 	heading: "_heading_1jtp2_5",
 	headingTitle: "_headingTitle_1jtp2_9",
 	tabsRow: "_tabsRow_1jtp2_13",
 	activeTab: "_activeTab_1jtp2_17"
-}, zS = {
+}, IS = {
 	splitDivider: "_splitDivider_1efwg_1",
 	chevron: "_chevron_1efwg_10",
 	chevronOpen: "_chevronOpen_1efwg_14",
@@ -28650,7 +28650,7 @@ var Cx = {
 	itemText: "_itemText_1efwg_71",
 	itemLabel: "_itemLabel_1efwg_78",
 	itemDescription: "_itemDescription_1efwg_82"
-}, BS = ({ label: e, options: t, onClick: n }) => {
+}, LS = ({ label: e, options: t, onClick: n }) => {
 	let [r, i] = d(!1), o = u(null), s = u([]), c = a(() => {
 		o.current?.querySelector("button")?.focus();
 	}, []), l = a((e) => {
@@ -28674,11 +28674,11 @@ var Cx = {
 			matchReferenceWidth: !1,
 			placement: "bottom-end",
 			outsideClosable: !0,
-			listClassName: zS.dropdownWrapper,
+			listClassName: IS.dropdownWrapper,
 			renderOverlay: () => /* @__PURE__ */ L("div", {
 				role: "menu",
 				"aria-label": e,
-				className: zS.menu,
+				className: IS.menu,
 				onKeyDown: h,
 				children: t.map((e, t) => /* @__PURE__ */ R("button", {
 					ref: (e) => {
@@ -28686,7 +28686,7 @@ var Cx = {
 					},
 					role: "menuitem",
 					tabIndex: -1,
-					className: zS.item,
+					className: IS.item,
 					onClick: () => {
 						e.onClick(), l(!1);
 					},
@@ -28694,15 +28694,15 @@ var Cx = {
 						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), e.onClick(), l(!1));
 					},
 					children: [e.icon && /* @__PURE__ */ L("div", {
-						className: G(zS.itemIcon, e.iconContainerClassName),
+						className: G(IS.itemIcon, e.iconContainerClassName),
 						children: e.icon
 					}), /* @__PURE__ */ R("div", {
-						className: zS.itemText,
+						className: IS.itemText,
 						children: [/* @__PURE__ */ L("span", {
-							className: G(zS.itemLabel, "dial-small-semi-text"),
+							className: G(IS.itemLabel, "dial-small-semi-text"),
 							children: e.label
 						}), e.description && /* @__PURE__ */ L("span", {
-							className: G(zS.itemDescription, "dial-tiny-text"),
+							className: G(IS.itemDescription, "dial-tiny-text"),
 							children: e.description
 						})]
 					})]
@@ -28713,12 +28713,12 @@ var Cx = {
 				iconBefore: /* @__PURE__ */ L(xe, { size: m.SM }),
 				iconAfter: /* @__PURE__ */ R("span", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ L("span", { className: zS.splitDivider }), /* @__PURE__ */ L(oe, {
+					children: [/* @__PURE__ */ L("span", { className: IS.splitDivider }), /* @__PURE__ */ L(oe, {
 						size: m.SM,
-						className: G(zS.chevron, r && zS.chevronOpen)
+						className: G(IS.chevron, r && IS.chevronOpen)
 					})]
 				}),
-				className: zS.gradientBtn,
+				className: IS.gradientBtn,
 				"aria-haspopup": "menu",
 				"aria-expanded": r,
 				onKeyDown: p
@@ -28728,9 +28728,9 @@ var Cx = {
 		label: e,
 		iconBefore: /* @__PURE__ */ L(xe, { size: m.SM }),
 		onClick: n,
-		className: zS.gradientBtn
+		className: IS.gradientBtn
 	});
-}, VS = ({ items: e, favorites: t, titles: n, onToggleFavorite: r, onUseInChat: i, isPrimaryActionVisible: s, onShare: c, isPublishVisible: f, getPublishHistory: p, publishFolderItems: m, publishExpandedPaths: h, onPublishExpandedPathsChange: g, publishLoadingPaths: _, hasPublishWriteAccess: v, onPublish: y, onPublishSuccess: b, onCreatePublishFolder: x, publishTexts: S, shareOverlay: C, connectOverlay: w, isConnectVisible: T, onFetchDetails: E, onEdit: D, onDelete: O, onLogin: k, onLogout: ee, onUnshare: A, onCreateClick: j, createOptions: M, hideCreateButton: te = !1, hidePageTitle: N = !1, selectedItemId: ne, onCardClick: re, isLoading: ie, styles: ae, detailsTexts: F, initialDetailsItemId: I }) => {
+}, RS = ({ items: e, favorites: t, titles: n, onToggleFavorite: r, onUseInChat: i, isPrimaryActionVisible: s, onShare: c, isPublishVisible: f, getPublishHistory: p, publishFolderItems: m, publishExpandedPaths: h, onPublishExpandedPathsChange: g, publishLoadingPaths: _, hasPublishWriteAccess: v, onPublish: y, onPublishSuccess: b, onCreatePublishFolder: x, publishTexts: S, shareOverlay: C, connectOverlay: w, isConnectVisible: T, onFetchDetails: E, onEdit: D, onDelete: O, onLogin: k, onLogout: ee, onUnshare: A, onCreateClick: j, createOptions: M, hideCreateButton: te = !1, hidePageTitle: N = !1, selectedItemId: ne, onCardClick: re, isLoading: ie, styles: ae, detailsTexts: F, initialDetailsItemId: I }) => {
 	let { typography: z } = ae ?? {}, oe = Zb(ae), se = n?.pageTitle ?? "Catalog", ce = n?.createLabel ?? "Create", le = n?.favoritesTitle ?? "Your favorites", ue = n?.browseTitle ?? "Browse", de = n?.searchPlaceholder ?? "Search models, tools, agents…", fe = n?.noResultsTitle ?? ((e) => `No results for "${e}"`), pe = n?.featuredLabel ?? "Featured", me = n?.gridViewLabel ?? "Grid view", he = n?.listViewLabel ?? "List view", ge = n?.ariaLabel ?? "Catalog", _e = [
 		{
 			value: Me.RecentlyUpdated,
@@ -28814,17 +28814,17 @@ var Cx = {
 		children: /* @__PURE__ */ L(P, {})
 	}) : /* @__PURE__ */ R("section", {
 		"aria-label": ge,
-		className: G("flex min-h-0 flex-1 flex-col", RS.root),
+		className: G("flex size-full min-h-0 flex-1 flex-col", FS.root),
 		style: oe,
 		children: [
 			(!N || !te) && /* @__PURE__ */ L("div", {
-				className: G("shrink-0", RS.heading),
+				className: G("shrink-0", FS.heading),
 				children: /* @__PURE__ */ R("div", {
 					className: "flex h-[64px] w-full items-center justify-between px-8",
 					children: [!N && /* @__PURE__ */ L("h1", {
-						className: G(z?.pageHeadingFontClassName ?? "dial-display2-text", RS.headingTitle),
+						className: G(z?.pageHeadingFontClassName ?? "dial-display2-text", FS.headingTitle),
 						children: se
-					}), !te && /* @__PURE__ */ L(BS, {
+					}), !te && /* @__PURE__ */ L(LS, {
 						label: ce,
 						options: M,
 						onClick: j
@@ -28850,7 +28850,7 @@ var Cx = {
 					}),
 					/* @__PURE__ */ L("div", {
 						className: "w-full px-4 pt-6",
-						children: /* @__PURE__ */ L(LS, {
+						children: /* @__PURE__ */ L(PS, {
 							totalCount: ct.length,
 							viewMode: ye,
 							onViewModeChange: dt,
@@ -28891,8 +28891,8 @@ var Cx = {
 					}),
 					/* @__PURE__ */ R("div", {
 						className: "mx-auto min-h-full w-full max-w-[1180px] px-8 pt-6",
-						children: [ye === Re.Grid && /* @__PURE__ */ L("div", {
-							className: "pb-8",
+						children: [/* @__PURE__ */ L("div", {
+							className: G("pb-8", ye !== Re.Grid && "hidden"),
 							children: /* @__PURE__ */ L(_x, {
 								items: lt,
 								query: B,
@@ -28901,9 +28901,9 @@ var Cx = {
 								titles: pt,
 								selectedItemId: ne
 							})
-						}), xe && ye === Re.List && /* @__PURE__ */ L("div", {
-							className: "pb-8",
-							children: /* @__PURE__ */ L(kS, {
+						}), xe && /* @__PURE__ */ L("div", {
+							className: G("pb-8", ye !== Re.List && "hidden"),
+							children: /* @__PURE__ */ L(ES, {
 								items: lt,
 								query: B,
 								ariaLabel: ge,
@@ -28951,12 +28951,12 @@ var Cx = {
 			})
 		]
 	});
-}, HS = {
+}, zS = {
 	backdrop: "_backdrop_4t085_1",
 	panel: "_panel_4t085_5",
 	divider: "_divider_4t085_10",
 	content: "_content_4t085_14"
-}, US = ({ isOpen: e, item: t, resource: n, history: r, isHistoryLoading: i = !1, hasHistoryError: a = !1, folderItems: s, selectedFolderPath: c, onSelectedFolderPathChange: d, onCreateFolder: f, expandedPaths: p, onExpandedPathsChange: m, loadingPaths: h, hasExistingPublicationInFolder: g, hasWriteAccess: _, isSubmitting: v, hasSubmitError: b = !1, allowReplace: x = !0, onClose: S, returnFocusRef: C, onSubmit: w, panelTexts: T, footerTexts: E, texts: D = {} }) => {
+}, BS = ({ isOpen: e, item: t, resource: n, history: r, isHistoryLoading: i = !1, hasHistoryError: a = !1, folderItems: s, selectedFolderPath: c, onSelectedFolderPathChange: d, onCreateFolder: f, expandedPaths: p, onExpandedPathsChange: m, loadingPaths: h, hasExistingPublicationInFolder: g, hasWriteAccess: _, isSubmitting: v, hasSubmitError: b = !1, allowReplace: x = !0, onClose: S, returnFocusRef: C, onSubmit: w, panelTexts: T, footerTexts: E, texts: D = {} }) => {
 	let O = u(null), { title: k = "Publish", ariaLabel: ee = "Publish", closeAriaLabel: A = "Close" } = D, j = l(() => Ke({
 		hasSelectedFolder: c != null,
 		hasExistingPublicationInFolder: g,
@@ -28988,7 +28988,7 @@ var Cx = {
 			document.removeEventListener("keydown", t);
 		};
 	}, [e, S]), /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L("div", {
-		className: G("fixed inset-0 z-[55] transition-opacity duration-300", HS.backdrop, e ? "opacity-100" : "pointer-events-none opacity-0"),
+		className: G("fixed inset-0 z-[55] transition-opacity duration-300", zS.backdrop, e ? "opacity-100" : "pointer-events-none opacity-0"),
 		onClick: S,
 		"aria-hidden": "true"
 	}), /* @__PURE__ */ R("div", {
@@ -28999,7 +28999,7 @@ var Cx = {
 		"aria-hidden": !e,
 		inert: !e,
 		tabIndex: -1,
-		className: G("fixed inset-y-0 end-0 z-[60] flex w-full flex-col overflow-hidden", "desktop:rounded-ts-xl desktop:rounded-bs-xl desktop:w-[540px] desktop:border-s", "transition-transform duration-300", HS.panel, e ? "translate-x-0" : "translate-x-full rtl:-translate-x-full"),
+		className: G("fixed inset-y-0 end-0 z-[60] flex w-full flex-col overflow-hidden", "desktop:rounded-ts-xl desktop:rounded-bs-xl desktop:w-[540px] desktop:border-s", "transition-transform duration-300", zS.panel, e ? "translate-x-0" : "translate-x-full rtl:-translate-x-full"),
 		children: [
 			/* @__PURE__ */ R("div", {
 				className: "flex shrink-0 items-center gap-2 px-[22px] py-3",
@@ -29019,9 +29019,9 @@ var Cx = {
 					})
 				]
 			}),
-			/* @__PURE__ */ L("div", { className: G("shrink-0", HS.divider) }),
+			/* @__PURE__ */ L("div", { className: G("shrink-0", zS.divider) }),
 			/* @__PURE__ */ L("div", {
-				className: G("min-h-0 flex-1 overflow-y-auto", HS.content),
+				className: G("min-h-0 flex-1 overflow-y-auto", zS.content),
 				children: /* @__PURE__ */ L("div", {
 					className: "p-[22px]",
 					children: /* @__PURE__ */ L(Ox, {
@@ -29059,4 +29059,4 @@ var Cx = {
 	})] });
 };
 //#endregion
-export { hx as Card, _x as CardGrid, gx as CardRowRenderer, VS as Catalog, Ae as CatalogDetailsTab, V as CatalogEntityType, Me as CatalogSortKey, Re as CatalogViewMode, ke as CodeLanguage, Pe as CredentialStatus, ix as CredentialsBadge, Le as CredentialsBadgeState, Fe as CredentialsLevel, Ie as CredentialsUiState, yS as EntityBadge, je as EntityTag, pS as FavoriteCard, gS as Favorites, NS as Filter, cx as FolderPath, kS as ListView, ze as PublishCalloutKind, Ex as PublishFoldersTree, yx as PublishFooter, Dx as PublishHistoryList, Ox as PublishPanel, US as StandalonePublishPanel, LS as Toolbar, Ne as ToolsetAuthenticationType, fx as TopicTag, $e as collectFolderKeys, Ke as derivePublishState, Ue as filterCatalogItems, Qe as filterFolderTree, Je as formatPublishedDate, st as getCredentialsBadgeState, ot as getCredentialsUiState, ct as getSignedInLevel, We as sortCatalogItems, Ge as useFavColumns, Ze as usePublishFlow, ex as useScrollVirtualizer };
+export { hx as Card, _x as CardGrid, gx as CardRowRenderer, RS as Catalog, Ae as CatalogDetailsTab, V as CatalogEntityType, Me as CatalogSortKey, Re as CatalogViewMode, ke as CodeLanguage, Pe as CredentialStatus, ix as CredentialsBadge, Le as CredentialsBadgeState, Fe as CredentialsLevel, Ie as CredentialsUiState, yS as EntityBadge, je as EntityTag, pS as FavoriteCard, gS as Favorites, AS as Filter, cx as FolderPath, ES as ListView, ze as PublishCalloutKind, Ex as PublishFoldersTree, yx as PublishFooter, Dx as PublishHistoryList, Ox as PublishPanel, BS as StandalonePublishPanel, PS as Toolbar, Ne as ToolsetAuthenticationType, fx as TopicTag, $e as collectFolderKeys, Ke as derivePublishState, Ue as filterCatalogItems, Qe as filterFolderTree, Je as formatPublishedDate, st as getCredentialsBadgeState, ot as getCredentialsUiState, ct as getSignedInLevel, We as sortCatalogItems, Ge as useFavColumns, Ze as usePublishFlow, ex as useScrollVirtualizer };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-catalog",
   "description": "Marketplace catalog component for browsing models, tools, and assistants with search, filter, and sort",
-  "version": "1.0.0-dev.484",
+  "version": "1.0.0-dev.486",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,9 +20,9 @@
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
     "@epam/ai-dial-ui-kit": "0.12.0-dev.28",
-    "@epam/ai-dial-kit": "1.0.0-dev.484",
-    "@epam/ai-dial-sidebar": "1.0.0-dev.484",
-    "@epam/ai-dial-chat-shared": "1.0.0-dev.484",
+    "@epam/ai-dial-kit": "1.0.0-dev.486",
+    "@epam/ai-dial-sidebar": "1.0.0-dev.486",
+    "@epam/ai-dial-chat-shared": "1.0.0-dev.486",
     "ag-grid-community": "35.3.0"
   },
   "repository": {