@standhigher/besttrack-page-extension 0.5.1 → 0.5.3

package/dist/index.js

@@ -834,9 +834,22 @@ var pageFont = { fontFamily: "var(--pb-font-family, Inter, system-ui, sans-serif
 var contentWidth = {
   width: "min(1248px, 100%)",
   margin: "0 auto",
-  padding: "48px 24px",
+  padding: "48px clamp(16px, 4%, 24px)",
   boxSizing: "border-box"
 };
+var trackingProgressStyles = `
+.bt-progress { container-type: inline-size; }
+.bt-progress__icon { width: 44px; height: 44px; }
+.bt-progress__line { top: 19px; }
+.bt-progress__copy { margin-top: 16px; }
+.bt-progress__label { font-size: 16px; line-height: 20px; }
+@container (max-width: 640px) {
+  .bt-progress__icon { width: 32px; height: 32px; }
+  .bt-progress__line { top: 13px; }
+  .bt-progress__copy { margin-top: 8px; }
+  .bt-progress__label { font-size: 11px; line-height: 14px; }
+}
+`;
 function text(props, key, fallback = "") {
   return typeof props[key] === "string" ? props[key] : fallback;
 }
@@ -900,23 +913,34 @@ function ProductImage({ src, alt, size = 60 }) {
   }
   return /* @__PURE__ */ jsx("img", { src: safeSrc, alt, onError: () => setFailed(true), style: box });
 }
