npm - @gfed-medusa/sf-lib-products - Versions diffs - 1.7.0 → 1.9.0 - Mend

@gfed-medusa/sf-lib-products 1.7.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/components/behavior-tracker/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Product } from "../../types/graphql.js";
+//#region src/components/behavior-tracker/index.d.ts
+interface BehaviorTrackerProps {
+  product: Product;
+}
+declare function BehaviorTracker({
+  product
+}: BehaviorTrackerProps): null;
+//#endregion
+export { BehaviorTracker, BehaviorTracker as default, BehaviorTrackerProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/behavior-tracker/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/behavior-tracker/index.tsx"],"sourcesContent":[],"mappings":";;;UAkJiB,oBAAA;WACN;AADX;AAIgB,iBAAA,eAAA,CAAkB;EAAA;AAA+B,CAApB,EAAA,oBAAoB,CAAA,EAAA,IAAA"}

package/dist/components/behavior-tracker/index.js ADDED Viewed

@@ -0,0 +1,149 @@
+'use client';
+import { useEffect, useRef } from "react";
+import Cookies from "js-cookie";
+import { PERSONALIZATION_CONFIG, getSegmentIdFromCollection } from "@gfed-medusa/sf-lib-common/lib/personalization/config";
+import { useStorefrontContext } from "@gfed-medusa/sf-lib-common/lib/data/context";
+//#region src/components/behavior-tracker/index.tsx
+const PDP_HESITATION_MS = PERSONALIZATION_CONFIG.pdpHesitationMs;
+const HIGH_SCROLL_THRESHOLD = PERSONALIZATION_CONFIG.highScrollThreshold;
+const PRICE_THRESHOLD_USD = PERSONALIZATION_CONFIG.priceThresholdUsd;
+const SIGNAL_COOKIE = "_jg_segment";
+const cookieOptions = {
+	path: "/",
+	sameSite: "none",
+	secure: true,
+	domain: ".justgood.win"
+};
+function getScrollPercentage() {
+	const scrollTop = window.scrollY;
+	const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+	return docHeight > 0 ? scrollTop / docHeight : 0;
+}
+function getCheapestVariantPrice(product) {
+	const variants = product.variants;
+	if (!variants || variants.length === 0) return null;
+	let cheapest = null;
+	for (const variant of variants) {
+		const priceObj = variant.price;
+		if (priceObj && typeof priceObj.amount === "number") {
+			if (cheapest === null || priceObj.amount < cheapest) cheapest = priceObj.amount;
+		}
+	}
+	return cheapest;
+}
+function throttle(fn, limit) {
+	let lastCall = 0;
+	return ((...args) => {
+		const now = Date.now();
+		if (now - lastCall >= limit) {
+			lastCall = now;
+			fn(...args);
+		}
+	});
+}
+function getSegmentData() {
+	const value = Cookies.get(SIGNAL_COOKIE);
+	if (!value) return {};
+	try {
+		return JSON.parse(decodeURIComponent(value));
+	} catch {
+		return {};
+	}
+}
+function emitSignal(type, payload) {
+	const data = getSegmentData();
+	if (!data.signals || typeof data.signals !== "object") data.signals = {};
+	data.signals[type] = payload ?? true;
+	Cookies.set(SIGNAL_COOKIE, encodeURIComponent(JSON.stringify(data)), {
+		...cookieOptions,
+		expires: 7
+	});
+}
+const REPEAT_CATEGORY_THRESHOLD = 3;
+function trackRepeatedCategoryView(segment) {
+	try {
+		let data = getSegmentData();
+		if (Object.keys(data).length === 0) data = { signals: {} };
+		if (!data.signals || typeof data.signals !== "object") data.signals = {};
+		const categoryCounts = data.signals["repeated-category-view"] ?? {};
+		const newCount = (categoryCounts[segment] ?? 0) + 1;
+		categoryCounts[segment] = newCount;
+		data.signals["repeated-category-view"] = categoryCounts;
+		if (newCount >= REPEAT_CATEGORY_THRESHOLD) emitSignal("repeated-category-view", {
+			segment,
+			count: newCount
+		});
+		Cookies.set(SIGNAL_COOKIE, encodeURIComponent(JSON.stringify(data)), {
+			...cookieOptions,
+			expires: 7
+		});
+	} catch {}
+}
+function addHistoryToCookie(segment) {
+	try {
+		let data = getSegmentData();
+		if (Object.keys(data).length === 0) data = { history: [] };
+		if (!data.history || !Array.isArray(data.history)) data.history = [];
+		const history = [...data.history, segment].slice(-PERSONALIZATION_CONFIG.historyMaxLength);
+		data.history = history;
+		Cookies.set(SIGNAL_COOKIE, encodeURIComponent(JSON.stringify(data)), {
+			...cookieOptions,
+			expires: 7
+		});
+	} catch {}
+}
+function BehaviorTracker({ product }) {
+	const { cartId } = useStorefrontContext();
+	const hesitationTimeoutRef = useRef(null);
+	const scrollHandlerRef = useRef(null);
+	const scrollTrackedRef = useRef(false);
+	useRef(false);
+	useEffect(() => {
+		if (!product?.id) return;
+		const collectionHandle = product.collection?.handle;
+		const segment = getSegmentIdFromCollection(collectionHandle);
+		if (segment) {
+			addHistoryToCookie(segment);
+			trackRepeatedCategoryView(segment);
+		}
+		const productPrice = getCheapestVariantPrice(product);
+		const hasCart = Boolean(cartId);
+		if (productPrice && productPrice >= PRICE_THRESHOLD_USD && !hasCart) hesitationTimeoutRef.current = setTimeout(() => {
+			emitSignal("pdp-hesitation", {
+				productId: product.id,
+				price: productPrice
+			});
+		}, PDP_HESITATION_MS);
+		const handleScroll = throttle(() => {
+			if (scrollTrackedRef.current) return;
+			if (getScrollPercentage() >= HIGH_SCROLL_THRESHOLD && !hasCart) {
+				scrollTrackedRef.current = true;
+				emitSignal("high-scroll-no-action", {
+					productId: product.id,
+					scrollDepth: HIGH_SCROLL_THRESHOLD
+				});
+			}
+		}, 500);
+		scrollHandlerRef.current = handleScroll;
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			if (hesitationTimeoutRef.current !== null) {
+				clearTimeout(hesitationTimeoutRef.current);
+				hesitationTimeoutRef.current = null;
+			}
+			if (scrollHandlerRef.current !== null) {
+				window.removeEventListener("scroll", scrollHandlerRef.current);
+				scrollHandlerRef.current = null;
+			}
+			scrollTrackedRef.current = false;
+		};
+	}, [product, cartId]);
+	return null;
+}
+var behavior_tracker_default = BehaviorTracker;
+//#endregion
+export { BehaviorTracker, behavior_tracker_default as default };
+//# sourceMappingURL=index.js.map

