@vtex/faststore 0.0.7 → 0.0.10

package/dist/matter/order-placed/order-placed.js

@@ -0,0 +1,452 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
+import { formatPrice } from "../cart/cart.js";
+import { substituteTemplate } from "../../utils/substitute-template.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CombinedGraphQLErrors } from "@apollo/client/errors";
+//#region src/matter/order-placed/order-placed.tsx
+/**
+* Order Placed matters (docs/features/order-placed/rfc-particles.md, Parts, part 2).
+* `OrderPlacedRoot` owns the placed order: it reads `Query.order(orderGroup: $orderGroup)` once through
+* its own fragment and provides it as the `order-placed` context, or shows an authored message in
+* place of its children when the read is refused or fails. The leaves read the order's own record,
+* never the live cart or profile, so a confirmation reopened later shows what the purchase carried.
+*/
+const rootFragment = `
+  fragment OrderPlacedRootData on Query {
+    order(orderGroup: $orderGroup) {
+      __typename
+      id
+      reference
+      status
+      total {
+        amount
+        currencyCode
+      }
+      totals {
+        id
+        name
+        value {
+          amount
+          currencyCode
+        }
+      }
+    }
+  }
+`;
+const customerFragment = `
+  fragment OrderPlacedCustomerData on Query {
+    order(orderGroup: $orderGroup) {
+      __typename
+      id
+      customer {
+        firstName
+        lastName
+        email
+        phone
+        document
+      }
+    }
+  }
+`;
+const ORDER_PLACED_UNSET = Symbol("OrderPlacedContextUnset");
+const OrderPlacedContext = createContext(ORDER_PLACED_UNSET);
+/** The placed order, its loading flag and the root query's error, from the nearest OrderPlacedRoot. */
+function useOrderPlaced() {
+	const ctx = useContext(OrderPlacedContext);
+	if (ctx === ORDER_PLACED_UNSET) throw new Error("useOrderPlaced() must be used inside an <OrderPlacedRoot> subtree.");
+	return ctx;
+}
+/**
+* The API refuses the read with a top-level `UNAUTHORIZED`: without both checkout cookies, and when
+* the order system answers 401 or 403, as it does after 15 minutes. Under `errorPolicy: 'all'` the
+* refusal also carries `order: null`, so it is checked before the order is.
+*/
+function isRefusal(error) {
+	if (!error || !CombinedGraphQLErrors.is(error)) return false;
+	return error.errors.some((graphQLError) => graphQLError.extensions?.code === "UNAUTHORIZED");
+}
+function resolveRootState({ order, loading, error }) {
+	if (isRefusal(error)) return "refused";
+	if (loading && order == null) return "loading";
+	if (order == null) return "unresolved";
+	return "order";
+}
+function isZero(money) {
+	return Number(money.amount) === 0;
+}
+function formatMoney(money, locale) {
+	return formatPrice(Number(money.amount), locale, money.currencyCode);
+}
+const OrderPlacedRootDefinition = defineComponent({
+	name: "OrderPlacedRoot",
+	importPath: "@vtex/faststore/components",
+	component: OrderPlacedRoot,
+	fragment: rootFragment,
+	fetchStrategy: "reactive",
+	skeleton: OrderPlacedRootSkeleton,
+	providesContext: "order-placed",
+	editor: {
+		label: "Order Placed Root",
+		category: "commerce"
+	},
+	schema: {
+		refusedOrderLabel: {
+			type: "string",
+			default: "This order can no longer be shown here",
+			label: "Refused order label"
+		},
+		unresolvedOrderLabel: {
+			type: "string",
+			default: "Could not load this order",
+			label: "Unresolved order label"
+		}
+	},
+	guideline: "Owner of an order confirmation page: reads the placed order (Query.order, keyed on the order group from the route) once and provides it as the order-placed context to OrderPlacedStatus, OrderPlacedReference, OrderPlacedCustomer, OrderPlacedTotals and the other order-placed blocks composed as its children. Renders its children only once the order resolves. While the read is in flight it shows a skeleton; when the API refuses the read (after 15 minutes, or from another browser) it shows refusedOrderLabel; when the read fails or the order group resolves to no order it shows unresolvedOrderLabel. Each message replaces every child. Never reads the cart or the live profile. See order-placed.md."
+});
+const OrderPlacedStatusDefinition = defineComponent({
+	name: "OrderPlacedStatus",
+	importPath: "@vtex/faststore/components",
+	component: OrderPlacedStatus,
+	requiresContext: "order-placed",
+	editor: {
+		label: "Order Placed Status",
+		category: "commerce"
+	},
+	schema: {
+		approvedTitle: {
+			type: "string",
+			default: "Your order is confirmed",
+			label: "Approved title"
+		},
+		approvedMessage: {
+			type: "string",
+			default: "Your payment was approved.",
+			label: "Approved message"
+		},
+		pendingTitle: {
+			type: "string",
+			default: "We're confirming your payment",
+			label: "Pending title"
+		},
+		pendingMessage: {
+			type: "string",
+			default: "Your order was placed, and its payment is still being processed or reviewed.",
+			label: "Pending message"
+		},
+		deniedTitle: {
+			type: "string",
+			default: "Your payment was not approved",
+			label: "Denied title"
+		},
+		deniedMessage: {
+			type: "string",
+			default: "This purchase did not go through. You can place a new order with another payment method.",
+			label: "Denied message"
+		}
+	},
+	guideline: "The payment outcome of the placed order, as a banner with a title and a message: approved, pending (which also covers a payment under anti-fraud review) or denied. Renders nothing when the outcome is unknown, so the page shows the order without asserting success or failure. Author the title and message of each outcome through the props (approvedTitle, approvedMessage, pendingTitle, pendingMessage, deniedTitle, deniedMessage); a blank value omits its line. Marks the outcome with data-fs-order-placed-status-approved, -pending or -denied, so the page styles each tone. An Icon composed as its child shows on every outcome, so never compose one that implies success. Must be inside OrderPlacedRoot. See order-placed.md."
+});
+const OrderPlacedReferenceDefinition = defineComponent({
+	name: "OrderPlacedReference",
+	importPath: "@vtex/faststore/components",
+	component: OrderPlacedReference,
+	requiresContext: "order-placed",
+	editor: {
+		label: "Order Placed Reference",
+		category: "commerce"
+	},
+	schema: { template: {
+		type: "string",
+		default: "Order #{reference}",
+		label: "Template"
+	} },
+	guideline: "The order number the shopper gives support: the order group, one per purchase even when it was split across sellers. Set template with a {reference} placeholder (e.g. \"Order #{reference}\"). Plain text, so it can be selected and copied. Must be inside OrderPlacedRoot. See order-placed.md."
+});
+const OrderPlacedCustomerDefinition = defineComponent({
+	name: "OrderPlacedCustomer",
+	importPath: "@vtex/faststore/components",
+	component: OrderPlacedCustomer,
+	fragment: customerFragment,
+	fetchStrategy: "reactive",
+	requiresContext: "order-placed",
+	editor: {
+		label: "Order Placed Customer",
+		category: "commerce"
+	},
+	schema: {
+		nameLabel: {
+			type: "string",
+			default: "Name",
+			label: "Name label"
+		},
+		emailLabel: {
+			type: "string",
+			default: "Email",
+			label: "Email label"
+		},
+		phoneLabel: {
+			type: "string",
+			default: "Phone",
+			label: "Phone label"
+		},
+		documentLabel: {
+			type: "string",
+			default: "Document",
+			label: "Document label"
+		}
+	},
+	guideline: "Who the order is for, as the order recorded them at placement, never the live profile: name, email, phone and document as label/value rows, each left out when empty. Selects the customer through its own fragment, so a page without this block never fetches the customer. Shows the values as the order system returns them, masked included (e.g. \"J*** D***\"). Must be inside OrderPlacedRoot. See order-placed.md."
+});
+const OrderPlacedTotalsDefinition = defineComponent({
+	name: "OrderPlacedTotals",
+	importPath: "@vtex/faststore/components",
+	component: OrderPlacedTotals,
+	requiresContext: "order-placed",
+	editor: {
+		label: "Order Placed Totals",
+		category: "commerce"
+	},
+	schema: {
+		itemsLabel: {
+			type: "string",
+			default: "Subtotal",
+			label: "Items label"
+		},
+		shippingLabel: {
+			type: "string",
+			default: "Shipping",
+			label: "Shipping label"
+		},
+		discountsLabel: {
+			type: "string",
+			default: "Discounts",
+			label: "Discounts label"
+		},
+		taxLabel: {
+			type: "string",
+			default: "Tax",
+			label: "Tax label"
+		},
+		totalLabel: {
+			type: "string",
+			default: "Total",
+			label: "Total label"
+		},
+		shippingZeroLabel: {
+			type: "string",
+			label: "Shipping zero label"
+		}
+	},
+	guideline: "What the shopper was charged: each money line of the placed order in the order the API returns them (subtotal, discounts, shipping, tax, any custom tax under its own name), then the total, each in the order's own currency. A zero discount line is left out; set shippingZeroLabel (e.g. \"Free\") to show it instead of a zero shipping value. No total row when the order has no total. Reads the order, never the cart, so it composes no CartTotalizerLine. Must be inside OrderPlacedRoot. See order-placed.md."
+});
+/** Placeholder for the order's blocks while the read is in flight. */
+function OrderPlacedRootSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": "true",
+		"data-fs-order-placed-root-skeleton": "",
+		children: [
+			/* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx("span", {})
+		]
+	});
+}
+/** Provides the placed order to its descendants, or a message in their place. Mirrors CartRoot's read side. */
+function OrderPlacedRoot({ className, children, refusedOrderLabel = "This order can no longer be shown here", unresolvedOrderLabel = "Could not load this order", $data: $dataProp }) {
+	const order = useDataOverride($dataProp) ?? null;
+	const { loading, error } = useContext(ReactiveRootContext);
+	const value = useMemo(() => ({
+		order,
+		loading,
+		error: error ?? null
+	}), [
+		order,
+		loading,
+		error
+	]);
+	const state = resolveRootState(value);
+	return /* @__PURE__ */ jsx(OrderPlacedContext, {
+		value,
+		children: /* @__PURE__ */ jsxs("div", {
+			className,
+			"data-fs-order-placed-root": "",
+			children: [
+				state === "order" ? children : null,
+				state === "loading" ? /* @__PURE__ */ jsx(OrderPlacedRootSkeleton, {}) : null,
+				state === "refused" ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					"data-fs-order-placed-root-refused": "",
+					children: refusedOrderLabel
+				}) : null,
+				state === "unresolved" ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					"data-fs-order-placed-root-unresolved": "",
+					children: unresolvedOrderLabel
+				}) : null
+			]
+		})
+	});
+}
+const TONE_ATTRIBUTES = {
+	approved: { "data-fs-order-placed-status-approved": "" },
+	pending: { "data-fs-order-placed-status-pending": "" },
+	denied: { "data-fs-order-placed-status-denied": "" }
+};
+/**
+* The outcome banner. `UNKNOWN` (seller orders that disagree, or a state the mapping does not
+* classify) renders nothing, so the page shows the order without asserting success or failure.
+*/
+function OrderPlacedStatus({ className, children, approvedTitle = "Your order is confirmed", approvedMessage = "Your payment was approved.", pendingTitle = "We're confirming your payment", pendingMessage = "Your order was placed, and its payment is still being processed or reviewed.", deniedTitle = "Your payment was not approved", deniedMessage = "This purchase did not go through. You can place a new order with another payment method." }) {
+	const { order } = useOrderPlaced();
+	const status = order?.status;
+	let copy;
+	if (status === "APPROVED") copy = {
+		tone: "approved",
+		title: approvedTitle,
+		message: approvedMessage
+	};
+	else if (status === "PENDING") copy = {
+		tone: "pending",
+		title: pendingTitle,
+		message: pendingMessage
+	};
+	else if (status === "DENIED") copy = {
+		tone: "denied",
+		title: deniedTitle,
+		message: deniedMessage
+	};
+	else return null;
+	return /* @__PURE__ */ jsxs("output", {
+		className,
+		"data-fs-order-placed-status": "",
+		...TONE_ATTRIBUTES[copy.tone],
+		children: [
+			children,
+			copy.title?.trim() ? /* @__PURE__ */ jsx("span", {
+				"data-fs-order-placed-status-title": "",
+				children: copy.title
+			}) : null,
+			copy.message?.trim() ? /* @__PURE__ */ jsx("span", {
+				"data-fs-order-placed-status-message": "",
+				children: copy.message
+			}) : null
+		]
+	});
+}
+/**
+* The order group, the one reference a split purchase has, so support resolves the whole purchase
+* from it rather than one seller's order.
+*/
+function OrderPlacedReference({ className, template = "Order #{reference}" }) {
+	const { order } = useOrderPlaced();
+	if (!order) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className,
+		"data-fs-order-placed-reference": "",
+		children: substituteTemplate(template, { reference: order.reference })
+	});
+}
+/**
+* The customer as the order recorded them, never the live profile: masked values show as the order
+* system returns them, and an empty field is left out.
+*/
+function OrderPlacedCustomer({ className, nameLabel = "Name", emailLabel = "Email", phoneLabel = "Phone", documentLabel = "Document", $data: $dataProp }) {
+	useOrderPlaced();
+	const customer = useDataOverride($dataProp)?.customer;
+	if (!customer) return null;
+	const rows = [
+		{
+			key: "name",
+			term: nameLabel,
+			value: [customer.firstName, customer.lastName].map((part) => part?.trim()).filter(Boolean).join(" ")
+		},
+		{
+			key: "email",
+			term: emailLabel,
+			value: customer.email ?? ""
+		},
+		{
+			key: "phone",
+			term: phoneLabel,
+			value: customer.phone ?? ""
+		},
+		{
+			key: "document",
+			term: documentLabel,
+			value: customer.document ?? ""
+		}
+	].filter((row) => row.value.trim() !== "");
+	if (rows.length === 0) return null;
+	return /* @__PURE__ */ jsx("dl", {
+		className,
+		"data-fs-order-placed-customer": "",
+		children: rows.map(({ key, term, value }) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", {
+			"data-fs-order-placed-customer-term": "",
+			children: term
+		}), /* @__PURE__ */ jsx("dd", {
+			"data-fs-order-placed-customer-value": "",
+			children: value
+		})] }, key))
+	});
+}
+/**
+* The order's money lines in API order, then the total, each in its own currency. `Items`,
+* `Shipping`, `Discounts` and `Tax` take the authored label, since the order system names them in
+* English; any other line (a custom tax) shows its own name. The API sums lines on id and name, so
+* two custom taxes that share an id are two rows.
+*/
+function OrderPlacedTotals({ className, itemsLabel = "Subtotal", shippingLabel = "Shipping", discountsLabel = "Discounts", taxLabel = "Tax", totalLabel = "Total", shippingZeroLabel }) {
+	const { order } = useOrderPlaced();
+	const { locale } = useStorefrontContext();
+	if (!order) return null;
+	const labels = /* @__PURE__ */ new Map([
+		["Items", itemsLabel],
+		["Shipping", shippingLabel],
+		["Discounts", discountsLabel],
+		["Tax", taxLabel]
+	]);
+	const rows = [];
+	order.totals.forEach((line, index) => {
+		if (line.id === "Discounts" && isZero(line.value)) return;
+		const value = line.id === "Shipping" && isZero(line.value) && shippingZeroLabel?.trim() ? shippingZeroLabel : formatMoney(line.value, locale);
+		rows.push({
+			key: `${line.id}:${line.name}:${index}`,
+			term: labels.get(line.id) ?? line.name,
+			value,
+			line: line.id
+		});
+	});
+	return /* @__PURE__ */ jsxs("dl", {
+		className,
+		"data-fs-order-placed-totals": "",
+		children: [rows.map(({ key, term, value, line }) => /* @__PURE__ */ jsxs("div", {
+			"data-fs-order-placed-totals-line": line,
+			children: [/* @__PURE__ */ jsx("dt", {
+				"data-fs-order-placed-totals-term": "",
+				children: term
+			}), /* @__PURE__ */ jsx("dd", {
+				"data-fs-order-placed-totals-value": "",
+				children: value
+			})]
+		}, key)), order.total ? /* @__PURE__ */ jsxs("div", {
+			"data-fs-order-placed-totals-total": "",
+			children: [/* @__PURE__ */ jsx("dt", {
+				"data-fs-order-placed-totals-term": "",
+				children: totalLabel
+			}), /* @__PURE__ */ jsx("dd", {
+				"data-fs-order-placed-totals-value": "",
+				children: formatMoney(order.total, locale)
+			})]
+		}) : null]
+	});
+}
+//#endregion
+export { OrderPlacedCustomer, OrderPlacedCustomerDefinition, OrderPlacedReference, OrderPlacedReferenceDefinition, OrderPlacedRoot, OrderPlacedRootDefinition, OrderPlacedRootSkeleton, OrderPlacedStatus, OrderPlacedStatusDefinition, OrderPlacedTotals, OrderPlacedTotalsDefinition, useOrderPlaced };
+
+//# sourceMappingURL=order-placed.js.map

