admin-ui-starter-kit 0.1.2 → 0.1.4

package/dist/components/composed/commerce/index.js

@@ -1,15 +1,15 @@
 import { useStrings as e } from "../../../lib/strings.js";
 import { cn as t } from "../../../lib/utils.js";
-import { t as n } from "../../../_shared/text-DIxMTECE.js";
-import { t as r } from "../../../_shared/heading-BprqyzDs.js";
-import { t as i } from "../../../_shared/icon-badge-Bi63T-bj.js";
-import { t as a } from "../../../_shared/badge-BVCh_hfL.js";
-import { t as o } from "../../../_shared/button-ChCkwoOD.js";
-import { t as s } from "../../../_shared/smart-card-MT6JjkoI.js";
-import { t as c } from "../../../_shared/separator-DR0uUMKa.js";
-import { t as l } from "../../../_shared/input-DQahu2sm.js";
-import { M as u, i as d } from "../../../_shared/display-BM_GxDAo.js";
-import { c as f, i as p, n as m, o as h, r as g, t as _, u as v } from "../../../_shared/item-Cu5JbZyZ.js";
+import { t as n } from "../../../_shared/text-qsEg5GdP.js";
+import { t as r } from "../../../_shared/heading-CrNpYcUr.js";
+import { t as i } from "../../../_shared/icon-badge-zTBVtgt9.js";
+import { t as a } from "../../../_shared/badge-BK5VvEgg.js";
+import { t as o } from "../../../_shared/button-cnkCF8q8.js";
+import { t as s } from "../../../_shared/smart-card-eBfUvQ9r.js";
+import { t as c } from "../../../_shared/input-DJo8d1Rr.js";
+import { t as l } from "../../../_shared/separator-B8FBp-7E.js";
+import { M as u, i as d } from "../../../_shared/display-Cuj4td-V.js";
+import { c as f, i as p, n as m, o as h, r as g, t as _, u as v } from "../../../_shared/item-BxlP5TO3.js";
 import { useState as y } from "react";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 import { Calendar as C, Check as w, ChevronRight as T, CreditCard as E, Edit2 as D, Gift as O, MapPin as ee, Package as te, Receipt as ne, Repeat as re, RotateCcw as ie, ShoppingBag as k, Sparkles as ae, Star as oe, TicketPercent as A, Trash2 as se, Trophy as ce, X as j } from "lucide-react";
@@ -24,33 +24,36 @@ function le(e) {
 }
 function M({ bookings: e, className: r, locale: i, dateTone: a = "primary", timePlacement: o = "below" }) {
 	return /* @__PURE__ */ x(h, {
-		className: t("upcoming-booking--component", r),
+		className: t("upcoming-booking--component w-full gap-2", r),
 		children: e.map((e, t) => {
 			let r = le(e);
-			return /* @__PURE__ */ S(_, { children: [
-				!!r && /* @__PURE__ */ x(f, { children: /* @__PURE__ */ x(u, {
-					date: r,
-					time: o === "below" ? e.time : void 0,
-					tone: a,
-					locale: i,
-					timePlacement: "below",
-					layout: "stacked"
-				}) }),
-				/* @__PURE__ */ S(g, { children: [/* @__PURE__ */ x(v, { children: e.service }), /* @__PURE__ */ x(p, {
-					clamp: 1,
-					children: e.customer
-				})] }),
-				/* @__PURE__ */ S(m, { children: [o === "inline-trailing" && /* @__PURE__ */ x(n, {
-					size: "xs",
-					type: "secondary",
-					className: "shrink-0 tabular-nums",
-					children: e.time
-				}), /* @__PURE__ */ x(n, {
-					weight: "semibold",
-					className: "shrink-0 tabular-nums",
-					children: e.amount
-				})] })
-			] }, e.id ?? `${e.service}-${e.time}-${t}`);
+			return /* @__PURE__ */ S(_, {
+				className: "items-center px-0 py-1.5",
+				children: [
+					!!r && /* @__PURE__ */ x(f, { children: /* @__PURE__ */ x(u, {
+						date: r,
+						time: o === "below" ? e.time : void 0,
+						tone: a,
+						locale: i,
+						timePlacement: "below",
+						layout: "stacked"
+					}) }),
+					/* @__PURE__ */ S(g, { children: [/* @__PURE__ */ x(v, { children: e.service }), /* @__PURE__ */ x(p, {
+						clamp: 1,
+						children: e.customer
+					})] }),
+					/* @__PURE__ */ S(m, { children: [o === "inline-trailing" && /* @__PURE__ */ x(n, {
+						size: "xs",
+						type: "secondary",
+						className: "shrink-0 tabular-nums",
+						children: e.time
+					}), /* @__PURE__ */ x(n, {
+						weight: "semibold",
+						className: "shrink-0 tabular-nums",
+						children: e.amount
+					})] })
+				]
+			}, e.id ?? `${e.service}-${e.time}-${t}`);
 		})
 	});
 }
