import { vt as __exportAll } from "./PortalTenantClientProvider-BmRtQAbi.mjs";
import { n as useWidgetInteraction } from "./WidgetInteractionContext-BWH7njU7.mjs";
import { t as createTranslationContext } from "./translation-api-context-factory-CJrVq_EB.mjs";
import { l as getColorField, m as getPaddingField, o as getBorderRadiusField } from "./registries-59Barbhg.mjs";
import { t as useWidgetPreviewContext } from "./preview-context-D9ZzEfWh.mjs";
import { B as DropdownMenuContent, G as DropdownMenuSeparator, H as DropdownMenuLabel, St as Card, U as DropdownMenuRadioGroup, W as DropdownMenuRadioItem, Y as DropdownMenuTrigger, h as Skeleton, wn as Button, z as DropdownMenu } from "./src-CJw6JbdS.mjs";
import { a as usePortalProductCatalog, n as determineProductPrice, r as getProductImageUrl, t as SearchSort } from "./SearchSort-CMUL0qt3.mjs";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useInfiniteQuery } from "@tanstack/react-query";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { ArrowUpDown, CirclePlay, ImageIcon } from "lucide-react";
//#region ../../shop/core/src/translation-api-context.ts
const { Provider, useTranslation } = createTranslationContext("Shop");
const ShopTranslationProvider = Provider;
const useShopTranslation = useTranslation;
//#endregion
//#region ../../shop/ui/src/utils/media-helpers.ts
const VIDEO_EXTENSIONS = [
	".mp4",
	".webm",
	".mov",
	".avi",
	".m4v",
	".mkv",
	".ogv",
	".ogg",
	".wmv",
	".flv",
	".3gp"
];
function isVideoUrl(url) {
	if (!url) return false;
	const lowerUrl = url.toLowerCase();
	return VIDEO_EXTENSIONS.some((ext) => lowerUrl.includes(ext));
}
function getVideoThumbnailUrl(videoUrl) {
	if (videoUrl.includes("ik.imagekit.io")) return `${videoUrl}/ik-thumbnail.jpg`;
	return videoUrl;
}
//#endregion
//#region ../../shop/ui/src/components/product-card.tsx
function tagPortalProduct(product) {
	return {
		...product,
		__portalProduct: true
	};
}
function isPortalProduct(product) {
	return "__portalProduct" in product && product.__portalProduct === true;
}
function getPortalProductCoverImage(product) {
	if (product.images && product.images.length > 0) return product.images[0]?.url ?? null;
	return null;
}
function defaultRenderImage({ src, alt, fill, className, onError }) {
	return /* @__PURE__ */ jsx("img", {
		src,
		alt,
		className: `${fill ? "absolute inset-0 h-full w-full" : ""} ${className ?? ""}`,
		onError
	});
}
function formatPortalPrice(price, currency) {
	if (!price) return null;
	const numericPrice = Number(price);
	if (Number.isNaN(numericPrice)) return `${currency ?? ""}${price}`;
	try {
		return new Intl.NumberFormat(void 0, {
			style: "currency",
			currency: currency || "USD"
		}).format(numericPrice);
	} catch {
		return `$${price}`;
	}
}
function ProductCardContent({ product, countryIso, companyLogoUrl, renderImage = defaultRenderImage }) {
	const [isHovered, setIsHovered] = useState(false);
	const { t } = useShopTranslation();
	const isPortal = isPortalProduct(product);
	const coverImage = isPortal ? getPortalProductCoverImage(product) : getProductImageUrl(product);
	const isVideo = isVideoUrl(coverImage);
	const productName = isPortal ? product.name || t("no_title") : product.title || t("no_title");
	let repPrice = null;
	let price = null;
	if (isPortal) if (product.wholesale_price) {
		repPrice = formatPortalPrice(product.wholesale_price, product.currency);
		const retailFormatted = formatPortalPrice(product.price, product.currency);
		if (retailFormatted !== repPrice) price = retailFormatted;
	} else repPrice = formatPortalPrice(product.price, product.currency);
	else if (countryIso) {
		const prices = determineProductPrice(product, countryIso);
		repPrice = prices.repPrice;
		price = prices.price;
	}
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
		className: "bg-muted relative aspect-square overflow-hidden",
		onMouseEnter: () => isVideo && setIsHovered(true),
		onMouseLeave: () => isVideo && setIsHovered(false),
		children: [isVideo && isHovered ? /* @__PURE__ */ jsx("video", {
			src: coverImage || "",
			className: "absolute inset-0 h-full w-full object-cover",
			autoPlay: true,
			muted: true,
			loop: true,
			playsInline: true
		}) : renderImage({
			src: isVideo && coverImage ? getVideoThumbnailUrl(coverImage) : coverImage || "https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png",
			alt: productName,
			fill: true,
			className: "object-cover transition-transform group-hover:scale-105",
			onError: (e) => {
				e.currentTarget.src = companyLogoUrl || "https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png";
			},
			unoptimized: true
		}), isVideo && !isHovered && /* @__PURE__ */ jsx("div", {
			className: "absolute inset-0 flex items-center justify-center",
			children: /* @__PURE__ */ jsx("div", {
				className: "flex size-16 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm",
				children: /* @__PURE__ */ jsx(CirclePlay, { className: "size-12 text-white" })
			})
		})]
	}), /* @__PURE__ */ jsxs("div", {
		className: "px-3 pt-2 pb-4",
		children: [
			/* @__PURE__ */ jsx("h3", {
				className: "text-foreground line-clamp-1 text-sm font-bold",
				children: productName
			}),
			/* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-2",
				children: [repPrice && /* @__PURE__ */ jsx("span", {
					className: "text-foreground text-sm font-bold",
					children: repPrice
				}), price && /* @__PURE__ */ jsx("span", {
					className: "text-muted-foreground text-sm line-through",
					children: price
				})]
			}),
			!isPortal && countryIso && /* @__PURE__ */ jsxs("div", {
				className: "text-muted-foreground text-sm",
				children: [
					"CV",
					" ",
					getVariantCountryValue(getSelectedVariant(product), countryIso, "cv") || "-",
					" ",
					"| QV",
					" ",
					getVariantCountryValue(getSelectedVariant(product), countryIso, "qv") || "-"
				]
			}),
			isPortal && product.wholesale_price != null && /* @__PURE__ */ jsxs("div", {
				className: "text-muted-foreground text-sm",
				children: [
					"CV ",
					product.cv ?? "-",
					" | QV ",
					product.qv ?? "-"
				]
			})
		]
	})] });
}
function getSelectedVariant(product) {
	if (!product.variants || product.variants.length === 0) return null;
	const masterVariant = product.variants.find((v) => {
		return "is_master" in v && v.is_master;
	});
	if (masterVariant) return masterVariant;
	return product.variants[0] || null;
}
function getVariantCountryValue(variant, countryIso, field) {
	if (!variant || !variant.variant_countries) return null;
	if (typeof variant.variant_countries === "object" && !Array.isArray(variant.variant_countries)) return variant.variant_countries[countryIso]?.[field] ?? null;
	if (Array.isArray(variant.variant_countries)) return variant.variant_countries.find((vc) => vc.country_iso === countryIso)?.[field] ?? null;
	return null;
}
function ProductCard({ product, countryIso, companyLogoUrl, showShareModal = false, setShareModalOpen, setSelectedProduct, renderLink, renderImage, onClick }) {
	const cardContent = /* @__PURE__ */ jsx(ProductCardContent, {
		product,
		...countryIso !== void 0 && { countryIso },
		...companyLogoUrl !== void 0 && { companyLogoUrl },
		...renderImage !== void 0 && { renderImage }
	});
	const cardClassName = "overflow-hidden border-0 shadow-none pt-0 gap-0";
	if (showShareModal && !isPortalProduct(product)) {
		const handleShareClick = () => {
			if (setSelectedProduct && setShareModalOpen) {
				setSelectedProduct(product);
				setShareModalOpen(true);
			}
		};
		return /* @__PURE__ */ jsx(Card, {
			className: cardClassName,
			children: /* @__PURE__ */ jsx("button", {
				onClick: handleShareClick,
				className: "group block w-full cursor-pointer text-left",
				children: cardContent
			})
		});
	}
	if (onClick) return /* @__PURE__ */ jsx(Card, {
		className: cardClassName,
		children: /* @__PURE__ */ jsx("button", {
			onClick,
			className: "group block w-full cursor-pointer text-left",
			children: cardContent
		})
	});
	const href = `/portal/shop/${product.id}`;
	if (renderLink) return /* @__PURE__ */ jsx(Card, {
		className: cardClassName,
		children: renderLink({
			href,
			children: cardContent
		})
	});
	return /* @__PURE__ */ jsx(Card, {
		className: cardClassName,
		children: /* @__PURE__ */ jsx("a", {
			href,
			className: "group block cursor-pointer",
			children: cardContent
		})
	});
}
//#endregion
//#region ../widgets/src/widgets/ShopWidget.tsx
var ShopWidget_exports = /* @__PURE__ */ __exportAll({
	ShopWidget: () => ShopWidget,
	shopWidgetPropertySchema: () => shopWidgetPropertySchema
});
const GRID_BY_COLUMNS = {
	2: "grid grid-cols-2 gap-3 sm:gap-6",
	3: "grid grid-cols-2 gap-3 sm:gap-6 md:grid-cols-3",
	4: "grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4",
	5: "grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
	6: "grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
};
const SORT_OPTIONS = [
	{
		id: "title_asc",
		label: "Title (A–Z)"
	},
	{
		id: "title_desc",
		label: "Title (Z–A)"
	},
	{
		id: "price_asc",
		label: "Price (Low to High)"
	},
	{
		id: "price_desc",
		label: "Price (High to Low)"
	},
	{
		id: "created_at_desc",
		label: "Recently added"
	},
	{
		id: "created_at_asc",
		label: "Oldest"
	}
];
const PREVIEW_PRODUCTS = [
	{
		id: "preview-1",
		name: "Premium Wireless Headphones",
		price: "$249"
	},
	{
		id: "preview-2",
		name: "Smart Watch Series X",
		price: "$199"
	},
	{
		id: "preview-3",
		name: "Sunglasses",
		price: "$79"
	},
	{
		id: "preview-4",
		name: "Trail Running Shoes",
		price: "$129"
	},
	{
		id: "preview-5",
		name: "Daypack Backpack",
		price: "$89"
	},
	{
		id: "preview-6",
		name: "Stainless Bottle",
		price: "$32"
	},
	{
		id: "preview-7",
		name: "Linen Throw",
		price: "$59"
	},
	{
		id: "preview-8",
		name: "Ceramic Mug",
		price: "$24"
	},
	{
		id: "preview-9",
		name: "Wool Blanket",
		price: "$148"
	},
	{
		id: "preview-10",
		name: "Leather Wallet",
		price: "$45"
	},
	{
		id: "preview-11",
		name: "Pour-Over Kettle",
		price: "$78"
	},
	{
		id: "preview-12",
		name: "Linen Shirt",
		price: "$95"
	}
];
function clampColumns(value) {
	const n = Math.round(value ?? 4);
	if (n <= 2) return 2;
	if (n >= 6) return 6;
	return n;
}
function clampPageSize(value) {
	const n = Math.round(value ?? 25);
	return Math.min(100, Math.max(5, n));
}
function normalizeDataSourceProduct(input) {
	const r = input;
	const name = r.name ?? r.title ?? "";
	let images;
	if (Array.isArray(r.images) && r.images.length > 0) images = r.images.flatMap((img) => {
		const i = img;
		const url = i.url ?? i.image_url;
		if (!url) return [];
		return [{
			url,
			alt: i.alt ?? null
		}];
	});
	else {
		const url = r.image_url ?? r.imageUrl ?? r.thumbnail_url;
		images = url ? [{
			url,
			alt: null
		}] : [];
	}
	const cleaned = {};
	for (const [k, v] of Object.entries(r)) if (v !== void 0) cleaned[k] = v;
	return {
		...cleaned,
		name,
		images
	};
}
function cardScopedStyle(cardBackground, cardTextColor) {
	const style = {};
	if (cardBackground) style["--card"] = `var(--${cardBackground})`;
	if (cardTextColor) style["--foreground"] = `var(--${cardTextColor})`;
	return style;
}
function ShopWidget({ titleEnabled = true, title = "", titleColor = "foreground", showSearch = true, showSort = true, columns = 4, pageSize = 25, useDataSource = false, products, background = {
	type: "solid",
	color: "background"
}, padding = 6, borderRadius = "lg", cardBackground, cardTextColor, className, ...props }) {
	const { isPreview } = useWidgetPreviewContext();
	const safeColumns = clampColumns(columns);
	const safePageSize = clampPageSize(pageSize);
	const backgroundColor = background.color ?? "background";
	const backgroundImage = background.type === "image" && (background.resource?.image_url || background.resource?.imageUrl) ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
	return /* @__PURE__ */ jsx("div", {
		className: `bg-${backgroundColor} p-${padding} rounded-${borderRadius} @container ${className ?? ""}`,
		style: { backgroundImage },
		...props,
		children: isPreview ? /* @__PURE__ */ jsx(PreviewBody, {
			columns: safeColumns,
			titleEnabled,
			title,
			titleColor,
			showSearch,
			showSort,
			cardBackground,
			cardTextColor
		}) : /* @__PURE__ */ jsx(LiveBody, {
			columns: safeColumns,
			pageSize: safePageSize,
			titleEnabled,
			title,
			titleColor,
			showSearch,
			showSort,
			useDataSource,
			products,
			cardBackground,
			cardTextColor
		})
	});
}
function PreviewBody({ columns, titleEnabled, title, titleColor, showSearch, showSort, cardBackground, cardTextColor }) {
	const hasTitle = titleEnabled && !!title;
	return /* @__PURE__ */ jsxs("div", { children: [(hasTitle || showSearch || showSort) && /* @__PURE__ */ jsxs("div", {
		className: "mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-2",
		children: [hasTitle && /* @__PURE__ */ jsx("h2", {
			className: `text-${titleColor} text-2xl font-semibold tracking-tight`,
			children: title
		}), (showSearch || showSort) && /* @__PURE__ */ jsxs("div", {
			className: "flex items-center gap-2 sm:ml-auto",
			children: [showSearch && /* @__PURE__ */ jsx("div", {
				"aria-hidden": true,
				className: "bg-muted h-9 w-full max-w-sm rounded-md sm:w-64"
			}), showSort && /* @__PURE__ */ jsx("div", {
				"aria-hidden": true,
				className: "bg-muted size-9 rounded-md"
			})]
		})]
	}), /* @__PURE__ */ jsx("div", {
		className: GRID_BY_COLUMNS[columns],
		style: cardScopedStyle(cardBackground, cardTextColor),
		children: PREVIEW_PRODUCTS.slice(0, columns * 2).map((p) => /* @__PURE__ */ jsx(ProductCardCompact, {
			name: p.name,
			imageUrl: null,
			price: p.price
		}, p.id))
	})] });
}
function LiveBody({ useDataSource, products, ...rest }) {
	if (useDataSource) return /* @__PURE__ */ jsx(DataSourceBody, {
		columns: rest.columns,
		titleEnabled: rest.titleEnabled,
		title: rest.title,
		titleColor: rest.titleColor,
		products: products ?? [],
		cardBackground: rest.cardBackground,
		cardTextColor: rest.cardTextColor
	});
	return /* @__PURE__ */ jsx(CatalogBody, { ...rest });
}
function DataSourceBody({ columns, titleEnabled, title, titleColor, products, cardBackground, cardTextColor }) {
	const { onNavigate } = useWidgetInteraction();
	const handleSelect = useCallback((id) => {
		onNavigate?.(`shop/${id}`);
	}, [onNavigate]);
	return /* @__PURE__ */ jsxs("div", { children: [titleEnabled && !!title && /* @__PURE__ */ jsx("h2", {
		className: `text-${titleColor} mb-6 text-2xl font-semibold tracking-tight`,
		children: title
	}), products.length === 0 ? /* @__PURE__ */ jsx("div", {
		className: "flex flex-col items-center justify-center py-12 text-center",
		children: /* @__PURE__ */ jsx("p", {
			className: "text-muted-foreground text-sm",
			children: "No products yet."
		})
	}) : /* @__PURE__ */ jsx("div", {
		className: GRID_BY_COLUMNS[columns],
		style: cardScopedStyle(cardBackground, cardTextColor),
		children: products.map((product) => {
			if (product.id == null) return null;
			const shareableType = product.shareable_type;
			if (shareableType != null && shareableType !== "Product") return null;
			const productId = product.id;
			return /* @__PURE__ */ jsx(ProductCard, {
				product: tagPortalProduct(normalizeDataSourceProduct(product)),
				onClick: () => handleSelect(productId)
			}, productId);
		})
	})] });
}
function CatalogBody({ columns, pageSize, titleEnabled, title, titleColor, showSearch, showSort, cardBackground, cardTextColor }) {
	const observerTarget = useRef(null);
	const { onNavigate } = useWidgetInteraction();
	const catalog = usePortalProductCatalog({ perPage: pageSize });
	const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, error, isFetched } = useInfiniteQuery({
		queryKey: catalog.queryKey,
		queryFn: ({ pageParam, signal }) => catalog.fetchProducts(pageParam, signal),
		getNextPageParam: catalog.getNextPageParam,
		initialPageParam: void 0
	});
	const allProducts = useMemo(() => data?.pages.flatMap((page) => page.products) ?? [], [data?.pages]);
	const visibleProducts = useMemo(() => allProducts.slice(0, pageSize), [allProducts, pageSize]);
	const reachedLimit = visibleProducts.length >= pageSize;
	const handleIntersect = useCallback((entries) => {
		if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage && !reachedLimit) fetchNextPage();
	}, [
		hasNextPage,
		isFetchingNextPage,
		fetchNextPage,
		reachedLimit
	]);
	useEffect(() => {
		const target = observerTarget.current;
		if (!target) return;
		const observer = new IntersectionObserver(handleIntersect, {
			threshold: .1,
			rootMargin: "200px"
		});
		observer.observe(target);
		return () => observer.disconnect();
	}, [handleIntersect]);
	const handleSelect = useCallback((id) => {
		onNavigate?.(`shop/${id}`);
	}, [onNavigate]);
	const hasTitle = titleEnabled && !!title;
	return /* @__PURE__ */ jsxs("div", { children: [(hasTitle || showSearch || showSort) && /* @__PURE__ */ jsxs("div", {
		className: "mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-2",
		children: [hasTitle && /* @__PURE__ */ jsx("h2", {
			className: `text-${titleColor} text-2xl font-semibold tracking-tight`,
			children: title
		}), (showSearch || showSort) && /* @__PURE__ */ jsxs("div", {
			className: "flex items-center gap-2 sm:ml-auto",
			children: [showSearch && /* @__PURE__ */ jsx("div", {
				className: "w-full max-w-sm sm:w-64",
				children: /* @__PURE__ */ jsx(SearchSort, {
					searchValue: catalog.searchTerm,
					onSearchChange: catalog.setSearchTerm,
					placeholder: "Search products"
				})
			}), showSort && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
				asChild: true,
				children: /* @__PURE__ */ jsx(Button, {
					variant: "outline",
					size: "icon",
					className: "border-foreground/10 size-9 shrink-0",
					children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-3" })
				})
			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
				align: "end",
				className: "w-60",
				children: [
					/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Sort by" }),
					/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
					/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
						value: catalog.currentSort,
						onValueChange: catalog.setCurrentSort,
						children: SORT_OPTIONS.map((opt) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
							value: opt.id,
							children: opt.label
						}, opt.id))
					})
				]
			})] })]
		})]
	}), isLoading ? /* @__PURE__ */ jsx(SkeletonGrid, {
		columns,
		count: columns * 2
	}) : error && visibleProducts.length === 0 ? /* @__PURE__ */ jsx("div", {
		className: "bg-destructive/10 text-destructive my-6 rounded-lg px-4 py-3 text-sm",
		children: "Couldn’t load products. Try again later."
	}) : isFetched && visibleProducts.length === 0 ? /* @__PURE__ */ jsx("div", {
		className: "flex flex-col items-center justify-center py-12 text-center",
		children: /* @__PURE__ */ jsx("p", {
			className: "text-muted-foreground text-sm",
			children: catalog.searchTerm ? `No products match “${catalog.searchTerm}”.` : "No products yet."
		})
	}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
		/* @__PURE__ */ jsx("div", {
			className: GRID_BY_COLUMNS[columns],
			style: cardScopedStyle(cardBackground, cardTextColor),
			children: visibleProducts.map((product) => {
				if (product.id == null) return null;
				const productId = product.id;
				return /* @__PURE__ */ jsx(ProductCard, {
					product: tagPortalProduct(product),
					onClick: () => handleSelect(productId)
				}, productId);
			})
		}),
		!reachedLimit && /* @__PURE__ */ jsx("div", { ref: observerTarget }),
		isFetchingNextPage && !reachedLimit && /* @__PURE__ */ jsx("div", {
			className: "mt-6",
			children: /* @__PURE__ */ jsx(SkeletonGrid, {
				columns,
				count: columns
			})
		}),
		error && /* @__PURE__ */ jsx("div", {
			className: "bg-destructive/10 text-destructive mt-6 rounded-lg px-4 py-3 text-sm",
			children: "Couldn’t load more products. Try again later."
		})
	] })] });
}
function ProductCardCompact({ name, imageUrl, price, onClick }) {
	const interactive = !!onClick;
	return /* @__PURE__ */ jsxs("button", {
		type: "button",
		onClick,
		disabled: !interactive,
		className: `bg-card text-card-foreground group flex flex-col overflow-hidden rounded-lg border border-transparent text-left ${interactive ? "hover:border-border cursor-pointer transition-shadow hover:shadow-md" : "cursor-default"} focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none`,
		children: [/* @__PURE__ */ jsx("div", {
			className: "bg-muted relative aspect-square w-full overflow-hidden",
			children: imageUrl ? /* @__PURE__ */ jsx("img", {
				src: imageUrl,
				alt: name,
				className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]",
				loading: "lazy"
			}) : /* @__PURE__ */ jsx("div", {
				className: "flex h-full w-full items-center justify-center",
				children: /* @__PURE__ */ jsx(ImageIcon, { className: "text-muted-foreground/40 size-10" })
			})
		}), /* @__PURE__ */ jsxs("div", {
			className: "p-3",
			children: [/* @__PURE__ */ jsx("h3", {
				className: "text-foreground line-clamp-2 text-sm font-medium",
				children: name
			}), price && /* @__PURE__ */ jsx("p", {
				className: "text-foreground mt-1 text-sm font-semibold",
				children: price
			})]
		})]
	});
}
function SkeletonGrid({ columns, count }) {
	return /* @__PURE__ */ jsx("div", {
		className: GRID_BY_COLUMNS[columns],
		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", {
			className: "space-y-3",
			children: [
				/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full rounded-lg" }),
				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" })
			]
		}, i))
	});
}
const shopWidgetPropertySchema = {
	widgetType: "ShopWidget",
	displayName: "Shop",
	tabsConfig: [{
		id: "styling",
		label: "Styling"
	}, {
		id: "data",
		label: "Data"
	}],
	dataSourceTargetProps: ["products"],
	fields: [
		{
			key: "titleEnabled",
			label: "Widget Title",
			type: "boolean",
			description: "Enable the heading shown above the grid",
			defaultValue: true,
			tab: "styling",
			group: "Title"
		},
		{
			key: "title",
			label: "Title",
			type: "text",
			description: "Heading text shown above the grid",
			defaultValue: "",
			tab: "styling",
			group: "Title",
			requiresKeyToBeTrue: "titleEnabled"
		},
		getColorField({
			key: "titleColor",
			label: "Title Color",
			description: "Color of the heading text",
			defaultValue: "foreground",
			tab: "styling",
			group: "Title",
			requiresKeyToBeTrue: "titleEnabled"
		}),
		{
			key: "showSearch",
			label: "Show Search",
			type: "boolean",
			description: "Display the search input above the grid",
			defaultValue: true,
			tab: "styling",
			group: "Display",
			requiresKeyValue: {
				key: "useDataSource",
				value: false
			}
		},
		{
			key: "showSort",
			label: "Show Sort",
			type: "boolean",
			description: "Display the sort menu above the grid",
			defaultValue: true,
			tab: "styling",
			group: "Display",
			requiresKeyValue: {
				key: "useDataSource",
				value: false
			}
		},
		{
			key: "columns",
			label: "Columns (desktop)",
			type: "select",
			description: "Max columns at the largest breakpoint. Mobile is always 2 columns; intermediate sizes scale smoothly between.",
			options: [
				{
					label: "2",
					value: 2
				},
				{
					label: "3",
					value: 3
				},
				{
					label: "4",
					value: 4
				},
				{
					label: "5",
					value: 5
				},
				{
					label: "6",
					value: 6
				}
			],
			defaultValue: 4,
			tab: "styling",
			group: "Display"
		},
		{
			type: "background",
			key: "background",
			label: "Background",
			description: "Container background",
			defaultValue: "background",
			tab: "styling",
			group: "Design"
		},
		getPaddingField({
			key: "padding",
			label: "Padding",
			description: "Inner spacing around the grid",
			defaultValue: 6,
			tab: "styling",
			group: "Design"
		}),
		getBorderRadiusField({
			key: "borderRadius",
			label: "Border Radius",
			description: "Container corner radius",
			defaultValue: "lg",
			tab: "styling",
			group: "Design"
		}),
		getColorField({
			key: "cardBackground",
			label: "Card Background",
			description: "Override the card background color. Leave unset to use the theme's card color.",
			tab: "styling",
			group: "Card"
		}),
		getColorField({
			key: "cardTextColor",
			label: "Card Text",
			description: "Override title + price color inside each card. Leave unset to use the theme's foreground color.",
			tab: "styling",
			group: "Card"
		}),
		{
			key: "useDataSource",
			label: "Use Data Source",
			type: "boolean",
			description: "Off shows all products from the catalog. On replaces the catalog with a data source — disables search and sort.",
			defaultValue: false,
			tab: "data",
			group: "Data Configuration"
		},
		{
			key: "pageSize",
			label: "Products to show",
			type: "number",
			description: "Maximum number of products rendered in the grid",
			defaultValue: 25,
			min: 5,
			max: 100,
			step: 5,
			tab: "data",
			group: "Data Configuration",
			requiresKeyValue: {
				key: "useDataSource",
				value: false
			}
		},
		{
			key: "dataSource",
			label: "Data Source",
			type: "dataSource",
			description: "",
			tab: "data",
			group: "Data Configuration",
			requiresKeyToBeTrue: "useDataSource"
		}
	]
};
//#endregion
export { isVideoUrl as a, tagPortalProduct as i, ShopWidget_exports as n, ShopTranslationProvider as o, ProductCard as r, useShopTranslation as s, ShopWidget as t };

//# sourceMappingURL=ShopWidget-BzAuvfyC.mjs.map