@planningcenter/topbar 12.2.0 → 12.2.1

package/dist/topbar.modern.js

@@ -4181,7 +4181,7 @@ var styles$1 = {"toolbar":"toolbar-KHJR5","toolbar-button":"toolbar-button-Ye4h5
 
 const pcoUrl = pcoUrl$1;
 
-var styles = {"banner":"banner-YfQ37","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconWand":"iconWand-yEhh4","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-"};
+var styles = {"banner":"banner-YfQ37","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconSparkle":"iconSparkle-t0OzK","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-"};
 
 function AskAIBanner({
   onClick
@@ -4204,40 +4204,198 @@ function AskAIBanner({
     size: "16px"
   }));
 }
-const GRADIENT_ID = "ask-ai-banner-icon-gradient";
+const SQUIRCLE_PATH = "M15.9994 0C3.19766 0 0 3.20025 0 16C0 28.7998 3.19766 32 15.9994 32C28.8011 32 32 28.8022 32 16C32 3.19779 28.7999 0 15.9994 0Z";
+const SQUIRCLE_BORDER_PATH = "M15.999 0.222656C22.4009 0.222656 26.3132 1.0274 28.6426 3.35645C30.972 5.68549 31.7773 9.59729 31.7773 16C31.7773 22.4025 30.9726 26.3145 28.6436 28.6436C26.3143 30.9726 22.4015 31.7773 15.999 31.7773C9.5968 31.7773 5.68536 30.9719 3.35645 28.6426C1.02748 26.3132 0.222656 22.4015 0.222656 16C0.222656 9.59851 1.02748 5.68678 3.35645 3.35742C5.68536 1.02814 9.5968 0.222687 15.999 0.222656Z";
+// Monotonic counter for per-instance SVG ids. useId would be tidier but isn't
+// available on React 17, which our peer range still supports.
+let iconInstanceCount = 0;
 function AskAIIcon() {
+  const [uid] = useState(() => `ask-ai-icon-${iconInstanceCount++}`);
+  const maskId = `${uid}-mask`;
+  const blur = n => `${uid}-blur-${n}`;
+  const borderA = `${uid}-border-a`;
+  const borderB = `${uid}-border-b`;
   return /*#__PURE__*/React__default.createElement("span", {
     className: styles.icon
   }, /*#__PURE__*/React__default.createElement("svg", {
     className: styles.iconShape,
     viewBox: "0 0 32 32",
+    fill: "none",
     "aria-hidden": "true"
   }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M15.9994 0C3.19766 0 0 3.20025 0 16C0 28.7998 3.19766 32 15.9994 32C28.8011 32 32 28.8022 32 16C32 3.19779 28.7999 0 15.9994 0Z",
-    fill: `url(#${GRADIENT_ID})`
-  }), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
-    id: GRADIENT_ID,
-    x1: "0",
-    y1: "0",
-    x2: "38.0356",
-    y2: "21.1413",
+    d: SQUIRCLE_PATH,
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: maskId,
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "32",
+    height: "32"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: SQUIRCLE_PATH,
+    fill: "#939393"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: `url(#${maskId})`
+  }, /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(0)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "24.2268",
+    cy: "23.7824",
+    rx: "17.9331",
+    ry: "31.1883",
+    transform: "rotate(-135 24.2268 23.7824)",
+    fill: "#B883E2"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(1)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "7.05187",
+    cy: "9.27409",
+    rx: "14.9017",
+    ry: "29.437",
+    transform: "rotate(45 7.05187 9.27409)",
+    fill: "#74A3FF"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(2)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "29.7552",
+    cy: "31.0886",
+    rx: "11.2869",
+    ry: "15.1567",
+    transform: "rotate(-135 29.7552 31.0886)",
+    fill: "#F28B54"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(3)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "3.58734",
+    cy: "4.03178",
+    rx: "11.2869",
+    ry: "15.1567",
+    transform: "rotate(45 3.58734 4.03178)",
+    fill: "#24D7B7"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(4)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "32.0363",
+    cy: "32.0363",
+    rx: "5.65576",
+    ry: "7.59487",
+    transform: "rotate(-135 32.0363 32.0363)",
+    fill: "#FFBC40"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    filter: `url(#${blur(5)})`
+  }, /*#__PURE__*/React__default.createElement("ellipse", {
+    cx: "1.00513",
+    cy: "-0.772657",
+    rx: "5.1403",
+    ry: "6.82216",
+    transform: "rotate(-135 1.00513 -0.772657)",
+    fill: "#70FFD4"
+  })), /*#__PURE__*/React__default.createElement("path", {
+    d: SQUIRCLE_BORDER_PATH,
+    stroke: `url(#${borderA})`,
+    strokeWidth: "0.444444"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: SQUIRCLE_BORDER_PATH,
+    stroke: `url(#${borderB})`,
+    strokeWidth: "0.444444"
+  })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(0),
+    x: "-20.7722",
+    y: "-21.2166",
+    width: "89.9981",
+    height: "89.9981",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "9.77778"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(1),
+    x: "-35.839",
+    y: "-33.6167",
+    width: "85.7816",
+    height: "85.7816",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "9.77778"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(2),
+    x: "-3.16378",
+    y: "-1.83045",
+    width: "65.838",
+    height: "65.838",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "9.77778"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(3),
+    x: "-29.3317",
+    y: "-28.8872",
+    width: "65.838",
+    height: "65.838",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "9.77778"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(4),
+    x: "16.4511",
+    y: "16.4511",
+    width: "31.1704",
+    height: "31.1704",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "4.44444"
+  })), /*#__PURE__*/React__default.createElement("filter", {
+    id: blur(5),
+    x: "-13.9242",
+    y: "-15.7019",
+    width: "29.8586",
+    height: "29.8586",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "4.44444"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: borderA,
+    x1: "4.22222",
+    y1: "2.44444",
+    x2: "16",
+    y2: "14.4444",
     gradientUnits: "userSpaceOnUse"
   }, /*#__PURE__*/React__default.createElement("stop", {
-    stopColor: "#49D4BB"
+    stopColor: "#62FAFF"
   }), /*#__PURE__*/React__default.createElement("stop", {
-    offset: "0.352694",
-    stopColor: "#7CA8FE"
-  }), /*#__PURE__*/React__default.createElement("stop", {
-    offset: "0.656242",
-    stopColor: "#B883E2"
+    offset: "1",
+    stopColor: "#55AFD6",
+    stopOpacity: "0"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: borderB,
+    x1: "28.4444",
+    y1: "29.3333",
+    x2: "22.8889",
+    y2: "22.4444",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#FFA961"
   }), /*#__PURE__*/React__default.createElement("stop", {
     offset: "1",
-    stopColor: "#F28B54"
-  })))), /*#__PURE__*/React__default.createElement(Icon, {
-    className: styles.iconWand,
-    name: "general.magicWand",
-    size: "18px"
-  }));
+    stopColor: "#D48B91",
+    stopOpacity: "0"
+  })))), /*#__PURE__*/React__default.createElement("svg", {
+    className: styles.iconSparkle,
+    viewBox: "0 0 19.4995 17.9999",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M2.71191 12.2002C2.81068 11.9333 3.18834 11.9333 3.2871 12.2002L3.84375 13.7031C3.92138 13.9129 4.08707 14.0786 4.29687 14.1562L5.7998 14.7119C6.06662 14.8107 6.06648 15.1882 5.7998 15.2871L4.29687 15.8437C4.08707 15.9214 3.92138 16.0871 3.84375 16.2969L3.2871 17.7998C3.18821 18.0665 2.81066 18.0666 2.71191 17.7998L2.15625 16.2969C2.07861 16.0871 1.91292 15.9214 1.70312 15.8437L0.200191 15.2871C-0.0667302 15.1883 -0.0667302 14.8107 0.200191 14.7119L1.70312 14.1562C1.91292 14.0786 2.07861 13.9129 2.15625 13.7031L2.71191 12.2002ZM11.2812 2C11.5283 1.33313 12.4717 1.33305 12.7187 2L14.1094 5.75878C14.3035 6.28304 14.7169 6.69659 15.2412 6.89062L18.999 8.28125C19.6663 8.52817 19.6663 9.47182 18.999 9.71875L15.2412 11.1094C14.7168 11.3035 14.3035 11.7168 14.1094 12.2412L12.7187 15.999C12.4718 16.6663 11.5282 16.6663 11.2812 15.999L9.89062 12.2412C9.69659 11.7169 9.28304 11.3035 8.75878 11.1094L5 9.71875C4.33305 9.47173 4.33312 8.52834 5 8.28125L8.75878 6.89062C9.28299 6.69653 9.69653 6.28299 9.89062 5.75878L11.2812 2ZM2.71191 0.200191C2.81068 -0.0667302 3.18834 -0.0667302 3.2871 0.200191L3.84375 1.70312C3.92138 1.91292 4.08707 2.07861 4.29687 2.15625L5.7998 2.71191C6.06662 2.81066 6.06648 3.18821 5.7998 3.2871L4.29687 3.84375C4.08707 3.92138 3.92138 4.08707 3.84375 4.29687L3.2871 5.7998C3.18821 6.06648 2.81066 6.06662 2.71191 5.7998L2.15625 4.29687C2.07861 4.08707 1.91292 3.92138 1.70312 3.84375L0.200191 3.2871C-0.0667302 3.18834 -0.0667302 2.81068 0.200191 2.71191L1.70312 2.15625C1.91292 2.07861 2.07861 1.91292 2.15625 1.70312L2.71191 0.200191Z",
+    fill: "currentColor"
+  })));
 }
 
 // The article heading lives in the deepest populated hierarchy level (lvl0 is