package/dist/components/behavior-tracker/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","names":["cookieOptions: Cookies.CookieAttributes","cheapest: number | null"],"sources":["../../../src/components/behavior-tracker/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport Cookies from 'js-cookie';\n\nimport {\n PERSONALIZATION_CONFIG,\n getSegmentIdFromCollection,\n} from '@gfed-medusa/sf-lib-common/lib/personalization/config';\nimport { useStorefrontContext } from '@gfed-medusa/sf-lib-common/lib/data/context';\nimport { Product } from '@/types/graphql';\n\nconst PDP_HESITATION_MS = PERSONALIZATION_CONFIG.pdpHesitationMs;\nconst HIGH_SCROLL_THRESHOLD = PERSONALIZATION_CONFIG.highScrollThreshold;\nconst PRICE_THRESHOLD_USD = PERSONALIZATION_CONFIG.priceThresholdUsd;\n\nconst SIGNAL_COOKIE = '_jg_segment';\nconst isProd = process.env.NODE_ENV === 'production';\n\nconst cookieOptions: Cookies.CookieAttributes = isProd\n ? { path: '/', sameSite: 'none', secure: true, domain: '.justgood.win' }\n : { path: '/', sameSite: 'lax' };\n\nfunction getScrollPercentage(): number {\n const scrollTop = window.scrollY;\n const docHeight =\n document.documentElement.scrollHeight - window.innerHeight;\n return docHeight > 0 ? scrollTop / docHeight : 0;\n}\n\nfunction getCheapestVariantPrice(product: Product): number | null {\n const variants = product.variants;\n if (!variants || variants.length === 0) return null;\n\n let cheapest: number | null = null;\n\n for (const variant of variants) {\n const priceObj = variant.price;\n if (priceObj && typeof priceObj.amount === 'number') {\n if (cheapest === null || priceObj.amount < cheapest) {\n cheapest = priceObj.amount;\n }\n }\n }\n\n return cheapest;\n}\n\nfunction throttle<T extends (...args: unknown[]) => void>(\n fn: T,\n limit: number\n): T {\n let lastCall = 0;\n return ((...args: unknown[]) => {\n const now = Date.now();\n if (now - lastCall >= limit) {\n lastCall = now;\n fn(...args);\n }\n }) as T;\n}\n\nfunction getSegmentData(): Record<string, unknown> {\n const value = Cookies.get(SIGNAL_COOKIE);\n if (!value) return {};\n try {\n return JSON.parse(decodeURIComponent(value));\n } catch {\n return {};\n }\n}\n\nfunction emitSignal(type: string, payload?: unknown) {\n const data = getSegmentData();\n if (!data.signals || typeof data.signals !== 'object') {\n data.signals = {};\n }\n\n (data.signals as Record<string, unknown>)[type] = payload ?? true;\n\n Cookies.set(\n SIGNAL_COOKIE,\n encodeURIComponent(JSON.stringify(data)),\n { ...cookieOptions, expires: 7 }\n );\n}\n\nconst REPEAT_CATEGORY_THRESHOLD = 3;\n\nfunction trackRepeatedCategoryView(segment: string) {\n try {\n let data = getSegmentData();\n if (Object.keys(data).length === 0) {\n data = { signals: {} };\n }\n\n if (!data.signals || typeof data.signals !== 'object') {\n data.signals = {};\n }\n\n const categoryCounts = (data.signals as Record<string, unknown>)['repeated-category-view'] as Record<string, number> ?? {};\n const currentCount = categoryCounts[segment] ?? 0;\n const newCount = currentCount + 1;\n\n categoryCounts[segment] = newCount;\n (data.signals as Record<string, unknown>)['repeated-category-view'] = categoryCounts;\n\n if (newCount >= REPEAT_CATEGORY_THRESHOLD) {\n emitSignal('repeated-category-view', { segment, count: newCount });\n }\n\n Cookies.set(\n SIGNAL_COOKIE,\n encodeURIComponent(JSON.stringify(data)),\n { ...cookieOptions, expires: 7 }\n );\n } catch {\n // Ignore\n }\n}\n\nfunction addHistoryToCookie(segment: string): void {\n try {\n let data = getSegmentData();\n if (Object.keys(data).length === 0) {\n data = { history: [] };\n }\n\n if (!data.history || !Array.isArray(data.history)) {\n data.history = [];\n }\n\n const history = [...(data.history as string[]), segment].slice(\n -PERSONALIZATION_CONFIG.historyMaxLength\n );\n data.history = history;\n\n Cookies.set(\n SIGNAL_COOKIE,\n encodeURIComponent(JSON.stringify(data)),\n { ...cookieOptions, expires: 7 }\n );\n } catch {\n }\n}\n\nexport interface BehaviorTrackerProps {\n product: Product;\n}\n\nexport function BehaviorTracker({ product }: BehaviorTrackerProps) {\n const { cartId } = useStorefrontContext();\n const hesitationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n null\n );\n const scrollHandlerRef = useRef<(() => void) | null>(null);\n const scrollTrackedRef = useRef(false);\n const historyTrackedRef = useRef(false);\n\n useEffect(() => {\n if (!product?.id) return;\n\n const collectionHandle = product.collection?.handle;\n const segment = getSegmentIdFromCollection(collectionHandle);\n\n if (segment) {\n addHistoryToCookie(segment);\n trackRepeatedCategoryView(segment);\n }\n\n const productPrice = getCheapestVariantPrice(product);\n const hasCart = Boolean(cartId);\n\n if (productPrice && productPrice >= PRICE_THRESHOLD_USD && !hasCart) {\n hesitationTimeoutRef.current = setTimeout(() => {\n emitSignal('pdp-hesitation', {\n productId: product.id,\n price: productPrice,\n });\n }, PDP_HESITATION_MS);\n }\n\n const handleScroll = throttle(() => {\n if (scrollTrackedRef.current) return;\n if (getScrollPercentage() >= HIGH_SCROLL_THRESHOLD && !hasCart) {\n scrollTrackedRef.current = true;\n emitSignal('high-scroll-no-action', {\n productId: product.id,\n scrollDepth: HIGH_SCROLL_THRESHOLD,\n });\n }\n }, 500);\n\n scrollHandlerRef.current = handleScroll;\n window.addEventListener('scroll', handleScroll, { passive: true });\n\n return () => {\n if (hesitationTimeoutRef.current !== null) {\n clearTimeout(hesitationTimeoutRef.current);\n hesitationTimeoutRef.current = null;\n }\n if (scrollHandlerRef.current !== null) {\n window.removeEventListener('scroll', scrollHandlerRef.current);\n scrollHandlerRef.current = null;\n }\n scrollTrackedRef.current = false;\n };\n }, [product, cartId]);\n\n return null;\n}\n\nexport default BehaviorTracker;"],"mappings":"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"}

package/dist/components/browse-product-preview/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { BrowseProductHitFragment } from "../../types/graphql.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/components/browse-product-preview/index.d.ts
 type BrowseProductPreviewProps = {
@@ -13,7 +13,7 @@ declare const BrowseProductPreview: ({
   isFeatured,
   imagePriority,
   imageFetchPriority
-}: BrowseProductPreviewProps) => react_jsx_runtime6.JSX.Element;
+}: BrowseProductPreviewProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { BrowseProductPreview };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/browse-product-preview/index.js CHANGED Viewed

@@ -42,13 +42,13 @@ const BrowseProductPreview = ({ product, isFeatured, imagePriority = false, imag
 				imagePriority,
 				imageFetchPriority
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "txt-compact-medium mt-4 flex items-start justify-between gap-x-4",
+				className: "txt-compact-medium mt-4 flex min-w-0 flex-col items-start gap-y-1 text-left",
 				children: [/* @__PURE__ */ jsx(Text, {
-					className: "text-ui-fg-subtle flex-1",
+					className: "text-ui-fg-subtle w-full min-w-0 overflow-hidden break-words whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2]",
 					"data-testid": "product-title",
 					children: product.title
 				}), /* @__PURE__ */ jsx("div", {
-					className: "flex shrink-0 items-start gap-x-2",
+					className: "flex w-full min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1 text-left",
 					children: price && /* @__PURE__ */ jsx(PreviewPrice, { price })
 				})]
 			})]

package/dist/components/browse-product-preview/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/browse-product-preview/index.tsx"],"sourcesContent":["import { LocalizedClientLink } from '@gfed-medusa/sf-lib-common/components/localized-client-link';\nimport { PreviewPrice } from '@gfed-medusa/sf-lib-common/components/preview-price';\nimport { Thumbnail } from '@gfed-medusa/sf-lib-common/components/thumbnail';\nimport { getPercentageDiff } from '@gfed-medusa/sf-lib-common/lib/utils/get-percentage-diff';\nimport { convertToLocale } from '@gfed-medusa/sf-lib-common/lib/utils/money';\nimport type { VariantPrice } from '@gfed-medusa/sf-lib-common/types/prices';\nimport { Text } from '@medusajs/ui';\n\nimport type { BrowseProductHitFragment } from '@/types/graphql';\n\ntype BrowseProductPreviewProps = {\n product: BrowseProductHitFragment;\n isFeatured?: boolean;\n imagePriority?: boolean;\n imageFetchPriority?: 'auto' \| 'high' \| 'low';\n};\n\nconst getBrowseProductPrice = (\n product: BrowseProductHitFragment\n): VariantPrice \| null => {\n if (\n typeof product.priceAmount !== 'number' \|\|\n !product.currencyCode \|\|\n !product.currencyCode.trim()\n ) {\n return null;\n }\n\n const originalPrice = product.originalPriceAmount ?? product.priceAmount;\n const isSale =\n typeof originalPrice === 'number' && originalPrice > product.priceAmount;\n\n return {\n calculated_price_number: product.priceAmount,\n calculated_price: convertToLocale({\n amount: product.priceAmount,\n currency_code: product.currencyCode,\n }),\n original_price_number: originalPrice,\n original_price: convertToLocale({\n amount: originalPrice,\n currency_code: product.currencyCode,\n }),\n currency_code: product.currencyCode,\n price_type: isSale ? 'sale' : 'default',\n percentage_diff:\n isSale && originalPrice > 0\n ? getPercentageDiff(originalPrice, product.priceAmount)\n : '0',\n };\n};\n\nconst BrowseProductPreview = ({\n product,\n isFeatured,\n imagePriority = false,\n imageFetchPriority,\n}: BrowseProductPreviewProps) => {\n const price = getBrowseProductPrice(product);\n\n return (\n <LocalizedClientLink href={`/products/${product.handle}`} className=\"group\">\n <div data-testid=\"product-wrapper\">\n <Thumbnail\n thumbnail={product.thumbnail}\n images={[]}\n size=\"full\"\n isFeatured={isFeatured}\n imagePriority={imagePriority}\n imageFetchPriority={imageFetchPriority}\n />\n <div className=\"txt-compact-medium mt-4 flex items-start ~~justify~~-~~between~~ ~~gap~~-~~x-4~~\">\n <Text\n className=\"text-ui-fg-subtle ~~flex~~-1\"\n data-testid=\"product-title\"\n >\n {product.title}\n </Text>\n <div className=\"flex ~~shrink~~-0 items-~~start~~ gap-x-2\">\n {price && <PreviewPrice price={price} />}\n </div>\n </div>\n </div>\n </LocalizedClientLink>\n );\n};\n\nexport { BrowseProductPreview };\n"],"mappings":";;;;;;;;;AAiBA,MAAM,yBACJ,YACwB;AACxB,KACE,OAAO,QAAQ,gBAAgB,YAC/B,CAAC,QAAQ,gBACT,CAAC,QAAQ,aAAa,MAAM,CAE5B,QAAO;CAGT,MAAM,gBAAgB,QAAQ,uBAAuB,QAAQ;CAC7D,MAAM,SACJ,OAAO,kBAAkB,YAAY,gBAAgB,QAAQ;AAE/D,QAAO;EACL,yBAAyB,QAAQ;EACjC,kBAAkB,gBAAgB;GAChC,QAAQ,QAAQ;GAChB,eAAe,QAAQ;GACxB,CAAC;EACF,uBAAuB;EACvB,gBAAgB,gBAAgB;GAC9B,QAAQ;GACR,eAAe,QAAQ;GACxB,CAAC;EACF,eAAe,QAAQ;EACvB,YAAY,SAAS,SAAS;EAC9B,iBACE,UAAU,gBAAgB,IACtB,kBAAkB,eAAe,QAAQ,YAAY,GACrD;EACP;;AAGH,MAAM,wBAAwB,EAC5B,SACA,YACA,gBAAgB,OAChB,yBAC+B;CAC/B,MAAM,QAAQ,sBAAsB,QAAQ;AAE5C,QACE,oBAAC;EAAoB,MAAM,aAAa,QAAQ;EAAU,WAAU;YAClE,qBAAC;GAAI,eAAY;cACf,oBAAC;IACC,WAAW,QAAQ;IACnB,QAAQ,EAAE;IACV,MAAK;IACO;IACG;IACK;KACpB,EACF,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,WAAU;KACV,eAAY;eAEX,QAAQ;MACJ,EACP,oBAAC;KAAI,WAAU;eACZ,SAAS,oBAAC,gBAAoB,QAAS;MACpC;KACF;IACF;GACc"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/browse-product-preview/index.tsx"],"sourcesContent":["import { LocalizedClientLink } from '@gfed-medusa/sf-lib-common/components/localized-client-link';\nimport { PreviewPrice } from '@gfed-medusa/sf-lib-common/components/preview-price';\nimport { Thumbnail } from '@gfed-medusa/sf-lib-common/components/thumbnail';\nimport { getPercentageDiff } from '@gfed-medusa/sf-lib-common/lib/utils/get-percentage-diff';\nimport { convertToLocale } from '@gfed-medusa/sf-lib-common/lib/utils/money';\nimport type { VariantPrice } from '@gfed-medusa/sf-lib-common/types/prices';\nimport { Text } from '@medusajs/ui';\n\nimport type { BrowseProductHitFragment } from '@/types/graphql';\n\ntype BrowseProductPreviewProps = {\n product: BrowseProductHitFragment;\n isFeatured?: boolean;\n imagePriority?: boolean;\n imageFetchPriority?: 'auto' \| 'high' \| 'low';\n};\n\nconst getBrowseProductPrice = (\n product: BrowseProductHitFragment\n): VariantPrice \| null => {\n if (\n typeof product.priceAmount !== 'number' \|\|\n !product.currencyCode \|\|\n !product.currencyCode.trim()\n ) {\n return null;\n }\n\n const originalPrice = product.originalPriceAmount ?? product.priceAmount;\n const isSale =\n typeof originalPrice === 'number' && originalPrice > product.priceAmount;\n\n return {\n calculated_price_number: product.priceAmount,\n calculated_price: convertToLocale({\n amount: product.priceAmount,\n currency_code: product.currencyCode,\n }),\n original_price_number: originalPrice,\n original_price: convertToLocale({\n amount: originalPrice,\n currency_code: product.currencyCode,\n }),\n currency_code: product.currencyCode,\n price_type: isSale ? 'sale' : 'default',\n percentage_diff:\n isSale && originalPrice > 0\n ? getPercentageDiff(originalPrice, product.priceAmount)\n : '0',\n };\n};\n\nconst BrowseProductPreview = ({\n product,\n isFeatured,\n imagePriority = false,\n imageFetchPriority,\n}: BrowseProductPreviewProps) => {\n const price = getBrowseProductPrice(product);\n\n return (\n <LocalizedClientLink href={`/products/${product.handle}`} className=\"group\">\n <div data-testid=\"product-wrapper\">\n <Thumbnail\n thumbnail={product.thumbnail}\n images={[]}\n size=\"full\"\n isFeatured={isFeatured}\n imagePriority={imagePriority}\n imageFetchPriority={imageFetchPriority}\n />\n <div className=\"txt-compact-medium mt-4 flex min-w-0 flex-col items-start gap-y-1 text-left\">\n <Text\n className=\"text-ui-fg-subtle w-full min-w-0 overflow-hidden break-words whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2]\"\n data-testid=\"product-title\"\n >\n {product.title}\n </Text>\n <div className=\"flex w-full min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1 text-left\">\n {price && <PreviewPrice price={price} />}\n </div>\n </div>\n </div>\n </LocalizedClientLink>\n );\n};\n\nexport { BrowseProductPreview };\n"],"mappings":";;;;;;;;;AAiBA,MAAM,yBACJ,YACwB;AACxB,KACE,OAAO,QAAQ,gBAAgB,YAC/B,CAAC,QAAQ,gBACT,CAAC,QAAQ,aAAa,MAAM,CAE5B,QAAO;CAGT,MAAM,gBAAgB,QAAQ,uBAAuB,QAAQ;CAC7D,MAAM,SACJ,OAAO,kBAAkB,YAAY,gBAAgB,QAAQ;AAE/D,QAAO;EACL,yBAAyB,QAAQ;EACjC,kBAAkB,gBAAgB;GAChC,QAAQ,QAAQ;GAChB,eAAe,QAAQ;GACxB,CAAC;EACF,uBAAuB;EACvB,gBAAgB,gBAAgB;GAC9B,QAAQ;GACR,eAAe,QAAQ;GACxB,CAAC;EACF,eAAe,QAAQ;EACvB,YAAY,SAAS,SAAS;EAC9B,iBACE,UAAU,gBAAgB,IACtB,kBAAkB,eAAe,QAAQ,YAAY,GACrD;EACP;;AAGH,MAAM,wBAAwB,EAC5B,SACA,YACA,gBAAgB,OAChB,yBAC+B;CAC/B,MAAM,QAAQ,sBAAsB,QAAQ;AAE5C,QACE,oBAAC;EAAoB,MAAM,aAAa,QAAQ;EAAU,WAAU;YAClE,qBAAC;GAAI,eAAY;cACf,oBAAC;IACC,WAAW,QAAQ;IACnB,QAAQ,EAAE;IACV,MAAK;IACO;IACG;IACK;KACpB,EACF,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,WAAU;KACV,eAAY;eAEX,QAAQ;MACJ,EACP,oBAAC;KAAI,WAAU;eACZ,SAAS,oBAAC,gBAAoB,QAAS;MACpC;KACF;IACF;GACc"}

package/dist/components/image-gallery/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ProductImage } from "../../types/graphql.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/components/image-gallery/index.d.ts
 type ImageGalleryProps = {
@@ -7,7 +7,7 @@ type ImageGalleryProps = {
 };
 declare const ImageGallery: ({
   images
-}: ImageGalleryProps) => react_jsx_runtime5.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ImageGallery as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/pagination/index.d.ts CHANGED Viewed

@@ -1,15 +1,25 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 //#region src/components/pagination/index.d.ts
 declare function Pagination({
-  page,
-  totalPages,
+  loadedCount,
+  totalItems,
+  itemsPerPage,
+  hasNextPage,
+  disabled,
+  isLoading,
+  onLoadMore,
   'data-testid': dataTestid
 }: {
-  page: number;
-  totalPages: number;
+  loadedCount: number;
+  totalItems: number;
+  itemsPerPage: number;
+  hasNextPage: boolean;
+  disabled?: boolean;
+  isLoading?: boolean;
+  onLoadMore: () => void;
   'data-testid'?: string;
-}): react_jsx_runtime13.JSX.Element;
+}): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Pagination };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/pagination/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/pagination/index.tsx"],"sourcesContent":[],"mappings":";;;~~iBAMgB~~,UAAA~~;;;iBAGC~~;;;;~~EAHD~~,~~aAAU~~,CAAA,EAAA,MAAA;~~CACxB~~,CAAA,~~EAOD~~,~~mBAAA~~,CAAA,GAAA,CAAA,~~OAPC~~"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/pagination/index.tsx"],"sourcesContent":[],"mappings":";;;iBAKgB,UAAA;;;;;;;;iBAQC;;;;EARD,YAAA,EAAU,MAAA;EACxB,WAAA,EAAA,OAAA;EACA,QAAA,CAAA,EAAA,OAAA;EACA,SAAA,CAAA,EAAA,OAAA;EACA,UAAA,EAAA,GAAA,GAAA,IAAA;EACA,aAAA,CAAA,EAAA,MAAA;CACA,CAAA,EAYD,kBAAA,CAAA,GAAA,CAAA,OAZC"}