-function TrackingProgress({ steps }) {
+var hexColor = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+var defaultProgressColor = "#0f172a";
+function progressColor(value) {
+  return value && hexColor.test(value) ? value : defaultProgressColor;
+}
+function TrackingProgress({ steps, color }) {
+  const active = progressColor(color);
   const cells = Math.max(steps.length, 1);
-  const columns = cells <= 1 ? "44px" : Array.from({ length: cells - 1 }, () => "44px minmax(20px, 1fr)").join(" ") + " 44px";
-  return /* @__PURE__ */ jsx("div", { role: "region", "aria-label": "Delivery progress", style: { marginTop: 32, width: "100%", maxWidth: 1200, marginLeft: "auto", marginRight: "auto", overflow: "visible" }, children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: columns, alignItems: "start", columnGap: 8, width: "100%" }, children: steps.map((step, index) => {
-    const done = step.state === "complete" || step.state === "current";
-    const nextDone = steps[index + 1]?.state === "complete" || steps[index + 1]?.state === "current";
-    return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", overflow: "visible" }, children: [
-        /* @__PURE__ */ jsx("span", { "aria-label": step.label + " " + step.state, style: { display: "flex", width: 44, height: 44, flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 9999, border: "1px solid #0f172a", background: done ? "#0f172a" : "#fff", color: "#0f172a" }, children: /* @__PURE__ */ jsx(StepIcon, { name: step.icon ?? (index === 0 || index === steps.length - 1 ? "check" : index === 1 ? "bag" : index === 2 ? "truck" : "box"), done }) }),
-        /* @__PURE__ */ jsxs("div", { style: { width: "max-content", textAlign: "center", marginTop: 16 }, children: [
-          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 16, lineHeight: "20px", fontWeight: 500, color: "#334155" }, children: step.label }),
-          step.date ? /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0", fontSize: 14, lineHeight: "18px", color: "#94a3b8" }, children: step.date }) : null
-        ] })
-      ] }),
-      index < steps.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "block", width: "100%", minWidth: 0, height: 6, marginTop: 19, borderRadius: 999, background: done && nextDone ? "#1a1a1a" : "rgba(0, 0, 0, 0.25)" } }) : null
-    ] }, step.id);
-  }) }) });
+  return /* @__PURE__ */ jsxs("div", { className: "bt-progress", role: "region", "aria-label": "Delivery progress", style: { marginTop: 32, width: "100%", maxWidth: 1200, marginLeft: "auto", marginRight: "auto", overflow: "visible" }, children: [
+    /* @__PURE__ */ jsx("style", { children: trackingProgressStyles }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "grid", gridTemplateColumns: `repeat(${cells}, minmax(0, 1fr))`, columnGap: 4, width: "100%", alignItems: "start" }, children: [
+      cells > 1 ? /* @__PURE__ */ jsx("div", { className: "bt-progress__line", "aria-hidden": "true", style: { position: "absolute", left: `calc(50% / ${cells})`, right: `calc(50% / ${cells})`, height: 6, display: "flex", zIndex: 0, pointerEvents: "none" }, children: steps.slice(0, -1).map((step, index) => {
+        const done = step.state === "complete" || step.state === "current";
+        const nextDone = steps[index + 1]?.state === "complete" || steps[index + 1]?.state === "current";
+        return /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 6, borderRadius: 999, background: done && nextDone ? active : `color-mix(in srgb, ${active} 25%, transparent)` } }, step.id + "-line");
+      }) }) : null,
+      steps.map((step, index) => {
+        const done = step.state === "complete" || step.state === "current";
+        return /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, display: "flex", flexDirection: "column", alignItems: "center", position: "relative", zIndex: 1 }, children: [
+          /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", "aria-label": step.label + " " + step.state, style: { display: "flex", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: 9999, border: `1px solid ${active}`, background: done ? active : "#fff", color: active }, children: /* @__PURE__ */ jsx(StepIcon, { name: step.icon ?? (index === 0 || index === steps.length - 1 ? "check" : index === 1 ? "bag" : index === 2 ? "truck" : "box"), done }) }),
+          /* @__PURE__ */ jsxs("div", { className: "bt-progress__copy", style: { width: "100%", maxWidth: "100%", boxSizing: "border-box", textAlign: "center", padding: "0 2px" }, children: [
+            /* @__PURE__ */ jsx("p", { className: "bt-progress__label", style: { margin: 0, fontWeight: 500, color: "#334155", overflowWrap: "anywhere", wordBreak: "break-word" }, children: step.label }),
+            step.date ? /* @__PURE__ */ jsx("p", { style: { margin: "6px 0 0", fontSize: 12, lineHeight: "16px", color: "#94a3b8", overflowWrap: "anywhere" }, children: step.date }) : null
+          ] })
+        ] }, step.id);
+      })
+    ] })
+  ] });
 }
 function ShippingTimeline({ events }) {
   if (!events.length) {
@@ -1004,7 +1028,7 @@ function RecommendationCards({ items }) {
     color: "#333",
     padding: 0
   };
-  return /* @__PURE__ */ jsxs("div", { "aria-label": "Recommended products carousel", style: { position: "relative", marginLeft: 48, marginRight: 48 }, children: [
+  return /* @__PURE__ */ jsxs("div", { "aria-label": "Recommended products carousel", style: { position: "relative", marginLeft: "min(48px, 4%)", marginRight: "min(48px, 4%)" }, children: [
     !hideButtons && canScrollPrev ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous", onClick: () => emblaApi?.scrollPrev(), style: { ...buttonStyle, left: -40 }, children: arrow("15 18 9 12 15 6") }) : null,
     /* @__PURE__ */ jsx("div", { ref: emblaRef, style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: items.map((item) => {
       const href = safeHref(item.href);
@@ -1060,7 +1084,11 @@ function IdleMessage({ children }) {
   return /* @__PURE__ */ jsx("p", { style: { margin: 0, textAlign: "center", color: "var(--pb-color-muted, #64748b)" }, children });
 }
 function SkeletonRow() {
-  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { display: "grid", gridTemplateColumns: "44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px minmax(20px, 1fr) 44px", columnGap: 8, width: "100%", maxWidth: 1200, margin: "32px auto 0" }, children: Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx("span", { style: { display: "block", width: 44, height: 44, borderRadius: 9999, background: "#e2e8f0" } }, index)).flatMap((circle, index, list) => index < list.length - 1 ? [circle, /* @__PURE__ */ jsx("span", { style: { display: "block", height: 6, marginTop: 19, borderRadius: 999, background: "#e2e8f0" } }, "line-" + index)] : [circle]) });
+  return /* @__PURE__ */ jsxs("div", { className: "bt-progress", "aria-hidden": "true", style: { position: "relative", display: "grid", gridTemplateColumns: "repeat(5, minmax(0, 1fr))", columnGap: 4, width: "100%", maxWidth: 1200, margin: "32px auto 0" }, children: [
+    /* @__PURE__ */ jsx("style", { children: trackingProgressStyles }),
+    /* @__PURE__ */ jsx("span", { className: "bt-progress__line", style: { position: "absolute", left: "10%", right: "10%", height: 6, borderRadius: 999, background: "#e2e8f0" } }),
+    Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx("span", { className: "bt-progress__icon", style: { display: "block", justifySelf: "center", borderRadius: 9999, background: "#e2e8f0" } }, index))
+  ] });
 }
 
 // src/shopify-track-page/assets/not-found.png.ts
@@ -1173,7 +1201,7 @@ var heroStyle = {
   placeItems: "center",
   overflow: "hidden",
   backgroundColor: "#fff",
-  padding: "48px 24px",
+  padding: "48px clamp(16px, 4%, 24px)",
   boxSizing: "border-box"
 };
 var editorHeroStyle = {
@@ -1182,7 +1210,7 @@ var editorHeroStyle = {
   display: "grid",
   placeItems: "center",
   backgroundColor: "#fff",
-  padding: "48px 24px",
+  padding: "48px clamp(16px, 4%, 24px)",
   boxSizing: "border-box"
 };
 var formCardStyle = {
@@ -1194,7 +1222,7 @@ var formCardStyle = {
   borderRadius: "var(--pb-radius, 8px)",
   background: "var(--pb-color-surface, #fff)",
   color: "var(--pb-color-text, #0f172a)",
-  padding: 40,
+  padding: "clamp(20px, 7%, 40px)",
   boxSizing: "border-box",
   boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)"
 };
@@ -1202,9 +1230,10 @@ var editorFormCardStyle = { ...formCardStyle, minHeight: 0 };
 var tabStyle = (active) => ({
   appearance: "none",
   flex: 1,
+  minWidth: 0,
   minHeight: 53,
   margin: 0,
-  padding: "16px 10px",
+  padding: "12px 6px",
   font: "inherit",
   fontSize: 15,
   lineHeight: "21px",
@@ -1214,7 +1243,9 @@ var tabStyle = (active) => ({
   borderBottom: active ? "2px solid #0f172a" : "2px solid transparent",
   borderRadius: 0,
   color: active ? "#0f172a" : "#94a3b8",
-  cursor: "pointer"
+  cursor: "pointer",
+  textAlign: "center",
+  overflowWrap: "anywhere"
 });
 var inputStyle = {
   width: "100%",
@@ -1229,6 +1260,28 @@ var inputStyle = {
   color: "#334155",
   boxSizing: "border-box"
 };
+var hexColor2 = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+var defaultSubmitButtonColor = "var(--pb-color-primary, #111)";
+function submitButtonBackground(props, loading = false) {
+  if (loading) return "#475569";
+  const value = text(props, "submitButtonColor");
+  return hexColor2.test(value) ? value : defaultSubmitButtonColor;
+}
+function submitButtonStyle(props, loading = false) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    minHeight: 58,
+    marginTop: 8,
+    borderRadius: "var(--pb-radius, 8px)",
+    background: submitButtonBackground(props, loading),
+    color: "#fff",
+    fontSize: 15,
+    fontWeight: 600
+  };
+}
 function ReadyToGoTextField({ value, onChange }) {
   return /* @__PURE__ */ jsx3("input", { "aria-label": "Ready-to-go text", value: typeof value === "string" ? value : "", onChange: (event) => onChange(event.target.value) });
 }
@@ -1269,16 +1322,16 @@ function eventsFrom(result) {
   if (result?.latestEvent) return [{ id: "latest", title: result.latestEvent, at: result.updatedAt, state: "current" }];
   return [];
 }
-function ProgressResult({ result, showEstimatedDelivery = true }) {
+function ProgressResult({ result, showEstimatedDelivery = true, color }) {
   const steps = result.progress?.length ? result.progress : defaultProgress(result.status);
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000" }, children: [
+    /* @__PURE__ */ jsxs3("p", { style: { margin: 0, fontSize: 20, lineHeight: 1.4, color: "#000", overflowWrap: "anywhere" }, children: [
       "Tracking: ",
       result.trackingNumber
     ] }),
-    /* @__PURE__ */ jsx3("h2", { style: { margin: "48px 0 0", fontSize: 32, lineHeight: "40px", fontWeight: 700, color: "#303030" }, children: result.status }),
+    /* @__PURE__ */ jsx3("h2", { style: { margin: "clamp(24px, 8%, 48px) 0 0", fontSize: 32, lineHeight: 1.25, fontWeight: 700, color: "#303030", overflowWrap: "anywhere" }, children: result.status }),
     showEstimatedDelivery && result.estimatedDelivery ? /* @__PURE__ */ jsx3(EstimatedDeliveryCard, { dateText: result.estimatedDelivery }) : null,
-    /* @__PURE__ */ jsx3(TrackingProgress, { steps })
+    /* @__PURE__ */ jsx3(TrackingProgress, { steps, color })
   ] });
 }
 function DeliveryResult({ heading, contentsHeading, carrierHeading, result, editing }) {
@@ -1303,7 +1356,7 @@ function DeliveryResult({ heading, contentsHeading, carrierHeading, result, edit
 }
 function ReadyToGoQueryEditor(block) {
   return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go query editor", style: editorHeroStyle, children: /* @__PURE__ */ jsxs3("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: editorFormCardStyle, children: [
-    /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
+    /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "Track your order" }) }),
     /* @__PURE__ */ jsxs3("div", { style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
       /* @__PURE__ */ jsx3("div", { style: { ...tabStyle(true), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "trackingTabLabel", fallback: "Tracking Number" }) }),
       /* @__PURE__ */ jsx3("div", { style: { ...tabStyle(false), display: "flex", alignItems: "center", justifyContent: "center", cursor: "default" }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "orderTabLabel", fallback: "Order Number" }) })
@@ -1324,13 +1377,13 @@ function ReadyToGoQueryEditor(block) {
           }
         }
       ),
-      /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: 58, marginTop: 8, borderRadius: "var(--pb-radius, 8px)", background: "var(--pb-color-primary, #111)", color: "#fff", fontSize: 15, fontWeight: 600 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
+      /* @__PURE__ */ jsx3("div", { style: submitButtonStyle(block), children: /* @__PURE__ */ jsx3(InlineText, { block, name: "submitLabel", fallback: "Track Your Order" }) })
     ] }),
     /* @__PURE__ */ jsx3("p", { style: { marginTop: "auto", paddingTop: 28, textAlign: "center", fontSize: 12, lineHeight: "17px", fontStyle: "italic", color: "#b8b8b8" }, children: "Powered by BestTrack" })
   ] }) });
 }
