npm - @burdenoff/microfe-coolandlovely - Versions diffs - 2026.1101.8 → 2026.1102.1 - Mend

@burdenoff/microfe-coolandlovely 2026.1101.8 → 2026.1102.1

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 (72) hide show

package/dist/coolandlovely/pages/items/StyleItemDetailPage.js CHANGED Viewed

@@ -13,268 +13,279 @@ import { categoryIcon as h } from "../../utils/icons.js";
 import { TagList as g } from "../../components/TagList.js";
 import { ColourSwatchRow as _ } from "../../components/ColourSwatchRow.js";
 import { StoreListingCard as v } from "../../components/StoreListingCard.js";
-import { AddToCartPanel as y } from "../../components/AddToCartPanel.js";
-import { StoreListedPieceView as b } from "./StoreListedPieceView.js";
-import { Archive as x, ArrowLeft as S, ChevronRight as C, Loader2 as w, Pencil as T, Shapes as E } from "lucide-react";
-import { useParams as D, useSearchParams as O } from "react-router";
-import { jsx as k, jsxs as A } from "react/jsx-runtime";
-import { GlassCard as j } from "@burdenoff/fe-libs/ui";
+import { PricePanel as y } from "../../components/prices/PricePanel.js";
+import { AddToCartPanel as b } from "../../components/AddToCartPanel.js";
+import { StoreListedPieceView as x } from "./StoreListedPieceView.js";
+import { Archive as S, ArrowLeft as C, ChevronRight as w, Loader2 as T, Pencil as E, Shapes as D } from "lucide-react";
+import { useParams as O, useSearchParams as k } from "react-router";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import { GlassCard as M } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/items/StyleItemDetailPage.tsx
-function M() {
-	let { itemId: M } = D(), [N] = O(), P = N.get("look"), { navigateTo: F } = e(), I = i(M), L = r({ pagination: {
+function N() {
+	let { itemId: N } = O(), [P] = k(), F = P.get("look"), { navigateTo: I, workspaceId: L, currentUser: R } = e(), z = i(N), B = r({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), R = n();
-	if (a(M, I.data?.name), I.isLoading) return /* @__PURE__ */ k(t, {
+	} }), V = n();
+	if (a(N, z.data?.name), z.isLoading) return /* @__PURE__ */ A(t, {
 		title: "Style item",
-		children: /* @__PURE__ */ k(c, { label: "Loading item…" })
+		children: /* @__PURE__ */ A(c, { label: "Loading item…" })
 	});
-	if (!I.isError && !I.data) return /* @__PURE__ */ k(b, {
-		itemId: M,
-		onRetry: () => void I.refetch()
+	if (!z.isError && !z.data) return /* @__PURE__ */ A(x, {
+		itemId: N,
+		onRetry: () => void z.refetch()
 	});
-	if (I.isError || !I.data) return /* @__PURE__ */ k(t, {
+	if (z.isError || !z.data) return /* @__PURE__ */ A(t, {
 		title: "Style item",
-		children: /* @__PURE__ */ k(s, {
+		children: /* @__PURE__ */ A(s, {
 			title: "Item not found",
-			onRetry: () => void I.refetch()
+			onRetry: () => void z.refetch()
 		})
 	});
-	let z = I.data, B = z.status === "RETIRED", V = (L.data?.items ?? []).filter((e) => e.items?.some((e) => e.styleItemId === z.id)).slice(0, 4);
-	return /* @__PURE__ */ A(t, {
-		title: z.name,
-		description: z.brand?.name ?? void 0,
-		actions: /* @__PURE__ */ A("div", {
+	let H = z.data, U = H.status === "RETIRED", W = (B.data?.items ?? []).filter((e) => e.items?.some((e) => e.styleItemId === H.id)).slice(0, 4);
+	return /* @__PURE__ */ j(t, {
+		title: H.name,
+		description: H.brand?.name ?? void 0,
+		actions: /* @__PURE__ */ j("div", {
 			className: "flex flex-wrap items-center gap-2",
 			children: [
-				/* @__PURE__ */ A("button", {
+				/* @__PURE__ */ j("button", {
 					type: "button",
-					onClick: () => F("/items"),
+					onClick: () => I("/items"),
 					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
-					children: [/* @__PURE__ */ k(S, { className: "h-4 w-4" }), " Back"]
+					children: [/* @__PURE__ */ A(C, { className: "h-4 w-4" }), " Back"]
 				}),
-				/* @__PURE__ */ k(u, { styleItemId: z.id }),
-				/* @__PURE__ */ A("button", {
+				/* @__PURE__ */ A(u, { styleItemId: H.id }),
+				/* @__PURE__ */ j("button", {
 					type: "button",
-					onClick: () => F(`/items/${z.id}/edit`),
+					onClick: () => I(`/items/${H.id}/edit`),
 					className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90",
-					children: [/* @__PURE__ */ k(T, { className: "h-4 w-4" }), " Edit"]
+					children: [/* @__PURE__ */ A(E, { className: "h-4 w-4" }), " Edit"]
 				}),
-				!B && /* @__PURE__ */ A("button", {
+				!U && /* @__PURE__ */ j("button", {
 					type: "button",
-					disabled: R.isPending,
-					onClick: () => R.mutate(z.id, { onSuccess: () => F("/items") }),
+					disabled: V.isPending,
+					onClick: () => V.mutate(H.id, { onSuccess: () => I("/items") }),
 					className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50",
-					children: [R.isPending ? /* @__PURE__ */ k(w, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ k(x, { className: "h-4 w-4" }), "Archive"]
+					children: [V.isPending ? /* @__PURE__ */ A(T, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ A(S, { className: "h-4 w-4" }), "Archive"]
 				})
 			]
 		}),
-		children: [/* @__PURE__ */ A("div", {
-			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-			children: [/* @__PURE__ */ k("div", {
-				className: "lg:col-span-2",
-				children: /* @__PURE__ */ A(j, {
-					treatment: "glass",
-					className: "group overflow-hidden p-0",
-					children: [/* @__PURE__ */ k(l, {
-						icon: h(z.category, 48),
-						seed: z.id,
-						fileId: z.image?.id,
-						alt: z.name,
-						className: "aspect-[4/5] w-full"
-					}), z.description && /* @__PURE__ */ k("div", {
-						className: "p-6",
-						children: /* @__PURE__ */ k("p", {
-							className: "text-sm leading-relaxed text-text-secondary",
-							children: z.description
-						})
-					})]
-				})
-			}), /* @__PURE__ */ A("div", {
-				className: "space-y-4",
-				children: [
-					/* @__PURE__ */ A(j, {
+		children: [
+			/* @__PURE__ */ j("div", {
+				className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ A("div", {
+					className: "lg:col-span-2",
+					children: /* @__PURE__ */ j(M, {
 						treatment: "glass",
-						className: "space-y-5 p-6",
-						children: [
-							/* @__PURE__ */ A("div", { children: [
-								/* @__PURE__ */ k("h2", {
-									className: "text-2xl font-semibold leading-tight text-text-primary",
-									children: z.name
-								}),
-								z.brand && /* @__PURE__ */ A("button", {
-									type: "button",
-									onClick: () => F(`/brands/${z.brand?.id}`),
-									className: "mt-1 inline-flex items-center gap-0.5 text-sm font-medium text-action-primary-bg hover:underline",
-									children: [z.brand.name, /* @__PURE__ */ k(C, { className: "h-3.5 w-3.5" })]
-								}),
-								/* @__PURE__ */ A("div", {
-									className: "mt-3 flex flex-wrap items-center justify-between gap-2",
-									children: [/* @__PURE__ */ A("p", {
-										className: "text-3xl font-bold text-text-primary tabular-nums",
-										children: [f(z.price, z.currency), /* @__PURE__ */ k("span", {
-											className: "ml-2 text-base font-medium text-text-secondary",
-											children: z.currency
-										})]
-									}), /* @__PURE__ */ k(o, { status: z.status })]
-								})
-							] }),
-							/* @__PURE__ */ k("div", { className: "border-t border-border-seam" }),
-							z.colours.length > 0 && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
-								className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
-								children: "Colours"
-							}), /* @__PURE__ */ k(_, {
-								colours: z.colours,
-								max: 12
-							})] }),
-							z.sizes.length > 0 && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
-								className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
-								children: "Size"
-							}), /* @__PURE__ */ k("div", {
-								className: "flex flex-wrap gap-2",
-								children: z.sizes.map((e) => /* @__PURE__ */ k("span", {
-									className: "inline-flex min-w-9 items-center justify-center rounded-full border border-border-seam px-3 py-1 text-sm font-medium text-text-primary",
-									children: e
-								}, e))
-							})] }),
-							/* @__PURE__ */ k("div", {
-								className: "border-t border-border-seam pt-5",
-								children: /* @__PURE__ */ k(y, {
-									item: z,
-									lookId: P
-								})
-							}),
-							z.materials.length > 0 && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
-								className: "mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary",
-								children: "Materials"
-							}), /* @__PURE__ */ k("p", {
-								className: "text-sm text-text-primary",
-								children: z.materials.join(", ")
-							})] }),
-							z.tags.length > 0 && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("p", {
-								className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
-								children: "Tags"
-							}), /* @__PURE__ */ k(g, {
-								tags: z.tags,
-								max: 12,
-								tone: "accent"
-							})] })
-						]
-					}),
-					/* @__PURE__ */ A(j, {
-						treatment: "plain",
-						className: "p-5",
-						children: [/* @__PURE__ */ k("h3", {
-							className: "mb-3 text-sm font-semibold text-text-primary",
-							children: "Details"
-						}), /* @__PURE__ */ A("dl", {
-							className: "space-y-2 text-sm",
+						className: "group overflow-hidden p-0",
+						children: [/* @__PURE__ */ A(l, {
+							icon: h(H.category, 48),
+							seed: H.id,
+							fileId: H.image?.id,
+							alt: H.name,
+							className: "aspect-[4/5] w-full"
+						}), H.description && /* @__PURE__ */ A("div", {
+							className: "p-6",
+							children: /* @__PURE__ */ A("p", {
+								className: "text-sm leading-relaxed text-text-secondary",
+								children: H.description
+							})
+						})]
+					})
+				}), /* @__PURE__ */ j("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ j(M, {
+							treatment: "glass",
+							className: "space-y-5 p-6",
 							children: [
+								/* @__PURE__ */ j("div", { children: [
+									/* @__PURE__ */ A("h2", {
+										className: "text-2xl font-semibold leading-tight text-text-primary",
+										children: H.name
+									}),
+									H.brand && /* @__PURE__ */ j("button", {
+										type: "button",
+										onClick: () => I(`/brands/${H.brand?.id}`),
+										className: "mt-1 inline-flex items-center gap-0.5 text-sm font-medium text-action-primary-bg hover:underline",
+										children: [H.brand.name, /* @__PURE__ */ A(w, { className: "h-3.5 w-3.5" })]
+									}),
+									/* @__PURE__ */ j("div", {
+										className: "mt-3 flex flex-wrap items-center justify-between gap-2",
+										children: [/* @__PURE__ */ j("p", {
+											className: "text-3xl font-bold text-text-primary tabular-nums",
+											children: [f(H.price, H.currency), /* @__PURE__ */ A("span", {
+												className: "ml-2 text-base font-medium text-text-secondary",
+												children: H.currency
+											})]
+										}), /* @__PURE__ */ A(o, { status: H.status })]
+									})
+								] }),
+								/* @__PURE__ */ A("div", { className: "border-t border-border-seam" }),
+								H.colours.length > 0 && /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
+									children: "Colours"
+								}), /* @__PURE__ */ A(_, {
+									colours: H.colours,
+									max: 12
+								})] }),
+								H.sizes.length > 0 && /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
+									children: "Size"
+								}), /* @__PURE__ */ A("div", {
+									className: "flex flex-wrap gap-2",
+									children: H.sizes.map((e) => /* @__PURE__ */ A("span", {
+										className: "inline-flex min-w-9 items-center justify-center rounded-full border border-border-seam px-3 py-1 text-sm font-medium text-text-primary",
+										children: e
+									}, e))
+								})] }),
 								/* @__PURE__ */ A("div", {
-									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ k("dt", {
-										className: "text-text-secondary",
-										children: "Category"
-									}), /* @__PURE__ */ k("dd", {
-										className: "text-text-primary",
-										children: p(z.category)
-									})]
-								}),
-								/* @__PURE__ */ A("div", {
-									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ k("dt", {
-										className: "text-text-secondary",
-										children: "SKU"
-									}), /* @__PURE__ */ k("dd", {
-										className: "text-text-primary",
-										children: z.sku ?? "—"
-									})]
+									className: "border-t border-border-seam pt-5",
+									children: /* @__PURE__ */ A(b, {
+										item: H,
+										lookId: F
+									})
 								}),
-								/* @__PURE__ */ A("div", {
-									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ k("dt", {
-										className: "text-text-secondary",
-										children: "Currency"
-									}), /* @__PURE__ */ k("dd", {
-										className: "text-text-primary",
-										children: z.currency
-									})]
-								}),
-								/* @__PURE__ */ A("div", {
-									className: "flex justify-between gap-2",
-									children: [/* @__PURE__ */ k("dt", {
-										className: "text-text-secondary",
-										children: "Created"
-									}), /* @__PURE__ */ k("dd", {
-										className: "text-text-primary",
-										children: d(z.createdAt, {
-											hour: void 0,
-											minute: void 0
-										})
-									})]
-								})
+								H.materials.length > 0 && /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary",
+									children: "Materials"
+								}), /* @__PURE__ */ A("p", {
+									className: "text-sm text-text-primary",
+									children: H.materials.join(", ")
+								})] }),
+								H.tags.length > 0 && /* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("p", {
+									className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
+									children: "Tags"
+								}), /* @__PURE__ */ A(g, {
+									tags: H.tags,
+									max: 12,
+									tone: "accent"
+								})] })
 							]
-						})]
-					}),
-					/* @__PURE__ */ k(v, { item: z }),
-					z.collection && /* @__PURE__ */ A("button", {
-						type: "button",
-						onClick: () => F(`/collections/${z.collection?.id}`),
-						className: "flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50",
-						children: [/* @__PURE__ */ k(l, {
-							icon: /* @__PURE__ */ k(E, { className: "h-5 w-5" }),
-							seed: z.collection.id,
-							className: "h-10 w-10 shrink-0"
-						}), /* @__PURE__ */ A("div", {
-							className: "min-w-0",
-							children: [/* @__PURE__ */ k("p", {
-								className: "truncate text-sm font-medium text-text-primary",
-								children: z.collection.name
-							}), /* @__PURE__ */ k("p", {
-								className: "truncate text-xs text-text-secondary",
-								children: "View collection"
+						}),
+						/* @__PURE__ */ j(M, {
+							treatment: "plain",
+							className: "p-5",
+							children: [/* @__PURE__ */ A("h3", {
+								className: "mb-3 text-sm font-semibold text-text-primary",
+								children: "Details"
+							}), /* @__PURE__ */ j("dl", {
+								className: "space-y-2 text-sm",
+								children: [
+									/* @__PURE__ */ j("div", {
+										className: "flex justify-between gap-2",
+										children: [/* @__PURE__ */ A("dt", {
+											className: "text-text-secondary",
+											children: "Category"
+										}), /* @__PURE__ */ A("dd", {
+											className: "text-text-primary",
+											children: p(H.category)
+										})]
+									}),
+									/* @__PURE__ */ j("div", {
+										className: "flex justify-between gap-2",
+										children: [/* @__PURE__ */ A("dt", {
+											className: "text-text-secondary",
+											children: "SKU"
+										}), /* @__PURE__ */ A("dd", {
+											className: "text-text-primary",
+											children: H.sku ?? "—"
+										})]
+									}),
+									/* @__PURE__ */ j("div", {
+										className: "flex justify-between gap-2",
+										children: [/* @__PURE__ */ A("dt", {
+											className: "text-text-secondary",
+											children: "Currency"
+										}), /* @__PURE__ */ A("dd", {
+											className: "text-text-primary",
+											children: H.currency
+										})]
+									}),
+									/* @__PURE__ */ j("div", {
+										className: "flex justify-between gap-2",
+										children: [/* @__PURE__ */ A("dt", {
+											className: "text-text-secondary",
+											children: "Created"
+										}), /* @__PURE__ */ A("dd", {
+											className: "text-text-primary",
+											children: d(H.createdAt, {
+												hour: void 0,
+												minute: void 0
+											})
+										})]
+									})
+								]
 							})]
-						})]
-					})
-				]
-			})]
-		}), /* @__PURE__ */ A("section", {
-			className: "mt-8",
-			children: [/* @__PURE__ */ A("div", {
-				className: "mb-3 flex items-center justify-between gap-3",
-				children: [/* @__PURE__ */ k("h3", {
-					className: "text-lg font-semibold text-text-primary",
-					children: "Appears in looks"
-				}), V.length > 0 && /* @__PURE__ */ A("button", {
-					type: "button",
-					onClick: () => F("/looks"),
-					className: "inline-flex items-center gap-1 text-sm font-medium text-action-primary-bg hover:underline",
-					children: ["View all ", /* @__PURE__ */ k(C, { className: "h-3.5 w-3.5" })]
+						}),
+						/* @__PURE__ */ A(v, { item: H }),
+						H.collection && /* @__PURE__ */ j("button", {
+							type: "button",
+							onClick: () => I(`/collections/${H.collection?.id}`),
+							className: "flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50",
+							children: [/* @__PURE__ */ A(l, {
+								icon: /* @__PURE__ */ A(D, { className: "h-5 w-5" }),
+								seed: H.collection.id,
+								className: "h-10 w-10 shrink-0"
+							}), /* @__PURE__ */ j("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ A("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: H.collection.name
+								}), /* @__PURE__ */ A("p", {
+									className: "truncate text-xs text-text-secondary",
+									children: "View collection"
+								})]
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ j("section", {
+				className: "mt-8",
+				children: [/* @__PURE__ */ j("div", {
+					className: "mb-3 flex items-center justify-between gap-3",
+					children: [/* @__PURE__ */ A("h3", {
+						className: "text-lg font-semibold text-text-primary",
+						children: "Appears in looks"
+					}), W.length > 0 && /* @__PURE__ */ j("button", {
+						type: "button",
+						onClick: () => I("/looks"),
+						className: "inline-flex items-center gap-1 text-sm font-medium text-action-primary-bg hover:underline",
+						children: ["View all ", /* @__PURE__ */ A(w, { className: "h-3.5 w-3.5" })]
+					})]
+				}), B.isLoading ? /* @__PURE__ */ j("div", {
+					className: "flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+					children: [/* @__PURE__ */ A(T, { className: "h-4 w-4 animate-spin" }), " Loading referenced looks…"]
+				}) : W.length === 0 ? /* @__PURE__ */ A("p", {
+					className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
+					children: "This piece has not been tagged in any looks yet."
+				}) : /* @__PURE__ */ A("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+					children: W.map((e) => /* @__PURE__ */ A(m, {
+						id: e.id,
+						title: e.title,
+						occasion: e.occasion,
+						imageFileId: e.image?.id,
+						likeCount: e.likeCount,
+						isLikedByMe: e.isLikedByMe,
+						isSavedByMe: e.isSavedByMe,
+						onOpen: () => I(`/looks/${e.id}`),
+						showActions: !0
+					}, e.id))
 				})]
-			}), L.isLoading ? /* @__PURE__ */ A("div", {
-				className: "flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
-				children: [/* @__PURE__ */ k(w, { className: "h-4 w-4 animate-spin" }), " Loading referenced looks…"]
-			}) : V.length === 0 ? /* @__PURE__ */ k("p", {
-				className: "rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary",
-				children: "This piece has not been tagged in any looks yet."
-			}) : /* @__PURE__ */ k("div", {
-				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
-				children: V.map((e) => /* @__PURE__ */ k(m, {
-					id: e.id,
-					title: e.title,
-					occasion: e.occasion,
-					imageFileId: e.image?.id,
-					likeCount: e.likeCount,
-					isLikedByMe: e.isLikedByMe,
-					isSavedByMe: e.isSavedByMe,
-					onOpen: () => F(`/looks/${e.id}`),
-					showActions: !0
-				}, e.id))
-			})]
-		})]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "mt-6",
+				children: /* @__PURE__ */ A(y, {
+					styleItemId: H.id,
+					currency: H.currency
+				}, `${L}:${R?.id}:${H.id}`)
+			})
+		]
 	});
 }
 //#endregion
