@planningcenter/topbar 12.2.8 → 12.2.9-rc.0

package/dist/topbar.module.js

@@ -4345,22 +4345,34 @@ 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","iconSparkle":"iconSparkle-t0OzK","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-"};
+var styles = {"banner":"banner-YfQ37","stacked":"stacked-EwLRh","content":"content-lNjWf","icon":"icon-abz7q","iconShape":"iconShape-6uyot","iconSparkle":"iconSparkle-t0OzK","text":"text--Vlhl","title":"title-zOEOR","subtitle":"subtitle-ufLnk","chevron":"chevron-oOUA-","inlineContent":"inlineContent-h5sVl","sparkle":"sparkle-uuMBp","inlineTitle":"inlineTitle-ru2Rk","action":"action-fSY3n","actionLabel":"actionLabel-MRBjb","actionChevron":"actionChevron-DghlN"};
 
-function AskAIBanner({
-  onClick
-}) {
+function AskAIBanner(props) {
+  var _a, _b;
+  const isStacked = props.variant !== "inline";
   return /*#__PURE__*/React__default.createElement("button", {
-    className: styles.banner,
-    onClick: () => onClick(),
+    className: classnames(styles.banner, {
+      [styles.stacked]: isStacked
+    }),
+    onClick: () => props.onClick(),
     type: "button"
-  }, /*#__PURE__*/React__default.createElement("span", {
+  }, isStacked ? (/*#__PURE__*/React__default.createElement(StackedContent, {
+    title: (_a = props.title) !== null && _a !== void 0 ? _a : "Ask AI"
+  })) : (/*#__PURE__*/React__default.createElement(InlineContent, {
+    action: (_b = props.action) !== null && _b !== void 0 ? _b : "Ask AI",
+    title: props.title
+  })));
+}
+function StackedContent({
+  title
+}) {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: styles.content
   }, /*#__PURE__*/React__default.createElement(AskAIIcon, null), /*#__PURE__*/React__default.createElement("span", {
     className: styles.text
   }, /*#__PURE__*/React__default.createElement("span", {
     className: styles.title
-  }, "Ask AI"), /*#__PURE__*/React__default.createElement("span", {
+  }, title), /*#__PURE__*/React__default.createElement("span", {
     className: styles.subtitle
   }, "Support answers tailored to you"))), /*#__PURE__*/React__default.createElement(Icon, {
     className: styles.chevron,
@@ -4368,6 +4380,36 @@ function AskAIBanner({
     size: "16px"
   }));
 }
+function InlineContent({
+  action,
+  title
+}) {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+    className: styles.inlineContent
+  }, /*#__PURE__*/React__default.createElement(SparkleIcon, null), /*#__PURE__*/React__default.createElement("span", {
+    className: styles.inlineTitle
+  }, title)), /*#__PURE__*/React__default.createElement("span", {
+    className: styles.action
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: styles.actionLabel
+  }, action), /*#__PURE__*/React__default.createElement(Icon, {
+    className: styles.actionChevron,
+    name: "general.rightChevron",
+    size: "14px"
+  })));
+}
+const SPARKLE_PATH = "M3.809 10.1332C3.87511 9.95596 4.12579 9.95588 4.19181 10.1332L4.63712 11.3363C4.64169 11.3487 4.65116 11.359 4.66349 11.3637L5.86661 11.809C6.04452 11.8749 6.04455 12.126 5.86661 12.1918L4.66349 12.6371C4.65134 12.6417 4.64173 12.6513 4.63712 12.6635L4.19181 13.8666C4.12597 14.0445 3.87486 14.0445 3.809 13.8666L3.36368 12.6635C3.35905 12.6512 3.3487 12.6417 3.33634 12.6371L2.13321 12.1918C1.95588 12.1258 1.95596 11.8751 2.13321 11.809L3.33634 11.3637C3.34877 11.3591 3.35908 11.3488 3.36368 11.3363L3.809 10.1332ZM8.52091 3.33341C8.68571 2.88899 9.31518 2.88891 9.47989 3.33341L10.5922 6.34122C10.6037 6.37226 10.6285 6.39712 10.6596 6.4086L13.6664 7.52091C14.1113 7.68553 14.1113 8.31528 13.6664 8.47989L10.6596 9.5922C10.6285 9.6037 10.6037 9.6285 10.5922 9.65958L9.47989 12.6664C9.31528 13.1113 8.68553 13.1113 8.52091 12.6664L7.4086 9.65958C7.39712 9.62853 7.37226 9.60371 7.34122 9.5922L4.33341 8.47989C3.88891 8.31518 3.88899 7.68571 4.33341 7.52091L7.34122 6.4086C7.3723 6.3971 7.3971 6.3723 7.4086 6.34122L8.52091 3.33341ZM3.809 2.13321C3.87511 1.95596 4.12579 1.95588 4.19181 2.13321L4.63712 3.33634C4.64169 3.3487 4.65116 3.35905 4.66349 3.36368L5.86661 3.809C6.04452 3.87486 6.04455 4.12597 5.86661 4.19181L4.66349 4.63712C4.65134 4.64173 4.64173 4.65134 4.63712 4.66349L4.19181 5.86661C4.12597 6.04455 3.87486 6.04452 3.809 5.86661L3.36368 4.66349C3.35905 4.65116 3.3487 4.64169 3.33634 4.63712L2.13321 4.19181C1.95588 4.12579 1.95596 3.87511 2.13321 3.809L3.33634 3.36368C3.34877 3.35908 3.35908 3.34877 3.36368 3.33634L3.809 2.13321Z";
+function SparkleIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: styles.sparkle,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: SPARKLE_PATH,
+    fill: "currentColor"
+  }));
+}
 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
@@ -4841,9 +4883,18 @@ function HelpdeskComponent({
       AskAIBanner: {
         component: AskAIBanner,
         properties: {
+          action: {
+            type: String
+          },
           onClick: {
             event: false,
             type: Function
+          },
+          title: {
+            type: String
+          },
+          variant: {
+            type: String
           }
         }
       },