package/dist/components/pagination/index.js CHANGED Viewed

@@ -1,63 +1,80 @@
 'use client';
-import { clx } from "@medusajs/ui";
-import { jsx } from "react/jsx-runtime";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Button, clx } from "@medusajs/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpMini } from "@medusajs/icons";
 //#region src/components/pagination/index.tsx
-function Pagination({ page, totalPages, "data-testid": dataTestid }) {
-	const router = useRouter();
-	const pathname = usePathname();
-	const searchParams = useSearchParams();
-	const arrayRange = (start, stop) => Array.from({ length: stop - start + 1 }, (_, index) => start + index);
-	const handlePageChange = (newPage) => {
-		const params = new URLSearchParams(searchParams);
-		params.set("page", newPage.toString());
-		router.push(`${pathname}?${params.toString()}`);
-	};
-	const renderPageButton = (p, label, isCurrent) => /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-current": isCurrent ? "page" : void 0,
-		"aria-label": isCurrent ? `Page ${p}, current page` : `Go to page ${p}`,
-		className: clx("txt-xlarge-plus inline-flex h-12 min-w-12 items-center justify-center rounded-full px-2 text-ui-fg-muted transition-colors", {
-			"border-ui-border-base text-ui-fg-base cursor-default border": isCurrent,
-			"cursor-pointer hover:bg-ui-bg-subtle hover:text-ui-fg-base": !isCurrent
-		}),
-		disabled: isCurrent,
-		onClick: () => handlePageChange(p),
-		children: label
-	}, p);
-	const renderEllipsis = (key) => /* @__PURE__ */ jsx("span", {
-		className: "txt-xlarge-plus text-ui-fg-muted inline-flex h-12 items-center justify-center px-1",
-		children: "..."
-	}, key);
-	const renderPageButtons = () => {
-		const buttons = [];
-		if (totalPages <= 7) buttons.push(...arrayRange(1, totalPages).map((p) => renderPageButton(p, p, p === page)));
-		else if (page <= 4) {
-			buttons.push(...arrayRange(1, 5).map((p) => renderPageButton(p, p, p === page)));
-			buttons.push(renderEllipsis("ellipsis1"));
-			buttons.push(renderPageButton(totalPages, totalPages, totalPages === page));
-		} else if (page >= totalPages - 3) {
-			buttons.push(renderPageButton(1, 1, 1 === page));
-			buttons.push(renderEllipsis("ellipsis2"));
-			buttons.push(...arrayRange(totalPages - 4, totalPages).map((p) => renderPageButton(p, p, p === page)));
-		} else {
-			buttons.push(renderPageButton(1, 1, 1 === page));
-			buttons.push(renderEllipsis("ellipsis3"));
-			buttons.push(...arrayRange(page - 1, page + 1).map((p) => renderPageButton(p, p, p === page)));
-			buttons.push(renderEllipsis("ellipsis4"));
-			buttons.push(renderPageButton(totalPages, totalPages, totalPages === page));
-		}
-		return buttons;
+function Pagination({ loadedCount, totalItems, itemsPerPage, hasNextPage, disabled = false, isLoading = false, onLoadMore, "data-testid": dataTestid }) {
+	const visibleItemsCount = Math.min(loadedCount, totalItems);
+	const productsLabel = totalItems === 1 ? "product" : "products";
+	const formattedTotalItems = new Intl.NumberFormat().format(totalItems);
+	const formattedVisibleItems = new Intl.NumberFormat().format(visibleItemsCount);
+	const progressValue = totalItems > 0 ? Math.round(visibleItemsCount / totalItems * 100) : 0;
+	const scrollToTop = () => {
+		window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
 	};
 	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": "Pagination",
-		className: "mt-12 flex w-full justify-center",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex items-center gap-3",
-			"data-testid": dataTestid,
-			children: renderPageButtons()
+		"aria-label": "Load more products",
+		className: "mt-12 w-full",
+		"data-testid": dataTestid,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex w-full flex-col items-center gap-3 text-center",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "xsmall:w-[300px] w-full space-y-2",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "text-small-regular text-ui-fg-subtle",
+						"aria-live": "polite",
+						children: [
+							"Showing ",
+							formattedVisibleItems,
+							" of ",
+							formattedTotalItems,
+							" ",
+							productsLabel
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						"aria-label": "Loaded products progress",
+						"aria-valuemax": totalItems,
+						"aria-valuemin": 0,
+						"aria-valuenow": visibleItemsCount,
+						className: "border-ui-border-base bg-ui-bg-subtle h-2 w-full overflow-hidden rounded-full border",
+						role: "progressbar",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "bg-ui-fg-base h-full rounded-full transition-[width] duration-300 ease-out",
+							style: { width: `${progressValue}%` }
+						})
+					})]
+				}),
+				hasNextPage && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "secondary",
+					className: "xsmall:w-[300px] h-[45px] w-full justify-center rounded-md px-6",
+					disabled: disabled || isLoading,
+					isLoading,
+					"aria-label": `Load ${Math.min(itemsPerPage, totalItems - visibleItemsCount)} more ${productsLabel}`,
+					onClick: onLoadMore,
+					children: "Load more"
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-label": "Scroll back to the top of the page",
+					className: clx("text-small-regular text-ui-fg-subtle hover:text-ui-fg-base mt-8 inline-flex items-center gap-2 transition-colors"),
+					onClick: scrollToTop,
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "flex h-4 w-4 items-center justify-center",
+						children: /* @__PURE__ */ jsx(ArrowUpMini, {
+							className: "h-4 w-4",
+							color: "currentColor"
+						})
+					}), /* @__PURE__ */ jsx("span", { children: "Scroll to top" })]
+				})
+			]
 		})
 	});
 }