-export { M as StyleItemDetailPage };
+export { N as StyleItemDetailPage };
 //# sourceMappingURL=StyleItemDetailPage.js.map

package/dist/coolandlovely/pages/items/StyleItemDetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StyleItemDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"sourcesContent":["/*\n Style Item Detail Page\n * @module coolandlovely/pages/items\n \n Renders a single catalogue piece (`cooStyleItem`) with edit + archive\n * (`cooArchiveStyleItem`) actions and its Burdenoff store listing state.\n \n A shopper who follows a Burdenoff store listing to a brand outside their\n * workspace finds no such piece in the workspace catalogue; the page then\n * falls back to the store-listed piece view, where they can buy it (BOFF-10017).\n /\n\nimport { useParams, useSearchParams } from 'react-router';\nimport { ArrowLeft, Pencil, Archive, Loader2, ChevronRight, Shapes } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { LookCard } from '../../components/LookCard';\nimport { TagList } from '../../components/TagList';\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { AddToCartPanel } from '../../components/AddToCartPanel';\nimport { StoreListingCard } from '../../components/StoreListingCard';\nimport { StoreListedPieceView } from './StoreListedPieceView';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useAssistantEntityName,\n useStyleItem,\n useArchiveStyleItem,\n useLooksWithItems,\n} from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function StyleItemDetailPage() {\n const { itemId } = useParams<{ itemId: string }>();\n // \"Shop the look\" links carry the look id so the look's creator earns the commission.\n const [searchParams] = useSearchParams();\n const fromLookId = searchParams.get('look');\n const { navigateTo } = useCoolAndLovely();\n const query = useStyleItem(itemId);\n const looksQuery = useLooksWithItems({ pagination: { limit: 100, offset: 0 } });\n const archive = useArchiveStyleItem();\n // Name the piece for the assistant's screen context (see useAssistantEntity).\n useAssistantEntityName(itemId, query.data?.name);\n\n if (query.isLoading) {\n return (\n <PageLayout title=\"Style item\">\n <LoadingView label=\"Loading item…\" />\n </PageLayout>\n );\n }\n\n // Not in this workspace's catalogue: a store shopper from outside the brand's workspace.\n if (!query.isError && !query.data) {\n return <StoreListedPieceView itemId={itemId} onRetry={() => void query.refetch()} />;\n }\n\n if (query.isError \|\| !query.data) {\n return (\n <PageLayout title=\"Style item\">\n <ErrorView title=\"Item not found\" onRetry={() => void query.refetch()} />\n </PageLayout>\n );\n }\n\n const item = query.data;\n const isArchived = item.status === 'RETIRED';\n const appearsInLooks = (looksQuery.data?.items ?? [])\n .filter((look) => look.items?.some((lookItem) => lookItem.styleItemId === item.id))\n .slice(0, 4);\n\n return (\n <PageLayout\n title={item.name}\n description={item.brand?.name ?? undefined}\n actions={\n <div className=\"flex flex-wrap items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/items')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Back\n </button>\n <AddToLookbookButton styleItemId={item.id} />\n <button\n type=\"button\"\n onClick={() => navigateTo(`/items/${item.id}/edit`)}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <Pencil className=\"h-4 w-4\" /> Edit\n </button>\n {!isArchived && (\n <button\n type=\"button\"\n disabled={archive.isPending}\n onClick={() => archive.mutate(item.id, { onSuccess: () => navigateTo('/items') })}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n >\n {archive.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Archive className=\"h-4 w-4\" />\n )}\n Archive\n </button>\n )}\n </div>\n }\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n {/ Product image /}\n <div className=\"lg:col-span-2\">\n <GlassCard treatment=\"glass\" className=\"group overflow-hidden p-0\">\n <Thumbnail\n icon={categoryIcon(item.category, 48)}\n seed={item.id}\n fileId={item.image?.id}\n alt={item.name}\n className=\"aspect-[4/5] w-full\"\n />\n {item.description && (\n <div className=\"p-6\">\n <p className=\"text-sm leading-relaxed text-text-secondary\">{item.description}</p>\n </div>\n )}\n </GlassCard>\n </div>\n\n {/ Product panel */}\n <div className=\"space-y-4\">\n <GlassCard treatment=\"glass\" className=\"space-y-5 p-6\">\n <div>\n <h2 className=\"text-2xl font-semibold leading-tight text-text-primary\">\n {item.name}\n </h2>\n {item.brand && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/brands/${item.brand?.id}`)}\n className=\"mt-1 inline-flex items-center gap-0.5 text-sm font-medium text-action-primary-bg hover:underline\"\n >\n {item.brand.name}\n <ChevronRight className=\"h-3.5 w-3.5\" />\n </button>\n )}\n <div className=\"mt-3 flex flex-wrap items-center justify-between gap-2\">\n <p className=\"text-3xl font-bold text-text-primary tabular-nums\">\n {formatPrice(item.price, item.currency)}\n <span className=\"ml-2 text-base font-medium text-text-secondary\">\n {item.currency}\n </span>\n </p>\n <StatusBadge status={item.status} />\n </div>\n </div>\n\n <div className=\"border-t border-border-seam\" />\n\n {item.colours.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Colours\n </p>\n <ColourSwatchRow colours={item.colours} max={12} />\n </div>\n )}\n\n {item.sizes.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Size\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {item.sizes.map((size) => (\n <span\n key={size}\n className=\"inline-flex min-w-9 items-center justify-center rounded-full border border-border-seam px-3 py-1 text-sm font-medium text-text-primary\"\n >\n {size}\n </span>\n ))}\n </div>\n </div>\n )}\n\n <div className=\"border-t border-border-seam pt-5\">\n <AddToCartPanel item={item} lookId={fromLookId} />\n </div>\n\n {item.materials.length > 0 && (\n <div>\n <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Materials\n </p>\n <p className=\"text-sm text-text-primary\">{item.materials.join(', ')}</p>\n </div>\n )}\n\n {item.tags.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Tags\n </p>\n <TagList tags={item.tags} max={12} tone=\"accent\" />\n </div>\n )}\n </GlassCard>\n\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Category</dt>\n <dd className=\"text-text-primary\">{titleCase(item.category)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">SKU</dt>\n <dd className=\"text-text-primary\">{item.sku ?? '—'}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Currency</dt>\n <dd className=\"text-text-primary\">{item.currency}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Created</dt>\n <dd className=\"text-text-primary\">\n {formatDate(item.createdAt, { hour: undefined, minute: undefined })}\n </dd>\n </div>\n </dl>\n </GlassCard>\n\n <StoreListingCard item={item} />\n\n {item.collection && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/collections/${item.collection?.id}`)}\n className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n >\n <Thumbnail\n icon={<Shapes className=\"h-5 w-5\" />}\n seed={item.collection.id}\n className=\"h-10 w-10 shrink-0\"\n />\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">\n {item.collection.name}\n </p>\n <p className=\"truncate text-xs text-text-secondary\">View collection</p>\n </div>\n </button>\n )}\n </div>\n </div>\n\n <section className=\"mt-8\">\n <div className=\"mb-3 flex items-center justify-between gap-3\">\n <h3 className=\"text-lg font-semibold text-text-primary\">Appears in looks</h3>\n {appearsInLooks.length > 0 && (\n <button\n type=\"button\"\n onClick={() => navigateTo('/looks')}\n className=\"inline-flex items-center gap-1 text-sm font-medium text-action-primary-bg hover:underline\"\n >\n View all <ChevronRight className=\"h-3.5 w-3.5\" />\n </button>\n )}\n </div>\n {looksQuery.isLoading ? (\n <div className=\"flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading referenced looks…\n </div>\n ) : appearsInLooks.length === 0 ? (\n <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n This piece has not been tagged in any looks yet.\n </p>\n ) : (\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n {appearsInLooks.map((look) => (\n <LookCard\n key={look.id}\n id={look.id}\n title={look.title}\n occasion={look.occasion}\n imageFileId={look.image?.id}\n likeCount={look.likeCount}\n isLikedByMe={look.isLikedByMe}\n isSavedByMe={look.isSavedByMe}\n onOpen={() => navigateTo(`/looks/${look.id}`)}\n showActions\n />\n ))}\n </div>\n )}\n </section>\n </PageLayout>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"StyleItemDetailPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"sourcesContent":["/*\n Style Item Detail Page\n * @module coolandlovely/pages/items\n \n Renders a single catalogue piece (`cooStyleItem`) with edit + archive\n * (`cooArchiveStyleItem`) actions and its Burdenoff store listing state.\n \n A shopper who follows a Burdenoff store listing to a brand outside their\n * workspace finds no such piece in the workspace catalogue; the page then\n * falls back to the store-listed piece view, where they can buy it (BOFF-10017).\n /\n\nimport { PricePanel } from '../../components/prices/PricePanel';\nimport { useParams, useSearchParams } from 'react-router';\nimport { ArrowLeft, Pencil, Archive, Loader2, ChevronRight, Shapes } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { LoadingView, ErrorView } from '../../components/StateViews';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { LookCard } from '../../components/LookCard';\nimport { TagList } from '../../components/TagList';\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { AddToLookbookButton } from '../../components/AddToLookbookButton';\nimport { AddToCartPanel } from '../../components/AddToCartPanel';\nimport { StoreListingCard } from '../../components/StoreListingCard';\nimport { StoreListedPieceView } from './StoreListedPieceView';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport {\n useAssistantEntityName,\n useStyleItem,\n useArchiveStyleItem,\n useLooksWithItems,\n} from '../../hooks';\nimport { categoryIcon } from '../../utils/icons';\nimport { formatPrice, formatDate, titleCase } from '../../utils/formatters';\n\nexport function StyleItemDetailPage() {\n const { itemId } = useParams<{ itemId: string }>();\n // \"Shop the look\" links carry the look id so the look's creator earns the commission.\n const [searchParams] = useSearchParams();\n const fromLookId = searchParams.get('look');\n const { navigateTo, workspaceId, currentUser } = useCoolAndLovely();\n const query = useStyleItem(itemId);\n const looksQuery = useLooksWithItems({ pagination: { limit: 100, offset: 0 } });\n const archive = useArchiveStyleItem();\n // Name the piece for the assistant's screen context (see useAssistantEntity).\n useAssistantEntityName(itemId, query.data?.name);\n\n if (query.isLoading) {\n return (\n <PageLayout title=\"Style item\">\n <LoadingView label=\"Loading item…\" />\n </PageLayout>\n );\n }\n\n // Not in this workspace's catalogue: a store shopper from outside the brand's workspace.\n if (!query.isError && !query.data) {\n return <StoreListedPieceView itemId={itemId} onRetry={() => void query.refetch()} />;\n }\n\n if (query.isError \|\| !query.data) {\n return (\n <PageLayout title=\"Style item\">\n <ErrorView title=\"Item not found\" onRetry={() => void query.refetch()} />\n </PageLayout>\n );\n }\n\n const item = query.data;\n const isArchived = item.status === 'RETIRED';\n const appearsInLooks = (looksQuery.data?.items ?? [])\n .filter((look) => look.items?.some((lookItem) => lookItem.styleItemId === item.id))\n .slice(0, 4);\n\n return (\n <PageLayout\n title={item.name}\n description={item.brand?.name ?? undefined}\n actions={\n <div className=\"flex flex-wrap items-center gap-2\">\n <button\n type=\"button\"\n onClick={() => navigateTo('/items')}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n >\n <ArrowLeft className=\"h-4 w-4\" /> Back\n </button>\n <AddToLookbookButton styleItemId={item.id} />\n <button\n type=\"button\"\n onClick={() => navigateTo(`/items/${item.id}/edit`)}\n className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:bg-action-primary-bg/90\"\n >\n <Pencil className=\"h-4 w-4\" /> Edit\n </button>\n {!isArchived && (\n <button\n type=\"button\"\n disabled={archive.isPending}\n onClick={() => archive.mutate(item.id, { onSuccess: () => navigateTo('/items') })}\n className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:opacity-50\"\n >\n {archive.isPending ? (\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n ) : (\n <Archive className=\"h-4 w-4\" />\n )}\n Archive\n </button>\n )}\n </div>\n }\n >\n <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n {/ Product image /}\n <div className=\"lg:col-span-2\">\n <GlassCard treatment=\"glass\" className=\"group overflow-hidden p-0\">\n <Thumbnail\n icon={categoryIcon(item.category, 48)}\n seed={item.id}\n fileId={item.image?.id}\n alt={item.name}\n className=\"aspect-[4/5] w-full\"\n />\n {item.description && (\n <div className=\"p-6\">\n <p className=\"text-sm leading-relaxed text-text-secondary\">{item.description}</p>\n </div>\n )}\n </GlassCard>\n </div>\n\n {/ Product panel */}\n <div className=\"space-y-4\">\n <GlassCard treatment=\"glass\" className=\"space-y-5 p-6\">\n <div>\n <h2 className=\"text-2xl font-semibold leading-tight text-text-primary\">\n {item.name}\n </h2>\n {item.brand && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/brands/${item.brand?.id}`)}\n className=\"mt-1 inline-flex items-center gap-0.5 text-sm font-medium text-action-primary-bg hover:underline\"\n >\n {item.brand.name}\n <ChevronRight className=\"h-3.5 w-3.5\" />\n </button>\n )}\n <div className=\"mt-3 flex flex-wrap items-center justify-between gap-2\">\n <p className=\"text-3xl font-bold text-text-primary tabular-nums\">\n {formatPrice(item.price, item.currency)}\n <span className=\"ml-2 text-base font-medium text-text-secondary\">\n {item.currency}\n </span>\n </p>\n <StatusBadge status={item.status} />\n </div>\n </div>\n\n <div className=\"border-t border-border-seam\" />\n\n {item.colours.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Colours\n </p>\n <ColourSwatchRow colours={item.colours} max={12} />\n </div>\n )}\n\n {item.sizes.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Size\n </p>\n <div className=\"flex flex-wrap gap-2\">\n {item.sizes.map((size) => (\n <span\n key={size}\n className=\"inline-flex min-w-9 items-center justify-center rounded-full border border-border-seam px-3 py-1 text-sm font-medium text-text-primary\"\n >\n {size}\n </span>\n ))}\n </div>\n </div>\n )}\n\n <div className=\"border-t border-border-seam pt-5\">\n <AddToCartPanel item={item} lookId={fromLookId} />\n </div>\n\n {item.materials.length > 0 && (\n <div>\n <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Materials\n </p>\n <p className=\"text-sm text-text-primary\">{item.materials.join(', ')}</p>\n </div>\n )}\n\n {item.tags.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n Tags\n </p>\n <TagList tags={item.tags} max={12} tone=\"accent\" />\n </div>\n )}\n </GlassCard>\n\n <GlassCard treatment=\"plain\" className=\"p-5\">\n <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">Details</h3>\n <dl className=\"space-y-2 text-sm\">\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Category</dt>\n <dd className=\"text-text-primary\">{titleCase(item.category)}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">SKU</dt>\n <dd className=\"text-text-primary\">{item.sku ?? '—'}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Currency</dt>\n <dd className=\"text-text-primary\">{item.currency}</dd>\n </div>\n <div className=\"flex justify-between gap-2\">\n <dt className=\"text-text-secondary\">Created</dt>\n <dd className=\"text-text-primary\">\n {formatDate(item.createdAt, { hour: undefined, minute: undefined })}\n </dd>\n </div>\n </dl>\n </GlassCard>\n\n <StoreListingCard item={item} />\n\n {item.collection && (\n <button\n type=\"button\"\n onClick={() => navigateTo(`/collections/${item.collection?.id}`)}\n className=\"flex w-full items-center gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken/50\"\n >\n <Thumbnail\n icon={<Shapes className=\"h-5 w-5\" />}\n seed={item.collection.id}\n className=\"h-10 w-10 shrink-0\"\n />\n <div className=\"min-w-0\">\n <p className=\"truncate text-sm font-medium text-text-primary\">\n {item.collection.name}\n </p>\n <p className=\"truncate text-xs text-text-secondary\">View collection</p>\n </div>\n </button>\n )}\n </div>\n </div>\n\n <section className=\"mt-8\">\n <div className=\"mb-3 flex items-center justify-between gap-3\">\n <h3 className=\"text-lg font-semibold text-text-primary\">Appears in looks</h3>\n {appearsInLooks.length > 0 && (\n <button\n type=\"button\"\n onClick={() => navigateTo('/looks')}\n className=\"inline-flex items-center gap-1 text-sm font-medium text-action-primary-bg hover:underline\"\n >\n View all <ChevronRight className=\"h-3.5 w-3.5\" />\n </button>\n )}\n </div>\n {looksQuery.isLoading ? (\n <div className=\"flex items-center gap-2 rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n <Loader2 className=\"h-4 w-4 animate-spin\" /> Loading referenced looks…\n </div>\n ) : appearsInLooks.length === 0 ? (\n <p className=\"rounded-lg border border-border-seam bg-bg-surface p-4 text-sm text-text-secondary\">\n This piece has not been tagged in any looks yet.\n </p>\n ) : (\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n {appearsInLooks.map((look) => (\n <LookCard\n key={look.id}\n id={look.id}\n title={look.title}\n occasion={look.occasion}\n imageFileId={look.image?.id}\n likeCount={look.likeCount}\n isLikedByMe={look.isLikedByMe}\n isSavedByMe={look.isSavedByMe}\n onOpen={() => navigateTo(`/looks/${look.id}`)}\n showActions\n />\n ))}\n </div>\n )}\n </section>\n <div className=\"mt-6\">\n <PricePanel\n key={`${workspaceId}:${currentUser?.id}:${item.id}`}\n styleItemId={item.id}\n currency={item.currency}\n />\n </div>\n </PageLayout>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,IAAsB;CACpC,IAAM,EAAE,cAAW,EAA8B,GAE3C,CAAC,KAAgB,EAAgB,GACjC,IAAa,EAAa,IAAI,MAAM,GACpC,EAAE,eAAY,gBAAa,mBAAgB,EAAiB,GAC5D,IAAQ,EAAa,CAAM,GAC3B,IAAa,EAAkB,EAAE,YAAY;EAAE,OAAO;EAAK,QAAQ;CAAE,EAAE,CAAC,GACxE,IAAU,EAAoB;CAIpC,IAFA,EAAuB,GAAQ,EAAM,MAAM,IAAI,GAE3C,EAAM,WACR,OACE,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD,EAAa,OAAM,gBAAiB,CAAA;CAC1B,CAAA;CAKhB,IAAI,CAAC,EAAM,WAAW,CAAC,EAAM,MAC3B,OAAO,kBAAC,GAAD;EAA8B;EAAQ,eAAe,KAAK,EAAM,QAAQ;CAAI,CAAA;CAGrF,IAAI,EAAM,WAAW,CAAC,EAAM,MAC1B,OACE,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD;GAAW,OAAM;GAAiB,eAAe,KAAK,EAAM,QAAQ;EAAI,CAAA;CAC9D,CAAA;CAIhB,IAAM,IAAO,EAAM,MACb,IAAa,EAAK,WAAW,WAC7B,KAAkB,EAAW,MAAM,SAAS,CAAC,EAAA,CAChD,QAAQ,MAAS,EAAK,OAAO,MAAM,MAAa,EAAS,gBAAgB,EAAK,EAAE,CAAC,CAAC,CAClF,MAAM,GAAG,CAAC;CAEb,OACE,kBAAC,GAAD;EACE,OAAO,EAAK;EACZ,aAAa,EAAK,OAAO,QAAQ,KAAA;EACjC,SACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,QAAQ;KAClC,WAAU;eAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA,GAAC,OAC3B;;IACR,kBAAC,GAAD,EAAqB,aAAa,EAAK,GAAK,CAAA;IAC5C,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,UAAU,EAAK,GAAG,MAAM;KAClD,WAAU;eAHZ,CAKE,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA,GAAC,OACxB;;IACP,CAAC,KACA,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,EAAQ;KAClB,eAAe,EAAQ,OAAO,EAAK,IAAI,EAAE,iBAAiB,EAAW,QAAQ,EAAE,CAAC;KAChF,WAAU;eAJZ,CAMG,EAAQ,YACP,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,IAE3C,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA,GAC9B,SAEI;;GAEP;;YAnCT;GAsCE,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAW,WAAU;MAAQ,WAAU;gBAAvC,CACE,kBAAC,GAAD;OACE,MAAM,EAAa,EAAK,UAAU,EAAE;OACpC,MAAM,EAAK;OACX,QAAQ,EAAK,OAAO;OACpB,KAAK,EAAK;OACV,WAAU;MACX,CAAA,GACA,EAAK,eACJ,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAA+C,EAAK;OAAe,CAAA;MAC7E,CAAA,CAEE;;IACR,CAAA,GAGL,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OAAW,WAAU;OAAQ,WAAU;iBAAvC;QACE,kBAAC,OAAD,EAAA,UAAA;SACE,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAK;SACJ,CAAA;SACH,EAAK,SACJ,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,EAAW,WAAW,EAAK,OAAO,IAAI;UACrD,WAAU;oBAHZ,CAKG,EAAK,MAAM,MACZ,kBAAC,GAAD,EAAc,WAAU,cAAe,CAAA,CACjC;;SAEV,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAb,CACG,EAAY,EAAK,OAAO,EAAK,QAAQ,GACtC,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAK;WACF,CAAA,CACL;cACH,kBAAC,GAAD,EAAa,QAAQ,EAAK,OAAS,CAAA,CAChC;;QACF,EAAA,CAAA;QAEL,kBAAC,OAAD,EAAK,WAAU,8BAA+B,CAAA;QAE7C,EAAK,QAAQ,SAAS,KACrB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAuE;QAEjF,CAAA,GACH,kBAAC,GAAD;SAAiB,SAAS,EAAK;SAAS,KAAK;QAAK,CAAA,CAC/C,EAAA,CAAA;QAGN,EAAK,MAAM,SAAS,KACnB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAuE;QAEjF,CAAA,GACH,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAK,MAAM,KAAK,MACf,kBAAC,QAAD;UAEE,WAAU;oBAET;SACG,GAJC,CAID,CACP;QACE,CAAA,CACF,EAAA,CAAA;QAGP,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,GAAD;UAAsB;UAAM,QAAQ;SAAa,CAAA;QAC9C,CAAA;QAEJ,EAAK,UAAU,SAAS,KACvB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAuE;QAEjF,CAAA,GACH,kBAAC,KAAD;SAAG,WAAU;mBAA6B,EAAK,UAAU,KAAK,IAAI;QAAK,CAAA,CACpE,EAAA,CAAA;QAGN,EAAK,KAAK,SAAS,KAClB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAuE;QAEjF,CAAA,GACH,kBAAC,GAAD;SAAS,MAAM,EAAK;SAAM,KAAK;SAAI,MAAK;QAAU,CAAA,CAC/C,EAAA,CAAA;OAEE;;MAEX,kBAAC,GAAD;OAAW,WAAU;OAAQ,WAAU;iBAAvC,CACE,kBAAC,MAAD;QAAI,WAAU;kBAA+C;OAAW,CAAA,GACxE,kBAAC,MAAD;QAAI,WAAU;kBAAd;SACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBAAsB;UAAY,CAAA,GAChD,kBAAC,MAAD;WAAI,WAAU;qBAAqB,EAAU,EAAK,QAAQ;UAAM,CAAA,CAC7D;;SACL,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBAAsB;UAAO,CAAA,GAC3C,kBAAC,MAAD;WAAI,WAAU;qBAAqB,EAAK,OAAO;UAAQ,CAAA,CACpD;;SACL,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBAAsB;UAAY,CAAA,GAChD,kBAAC,MAAD;WAAI,WAAU;qBAAqB,EAAK;UAAa,CAAA,CAClD;;SACL,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBAAsB;UAAW,CAAA,GAC/C,kBAAC,MAAD;WAAI,WAAU;qBACX,EAAW,EAAK,WAAW;YAAE,MAAM,KAAA;YAAW,QAAQ,KAAA;WAAU,CAAC;UAChE,CAAA,CACD;;QACH;SACK;;MAEX,kBAAC,GAAD,EAAwB,QAAO,CAAA;MAE9B,EAAK,cACJ,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAW,gBAAgB,EAAK,YAAY,IAAI;OAC/D,WAAU;iBAHZ,CAKE,kBAAC,GAAD;QACE,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;QACnC,MAAM,EAAK,WAAW;QACtB,WAAU;OACX,CAAA,GACD,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAK,WAAW;QAChB,CAAA,GACH,kBAAC,KAAD;SAAG,WAAU;mBAAuC;QAAkB,CAAA,CACnE;SACC;;KAEP;MACF;;GAEL,kBAAC,WAAD;IAAS,WAAU;cAAnB,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA0C;KAAoB,CAAA,GAC3E,EAAe,SAAS,KACvB,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAW,QAAQ;MAClC,WAAU;gBAHZ,CAIC,aACU,kBAAC,GAAD,EAAc,WAAU,cAAe,CAAA,CAC1C;OAEP;QACJ,EAAW,YACV,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,GAAC,4BACzC;SACH,EAAe,WAAW,IAC5B,kBAAC,KAAD;KAAG,WAAU;eAAqF;IAE/F,CAAA,IAEH,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAe,KAAK,MACnB,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,OAAO,EAAK;MACZ,UAAU,EAAK;MACf,aAAa,EAAK,OAAO;MACzB,WAAW,EAAK;MAChB,aAAa,EAAK;MAClB,aAAa,EAAK;MAClB,cAAc,EAAW,UAAU,EAAK,IAAI;MAC5C,aAAA;KACD,GAVM,EAAK,EAUX,CACF;IACE,CAAA,CAEA;;GACT,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAEE,aAAa,EAAK;KAClB,UAAU,EAAK;IAChB,GAHM,GAAG,EAAY,GAAG,GAAa,GAAG,GAAG,EAAK,IAGhD;GACE,CAAA;EACK;;AAEhB"}

package/dist/coolandlovely/pages/lookbooks/LookbookDetailPage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LookbookDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/lookbooks/LookbookDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;~~AA6BH~~,wBAAgB,kBAAkB,~~gCAsSjC~~"}
1	+ {"version":3,"file":"LookbookDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/lookbooks/LookbookDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA0BH,wBAAgB,kBAAkB,gCAgOjC"}