@@ -64,19 +67,19 @@ var N = {
 };
 //#endregion
 //#region src/components/composed/commerce/loyalty-points/loyalty-points.tsx
-function P({ balance: i, tier: l = "Gold Tier", tierVariant: u, history: f = [], redeemLabel: y, onRedeem: b, className: C, strings: w }) {
+function P({ balance: i, tier: c = "Gold Tier", tierVariant: u, history: f = [], redeemLabel: y, onRedeem: b, className: C, strings: w }) {
 	let T = e(N, {
 		...y === void 0 ? {} : { redeem: y },
 		...w
 	});
 	return /* @__PURE__ */ S(s, {
-		className: t("loyalty-points--component", C),
+		className: t("loyalty-points--component w-full", C),
 		children: [
 			/* @__PURE__ */ x(d, {
 				label: T.balanceLabel,
 				value: /* @__PURE__ */ S(a, {
 					variant: "warning",
-					children: [/* @__PURE__ */ x(ce, { className: "mr-1 inline size-3" }), l]
+					children: [/* @__PURE__ */ x(ce, { className: "mr-1 inline size-3" }), c]
 				}),
 				labelClassName: "text-xs font-medium uppercase tracking-wider text-muted-foreground"
 			}),
@@ -90,7 +93,7 @@ function P({ balance: i, tier: l = "Gold Tier", tierVariant: u, history: f = [],
 				type: "secondary",
 				children: T.pointsAvailable
 			}),
-			/* @__PURE__ */ x(c, { className: "my-4" }),
+			/* @__PURE__ */ x(l, { className: "my-4" }),
 			/* @__PURE__ */ x(h, { children: f.map((e) => /* @__PURE__ */ S(_, {
 				size: "xs",
 				className: "px-0",
@@ -124,11 +127,11 @@ var F = {
 };
 //#endregion
 //#region src/components/composed/commerce/discount-stack/discount-stack.tsx
-function I({ discounts: i, totalSavings: o, className: l, strings: u }) {
+function I({ discounts: i, totalSavings: o, className: c, strings: u }) {
 	let p = e(F, u);
 	return /* @__PURE__ */ S(s, {
 		title: p.title,
-		className: t("discount-stack--component", l),
+		className: t("discount-stack--component w-full", c),
 		children: [
 			/* @__PURE__ */ x(h, {
 				className: "mt-4",
@@ -153,7 +156,7 @@ function I({ discounts: i, totalSavings: o, className: l, strings: u }) {
 					]
 				}, e.type))
 			}),
-			/* @__PURE__ */ x(c, { className: "my-4" }),
+			/* @__PURE__ */ x(l, { className: "my-4" }),
 			/* @__PURE__ */ x(d, {
 				label: p.totalSavings,
 				value: /* @__PURE__ */ x(r, {
@@ -169,9 +172,9 @@ function I({ discounts: i, totalSavings: o, className: l, strings: u }) {
 I.displayName = "DiscountStackPreview";
 //#endregion
 //#region src/components/composed/commerce/shipment-tracking/shipment-tracking.tsx
-function L({ trackingNumber: e, carrier: r, status: i, steps: o, details: l = [], className: u }) {
+function L({ trackingNumber: e, carrier: r, status: i, steps: o, details: c = [], className: u }) {
 	return /* @__PURE__ */ S(s, {
-		className: t("shipment-tracking--component", u),
+		className: t("shipment-tracking--component w-full", u),
 		children: [
 			/* @__PURE__ */ S("div", {
 				className: "flex items-center justify-between",
@@ -207,9 +210,9 @@ function L({ trackingNumber: e, carrier: r, status: i, steps: o, details: l = []
 					})]
 				}, e.label))
 			}),
-			l.length > 0 && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(c, { className: "my-4" }), /* @__PURE__ */ x("div", {
+			c.length > 0 && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(l, { className: "my-4" }), /* @__PURE__ */ x("div", {
 				className: "space-y-2",
-				children: l.map((e) => /* @__PURE__ */ x(d, {
+				children: c.map((e) => /* @__PURE__ */ x(d, {
 					label: e.label,
 					value: e.value,
 					labelClassName: "text-xs",
@@ -230,12 +233,12 @@ var R = {
 };
 //#endregion
 //#region src/components/composed/commerce/tax-breakdown/tax-breakdown.tsx
-function z({ subtotal: r, taxes: i, totalTax: a, total: o, className: l, strings: u }) {
+function z({ subtotal: r, taxes: i, totalTax: a, total: o, className: c, strings: u }) {
 	let f = e(R, u);
 	return /* @__PURE__ */ S(s, {
 		icon: /* @__PURE__ */ x(ne, { className: "size-4" }),
 		title: f.title,
-		className: t("tax-breakdown--component", l),
+		className: t("tax-breakdown--component w-full", c),
 		children: [
 			/* @__PURE__ */ x(d, {
 				label: f.subtotal,
@@ -277,7 +280,7 @@ function z({ subtotal: r, taxes: i, totalTax: a, total: o, className: l, strings
 					valueClassName: "text-xs font-semibold"
 				})]
 			}),
-			/* @__PURE__ */ x(c, { className: "my-3" }),
+			/* @__PURE__ */ x(l, { className: "my-3" }),
 			/* @__PURE__ */ x(d, {
 				label: f.total,
 				value: o,
@@ -310,7 +313,7 @@ function V({ planName: c, priceLabel: l, cycleLabel: u, nextBillingDate: d, stat
 			variant: "success",
 			children: p
 		}) : null,
-		className: t("subscription-summary--component", E),
+		className: t("subscription-summary--component w-full", E),
 		children: [
 			/* @__PURE__ */ S("div", {
 				className: "rounded-lg border border-border/60 bg-muted/30 p-4",
@@ -416,12 +419,12 @@ var H = {
 	"processing",
 	"completed"
 ];
-function W({ stage: i, amount: a, reason: o, method: l, eta: u, requestedAt: f, className: p, strings: m }) {
+function W({ stage: i, amount: a, reason: o, method: c, eta: u, requestedAt: f, className: p, strings: m }) {
 	let h = e(H, m), g = U.indexOf(i);
 	return /* @__PURE__ */ S(s, {
 		icon: /* @__PURE__ */ x(ie, { className: "size-4" }),
 		title: h.title,
-		className: t("refund-status--component", p),
+		className: t("refund-status--component w-full", p),
 		children: [
 			/* @__PURE__ */ S("div", {
 				className: "rounded-lg bg-muted/40 px-4 py-3",
@@ -478,7 +481,7 @@ function W({ stage: i, amount: a, reason: o, method: l, eta: u, requestedAt: f,
 					}, e);
 				})
 			}),
-			(o || l || u) && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(c, { className: "my-4" }), /* @__PURE__ */ S("div", {
+			(o || c || u) && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(l, { className: "my-4" }), /* @__PURE__ */ S("div", {
 				className: "space-y-2",
 				children: [
 					!!o && /* @__PURE__ */ x(d, {
@@ -487,9 +490,9 @@ function W({ stage: i, amount: a, reason: o, method: l, eta: u, requestedAt: f,
 						className: "items-start",
 						valueClassName: "text-sm font-medium text-right"
 					}),
-					!!l && /* @__PURE__ */ x(d, {
+					!!c && /* @__PURE__ */ x(d, {
 						label: h.method,
-						value: l,
+						value: c,
 						valueClassName: "text-sm font-medium"
 					}),
 					!!u && /* @__PURE__ */ x(d, {
@@ -545,12 +548,12 @@ function K({ kind: r = "shipping", name: i, line1: o, line2: c, city: l, region:
 	}), /* @__PURE__ */ x(s, {
 		icon: /* @__PURE__ */ x(ee, { className: "size-4" }),
 		title: C[r],
-		headerEnd: m ? /* @__PURE__ */ x(a, {
+		titleSuffix: m ? /* @__PURE__ */ x(a, {
 			variant: "primary",
 			children: b.defaultBadge
 		}) : null,
 		actions: T.length > 0 ? T : void 0,
-		className: t("address-card--component", v),
+		className: t("address-card--component w-full", v),
 		children: /* @__PURE__ */ S("div", {
 			className: "space-y-0.5",
 			children: [
@@ -588,12 +591,12 @@ var q = {
 };
 //#endregion
 //#region src/components/composed/commerce/voucher-entry/voucher-entry.tsx
-function J({ appliedCode: r, balance: a, error: c, loading: u, onCheck: d, onRemove: h, className: b, strings: C }) {
+function J({ appliedCode: r, balance: a, error: l, loading: u, onCheck: d, onRemove: h, className: b, strings: C }) {
 	let T = e(q, C), [E, D] = y("");
 	return r ? /* @__PURE__ */ x(s, {
 		icon: /* @__PURE__ */ x(O, { className: "size-4" }),
 		title: T.title,
-		className: t("voucher-entry--component", b),
+		className: t("voucher-entry--component w-full", b),
 		children: /* @__PURE__ */ S(_, {
 			variant: "muted",
 			className: "border border-success/30 bg-success/8",
@@ -634,28 +637,28 @@ function J({ appliedCode: r, balance: a, error: c, loading: u, onCheck: d, onRem
 	}) : /* @__PURE__ */ x(s, {
 		icon: /* @__PURE__ */ x(O, { className: "size-4" }),
 		title: T.title,
-		className: b,
+		className: t("voucher-entry--component w-full", b),
 		children: /* @__PURE__ */ S("div", {
 			className: "flex flex-col gap-2",
 			children: [/* @__PURE__ */ S("div", {
 				className: "flex gap-2",
-				children: [/* @__PURE__ */ x(l, {
+				children: [/* @__PURE__ */ x(c, {
 					value: E,
 					onChange: (e) => D(e.target.value),
 					placeholder: T.placeholder,
 					startIcon: O,
 					className: "flex-1 font-mono uppercase tracking-wider",
-					invalid: !!c
+					invalid: !!l
 				}), /* @__PURE__ */ x(o, {
 					onClick: () => d?.(E),
 					loading: u,
 					disabled: !E.trim(),
 					children: T.check
 				})]
-			}), !!c && /* @__PURE__ */ x(n, {
+			}), !!l && /* @__PURE__ */ x(n, {
 				size: "xs",
 				type: "error",
-				children: c || T.notFound
+				children: l || T.notFound
 			})]
 		})
 	});
@@ -672,12 +675,12 @@ var Y = {
 	total: "Total",
 	checkout: "Checkout"
 }, ue = (e) => e.replace(/^[\s−-]+/, "");
-function X({ items: r, subtotal: i, tax: a, shipping: l, discount: u, total: y, onCheckout: b, className: C, strings: w }) {
-	let T = e(Y, w), E = !!(i || a || l || u);
+function X({ items: r, subtotal: i, tax: a, shipping: c, discount: u, total: y, onCheckout: b, className: C, strings: w }) {
+	let T = e(Y, w), E = !!(i || a || c || u);
 	return /* @__PURE__ */ S(s, {
 		icon: /* @__PURE__ */ x(k, { className: "size-4" }),
 		title: T.title,
-		className: t("cart-summary--component", C),
+		className: t("cart-summary--component w-full", C),
 		children: [
 			/* @__PURE__ */ x(h, { children: r.map((e) => /* @__PURE__ */ S(_, {
 				size: "xs",
@@ -720,9 +723,9 @@ function X({ items: r, subtotal: i, tax: a, shipping: l, discount: u, total: y,
 						valueClassName: "text-xs font-medium",
 						labelClassName: "text-xs"
 					}),
-					!!l && /* @__PURE__ */ x(d, {
+					!!c && /* @__PURE__ */ x(d, {
 						label: T.shipping,
-						value: l,
+						value: c,
 						mono: !0,
 						valueClassName: "text-xs font-medium",
 						labelClassName: "text-xs"
@@ -736,7 +739,7 @@ function X({ items: r, subtotal: i, tax: a, shipping: l, discount: u, total: y,
 					})
 				]
 			}),
-			/* @__PURE__ */ x(c, { className: "my-3" }),
+			/* @__PURE__ */ x(l, { className: "my-3" }),
 			/* @__PURE__ */ x(d, {
 				label: T.total,
 				value: y,
@@ -764,12 +767,12 @@ var Z = {
 	applied: "Applied",
 	invalid: "That code is not valid"
 }, de = (e) => e.replace(/^[\s−-]+/, "");
-function Q({ appliedCode: r, appliedDiscount: a, error: c, onApply: u, onRemove: d, loading: h, className: b, strings: C }) {
+function Q({ appliedCode: r, appliedDiscount: a, error: l, onApply: u, onRemove: d, loading: h, className: b, strings: C }) {
 	let T = e(Z, C), [E, D] = y("");
 	return r ? /* @__PURE__ */ x(s, {
 		icon: /* @__PURE__ */ x(A, { className: "size-4" }),
 		title: T.title,
-		className: t("coupon-input--component", b),
+		className: t("coupon-input--component w-full", b),
 		children: /* @__PURE__ */ S(_, {
 			variant: "muted",
 			className: "border border-success/30 bg-success/8",
@@ -790,7 +793,6 @@ function Q({ appliedCode: r, appliedDiscount: a, error: c, onApply: u, onRemove:
 				})] }),
 				/* @__PURE__ */ S(m, { children: [!!a && /* @__PURE__ */ S(n, {
 					tag: "span",
-					size: "base",
 					weight: "semibold",
 					type: "success",
 					className: "tabular-nums shrink-0",
@@ -810,28 +812,29 @@ function Q({ appliedCode: r, appliedDiscount: a, error: c, onApply: u, onRemove:
 	}) : /* @__PURE__ */ x(s, {
 		icon: /* @__PURE__ */ x(A, { className: "size-4" }),
 		title: T.title,
-		className: b,
+		className: t("coupon-input--component w-full", b),
 		children: /* @__PURE__ */ S("div", {
 			className: "flex flex-col gap-2",
 			children: [/* @__PURE__ */ S("div", {
 				className: "flex gap-2",
-				children: [/* @__PURE__ */ x(l, {
+				children: [/* @__PURE__ */ x(c, {
 					value: E,
 					onChange: (e) => D(e.target.value),
 					placeholder: T.placeholder,
 					startIcon: ae,
 					className: "flex-1 font-mono uppercase tracking-wider",
-					invalid: !!c
+					invalid: !!l
 				}), /* @__PURE__ */ x(o, {
+					size: "default",
 					onClick: () => u?.(E),
 					loading: h,
 					disabled: !E.trim(),
 					children: T.apply
 				})]
-			}), !!c && /* @__PURE__ */ x(n, {
+			}), !!l && /* @__PURE__ */ x(n, {
 				size: "xs",
 				type: "error",
-				children: c || T.invalid
+				children: l || T.invalid
 			})]
 		})
 	});
@@ -862,15 +865,15 @@ function me({ orderNumber: r, status: i, statusVariant: o, events: c, currentEta
 			children: i
 		}),
 		description: `#${r}`,
-		className: t("order-status--component", u),
+		className: t("order-status--component w-full", u),
 		children: [/* @__PURE__ */ x("div", {
 			className: "overflow-x-auto pb-1",
 			children: /* @__PURE__ */ x("div", {
-				className: "flex min-w-full items-start",
+				className: "flex min-w-[22rem] items-start",
 				children: c.map((e, r) => {
 					let i = r === c.length - 1, a = r < m, o = r === m + 1 || e.complete && r === m;
 					return /* @__PURE__ */ S("div", {
-						className: "flex flex-1 flex-col items-center gap-1.5",
+						className: "flex min-w-14 flex-1 flex-col items-center gap-1.5 px-1",
 						children: [
 							/* @__PURE__ */ S("div", {
 								className: "relative flex w-full items-center",
@@ -881,9 +884,9 @@ function me({ orderNumber: r, status: i, statusVariant: o, events: c, currentEta
 										"aria-hidden": "true"
 									}),
 									/* @__PURE__ */ x("div", {
-										className: t("relative flex size-6 shrink-0 items-center justify-center rounded-full", e.complete ? "bg-success text-success-foreground" : "border-2 border-border bg-card text-muted-foreground", o && !e.complete && "border-primary text-primary"),
+										className: t("relative flex size-5 shrink-0 items-center justify-center rounded-full", e.complete ? "bg-success text-success-foreground" : "border-2 border-border bg-card text-muted-foreground", o && !e.complete && "border-primary text-primary"),
 										children: e.complete ? /* @__PURE__ */ x(w, {
-											className: "size-3.5",
+											className: "size-3",
 											strokeWidth: 2.5
 										}) : /* @__PURE__ */ x("span", { className: "size-1.5 rounded-full bg-current" })
 									}),
@@ -896,13 +899,13 @@ function me({ orderNumber: r, status: i, statusVariant: o, events: c, currentEta
 							/* @__PURE__ */ x(n, {
 								size: "xxs",
 								weight: e.complete || o ? "semibold" : "medium",
-								className: t("whitespace-nowrap text-center", !e.complete && !o && "text-muted-foreground"),
+								className: t("max-w-20 text-center leading-tight", !e.complete && !o && "text-muted-foreground"),
 								children: e.label
 							}),
 							!!e.timestamp && /* @__PURE__ */ x(n, {
 								size: "xxs",
 								type: "discrete",
-								className: "tabular-nums",
+								className: "text-center tabular-nums",
 								children: e.timestamp
 							})
 						]
@@ -960,23 +963,15 @@ function $({ brand: r, last4: i, expiry: c, holderName: l, isDefault: u, onChang
 			variant: "primary",
 			children: m.default
 		}) : null,
-		className: t("payment-method--component", f),
+		className: t("payment-method--component w-full", f),
 		children: [/* @__PURE__ */ S("div", {
-			className: t("relative flex flex-col gap-5 rounded-xl bg-gradient-to-br p-4 text-white shadow-md ring-1 ring-white/10 overflow-hidden", g),
+			className: t("relative flex aspect-[1.586] min-h-40 flex-col justify-between overflow-hidden rounded-lg bg-gradient-to-br p-4 text-white shadow-sm ring-1 ring-white/10", g),
 			children: [
-				/* @__PURE__ */ x("div", {
-					className: "absolute -top-8 -right-8 size-32 rounded-full bg-white/[0.08] blur-xl",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ x("div", {
-					className: "absolute -bottom-6 -left-6 size-24 rounded-full bg-white/[0.06] blur-lg",
-					"aria-hidden": "true"
-				}),
 				/* @__PURE__ */ S("div", {
 					className: "relative flex items-start justify-between",
 					children: [/* @__PURE__ */ x("div", {
-						className: "flex size-7 items-center justify-center rounded-md bg-gradient-to-br from-yellow-300/90 to-yellow-500/80 shadow-sm",
-						children: /* @__PURE__ */ x("div", { className: "size-4 rounded-sm border border-yellow-700/30 bg-yellow-200/60" })
+						className: "flex size-7 items-center justify-center rounded-md bg-gradient-to-br from-warning/80 to-warning shadow-sm",
+						children: /* @__PURE__ */ x("div", { className: "size-4 rounded-sm border border-warning-foreground/25 bg-warning-foreground/15" })
 					}), /* @__PURE__ */ x(n, {
 						tag: "span",
 						weight: "bold",
@@ -988,7 +983,7 @@ function $({ brand: r, last4: i, expiry: c, holderName: l, isDefault: u, onChang
 					className: "relative",
 					children: /* @__PURE__ */ S(n, {
 						tag: "span",
-						size: "lg",
+						size: "base",
 						weight: "semibold",
 						className: "block font-mono tracking-[0.25em] text-white",
 						children: ["•••• •••• •••• ", i]
@@ -1028,6 +1023,7 @@ function $({ brand: r, last4: i, expiry: c, holderName: l, isDefault: u, onChang
 				buttonStyle: "ghost",
 				variant: "secondary",
 				onClick: d,
+				size: "default",
 				children: m.change
 			})
 		})]