package/dist/components/pagination/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/pagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { ~~usePathname,~~ ~~useRouter, useSearchParams~~ } from '~~next~~/~~navigation~~';\n\nimport { clx } from '@medusajs/ui';\n\nexport function Pagination({\n ~~page~~,\n ~~totalPages~~,\n 'data-testid': dataTestid,\n}: {\n ~~page~~: number;\n ~~totalPages~~: number;\n 'data-testid'?: string;\n}) {\n const ~~router~~ = ~~useRouter~~();\n const ~~pathname~~ = ~~usePathname()~~;\n const ~~searchParams~~ = ~~useSearchParams~~();\n\n // ~~Helper~~ ~~function~~ to ~~generate an array of numbers within a range~~\n const ~~arrayRange~~ = ~~(start:~~ ~~number,~~ ~~stop:~~ ~~number) =>\n Array~~.~~from~~({ ~~length:~~ ~~stop~~ - ~~start + 1 }, (_, index~~) => ~~start + index)~~;\n\n ~~// Function to handle page changes\n~~ const ~~handlePageChange~~ = (~~newPage: number~~) => {\n ~~const~~ ~~params~~ = ~~new~~ ~~URLSearchParams(searchParams);\n params.set(~~'~~page~~', ~~newPage.toString());\n router.push(`${pathname~~}~~?${params.toString(~~)~~}`)~~;\n };\n\n // ~~Function to render a page button\n const renderPageButton =~~ (\n ~~p: number,\~~n label: ~~string~~ ~~\| number,\n isCurrent: boolean~~\~~n ) => (~~\n ~~<button\n~~ ~~type~~=\"~~button~~\"\n ~~key={p}\n aria~~-~~current~~={~~isCurrent ? 'page' : undefined~~}\n ~~aria-label={isCurrent~~ ~~? `Page ${p}, current page` : `Go to page ${p}`}\n~~ className~~={clx(\n 'txt~~-~~xlarge-plus~~ ~~inline-~~flex h-12 ~~min~~-~~w-12~~ items-center ~~justify~~-center ~~rounded~~-~~full~~ px-2 ~~text~~-ui-~~fg-muted transition-colors',\n {~~\n ~~'border-ui-border-base text-ui-fg-base cursor-default border':\~~n ~~isCurrent,\n 'cursor~~-~~pointer hover:bg~~-~~ui-bg-subtle~~ ~~hover:~~text-ui-fg-~~base':\~~n ~~!isCurrent,\n }~~\~~n )}~~\n ~~disabled=~~{~~isCurrent~~}~~\n onClick={()~~ => ~~handlePageChange(p)~~}\n ~~>\n~~ {~~label~~}\n </~~button~~>\n ~~);\n~~\n // ~~Function~~ ~~to render ellipsis~~\n ~~const renderEllipsis~~ = ~~(key: string) => (~~\n ~~<span~~\n ~~key~~={~~key~~}\n className=\"~~txt~~-~~xlarge~~-~~plus~~ ~~text~~-ui-fg-~~muted~~ ~~inline~~-~~flex~~ h-12 ~~items~~-~~center~~ ~~justify~~-~~center~~ ~~px-1~~\"\n >\n ~~...\n </span~~>\n ~~);\n~~\n // ~~Function~~ to ~~render~~ ~~page~~ ~~buttons based on the current page and total pages~~\n ~~const renderPageButtons~~ = () => {~~\n const~~ ~~buttons = [];\n~~\n ~~if (totalPages <= 7) {\~~n ~~// Show all pages\~~n ~~buttons.push(\~~n ~~...arrayRange(1,~~ ~~totalPages).map((p)~~ ~~=>\n renderPageButton~~(~~p, p, p === page)~~\n )\n ~~);\n } else {~~\~~n // Handle different cases for displaying pages and ellipses~~\n ~~if (page <= 4) {~~\~~n // Show 1, 2, 3, 4, 5, ..., lastpage~~\n ~~buttons.push(\n ...arrayRange(1,~~ ~~5).map((p)~~ => ~~renderPageButton(p,~~ p, ~~p === page))~~\~~n );\n buttons.push(renderEllipsis('ellipsis1'));\n buttons.push(~~\n ~~renderPageButton(totalPages,~~ ~~totalPages,~~ ~~totalPages === page)~~\n ~~);\n~~ } ~~else if (page >= totalPages - 3) {~~\n ~~// Show 1, ..., lastpage~~ - 4, ~~lastpage~~ - 3, ~~lastpage~~ ~~- 2, lastpage - 1, lastpage~~\n ~~buttons.push(renderPageButton(1, 1, 1 === page));\n buttons.push(renderEllipsis('ellipsis2'));\n buttons.push(~~\n ~~...arrayRange(totalPages - 4, totalPages).map((p) =>\~~n ~~renderPageButton(p,~~ ~~p, p === page)~~\n )\n )~~;\n~~ } ~~else {~~\n ~~// Show 1, ..., page - 1, page, page + 1, ..., lastpage~~\n ~~buttons.push(renderPageButton(1, 1, 1 === page));\n buttons.push(renderEllipsis('ellipsis3'));\n buttons.push(~~\n ~~...arrayRange(page~~ - 1, ~~page~~ + ~~1).map((p)~~ ~~=>\n renderPageButton(p,~~ p, ~~p ===~~ page)\n )\n ~~);\n buttons.push(renderEllipsis(~~'~~ellipsis4'));\n buttons.push(\n renderPageButton(totalPages,~~ ~~totalPages,~~ ~~totalPages~~ ~~===~~ ~~page)~~\n )~~;\n~~ }\n }\n\n ~~return buttons;\n };\n~~\n ~~// Render the component\n return (\n <nav~~ aria-~~label~~=\"~~Pagination~~\" className=\"mt-12 ~~flex~~ w-~~full~~ justify-center\">\n <~~div~~ className=\"~~flex items~~-~~center~~ ~~gap~~-3\" ~~data-testid={dataTestid}~~>\n ~~{renderPageButtons()}\~~n </div>\n </nav>\n );\n}\n"],"mappings":";;;;;;;~~AAMA~~,SAAgB,WAAW,EACzB,~~MACA~~,YACA,eAAe,~~cAKd~~;CACD,MAAM,~~SAAS~~,~~WAAW;CAC1B~~,~~MAAM~~,WAAW~~,aAAa~~;~~CAC9B~~,MAAM,eAAe,~~iBAAiB~~;~~CAGtC~~,MAAM,~~cAAc~~,~~OAAe~~,~~SACjC,MAAM,~~KAAK,~~EAAE~~,~~QAAQ~~,OAAO,~~QAAQ~~,~~GAAG~~,~~GAAG~~,~~GAAG~~,~~UAAU~~,~~QAAQ~~,~~MAAM;CAGvE~~,~~MAAM~~,~~oBAAoB,YAAoB~~;~~EAC5C~~,MAAM,~~SAAS~~,IAAI,~~gBAAgB~~,~~aAAa;AAChD~~,~~SAAO~~,IAAI,~~QAAQ~~,~~QAAQ~~,~~UAAU,CAAC~~;~~AACtC~~,SAAO,~~KAAK,GAAG,~~SAAS,GAAG,~~OAAO,~~UAAU,~~GAAG~~;;~~CAIjD~~,~~MAAM~~,~~oBACJ,GACA,OACA,cAEA,~~oBAAC;EACC,~~MAAK~~;~~EAEL~~,~~gBAAc~~,~~YAAY,SAAS~~;~~EACnC~~,~~cAAY,YAAY,QAAQ,EAAE,kBAAkB,cAAc~~;~~EAClE~~,~~WAAW~~,~~IACT,8HACA~~;~~GACE,+DACE;GACF~~,~~8DACE,CAAC~~;~~GACJ~~,~~CACF~~;~~EACD~~,~~UAAU~~;~~EACV~~,~~eAAe,iBAAiB,EAAE~~;~~YAEjC~~;~~IAfI,EAgBE~~;~~CAIX~~,~~MAAM~~,~~kBAAkB,QACtB,~~oBAAC;~~EAEC~~,~~WAAU~~;~~YACX~~;~~IAFM~~,~~IAIA~~;~~CAIT~~,~~MAAM~~,~~0BAA0B~~;~~EAC9B~~,~~MAAM,UAAU,EAAE~~;~~AAElB~~,~~MAAI,cAAc,EAEhB,SAAQ,KACN,GAAG,WAAW,GAAG,WAAW,CAAC,KAAK,MAChC,iBAAiB,GAAG,GAAG,MAAM,KAAK,CACnC,CACF~~;~~WAGG~~,~~QAAQ,GAAG~~;~~AAEb~~,~~WAAQ~~,~~KACN,GAAG,WAAW,GAAG,~~EAAE,~~CAAC~~,~~KAAK,MAAM,iBAAiB,~~GAAG,~~GAAG~~,~~MAAM~~,~~KAAK~~,~~CAAC~~,~~CACnE~~;~~AACD~~,~~WAAQ~~,~~KAAK,eAAe,YAAY,CAAC~~;~~AACzC~~,~~WAAQ~~,~~KACN,iBAAiB,~~YAAY~~,YAAY,eAAe,KAAK,CAC9D~~;~~aACQ,QAAQ,aAAa,GAAG~~;~~AAEjC~~,~~WAAQ~~,~~KAAK~~,~~iBAAiB,GAAG,GAAG,MAAM,~~KAAK,~~CAAC;AAChD~~,~~WAAQ~~,~~KAAK,eAAe,YAAY,CAAC;AACzC,WAAQ,KACN,GAAG,WAAW,~~aAAa,~~GAAG~~,~~WAAW,~~CAAC,~~KAAK~~,~~MAC7C,iBAAiB,GAAG,GAAG,MAAM,KAAK,CACnC,CACF~~;~~SACI~~;~~AAEL~~,~~WAAQ~~,~~KAAK,iBAAiB,GAAG,GAAG,MAAM,KAAK,CAAC~~;~~AAChD~~,~~WAAQ,KAAK,eAAe,YAAY,CAAC~~;~~AACzC~~,~~WAAQ,KACN,GAAG,~~WAAW,~~OAAO~~,~~GAAG,OAAO,EAAE,CAAC,KAAK,MACrC,iBAAiB,GAAG,GAAG,MAAM,KAAK,CACnC,CACF~~;~~AACD~~,~~WAAQ,KAAK,eAAe,YAAY,CAAC~~;~~AACzC~~,~~WAAQ,KACN,iBAAiB,YAAY,YAAY,eAAe,KAAK,CAC9D;;AAIL,SAAO;;AAIT,QACE,~~oBAAC;~~EAAI~~,~~cAAW~~;~~EAAa~~,WAAU;~~YACrC~~,oBAAC;~~GAAI~~,WAAU;~~GAA0B~~,~~eAAa~~;~~aACnD~~,~~mBAAmB~~;~~IAChB~~;GACF"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/pagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowUpMini } from '@medusajs/icons';\nimport { Button, clx } from '@medusajs/ui';\n\nexport function Pagination({\n loadedCount,\n totalItems,\n itemsPerPage,\n hasNextPage,\n disabled = false,\n isLoading = false,\n onLoadMore,\n 'data-testid': dataTestid,\n}: {\n loadedCount: number;\n totalItems: number;\n itemsPerPage: number;\n hasNextPage: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n onLoadMore: () => void;\n 'data-testid'?: string;\n}) {\n const visibleItemsCount = Math.min(loadedCount, totalItems);\n const productsLabel = totalItems === 1 ? 'product' : 'products';\n const formattedTotalItems = new Intl.NumberFormat().format(totalItems);\n const formattedVisibleItems = new Intl.NumberFormat().format(\n visibleItemsCount\n );\n const progressValue =\n totalItems > 0 ? Math.round((visibleItemsCount / totalItems) * 100) : 0;\n\n const scrollToTop = () => {\n window.scrollTo({ top: 0, behavior: 'smooth' });\n };\n\n return (\n <nav\n aria-label=\"Load more products\"\n className=\"mt-12 w-full\"\n data-testid={dataTestid}\n >\n <div className=\"mx-auto flex w-full flex-col items-center gap-3 text-center\">\n <div className=\"xsmall:w-[300px] w-full space-y-2\">\n <p\n className=\"text-small-regular text-ui-fg-subtle\"\n aria-live=\"polite\"\n >\n Showing {formattedVisibleItems} of {formattedTotalItems}{' '}\n {productsLabel}\n </p>\n <div\n aria-label=\"Loaded products progress\"\n aria-valuemax={totalItems}\n aria-valuemin={0}\n aria-valuenow={visibleItemsCount}\n className=\"border-ui-border-base bg-ui-bg-subtle h-2 w-full overflow-hidden rounded-full border\"\n role=\"progressbar\"\n >\n <div\n className=\"bg-ui-fg-base h-full rounded-full transition-[width] duration-300 ease-out\"\n style={{ width: `${progressValue}%` }}\n />\n </div>\n </div>\n {hasNextPage && (\n <Button\n type=\"button\"\n variant=\"secondary\"\n className=\"xsmall:w-[300px] h-[45px] w-full justify-center rounded-md px-6\"\n disabled={disabled \|\| isLoading}\n isLoading={isLoading}\n aria-label={`Load ${Math.min(itemsPerPage, totalItems - visibleItemsCount)} more ${productsLabel}`}\n onClick={onLoadMore}\n >\n Load more\n </Button>\n )}\n <button\n type=\"button\"\n aria-label=\"Scroll back to the top of the page\"\n className={clx(\n 'text-small-regular text-ui-fg-subtle hover:text-ui-fg-base mt-8 inline-flex items-center gap-2 transition-colors'\n )}\n onClick={scrollToTop}\n >\n <span\n aria-hidden=\"true\"\n className=\"flex h-4 w-4 items-center justify-center\"\n >\n <ArrowUpMini className=\"h-4 w-4\" color=\"currentColor\" />\n </span>\n <span>Scroll to top</span>\n </button>\n </div>\n </nav>\n );\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,WAAW,EACzB,aACA,YACA,cACA,aACA,WAAW,OACX,YAAY,OACZ,YACA,eAAe,cAUd;CACD,MAAM,oBAAoB,KAAK,IAAI,aAAa,WAAW;CAC3D,MAAM,gBAAgB,eAAe,IAAI,YAAY;CACrD,MAAM,sBAAsB,IAAI,KAAK,cAAc,CAAC,OAAO,WAAW;CACtE,MAAM,wBAAwB,IAAI,KAAK,cAAc,CAAC,OACpD,kBACD;CACD,MAAM,gBACJ,aAAa,IAAI,KAAK,MAAO,oBAAoB,aAAc,IAAI,GAAG;CAExE,MAAM,oBAAoB;AACxB,SAAO,SAAS;GAAE,KAAK;GAAG,UAAU;GAAU,CAAC;;AAGjD,QACE,oBAAC;EACC,cAAW;EACX,WAAU;EACV,eAAa;YAEb,qBAAC;GAAI,WAAU;;IACb,qBAAC;KAAI,WAAU;gBACb,qBAAC;MACC,WAAU;MACV,aAAU;;OACX;OACU;OAAsB;OAAK;OAAqB;OACxD;;OACC,EACJ,oBAAC;MACC,cAAW;MACX,iBAAe;MACf,iBAAe;MACf,iBAAe;MACf,WAAU;MACV,MAAK;gBAEL,oBAAC;OACC,WAAU;OACV,OAAO,EAAE,OAAO,GAAG,cAAc,IAAI;QACrC;OACE;MACF;IACL,eACC,oBAAC;KACC,MAAK;KACL,SAAQ;KACR,WAAU;KACV,UAAU,YAAY;KACX;KACX,cAAY,QAAQ,KAAK,IAAI,cAAc,aAAa,kBAAkB,CAAC,QAAQ;KACnF,SAAS;eACV;MAEQ;IAEX,qBAAC;KACC,MAAK;KACL,cAAW;KACX,WAAW,IACT,mHACD;KACD,SAAS;gBAET,oBAAC;MACC,eAAY;MACZ,WAAU;gBAEV,oBAAC;OAAY,WAAU;OAAU,OAAM;QAAiB;OACnD,EACP,oBAAC,oBAAK,kBAAoB;MACnB;;IACL;GACF"}

package/dist/components/product-actions/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ProductActionsProduct } from "../../types/index.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 //#region src/components/product-actions/index.d.ts
 type ProductActionsProps = {
@@ -13,7 +13,7 @@ declare function ProductActions({
   regionId,
   disabled,
   enableMobileActions
-}: ProductActionsProps): react_jsx_runtime12.JSX.Element;
+}: ProductActionsProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { ProductActionsProps, ProductActions as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/product-actions/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/product-actions/index.tsx"],"sourcesContent":[],"mappings":";;;;KAyBY,mBAAA;WACD;;EADC,QAAA,CAAA,EAAA,OAAA;EA2BY,mBAAc,CAAA,EAAA,OAAA;CACpC;AACA,iBAFsB,cAAA,CAEtB;EAAA,OAAA;EAAA,QAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAGC,mBAHD,CAAA,EAGoB,~~mBAAA~~,CAAA,GAAA,CAAA,OAHpB"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/product-actions/index.tsx"],"sourcesContent":[],"mappings":";;;;KAyBY,mBAAA;WACD;;EADC,QAAA,CAAA,EAAA,OAAA;EA2BY,mBAAc,CAAA,EAAA,OAAA;CACpC;AACA,iBAFsB,cAAA,CAEtB;EAAA,OAAA;EAAA,QAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAGC,mBAHD,CAAA,EAGoB,kBAAA,CAAA,GAAA,CAAA,OAHpB"}