-function ReadyToGoProgressEditor() {
-  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go progress editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: "1px solid #f1f5f9" }, children: /* @__PURE__ */ jsx3("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: /* @__PURE__ */ jsx3(ProgressResult, { result: previewReadyToGoTracking(), showEstimatedDelivery: false }) }) });
+function ReadyToGoProgressEditor(block) {
+  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go progress editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)", borderBottom: "1px solid #f1f5f9" }, children: /* @__PURE__ */ jsx3("div", { style: { ...contentWidth, textAlign: "center", width: "min(1248px, 100%)" }, children: /* @__PURE__ */ jsx3(ProgressResult, { result: previewReadyToGoTracking(), showEstimatedDelivery: false, color: text(block, "progressColor") }) }) });
 }
 function ReadyToGoDeliveryEditor(block) {
   const { adPreview } = useReadyToGoRuntime();
@@ -1354,7 +1407,7 @@ function ReadyToGoRecommendationsEditor(block) {
     href: product.handle ? `/products/${product.handle}` : void 0
   }));
   const items = selected.length ? selected : previewReadyToGoTracking().recommendations ?? [];
-  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go recommendations editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)" }, children: /* @__PURE__ */ jsxs3("div", { style: { ...contentWidth, padding: "48px 24px" }, children: [
+  return /* @__PURE__ */ jsx3("section", { "aria-label": "Ready-to-go recommendations editor", style: { ...pageFont, background: "var(--pb-color-background, #fff)", color: "var(--pb-color-text, #0f172a)" }, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth, children: [
     /* @__PURE__ */ jsx3("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: /* @__PURE__ */ jsx3(InlineText, { block, name: "heading", fallback: "You may also like..." }) }),
     /* @__PURE__ */ jsx3("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx3(RecommendationCards, { items }) })
   ] }) });