package/dist/matter/order-placed/order-placed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-placed.js","names":[],"sources":["../../../src/matter/order-placed/order-placed.tsx"],"sourcesContent":["'use client';\n\nimport type { ErrorLike } from '@apollo/client';\nimport { CombinedGraphQLErrors } from '@apollo/client/errors';\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { ReactiveRootContext } from '../../sdk/data/page-reactive-data-root.js';\nimport { substituteTemplate } from '../../utils/substitute-template.js';\nimport { formatPrice } from '../cart/cart.js';\n\n/**\n * Order Placed matters (docs/features/order-placed/rfc-particles.md, Parts, part 2).\n * `OrderPlacedRoot` owns the placed order: it reads `Query.order(orderGroup: $orderGroup)` once through\n * its own fragment and provides it as the `order-placed` context, or shows an authored message in\n * place of its children when the read is refused or fails. The leaves read the order's own record,\n * never the live cart or profile, so a confirmation reopened later shows what the purchase carried.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragments\n// ---------------------------------------------------------------------------\n\nconst rootFragment = /* GraphQL */ `\n  fragment OrderPlacedRootData on Query {\n    order(orderGroup: $orderGroup) {\n      __typename\n      id\n      reference\n      status\n      total {\n        amount\n        currencyCode\n      }\n      totals {\n        id\n        name\n        value {\n          amount\n          currencyCode\n        }\n      }\n    }\n  }\n`;\n\nconst customerFragment = /* GraphQL */ `\n  fragment OrderPlacedCustomerData on Query {\n    order(orderGroup: $orderGroup) {\n      __typename\n      id\n      customer {\n        firstName\n        lastName\n        email\n        phone\n        document\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** `amount` is the API's `Decimal`, a string (\"12.50\"). */\nexport type OrderPlacedMoney = { amount: string; currencyCode: string };\n\nexport type OrderPlacedStatusValue = 'APPROVED' | 'PENDING' | 'DENIED' | 'UNKNOWN';\n\nexport type OrderPlacedTotalLine = { id: string; name: string; value: OrderPlacedMoney };\n\n/**\n * The `$data` slice forwarded by the reactive runtime: the unwrapped `order` field, never a\n * `{ order: … }` wrapper (ADR-0015). `null` when the order group does not resolve.\n */\nexport type OrderPlacedData = {\n  id: string;\n  reference: string;\n  status: OrderPlacedStatusValue;\n  total?: OrderPlacedMoney | null;\n  totals: readonly OrderPlacedTotalLine[];\n} | null;\n\n/** `OrderPlacedCustomer`'s own `$data` slice, the unwrapped `order` field of its fragment. */\nexport type OrderPlacedCustomerData = {\n  customer?: {\n    firstName?: string | null;\n    lastName?: string | null;\n    email?: string | null;\n    phone?: string | null;\n    document?: string | null;\n  } | null;\n} | null;\n\nexport type OrderPlacedContextValue = Readonly<{\n  order: OrderPlacedData;\n  loading: boolean;\n  error: ErrorLike | null;\n}>;\n\nexport type OrderPlacedRootProps = {\n  className?: string;\n  children?: ReactNode;\n  /** Shown in place of the order when the read is refused: after 15 minutes, or from another browser. */\n  refusedOrderLabel?: string;\n  /** Shown in place of the order when the read fails or the order group resolves to no order. */\n  unresolvedOrderLabel?: string;\n  /** Unwrapped `Order` slice forwarded by the reactive runtime. */\n  $data?: OrderPlacedData;\n};\n\nexport type OrderPlacedStatusProps = {\n  className?: string;\n  /** An optional `Icon`, shown on every outcome. */\n  children?: ReactNode;\n  approvedTitle?: string;\n  approvedMessage?: string;\n  pendingTitle?: string;\n  pendingMessage?: string;\n  deniedTitle?: string;\n  deniedMessage?: string;\n};\n\nexport type OrderPlacedReferenceProps = {\n  className?: string;\n  /** `{reference}` placeholder. */\n  template?: string;\n};\n\nexport type OrderPlacedCustomerProps = {\n  className?: string;\n  nameLabel?: string;\n  emailLabel?: string;\n  phoneLabel?: string;\n  documentLabel?: string;\n  /** Unwrapped `Order` slice of this component's own fragment. */\n  $data?: OrderPlacedCustomerData;\n};\n\nexport type OrderPlacedTotalsProps = {\n  className?: string;\n  itemsLabel?: string;\n  shippingLabel?: string;\n  discountsLabel?: string;\n  taxLabel?: string;\n  totalLabel?: string;\n  /** Shown instead of a zero shipping value. Omitted to show the formatted zero. */\n  shippingZeroLabel?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ORDER_PLACED_UNSET = Symbol('OrderPlacedContextUnset');\n\nconst OrderPlacedContext = createContext<OrderPlacedContextValue | typeof ORDER_PLACED_UNSET>(ORDER_PLACED_UNSET);\n\n/** The placed order, its loading flag and the root query's error, from the nearest OrderPlacedRoot. */\nexport function useOrderPlaced(): OrderPlacedContextValue {\n  const ctx = useContext(OrderPlacedContext);\n  if (ctx === ORDER_PLACED_UNSET) {\n    throw new Error('useOrderPlaced() must be used inside an <OrderPlacedRoot> subtree.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Resolution\n// ---------------------------------------------------------------------------\n\ntype RootState = 'refused' | 'loading' | 'unresolved' | 'order';\n\n/**\n * The API refuses the read with a top-level `UNAUTHORIZED`: without both checkout cookies, and when\n * the order system answers 401 or 403, as it does after 15 minutes. Under `errorPolicy: 'all'` the\n * refusal also carries `order: null`, so it is checked before the order is.\n */\nfunction isRefusal(error: ErrorLike | null): boolean {\n  if (!error || !CombinedGraphQLErrors.is(error)) return false;\n  return error.errors.some((graphQLError) => graphQLError.extensions?.code === 'UNAUTHORIZED');\n}\n\nfunction resolveRootState({ order, loading, error }: OrderPlacedContextValue): RootState {\n  if (isRefusal(error)) return 'refused';\n  if (loading && order == null) return 'loading';\n  if (order == null) return 'unresolved';\n  return 'order';\n}\n\nfunction isZero(money: OrderPlacedMoney): boolean {\n  return Number(money.amount) === 0;\n}\n\nfunction formatMoney(money: OrderPlacedMoney, locale: string): string {\n  return formatPrice(Number(money.amount), locale, money.currencyCode);\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const OrderPlacedRootDefinition = defineComponent<OrderPlacedRootProps>({\n  name: 'OrderPlacedRoot',\n  importPath: '@vtex/faststore/components',\n  component: OrderPlacedRoot,\n  fragment: rootFragment,\n  fetchStrategy: 'reactive',\n  skeleton: OrderPlacedRootSkeleton,\n  providesContext: 'order-placed',\n  editor: { label: 'Order Placed Root', category: 'commerce' },\n  schema: {\n    refusedOrderLabel: {\n      type: 'string',\n      default: 'This order can no longer be shown here',\n      label: 'Refused order label',\n    },\n    unresolvedOrderLabel: { type: 'string', default: 'Could not load this order', label: 'Unresolved order label' },\n  },\n  guideline:\n    'Owner of an order confirmation page: reads the placed order (Query.order, keyed on the order group from the route) once and provides it as the order-placed context to OrderPlacedStatus, OrderPlacedReference, OrderPlacedCustomer, OrderPlacedTotals and the other order-placed blocks composed as its children. Renders its children only once the order resolves. While the read is in flight it shows a skeleton; when the API refuses the read (after 15 minutes, or from another browser) it shows refusedOrderLabel; when the read fails or the order group resolves to no order it shows unresolvedOrderLabel. Each message replaces every child. Never reads the cart or the live profile. See order-placed.md.',\n});\n\nexport const OrderPlacedStatusDefinition = defineComponent<OrderPlacedStatusProps>({\n  name: 'OrderPlacedStatus',\n  importPath: '@vtex/faststore/components',\n  component: OrderPlacedStatus,\n  requiresContext: 'order-placed',\n  editor: { label: 'Order Placed Status', category: 'commerce' },\n  schema: {\n    approvedTitle: { type: 'string', default: 'Your order is confirmed', label: 'Approved title' },\n    approvedMessage: { type: 'string', default: 'Your payment was approved.', label: 'Approved message' },\n    pendingTitle: { type: 'string', default: \"We're confirming your payment\", label: 'Pending title' },\n    pendingMessage: {\n      type: 'string',\n      default: 'Your order was placed, and its payment is still being processed or reviewed.',\n      label: 'Pending message',\n    },\n    deniedTitle: { type: 'string', default: 'Your payment was not approved', label: 'Denied title' },\n    deniedMessage: {\n      type: 'string',\n      default: 'This purchase did not go through. You can place a new order with another payment method.',\n      label: 'Denied message',\n    },\n  },\n  guideline:\n    'The payment outcome of the placed order, as a banner with a title and a message: approved, pending (which also covers a payment under anti-fraud review) or denied. Renders nothing when the outcome is unknown, so the page shows the order without asserting success or failure. Author the title and message of each outcome through the props (approvedTitle, approvedMessage, pendingTitle, pendingMessage, deniedTitle, deniedMessage); a blank value omits its line. Marks the outcome with data-fs-order-placed-status-approved, -pending or -denied, so the page styles each tone. An Icon composed as its child shows on every outcome, so never compose one that implies success. Must be inside OrderPlacedRoot. See order-placed.md.',\n});\n\nexport const OrderPlacedReferenceDefinition = defineComponent<OrderPlacedReferenceProps>({\n  name: 'OrderPlacedReference',\n  importPath: '@vtex/faststore/components',\n  component: OrderPlacedReference,\n  requiresContext: 'order-placed',\n  editor: { label: 'Order Placed Reference', category: 'commerce' },\n  schema: {\n    template: { type: 'string', default: 'Order #{reference}', label: 'Template' },\n  },\n  guideline:\n    'The order number the shopper gives support: the order group, one per purchase even when it was split across sellers. Set template with a {reference} placeholder (e.g. \"Order #{reference}\"). Plain text, so it can be selected and copied. Must be inside OrderPlacedRoot. See order-placed.md.',\n});\n\nexport const OrderPlacedCustomerDefinition = defineComponent<OrderPlacedCustomerProps>({\n  name: 'OrderPlacedCustomer',\n  importPath: '@vtex/faststore/components',\n  component: OrderPlacedCustomer,\n  fragment: customerFragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'order-placed',\n  editor: { label: 'Order Placed Customer', category: 'commerce' },\n  schema: {\n    nameLabel: { type: 'string', default: 'Name', label: 'Name label' },\n    emailLabel: { type: 'string', default: 'Email', label: 'Email label' },\n    phoneLabel: { type: 'string', default: 'Phone', label: 'Phone label' },\n    documentLabel: { type: 'string', default: 'Document', label: 'Document label' },\n  },\n  guideline:\n    'Who the order is for, as the order recorded them at placement, never the live profile: name, email, phone and document as label/value rows, each left out when empty. Selects the customer through its own fragment, so a page without this block never fetches the customer. Shows the values as the order system returns them, masked included (e.g. \"J*** D***\"). Must be inside OrderPlacedRoot. See order-placed.md.',\n});\n\nexport const OrderPlacedTotalsDefinition = defineComponent<OrderPlacedTotalsProps>({\n  name: 'OrderPlacedTotals',\n  importPath: '@vtex/faststore/components',\n  component: OrderPlacedTotals,\n  requiresContext: 'order-placed',\n  editor: { label: 'Order Placed Totals', category: 'commerce' },\n  schema: {\n    itemsLabel: { type: 'string', default: 'Subtotal', label: 'Items label' },\n    shippingLabel: { type: 'string', default: 'Shipping', label: 'Shipping label' },\n    discountsLabel: { type: 'string', default: 'Discounts', label: 'Discounts label' },\n    taxLabel: { type: 'string', default: 'Tax', label: 'Tax label' },\n    totalLabel: { type: 'string', default: 'Total', label: 'Total label' },\n    shippingZeroLabel: { type: 'string', label: 'Shipping zero label' },\n  },\n  guideline:\n    'What the shopper was charged: each money line of the placed order in the order the API returns them (subtotal, discounts, shipping, tax, any custom tax under its own name), then the total, each in the order\\'s own currency. A zero discount line is left out; set shippingZeroLabel (e.g. \"Free\") to show it instead of a zero shipping value. No total row when the order has no total. Reads the order, never the cart, so it composes no CartTotalizerLine. Must be inside OrderPlacedRoot. See order-placed.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/** Placeholder for the order's blocks while the read is in flight. */\nexport function OrderPlacedRootSkeleton() {\n  return (\n    <div aria-hidden=\"true\" data-fs-order-placed-root-skeleton=\"\">\n      <span />\n      <span />\n      <span />\n    </div>\n  );\n}\n\n/** Provides the placed order to its descendants, or a message in their place. Mirrors CartRoot's read side. */\nexport function OrderPlacedRoot({\n  className,\n  children,\n  refusedOrderLabel = 'This order can no longer be shown here',\n  unresolvedOrderLabel = 'Could not load this order',\n  $data: $dataProp,\n}: Readonly<OrderPlacedRootProps>) {\n  const order = useDataOverride($dataProp) ?? null;\n  const { loading, error } = useContext(ReactiveRootContext);\n  const value: OrderPlacedContextValue = useMemo(\n    () => ({ order, loading, error: error ?? null }),\n    [order, loading, error],\n  );\n  const state = resolveRootState(value);\n\n  return (\n    <OrderPlacedContext value={value}>\n      <div className={className} data-fs-order-placed-root=\"\">\n        {state === 'order' ? children : null}\n        {state === 'loading' ? <OrderPlacedRootSkeleton /> : null}\n        {state === 'refused' ? (\n          <p role=\"alert\" data-fs-order-placed-root-refused=\"\">\n            {refusedOrderLabel}\n          </p>\n        ) : null}\n        {state === 'unresolved' ? (\n          <p role=\"alert\" data-fs-order-placed-root-unresolved=\"\">\n            {unresolvedOrderLabel}\n          </p>\n        ) : null}\n      </div>\n    </OrderPlacedContext>\n  );\n}\n\nconst TONE_ATTRIBUTES = {\n  approved: { 'data-fs-order-placed-status-approved': '' },\n  pending: { 'data-fs-order-placed-status-pending': '' },\n  denied: { 'data-fs-order-placed-status-denied': '' },\n} as const;\n\n/**\n * The outcome banner. `UNKNOWN` (seller orders that disagree, or a state the mapping does not\n * classify) renders nothing, so the page shows the order without asserting success or failure.\n */\nexport function OrderPlacedStatus({\n  className,\n  children,\n  approvedTitle = 'Your order is confirmed',\n  approvedMessage = 'Your payment was approved.',\n  pendingTitle = \"We're confirming your payment\",\n  pendingMessage = 'Your order was placed, and its payment is still being processed or reviewed.',\n  deniedTitle = 'Your payment was not approved',\n  deniedMessage = 'This purchase did not go through. You can place a new order with another payment method.',\n}: Readonly<OrderPlacedStatusProps>) {\n  const { order } = useOrderPlaced();\n  const status = order?.status;\n\n  let copy: { tone: keyof typeof TONE_ATTRIBUTES; title?: string; message?: string };\n  if (status === 'APPROVED') {\n    copy = {\n      tone: 'approved',\n      title: approvedTitle,\n      message: approvedMessage,\n    };\n  } else if (status === 'PENDING') {\n    copy = {\n      tone: 'pending',\n      title: pendingTitle,\n      message: pendingMessage,\n    };\n  } else if (status === 'DENIED') {\n    copy = {\n      tone: 'denied',\n      title: deniedTitle,\n      message: deniedMessage,\n    };\n  } else {\n    return null;\n  }\n\n  return (\n    <output className={className} data-fs-order-placed-status=\"\" {...TONE_ATTRIBUTES[copy.tone]}>\n      {children}\n      {copy.title?.trim() ? <span data-fs-order-placed-status-title=\"\">{copy.title}</span> : null}\n      {copy.message?.trim() ? <span data-fs-order-placed-status-message=\"\">{copy.message}</span> : null}\n    </output>\n  );\n}\n\n/**\n * The order group, the one reference a split purchase has, so support resolves the whole purchase\n * from it rather than one seller's order.\n */\nexport function OrderPlacedReference({\n  className,\n  template = 'Order #{reference}',\n}: Readonly<OrderPlacedReferenceProps>) {\n  const { order } = useOrderPlaced();\n  if (!order) return null;\n  return (\n    <p className={className} data-fs-order-placed-reference=\"\">\n      {substituteTemplate(template, { reference: order.reference })}\n    </p>\n  );\n}\n\ntype DefinitionRow = { key: string; term: string; value: string };\n\n/**\n * The customer as the order recorded them, never the live profile: masked values show as the order\n * system returns them, and an empty field is left out.\n */\nexport function OrderPlacedCustomer({\n  className,\n  nameLabel = 'Name',\n  emailLabel = 'Email',\n  phoneLabel = 'Phone',\n  documentLabel = 'Document',\n  $data: $dataProp,\n}: Readonly<OrderPlacedCustomerProps>) {\n  // The call only enforces that the root is an ancestor; the root withholds its children until the\n  // order resolves. The customer itself comes from this component's own fragment.\n  useOrderPlaced();\n  const customer = useDataOverride($dataProp)?.customer;\n  if (!customer) return null;\n\n  const name = [customer.firstName, customer.lastName]\n    .map((part) => part?.trim())\n    .filter(Boolean)\n    .join(' ');\n  const rows: DefinitionRow[] = [\n    { key: 'name', term: nameLabel, value: name },\n    { key: 'email', term: emailLabel, value: customer.email ?? '' },\n    { key: 'phone', term: phoneLabel, value: customer.phone ?? '' },\n    { key: 'document', term: documentLabel, value: customer.document ?? '' },\n  ].filter((row) => row.value.trim() !== '');\n  if (rows.length === 0) return null;\n\n  return (\n    <dl className={className} data-fs-order-placed-customer=\"\">\n      {rows.map(({ key, term, value }) => (\n        <div key={key}>\n          <dt data-fs-order-placed-customer-term=\"\">{term}</dt>\n          <dd data-fs-order-placed-customer-value=\"\">{value}</dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\n/**\n * The order's money lines in API order, then the total, each in its own currency. `Items`,\n * `Shipping`, `Discounts` and `Tax` take the authored label, since the order system names them in\n * English; any other line (a custom tax) shows its own name. The API sums lines on id and name, so\n * two custom taxes that share an id are two rows.\n */\nexport function OrderPlacedTotals({\n  className,\n  itemsLabel = 'Subtotal',\n  shippingLabel = 'Shipping',\n  discountsLabel = 'Discounts',\n  taxLabel = 'Tax',\n  totalLabel = 'Total',\n  shippingZeroLabel,\n}: Readonly<OrderPlacedTotalsProps>) {\n  const { order } = useOrderPlaced();\n  const { locale } = useStorefrontContext();\n  if (!order) return null;\n\n  // A Map, so an upstream id such as \"constructor\" never resolves to an Object.prototype member.\n  const labels = new Map([\n    ['Items', itemsLabel],\n    ['Shipping', shippingLabel],\n    ['Discounts', discountsLabel],\n    ['Tax', taxLabel],\n  ]);\n  const rows: (DefinitionRow & { line: string })[] = [];\n  order.totals.forEach((line, index) => {\n    if (line.id === 'Discounts' && isZero(line.value)) return;\n    const value =\n      line.id === 'Shipping' && isZero(line.value) && shippingZeroLabel?.trim()\n        ? shippingZeroLabel\n        : formatMoney(line.value, locale);\n    rows.push({\n      key: `${line.id}:${line.name}:${index}`,\n      term: labels.get(line.id) ?? line.name,\n      value,\n      line: line.id,\n    });\n  });\n\n  return (\n    <dl className={className} data-fs-order-placed-totals=\"\">\n      {rows.map(({ key, term, value, line }) => (\n        <div key={key} data-fs-order-placed-totals-line={line}>\n          <dt data-fs-order-placed-totals-term=\"\">{term}</dt>\n          <dd data-fs-order-placed-totals-value=\"\">{value}</dd>\n        </div>\n      ))}\n      {order.total ? (\n        <div data-fs-order-placed-totals-total=\"\">\n          <dt data-fs-order-placed-totals-term=\"\">{totalLabel}</dt>\n          <dd data-fs-order-placed-totals-value=\"\">{formatMoney(order.total, locale)}</dd>\n        </div>\n      ) : null}\n    </dl>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/order-placed-date/order-placed-date.d.ts

@@ -0,0 +1,45 @@
+import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, Ref } from "react";
+//#region src/matter/order-placed-date/order-placed-date.d.ts
+export declare const OrderPlacedDateContent: {
+  readonly id: "order-placed-date";
+  readonly title: "Order Placed Date";
+  readonly description: "The label beside the date the order was placed.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+      };
+    };
+  };
+};
+export type OrderPlacedDateContentValue = ContentValue<typeof OrderPlacedDateContent>;
+/**
+ * The `customerOrder` root the generator passes as `$data`. A single-root fragment is bound to
+ * that field's value, so this is the order itself, or null when the read resolves nothing.
+ */
+export type OrderPlacedDateData = {
+  id: string;
+  placedAt: string | null;
+} | null;
+export type OrderPlacedDateProps = Readonly<{
+  $data?: OrderPlacedDateData | null;
+  $content?: OrderPlacedDateContentValue;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}>;
+export declare const OrderPlacedDateDefinition: ComponentDefinition<Readonly<{
+  $data?: OrderPlacedDateData | null;
+  $content?: OrderPlacedDateContentValue;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}>>;
+export declare function OrderPlacedDateSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function OrderPlacedDate({ $data, $content, className, ref }: OrderPlacedDateProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=order-placed-date.d.ts.map

package/dist/matter/order-placed-date/order-placed-date.js

@@ -0,0 +1,92 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
+import "../../core/dist/index.js";
+import { useStorefrontFormatters } from "../../sdk/format/client.js";
+import { useIntl } from "../../sdk/i18n/client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/order-placed-date/order-placed-date.tsx
+const fragment = `
+  fragment OrderPlacedDateData on Query {
+    customerOrder(id: $orderId) {
+      id
+      placedAt
+    }
+  }
+`;
+const OrderPlacedDateContent = defineContentType({
+	id: "order-placed-date",
+	title: "Order Placed Date",
+	description: "The label beside the date the order was placed.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label"
+		} }
+	}
+});
+const OrderPlacedDateDefinition = defineComponent({
+	name: "OrderPlacedDate",
+	importPath: "@vtex/faststore/components",
+	component: OrderPlacedDate,
+	content: OrderPlacedDateContent,
+	fragment,
+	fetchStrategy: "static",
+	skeleton: OrderPlacedDateSkeleton,
+	editor: {
+		label: "Order Placed Date",
+		category: "content"
+	},
+	schema: {},
+	guideline: "The date and time one order was placed, formatted for the page locale. The label is content; a blank field keeps the catalogue. Place it anywhere on the order details page; it renders nothing when the order has no placed date."
+});
+function authored(value, fallback) {
+	return value?.trim() || fallback;
+}
+const PLACED_FORMAT = {
+	year: "numeric",
+	month: "numeric",
+	day: "numeric",
+	hour: "numeric",
+	minute: "2-digit"
+};
+function instant(value) {
+	if (!value) return null;
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+function OrderPlacedDateSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-order-placed-date-skeleton": "",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("span", { "data-fs-order-placed-date-skeleton-fact": "" }), /* @__PURE__ */ jsx("span", { "data-fs-order-placed-date-skeleton-fact": "" })]
+	});
+}
+function OrderPlacedDate({ $data, $content, className, ref }) {
+	const intl = useIntl();
+	const { formatDate } = useStorefrontFormatters();
+	const placedAt = $data?.placedAt;
+	const placed = instant(placedAt);
+	if (!placed) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className,
+		"data-fs-order-placed-date": "",
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-fs-order-placed-date-label": "",
+			children: authored($content?.label, intl.formatMessage({ id: "fs/order.placed-at" }))
+		}), /* @__PURE__ */ jsx("time", {
+			dateTime: placedAt ?? void 0,
+			"data-fs-order-placed-date-value": "",
+			children: formatDate(placed, PLACED_FORMAT)
+		})]
+	});
+}
+//#endregion
+export { OrderPlacedDate, OrderPlacedDateContent, OrderPlacedDateDefinition, OrderPlacedDateSkeleton };
+
+//# sourceMappingURL=order-placed-date.js.map

package/dist/matter/order-placed-date/order-placed-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-placed-date.js","names":[],"sources":["../../../src/matter/order-placed-date/order-placed-date.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useStorefrontFormatters } from '../../sdk/format/client.js';\nimport { useIntl } from '../../sdk/i18n/client.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderPlacedDateData on Query {\n    customerOrder(id: $orderId) {\n      id\n      placedAt\n    }\n  }\n`;\n\nexport const OrderPlacedDateContent = defineContentType({\n  id: 'order-placed-date',\n  title: 'Order Placed Date',\n  description: 'The label beside the date the order was placed.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Label' },\n    },\n  },\n});\n\nexport type OrderPlacedDateContentValue = ContentValue<typeof OrderPlacedDateContent>;\n\n/**\n * The `customerOrder` root the generator passes as `$data`. A single-root fragment is bound to\n * that field's value, so this is the order itself, or null when the read resolves nothing.\n */\nexport type OrderPlacedDateData = {\n  id: string;\n  placedAt: string | null;\n} | null;\n\nexport type OrderPlacedDateProps = Readonly<{\n  $data?: OrderPlacedDateData | null;\n  $content?: OrderPlacedDateContentValue;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}>;\n\nexport const OrderPlacedDateDefinition = defineComponent<OrderPlacedDateProps>({\n  name: 'OrderPlacedDate',\n  importPath: '@vtex/faststore/components',\n  component: OrderPlacedDate,\n  content: OrderPlacedDateContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderPlacedDateSkeleton,\n  editor: { label: 'Order Placed Date', category: 'content' },\n  schema: {},\n  guideline:\n    'The date and time one order was placed, formatted for the page locale. The label is content; a blank field keeps the catalogue. Place it anywhere on the order details page; it renders nothing when the order has no placed date.',\n});\n\nfunction authored(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nconst PLACED_FORMAT: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: '2-digit',\n};\n\nfunction instant(value: string | null | undefined): Date | null {\n  if (!value) {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\nexport function OrderPlacedDateSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-placed-date-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-placed-date-skeleton-fact=\"\" />\n      <span data-fs-order-placed-date-skeleton-fact=\"\" />\n    </div>\n  );\n}\n\nexport function OrderPlacedDate({ $data, $content, className, ref }: OrderPlacedDateProps) {\n  const intl = useIntl();\n  const { formatDate } = useStorefrontFormatters();\n  const placedAt = $data?.placedAt;\n  const placed = instant(placedAt);\n\n  if (!placed) {\n    return null;\n  }\n\n  return (\n    <div ref={ref} className={className} data-fs-order-placed-date=\"\">\n      <span data-fs-order-placed-date-label=\"\">\n        {authored($content?.label, intl.formatMessage({ id: 'fs/order.placed-at' }))}\n      </span>\n      <time dateTime={placedAt ?? undefined} data-fs-order-placed-date-value=\"\">\n        {formatDate(placed, PLACED_FORMAT)}\n      </time>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,WAAyB;;;;;;;;AAS/B,MAAa,yBAAyB,kBAAkB;CACtD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY,EACV,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ,EAC1C;CACF;AACF,CAAC;AAoBD,MAAa,4BAA4B,gBAAsC;CAC7E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT;CACA,eAAe;CACf,UAAU;CACV,QAAQ;EAAE,OAAO;EAAqB,UAAU;CAAU;CAC1D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAS,SAAS,OAA2B,UAA0B;CAErE,OADgB,OAAO,KAAK,KACV;AACpB;AAEA,MAAM,gBAA4C;CAChD,MAAM;CACN,OAAO;CACP,KAAK;CACL,MAAM;CACN,QAAQ;AACV;AAEA,SAAS,QAAQ,OAA+C;CAC9D,IAAI,CAAC,OACH,OAAO;CAET,MAAM,OAAO,IAAI,KAAK,KAAK;CAC3B,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,IAAI,OAAO;AAC/C;AAEA,SAAgB,wBAAwB,EAAE,WAAW,GAAG,SAAuC;CAC7F,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,sCAAmC;EAAG,eAAY;EAAxF,UAAA,CACE,oBAAC,QAAD,EAAM,2CAAwC,GAAI,CAAA,GAClD,oBAAC,QAAD,EAAM,2CAAwC,GAAI,CAAA,CAC/C;;AAET;AAEA,SAAgB,gBAAgB,EAAE,OAAO,UAAU,WAAW,OAA6B;CACzF,MAAM,OAAO,QAAQ;CACrB,MAAM,EAAE,eAAe,wBAAwB;CAC/C,MAAM,WAAW,OAAO;CACxB,MAAM,SAAS,QAAQ,QAAQ;CAE/B,IAAI,CAAC,QACH,OAAO;CAGT,OACE,qBAAC,OAAD;EAAU;EAAgB;EAAW,6BAA0B;EAA/D,UAAA,CACE,oBAAC,QAAD;GAAM,mCAAgC;GACnC,UAAA,SAAS,UAAU,OAAO,KAAK,cAAc,EAAE,IAAI,qBAAqB,CAAC,CAAC;EACvE,CAAA,GACN,oBAAC,QAAD;GAAM,UAAU,YAAY,KAAA;GAAW,mCAAgC;GACpE,UAAA,WAAW,QAAQ,aAAa;EAC7B,CAAA,CACH;;AAET"}