package/dist/components/product-actions/index.js CHANGED Viewed

@@ -2,17 +2,17 @@
 import option_select_default from "./option-select.js";
 import { addToCart } from "../../lib/data/cart.js";
-import { useProductPrice } from "../../lib/hooks/use-product-price.js";
 import { useIntersection } from "../../lib/hooks/use-intersection.js";
+import { useProductPrice } from "../../lib/hooks/use-product-price.js";
 import { mergeProductPricing } from "../../lib/utils/merge-product-pricing.js";
-import ProductPrice from "../product-price/index.js";
 import mobile_actions_default from "./mobile-actions.js";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "@medusajs/ui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useParams } from "next/navigation";
-import { useEffect, useMemo, useRef, useState } from "react";
 import { isEqual } from "lodash";
 import { ErrorMessage } from "@gfed-medusa/sf-lib-common/components/error-message";
+import { WebComponent } from "@gfed-medusa/sf-lib-common/components/web-component";
 import { mutateCart } from "@gfed-medusa/sf-lib-common/lib/hooks/use-cart";
 import { Divider } from "@gfed-medusa/sf-lib-ui/components/divider";
@@ -92,7 +92,7 @@ function ProductActions({ product, regionId, disabled, enableMobileActions = tru
 			setStatus(AddToCartStatus.ERROR);
 		}
 	};