@@ -1398,7 +1451,7 @@ function ReadyToGoQueryBlock(props) {
   };
   const loading = runtime.phase === "loading";
   return /* @__PURE__ */ jsx3("section", { style: heroStyle, children: /* @__PURE__ */ jsxs3("div", { role: "region", "aria-label": "Ready-to-go tracking query", style: formCardStyle, children: [
-    heading ? /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15 }, children: heading }) : null,
+    heading ? /* @__PURE__ */ jsx3("h1", { style: { margin: "0 0 24px", textAlign: "center", fontSize: 28, lineHeight: 1.15, overflowWrap: "anywhere" }, children: heading }) : null,
     /* @__PURE__ */ jsxs3("div", { role: "tablist", "aria-label": "Tracking method", style: { display: "flex", width: "100%", borderBottom: "1px solid #cbd5e1" }, children: [
       /* @__PURE__ */ jsx3("button", { type: "button", role: "tab", "aria-selected": mode === "tracking", onClick: () => {
         setMode("tracking");
@@ -1420,13 +1473,13 @@ function ReadyToGoQueryBlock(props) {
         /* @__PURE__ */ jsx3("input", { id: "ready-to-go-tracking-number", "aria-label": "Tracking number", value: trackingNumber, onChange: (event) => setTrackingNumber(event.target.value), placeholder: "Tracking Number", style: inputStyle })
       ] }),
       localError ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: localError }) : null,
-      /* @__PURE__ */ jsx3("button", { type: "submit", disabled: loading, style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", minHeight: 58, marginTop: 8, border: 0, borderRadius: "var(--pb-radius, 8px)", background: loading ? "#475569" : "var(--pb-color-primary, #111)", color: "#fff", font: "inherit", fontSize: 15, fontWeight: 600, cursor: loading ? "wait" : "pointer", opacity: loading ? 0.7 : 1 }, children: loading ? "Tracking..." : submitLabel }),
+      /* @__PURE__ */ jsx3("button", { type: "submit", disabled: loading, style: { ...submitButtonStyle(props, loading), border: 0, font: "inherit", fontSize: 15, fontWeight: 600, cursor: loading ? "wait" : "pointer", opacity: loading ? 0.7 : 1 }, children: loading ? "Tracking..." : submitLabel }),
       runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { role: "alert", style: { margin: 0, textAlign: "center", fontSize: 12, color: "#f43f5e" }, children: runtime.error }) : null
     ] }),
     /* @__PURE__ */ jsx3(RuntimeWatermark, { watermark: runtime.watermark })
   ] }) });
 }