@@ -4403,6 +4561,7 @@ function buildPicobotSrc(origin, path) {
   return fragment ? `${base}#${fragment}` : base;
 }
 
+const LOAD_TIMEOUT_MS = 3000;
 function createPicobotIframe(picobotOrigin) {
   return /*#__PURE__*/React__default.forwardRef(function PicobotIframe({
     currentPath: iframePath,
@@ -4414,10 +4573,25 @@ function createPicobotIframe(picobotOrigin) {
     // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
     // always reflects the live conversation. See buildPicobotSrc.
     const [loadedPath, setLoadedPath] = React__default.useState(iframePath || "");
+    const hasReportedErrorRef = React__default.useRef(false);
+    const loadTimeoutRef = React__default.useRef();
+    const reportLoadError = React__default.useCallback(() => {
+      if (hasReportedErrorRef.current) return;
+      hasReportedErrorRef.current = true;
+      onMessage === null || onMessage === void 0 ? void 0 : onMessage({
+        type: "IFRAME_LOAD_ERROR"
+      });
+    }, [onMessage]);
+    const reportLoadErrorRef = React__default.useRef(reportLoadError);
+    reportLoadErrorRef.current = reportLoadError;
+    React__default.useEffect(function armLoadTimeoutOnMount() {
+      const timeout = setTimeout(() => reportLoadErrorRef.current(), LOAD_TIMEOUT_MS);
+      loadTimeoutRef.current = timeout;
+      return () => clearTimeout(timeout);
+    }, []);
     React__default.useEffect(function subscribeToGuestMessages() {
-      if (!onIframeChangePath && !onMessage) return undefined;
       function handleGuestMessage(e) {
-        var _a, _b;
+        var _a, _b, _c;
         if (e.origin !== picobotOrigin) return;
         if (!e.source || !iframeRef.current) return;
         if (e.source !== iframeRef.current.contentWindow) return;
@@ -4426,6 +4600,7 @@ function createPicobotIframe(picobotOrigin) {
           setLoadedPath(reportedPath);
           onIframeChangePath(reportedPath);
         }
+        if (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") clearTimeout(loadTimeoutRef.current);
         if (onMessage) onMessage(e.data);
       }
       window.addEventListener("message", handleGuestMessage);