-	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-y-2",
 		ref: actionsRef,
 		children: [
@@ -109,9 +109,9 @@ function ProductActions({ product, regionId, disabled, enableMobileActions = tru
 					}) }, option.id);
 				}), /* @__PURE__ */ jsx(Divider, {})]
 			}) }),
-			/* @__PURE__ */ jsx(ProductPrice, {
-				product: pricedProduct,
-				variant: selectedVariant
+			/* @__PURE__ */ jsx(WebComponent, {
+				tag: "mfe-product-price",
+				"data-props": JSON.stringify({ selectedVariantId: selectedVariant?.id ?? "" })
 			}),
 			status === AddToCartStatus.ERROR && /* @__PURE__ */ jsx(ErrorMessage, { error: "Failed adding product to cart. Please try again." }),
 			status === AddToCartStatus.SUCCESS && /* @__PURE__ */ jsx("div", {

package/dist/components/product-actions/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["OptionSelect","MobileActions"],"sources":["../../../src/components/product-actions/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useParams } from 'next/navigation';\n\nimport { isEqual } from 'lodash';\n\nimport { ErrorMessage } from '@gfed-medusa/sf-lib-common/components/error-message';\nimport { mutateCart } from '@gfed-medusa/sf-lib-common/lib/hooks/use-cart';\nimport { Divider } from '@gfed-medusa/sf-lib-ui/components/divider';\nimport { HttpTypes } from '@medusajs/types';\nimport { Button } from '@medusajs/ui';\n\nimport OptionSelect from '@/components/product-actions/option-select';\nimport { addToCart } from '@/lib/data/cart';\nimport { useProductPrice } from '@/lib/hooks/use-product-price';\nimport { useIntersection } from '@/lib/hooks/use-intersection';\nimport { mergeProductPricing } from '@/lib/utils/merge-product-pricing';\nimport { ProductActionsProduct } from '@/types';\nimport { ProductVariant } from '@/types/graphql';\n\nimport ProductPrice from '../product-price';\nimport MobileActions from './mobile-actions';\n\nexport type ProductActionsProps = {\n product: ProductActionsProduct;\n regionId?: string;\n disabled?: boolean;\n enableMobileActions?: boolean;\n};\n\nenum AddToCartStatus {\n IDLE = 'idle',\n ADDING = 'adding',\n SUCCESS = 'success',\n ERROR = 'error',\n}\n\nconst optionsAsKeymap = (\n variantOptions:\n \| HttpTypes.StoreProductVariant['options']\n \| ProductVariant['options']\n \| null\n \| undefined\n) => {\n return variantOptions?.reduce((acc: Record<string, string>, varopt: any) => {\n acc[varopt.optionId] = varopt.value;\n return acc;\n }, {});\n};\n\nexport default function ProductActions({\n product,\n regionId,\n disabled,\n enableMobileActions = true,\n}: ProductActionsProps) {\n const [options, setOptions] = useState<Record<string, string \| undefined>>(\n {}\n );\n const [status, setStatus] = useState<AddToCartStatus>(AddToCartStatus.IDLE);\n const countryCode = useParams().countryCode as string;\n const { product: pricingProduct } = useProductPrice(product.id, regionId);\n const pricedProduct = useMemo(\n () => mergeProductPricing(product, pricingProduct),\n [product, pricingProduct]\n );\n\n // If there is only 1 variant, preselect the options\n useEffect(() => {\n if (pricedProduct?.variants && pricedProduct.variants.length === 1) {\n const variantOptions = optionsAsKeymap(\n pricedProduct.variants[0]?.options \|\| null\n );\n setOptions(variantOptions ?? {});\n }\n }, [pricedProduct.variants]);\n\n const selectedVariant = useMemo(() => {\n if (!pricedProduct.variants \|\| pricedProduct.variants.length === 0) {\n return;\n }\n\n return pricedProduct.variants.find((v) => {\n const variantOptions = optionsAsKeymap(v.options);\n return isEqual(variantOptions, options);\n });\n }, [pricedProduct.variants, options]);\n\n // update the options when a variant is selected\n const setOptionValue = (optionId: string, value: string) => {\n setOptions((prev) => ({\n ...prev,\n [optionId]: value,\n }));\n };\n\n //check if the selected options produce a valid variant\n const isValidVariant = useMemo(() => {\n return pricedProduct.variants?.some((v) => {\n const variantOptions = optionsAsKeymap(v.options);\n return isEqual(variantOptions, options);\n });\n }, [pricedProduct.variants, options]);\n\n const stockStatus = useMemo(() => {\n if (!selectedVariant) {\n return 'unknown' as const;\n }\n\n if (!selectedVariant.manageInventory) {\n return 'in_stock' as const;\n }\n\n if (selectedVariant.allowBackorder) {\n return 'in_stock' as const;\n }\n\n const qty = selectedVariant.inventoryQuantity;\n\n if (typeof qty !== 'number') {\n return 'in_stock' as const;\n }\n\n return qty > 0 ? ('in_stock' as const) : ('out_of_stock' as const);\n }, [selectedVariant]);\n\n const inStock = useMemo(() => {\n // If we don't manage inventory, we can always add to cart\n if (selectedVariant && !selectedVariant.manageInventory) {\n return true;\n }\n\n // If we allow back orders on the variant, we can add to cart\n if (selectedVariant?.allowBackorder) {\n return true;\n }\n\n if (selectedVariant?.manageInventory) {\n const qty = selectedVariant.inventoryQuantity;\n if (typeof qty === 'number') {\n return qty > 0;\n }\n // If we don't have a numeric quantity, don't block add-to-cart\n return true;\n }\n\n // Otherwise, we can't add to cart\n return false;\n }, [selectedVariant]);\n\n const actionsRef = useRef<HTMLDivElement>(null);\n\n const inView = useIntersection(actionsRef, '0px');\n\n // add the selected variant to the cart\n const handleAddToCart = async () => {\n if (!selectedVariant?.id) return null;\n\n setStatus(AddToCartStatus.ADDING);\n\n try {\n await addToCart({\n variantId: selectedVariant.id,\n quantity: 1,\n countryCode,\n });\n\n mutateCart();\n\n setStatus(AddToCartStatus.SUCCESS);\n } catch (error) {\n console.log(error);\n setStatus(AddToCartStatus.ERROR);\n }\n };\n\n return (\n <>\n <div className=\"flex flex-col gap-y-2\" ref={actionsRef}>\n <div>\n {(product.variants?.length ?? 0) > 1 && (\n <div className=\"flex flex-col gap-y-4\">\n {(product.options \|\| []).map((option) => {\n return (\n <div key={option.id}>\n <OptionSelect\n option={option}\n current={options[option.id]}\n updateOption={setOptionValue}\n title={option.title ?? ''}\n data-testid=\"product-options\"\n disabled={!!disabled \|\| status === AddToCartStatus.ADDING}\n />\n </div>\n );\n })}\n <Divider />\n </div>\n )}\n </div>\n\n <ProductPrice product={pricedProduct} variant={selectedVariant} />\n\n {status === AddToCartStatus.ERROR && (\n <ErrorMessage error=\"Failed adding product to cart. Please try again.\" />\n )}\n {status === AddToCartStatus.SUCCESS && (\n <div className=\"text-small-regular pt-2 text-green-700\">\n Successfully added product to cart\n </div>\n )}\n <Button\n onClick={handleAddToCart}\n disabled={\n !inStock \|\|\n !selectedVariant \|\|\n !!disabled \|\|\n status === AddToCartStatus.ADDING \|\|\n !isValidVariant\n }\n variant=\"primary\"\n className=\"h-10 w-full\"\n isLoading={status === AddToCartStatus.ADDING}\n data-testid=\"add-product-button\"\n >\n {!selectedVariant\n ? 'Add to cart'\n : !inStock \|\| !isValidVariant\n ? 'Out of stock'\n : 'Add to cart'}\n </Button>\n {enableMobileActions && (\n <MobileActions\n product={pricedProduct}\n variant={selectedVariant}\n options={options}\n updateOptions={setOptionValue}\n stockStatus={stockStatus}\n handleAddToCart={handleAddToCart}\n isAdding={status === AddToCartStatus.ADDING}\n show={!inView}\n optionsDisabled={!!disabled \|\| status === AddToCartStatus.ADDING}\n />\n )}\n </div>\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["OptionSelect","MobileActions"],"sources":["../../../src/components/product-actions/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useParams } from 'next/navigation';\n\nimport { isEqual } from 'lodash';\n\nimport { ErrorMessage } from '@gfed-medusa/sf-lib-common/components/error-message';\nimport { WebComponent } from '@gfed-medusa/sf-lib-common/components/web-component';\nimport { mutateCart } from '@gfed-medusa/sf-lib-common/lib/hooks/use-cart';\nimport { Divider } from '@gfed-medusa/sf-lib-ui/components/divider';\nimport { HttpTypes } from '@medusajs/types';\nimport { Button } from '@medusajs/ui';\n\nimport OptionSelect from '@/components/product-actions/option-select';\nimport { addToCart } from '@/lib/data/cart';\nimport { useIntersection } from '@/lib/hooks/use-intersection';\nimport { useProductPrice } from '@/lib/hooks/use-product-price';\nimport { mergeProductPricing } from '@/lib/utils/merge-product-pricing';\nimport { ProductActionsProduct } from '@/types';\nimport { ProductVariant } from '@/types/graphql';\n\nimport MobileActions from './mobile-actions';\n\nexport type ProductActionsProps = {\n product: ProductActionsProduct;\n regionId?: string;\n disabled?: boolean;\n enableMobileActions?: boolean;\n};\n\nenum AddToCartStatus {\n IDLE = 'idle',\n ADDING = 'adding',\n SUCCESS = 'success',\n ERROR = 'error',\n}\n\nconst optionsAsKeymap = (\n variantOptions:\n \| HttpTypes.StoreProductVariant['options']\n \| ProductVariant['options']\n \| null\n \| undefined\n) => {\n return variantOptions?.reduce((acc: Record<string, string>, varopt: any) => {\n acc[varopt.optionId] = varopt.value;\n return acc;\n }, {});\n};\n\nexport default function ProductActions({\n product,\n regionId,\n disabled,\n enableMobileActions = true,\n}: ProductActionsProps) {\n const [options, setOptions] = useState<Record<string, string \| undefined>>(\n {}\n );\n const [status, setStatus] = useState<AddToCartStatus>(AddToCartStatus.IDLE);\n const countryCode = useParams().countryCode as string;\n const { product: pricingProduct } = useProductPrice(product.id, regionId);\n const pricedProduct = useMemo(\n () => mergeProductPricing(product, pricingProduct),\n [product, pricingProduct]\n );\n\n // If there is only 1 variant, preselect the options\n useEffect(() => {\n if (pricedProduct?.variants && pricedProduct.variants.length === 1) {\n const variantOptions = optionsAsKeymap(\n pricedProduct.variants[0]?.options \|\| null\n );\n setOptions(variantOptions ?? {});\n }\n }, [pricedProduct.variants]);\n\n const selectedVariant = useMemo(() => {\n if (!pricedProduct.variants \|\| pricedProduct.variants.length === 0) {\n return;\n }\n\n return pricedProduct.variants.find((v) => {\n const variantOptions = optionsAsKeymap(v.options);\n return isEqual(variantOptions, options);\n });\n }, [pricedProduct.variants, options]);\n\n // update the options when a variant is selected\n const setOptionValue = (optionId: string, value: string) => {\n setOptions((prev) => ({\n ...prev,\n [optionId]: value,\n }));\n };\n\n //check if the selected options produce a valid variant\n const isValidVariant = useMemo(() => {\n return pricedProduct.variants?.some((v) => {\n const variantOptions = optionsAsKeymap(v.options);\n return isEqual(variantOptions, options);\n });\n }, [pricedProduct.variants, options]);\n\n const stockStatus = useMemo(() => {\n if (!selectedVariant) {\n return 'unknown' as const;\n }\n\n if (!selectedVariant.manageInventory) {\n return 'in_stock' as const;\n }\n\n if (selectedVariant.allowBackorder) {\n return 'in_stock' as const;\n }\n\n const qty = selectedVariant.inventoryQuantity;\n\n if (typeof qty !== 'number') {\n return 'in_stock' as const;\n }\n\n return qty > 0 ? ('in_stock' as const) : ('out_of_stock' as const);\n }, [selectedVariant]);\n\n const inStock = useMemo(() => {\n // If we don't manage inventory, we can always add to cart\n if (selectedVariant && !selectedVariant.manageInventory) {\n return true;\n }\n\n // If we allow back orders on the variant, we can add to cart\n if (selectedVariant?.allowBackorder) {\n return true;\n }\n\n if (selectedVariant?.manageInventory) {\n const qty = selectedVariant.inventoryQuantity;\n if (typeof qty === 'number') {\n return qty > 0;\n }\n // If we don't have a numeric quantity, don't block add-to-cart\n return true;\n }\n\n // Otherwise, we can't add to cart\n return false;\n }, [selectedVariant]);\n\n const actionsRef = useRef<HTMLDivElement>(null);\n\n const inView = useIntersection(actionsRef, '0px');\n\n // add the selected variant to the cart\n const handleAddToCart = async () => {\n if (!selectedVariant?.id) return null;\n\n setStatus(AddToCartStatus.ADDING);\n\n try {\n await addToCart({\n variantId: selectedVariant.id,\n quantity: 1,\n countryCode,\n });\n\n mutateCart();\n\n setStatus(AddToCartStatus.SUCCESS);\n } catch (error) {\n console.log(error);\n setStatus(AddToCartStatus.ERROR);\n }\n };\n\n return (\n <>\n <div className=\"flex flex-col gap-y-2\" ref={actionsRef}>\n <div>\n {(product.variants?.length ?? 0) > 1 && (\n <div className=\"flex flex-col gap-y-4\">\n {(product.options \|\| []).map((option) => {\n return (\n <div key={option.id}>\n <OptionSelect\n option={option}\n current={options[option.id]}\n updateOption={setOptionValue}\n title={option.title ?? ''}\n data-testid=\"product-options\"\n disabled={!!disabled \|\| status === AddToCartStatus.ADDING}\n />\n </div>\n );\n })}\n <Divider />\n </div>\n )}\n </div>\n\n <WebComponent\n tag=\"mfe-product-price\"\n data-props={JSON.stringify({\n selectedVariantId: selectedVariant?.id ?? '',\n })}\n />\n\n {status === AddToCartStatus.ERROR && (\n <ErrorMessage error=\"Failed adding product to cart. Please try again.\" />\n )}\n {status === AddToCartStatus.SUCCESS && (\n <div className=\"text-small-regular pt-2 text-green-700\">\n Successfully added product to cart\n </div>\n )}\n <Button\n onClick={handleAddToCart}\n disabled={\n !inStock \|\|\n !selectedVariant \|\|\n !!disabled \|\|\n status === AddToCartStatus.ADDING \|\|\n !isValidVariant\n }\n variant=\"primary\"\n className=\"h-10 w-full\"\n isLoading={status === AddToCartStatus.ADDING}\n data-testid=\"add-product-button\"\n >\n {!selectedVariant\n ? 'Add to cart'\n : !inStock \|\| !isValidVariant\n ? 'Out of stock'\n : 'Add to cart'}\n </Button>\n {enableMobileActions && (\n <MobileActions\n product={pricedProduct}\n variant={selectedVariant}\n options={options}\n updateOptions={setOptionValue}\n stockStatus={stockStatus}\n handleAddToCart={handleAddToCart}\n isAdding={status === AddToCartStatus.ADDING}\n show={!inView}\n optionsDisabled={!!disabled \|\| status === AddToCartStatus.ADDING}\n />\n )}\n </div>\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/product-actions/mobile-actions.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mobile-actions.d.ts","names":[],"sources":["../../../src/components/product-actions/mobile-actions.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBK,kBAAA;WACM;EADN,OAAA,CAAA,EAEO,cAFW;EACZ,OAAA,EAEA,MAFA,CAAA,MAAA,EAAA,MAAA,GAAA,SAAA,CAAA;EACC,aAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EACD,WAAA,CAAA,EAAA,SAAA,GAAA,UAAA,GAAA,cAAA;EAAM,eAAA,EAAA,GAAA,GAAA,IAAA;EAuBX,QAAA,CAAA,EAAA,~~OAmML~~;;;;~~cAnMK~~,eAAe,KAAA,CAAM,GAAG"}
1	+ {"version":3,"file":"mobile-actions.d.ts","names":[],"sources":["../../../src/components/product-actions/mobile-actions.tsx"],"sourcesContent":[],"mappings":";;;;;KAiBK,kBAAA;WACM;EADN,OAAA,CAAA,EAEO,cAFW;EACZ,OAAA,EAEA,MAFA,CAAA,MAAA,EAAA,MAAA,GAAA,SAAA,CAAA;EACC,aAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EACD,WAAA,CAAA,EAAA,SAAA,GAAA,UAAA,GAAA,cAAA;EAAM,eAAA,EAAA,GAAA,GAAA,IAAA;EAuBX,QAAA,CAAA,EAAA,OAqKL;;;;cArKK,eAAe,KAAA,CAAM,GAAG"}