-function ReadyToGoProgressBlock() {
+function ReadyToGoProgressBlock(props) {
   const runtime = useReadyToGoRuntime();
   const result = runtime.result;
   if (runtime.phase === "idle") return null;
@@ -1437,7 +1490,7 @@ function ReadyToGoProgressBlock() {
       /* @__PURE__ */ jsx3(SkeletonRow, {})
     ] }) : null,
     runtime.phase === "error" ? /* @__PURE__ */ jsx3("p", { style: { margin: 0, color: "#b42318" }, children: "Shipment progress is temporarily unavailable." }) : null,
-    runtime.phase === "success" && result ? /* @__PURE__ */ jsx3(ProgressResult, { result }) : null
+    runtime.phase === "success" && result ? /* @__PURE__ */ jsx3(ProgressResult, { result, color: text(props, "progressColor") }) : null
   ] }) });
 }
 function ReadyToGoDeliveryBlock(props) {
@@ -1457,7 +1510,7 @@ function ReadyToGoRecommendationsBlock(props) {
   const runtime = useReadyToGoRuntime();
   const heading = text(props, "heading", "You may also like...");
   if (runtime.recommendations.phase !== "success" || runtime.recommendations.items.length === 0) return null;
-  return /* @__PURE__ */ jsx3(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs3("div", { style: { ...contentWidth, padding: "48px 24px" }, children: [
+  return /* @__PURE__ */ jsx3(SectionShell, { title: heading, bordered: false, children: /* @__PURE__ */ jsxs3("div", { style: contentWidth, children: [
     /* @__PURE__ */ jsx3("h3", { style: { margin: 0, textAlign: "center", fontSize: 20, lineHeight: "20px", fontWeight: 700 }, children: heading }),
     /* @__PURE__ */ jsx3("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx3(RecommendationCards, { items: runtime.recommendations.items }) })
   ] }) });
@@ -1492,6 +1545,7 @@ var readyToGoBlocks = withTemplatePolicy([
     defaultProps: {
       heading: "Track your order",
       submitLabel: "Track Your Order",
+      submitButtonColor: "#111111",
       defaultTrackingNumber: "BT-2048-DEMO",
       defaultOrderNumber: "",
       defaultQueryMode: "tracking",
@@ -1503,6 +1557,7 @@ var readyToGoBlocks = withTemplatePolicy([
     fields: {
       heading: text2("Heading"),
       submitLabel: text2("Button label"),
+      submitButtonColor: { field: "besttrack.ready-to-go.text", label: "Button color", control: "color", group: "Style" },
       defaultTrackingNumber: text2("Default tracking number"),
       defaultOrderNumber: text2("Default order number"),
       defaultQueryMode: text2("Default query mode"),
@@ -1517,10 +1572,12 @@ var readyToGoBlocks = withTemplatePolicy([
     label: "Shipment progress",
     category: "BestTrack Ready-to-go",
     targets: ["web"],
-    defaultProps: {},
+    defaultProps: { progressColor: "#0f172a" },
     defaultVariant: "default",
     variants: [{ id: "default", label: "Default" }],
-    fields: {},
+    fields: {
+      progressColor: { field: "besttrack.ready-to-go.text", label: "Progress color", control: "color", group: "Style" }
+    },
     render: { web: ReadyToGoProgressBlock, editor: ReadyToGoProgressEditor }
   },
   {

package/dist/validation.js

@@ -6,6 +6,7 @@ import {
 
 // src/validation.ts
 var textField = { field: "besttrack.validation.text", control: "text" };
+var colorField = { field: "besttrack.validation.color", control: "color" };
 var productsField = { field: "besttrack.validation.products", control: "products" };
 var strictUrlField = {
   field: "besttrack.validation.url",
@@ -13,7 +14,7 @@ var strictUrlField = {
   validation: { allowRelativeUrl: false, allowedUrlProtocols: ["https:"], allowLocalhost: true }
 };
 function fields(keys, urlKeys = [], resourceKeys = [], productsKeys = []) {
-  return Object.fromEntries(keys.map((key) => [key, productsKeys.includes(key) ? productsField : resourceKeys.includes(key) ? { field: "besttrack.validation.resource" } : urlKeys.includes(key) ? strictUrlField : textField]));
+  return Object.fromEntries(keys.map((key) => [key, productsKeys.includes(key) ? productsField : resourceKeys.includes(key) ? { field: "besttrack.validation.resource" } : urlKeys.includes(key) ? strictUrlField : /color$/i.test(key) ? colorField : textField]));
 }
 function block(type, version, keys, variants, validate, urlKeys = [], resourceKeys = [], productsKeys = []) {
   return {
@@ -67,8 +68,8 @@ function validateFeaturedProduct(props) {
   return issues;
 }
 var readyToGoContracts = [
-  block("besttrack.ready-to-go.query", 1, ["heading", "submitLabel", "defaultTrackingNumber", "defaultOrderNumber", "defaultQueryMode", "trackingTabLabel", "orderTabLabel"], ["default"]),
-  block("besttrack.ready-to-go.progress", 1, [], ["default"]),
+  block("besttrack.ready-to-go.query", 1, ["heading", "submitLabel", "submitButtonColor", "defaultTrackingNumber", "defaultOrderNumber", "defaultQueryMode", "trackingTabLabel", "orderTabLabel"], ["default"]),
+  block("besttrack.ready-to-go.progress", 1, ["progressColor"], ["default"]),
   block("besttrack.ready-to-go.delivery", 1, ["heading", "contentsHeading", "carrierHeading"], ["default", "compact"]),
   block("besttrack.ready-to-go.recommendations", 1, ["heading", "products"], ["default", "grid"], void 0, [], [], ["products"])
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standhigher/besttrack-page-extension",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "BestTrack business extension entry point for @standhigher/puck-page-builder.",
   "type": "module",
   "files": [
@@ -22,7 +22,7 @@
   "dependencies": {
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
-    "@standhigher/puck-page-builder": "0.12.1"
+    "@standhigher/puck-page-builder": "0.12.3"
   },
   "devDependencies": {
     "tsup": "^8.5.1",