@builder.io/sdk-qwik 0.14.21 → 0.14.22

package/lib/browser/index.qwik.mjs

@@ -365,6 +365,7 @@ function getProcessedBlock({ block, context, shouldEvaluateBindings, localState,
   else
     return transformedBlock;
 }
+const camelToKebabCase = (str) => str ? str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase() : "";
 function throttle(func, wait, options = {}) {
   let context;
   let args;
@@ -411,7 +412,6 @@ function assign(target, ..._args) {
   }
   return to;
 }
-const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : "";
 function bindAnimations(animations) {
   for (const animation of animations)
     switch (animation.trigger) {
@@ -462,7 +462,7 @@ function triggerAnimation(animation) {
     element.style.transitionDelay = "0";
     assign(element.style, animation.steps[0].styles);
     setTimeout(() => {
-      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
       if (animation.delay)
         element.style.transitionDelay = animation.delay + "s";
       assign(element.style, animation.steps[1].styles);
@@ -520,7 +520,7 @@ function bindScrollInViewAnimation(animation) {
     }
     attachDefaultState();
     setTimeout(() => {
-      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      element.style.transition = `all ${animation.duration}s ${camelToKebabCase(animation.easing)}`;
       if (animation.delay)
         element.style.transitionDelay = animation.delay + "s";
     });
@@ -531,7 +531,6 @@ function bindScrollInViewAnimation(animation) {
     immediateOnScroll();
   });
 }
-const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 const convertStyleMapToCSSArray = (style) => {
   const cssProps = Object.entries(style).map(([key, value]) => {
     if (typeof value === "string")
@@ -635,7 +634,8 @@ const shouldPassLinkComponent = (block) => {
     "Symbol",
     "Columns",
     "Form:Form",
-    "Builder: Tabs"
+    "Builder: Tabs",
+    "Builder:Accordion"
   ].includes(block.name));
 };
 const shouldPassRegisteredComponents = (block) => {
@@ -643,7 +643,8 @@ const shouldPassRegisteredComponents = (block) => {
     "Symbol",
     "Columns",
     "Form:Form",
-    "Builder: Tabs"
+    "Builder: Tabs",
+    "Builder:Accordion"
   ].includes(block.name));
 };
 const SIZES = {
@@ -761,7 +762,7 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
         className: `${className}:hover`,
         styles: {
           ...hoverStyles,
-          transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(hoverAnimation.easing)}`,
+          transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(hoverAnimation.easing)}`,
           transitionDelay: hoverAnimation.delay ? `${hoverAnimation.delay}s` : "0s"
         }
       }) || "";
@@ -1352,7 +1353,7 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     }, 1, "jN_4") : null
   }, 1, "jN_5");
 }, "Block_component_nnPv0RY0U0k"));
-const onClick$1 = function onClick2(props, state, className) {
+const onClick$3 = function onClick2(props, state, className) {
   var _a, _b;
   if (isEditing() && !((_a = props.blocks) == null ? void 0 : _a.length))
     (_b = window.parent) == null ? void 0 : _b.postMessage({
@@ -1399,7 +1400,7 @@ const BlocksWrapper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     },
     onClick$: /* @__PURE__ */ inlinedQrl((event) => {
       const [className2, props2, state2] = useLexicalScope();
-      return onClick$1(props2);
+      return onClick$3(props2);
     }, "BlocksWrapper_component_onClick_ufezvOupQrM", [
       className,
       props,
@@ -1407,7 +1408,7 @@ const BlocksWrapper = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     ]),
     onKeyPress$: /* @__PURE__ */ inlinedQrl((event) => {
       const [className2, props2, state2] = useLexicalScope();
-      return onClick$1(props2);
+      return onClick$3(props2);
     }, "BlocksWrapper_component_onKeyPress_9bz8vCQc3kg", [
       className,
       props,
@@ -2082,7 +2083,7 @@ const handleABTesting = async ({ item, canTrack }) => {
   };
 };
 const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
-const componentInfo$g = {
+const componentInfo$h = {
   name: "Core:Button",
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
@@ -2120,7 +2121,7 @@ const componentInfo$g = {
   static: true,
   noWrap: true
 };
-const componentInfo$f = {
+const componentInfo$g = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
   name: "Columns",
   isRSC: true,
@@ -2362,14 +2363,14 @@ const componentInfo$f = {
     }
   ]
 };
-const componentInfo$e = {
+const componentInfo$f = {
   name: "Fragment",
   static: true,
   hidden: true,
   canHaveChildren: true,
   noWrap: true
 };
-const componentInfo$d = {
+const componentInfo$e = {
   name: "Image",
   static: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
@@ -2517,7 +2518,7 @@ const componentInfo$d = {
     }
   ]
 };
-const componentInfo$c = {
+const componentInfo$d = {
   name: "Core:Section",
   static: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
@@ -2562,7 +2563,7 @@ const componentInfo$c = {
     }
   ]
 };
-const componentInfo$b = {
+const componentInfo$c = {
   name: "Slot",
   isRSC: true,
   description: "Allow child blocks to be inserted into this content when used as a Symbol",
@@ -2617,7 +2618,7 @@ const Slot = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     }
   }, 0, "B1_1");
 }, "Slot_component_WWgWgfV0bb0"));
-const componentInfo$a = {
+const componentInfo$b = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2697,7 +2698,7 @@ const defaultElement = {
     }
   }
 };
-const componentInfo$9 = {
+const componentInfo$a = {
   name: "Builder: Tabs",
   inputs: [
     {
@@ -2828,8 +2829,11 @@ const componentInfo$9 = {
 const activeTabContent = function activeTabContent2(props, state, active) {
   return props.tabs && props.tabs[active].content;
 };
-const getActiveTabStyle = function getActiveTabStyle2(props, state, index) {
-  return state.activeTab === index ? props.activeTabStyle : {};
+const onClick$2 = function onClick22(props, state, index) {
+  if (index === state.activeTab && props.collapsible)
+    state.activeTab = -1;
+  else
+    state.activeTab = index;
 };
 const Tabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
@@ -2852,16 +2856,15 @@ const Tabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
         class: `builder-tab-wrap ${state.activeTab === index ? "builder-tab-active" : ""}`,
         onClick$: /* @__PURE__ */ inlinedQrl((event) => {
           const [index2, props2, state2] = useLexicalScope();
-          if (index2 === state2.activeTab && props2.collapsible)
-            state2.activeTab = -1;
-          else
-            state2.activeTab = index2;
+          return onClick$2(props2, state2, index2);
         }, "Tabs_component_div_div_span_onClick_hSTBabAHGks", [
           index,
           props,
           state
         ]),
-        style: getActiveTabStyle(props, state, index)
+        style: {
+          ...state.activeTab === index ? props.activeTabStyle : {}
+        }
       }, null, /* @__PURE__ */ _jsxC(Blocks, {
         get parent() {
           return props.builderBlock.id;
@@ -2933,7 +2936,7 @@ const Tabs = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     }, 3, "6k_1"), 1, "6k_2") : null
   ], 1, "6k_3");
 }, "Tabs_component_MhWcxXy0lMY"));
-const componentInfo$8 = {
+const componentInfo$9 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2968,6 +2971,364 @@ const Text = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
     }
   }, null, 3, "yO_0");
 }, "Text_component_15p0cKUxgIE"));
+const convertOrderNumberToString = (order) => {
+  return order.toString();
+};
+const getAccordionTitleClassName = function getAccordionTitleClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  return `builder-accordion-title builder-accordion-title-${state.open.includes(index) ? "open" : "closed"}`;
+};
+const getAccordionDetailClassName = function getAccordionDetailClassName2(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  return `builder-accordion-detail builder-accordion-detail-${state.open.includes(index) ? "open" : "closed"}`;
+};
+const onClick$1 = function onClick23(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index) {
+  if (state.open.includes(index))
+    state.open = onlyOneAtATime.value ? [] : state.open.filter((item) => item !== index);
+  else
+    state.open = onlyOneAtATime.value ? [
+      index
+    ] : state.open.concat(index);
+};
+const Accordion = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const state = useStore({
+    open: []
+  });
+  const onlyOneAtATime = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    return Boolean(props2.grid || props2.oneAtATime);
+  }, "Accordion_component_onlyOneAtATime_useComputed_QYD7IoPU2HY", [
+    props
+  ]));
+  const accordionStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2] = useLexicalScope();
+    const styles = {
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      ...props2.grid && {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        flexWrap: "wrap"
+      }
+    };
+    return styles;
+  }, "Accordion_component_accordionStyles_useComputed_Jrd0cwGn25U", [
+    props
+  ]));
+  const accordionTitleStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const shared = {
+      display: "flex",
+      flexDirection: "column"
+    };
+    const styles = {
+      ...shared,
+      alignItems: "stretch",
+      cursor: "pointer"
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
+  }, "Accordion_component_accordionTitleStyles_useComputed_FopdBMH0V6U"));
+  const openGridItemOrder = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [props2, state2] = useLexicalScope();
+    let itemOrder = null;
+    const getOpenGridItemPosition = props2.grid && state2.open.length;
+    if (getOpenGridItemPosition && document) {
+      const openItemIndex = state2.open[0];
+      const openItem = document.querySelector(`.builder-accordion-title[data-index="${openItemIndex}"]`);
+      let subjectItem = openItem;
+      itemOrder = openItemIndex;
+      if (subjectItem) {
+        let prevItemRect = subjectItem.getBoundingClientRect();
+        while (subjectItem = subjectItem && subjectItem.nextElementSibling)
+          if (subjectItem) {
+            if (subjectItem.classList.contains("builder-accordion-detail"))
+              continue;
+            const subjectItemRect = subjectItem.getBoundingClientRect();
+            if (subjectItemRect.left > prevItemRect.left) {
+              const index = parseInt(subjectItem.getAttribute("data-index") || "", 10);
+              if (!isNaN(index)) {
+                prevItemRect = subjectItemRect;
+                itemOrder = index;
+              }
+            } else
+              break;
+          }
+      }
+    }
+    if (typeof itemOrder === "number")
+      itemOrder = itemOrder + 1;
+    return itemOrder;
+  }, "Accordion_component_openGridItemOrder_useComputed_cCQY1Vnxll0", [
+    props,
+    state
+  ]));
+  const accordionDetailStyles = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const [openGridItemOrder2, props2] = useLexicalScope();
+    const styles = {
+      order: typeof openGridItemOrder2.value === "number" ? openGridItemOrder2.value : void 0,
+      ...props2.grid && {
+        width: "100%"
+      }
+    };
+    return Object.fromEntries(Object.entries(styles).filter(([_, value]) => value !== void 0));
+  }, "Accordion_component_accordionDetailStyles_useComputed_S0QmQzGJoRo", [
+    openGridItemOrder,
+    props
+  ]));
+  return /* @__PURE__ */ _jsxQ("div", null, {
+    class: "builder-accordion",
+    style: _fnSignal((p0) => p0.value, [
+      accordionStyles
+    ], "p0.value")
+  }, (props.items || []).map((item, index) => {
+    _jsxBranch();
+    return /* @__PURE__ */ _jsxC(Fragment$1, {
+      children: [
+        /* @__PURE__ */ _jsxQ("div", {
+          class: getAccordionTitleClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index),
+          "data-index": index,
+          onClick$: /* @__PURE__ */ inlinedQrl((event) => {
+            const [accordionDetailStyles2, accordionStyles2, accordionTitleStyles2, index2, onlyOneAtATime2, openGridItemOrder2, props2, state2] = useLexicalScope();
+            return onClick$1(props2, state2, onlyOneAtATime2, accordionStyles2, accordionTitleStyles2, openGridItemOrder2, accordionDetailStyles2, index2);
+          }, "Accordion_component_div_Fragment_div_onClick_VtzhhJnK0XI", [
+            accordionDetailStyles,
+            accordionStyles,
+            accordionTitleStyles,
+            index,
+            onlyOneAtATime,
+            openGridItemOrder,
+            props,
+            state
+          ]),
+          style: {
+            ...accordionTitleStyles.value,
+            width: props.grid ? props.gridRowWidth : void 0,
+            order: openGridItemOrder.value !== null ? convertOrderNumberToString(index) : convertOrderNumberToString(index + 1)
+          }
+        }, null, /* @__PURE__ */ _jsxC(Blocks, {
+          get blocks() {
+            return item.title;
+          },
+          path: `items.${index}.title`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [_IMMUTABLE]: {
+            blocks: _wrapProp(item, "title"),
+            context: _fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: _fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents")
+          }
+        }, 3, "hf_0"), 0, null),
+        state.open.includes(index) ? /* @__PURE__ */ _jsxQ("div", {
+          class: getAccordionDetailClassName(props, state, onlyOneAtATime, accordionStyles, accordionTitleStyles, openGridItemOrder, accordionDetailStyles, index)
+        }, {
+          style: _fnSignal((p0) => p0.value, [
+            accordionDetailStyles
+          ], "p0.value")
+        }, /* @__PURE__ */ _jsxC(Blocks, {
+          get blocks() {
+            return item.detail;
+          },
+          path: `items.${index}.detail`,
+          get parent() {
+            return props.builderBlock.id;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get linkComponent() {
+            return props.builderLinkComponent;
+          },
+          [_IMMUTABLE]: {
+            blocks: _wrapProp(item, "detail"),
+            context: _fnSignal((p0) => p0.builderContext, [
+              props
+            ], "p0.builderContext"),
+            linkComponent: _fnSignal((p0) => p0.builderLinkComponent, [
+              props
+            ], "p0.builderLinkComponent"),
+            parent: _fnSignal((p0) => p0.builderBlock.id, [
+              props
+            ], "p0.builderBlock.id"),
+            registeredComponents: _fnSignal((p0) => p0.builderComponents, [
+              props
+            ], "p0.builderComponents")
+          }
+        }, 3, "hf_1"), 1, "hf_2") : null
+      ]
+    }, 1, "hf_3");
+  }), 1, "hf_4");
+}, "Accordion_component_jkuUCHm0nt0"));
+const defaultTitle = {
+  "@type": "@builder.io/sdk:Element",
+  layerName: "Accordion item title",
+  responsiveStyles: {
+    large: {
+      marginTop: "10px",
+      position: "relative",
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      paddingBottom: "10px"
+    }
+  },
+  children: [
+    {
+      "@type": "@builder.io/sdk:Element",
+      responsiveStyles: {
+        large: {
+          textAlign: "left",
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      component: {
+        name: "Text",
+        options: {
+          text: "I am an accordion title. Click me!"
+        }
+      }
+    }
+  ]
+};
+const defaultDetail = {
+  "@type": "@builder.io/sdk:Element",
+  layerName: "Accordion item detail",
+  responsiveStyles: {
+    large: {
+      position: "relative",
+      display: "flex",
+      alignItems: "stretch",
+      flexDirection: "column",
+      marginTop: "10px",
+      paddingBottom: "10px"
+    }
+  },
+  children: [
+    {
+      "@type": "@builder.io/sdk:Element",
+      responsiveStyles: {
+        large: {
+          paddingTop: "50px",
+          textAlign: "left",
+          display: "flex",
+          flexDirection: "column",
+          paddingBottom: "50px"
+        }
+      },
+      component: {
+        name: "Text",
+        options: {
+          text: "I am an accordion detail, hello!"
+        }
+      }
+    }
+  ]
+};
+const componentInfo$8 = {
+  name: "Builder:Accordion",
+  canHaveChildren: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35",
+  defaultStyles: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch"
+  },
+  inputs: [
+    {
+      name: "items",
+      type: "list",
+      broadcast: true,
+      subFields: [
+        {
+          name: "title",
+          type: "uiBlocks",
+          hideFromUI: true,
+          defaultValue: [
+            defaultTitle
+          ]
+        },
+        {
+          name: "detail",
+          type: "uiBlocks",
+          hideFromUI: true,
+          defaultValue: [
+            defaultDetail
+          ]
+        }
+      ],
+      defaultValue: [
+        {
+          title: [
+            defaultTitle
+          ],
+          detail: [
+            defaultDetail
+          ]
+        },
+        {
+          title: [
+            defaultTitle
+          ],
+          detail: [
+            defaultDetail
+          ]
+        }
+      ],
+      showIf: (options) => !options.get("useChildrenForItems")
+    },
+    {
+      name: "oneAtATime",
+      helperText: "Only allow opening one at a time (collapse all others when new item openned)",
+      type: "boolean",
+      defaultValue: false
+    },
+    {
+      name: "grid",
+      helperText: "Display as a grid",
+      type: "boolean",
+      defaultValue: false
+    },
+    {
+      name: "gridRowWidth",
+      helperText: "Display as a grid",
+      type: "string",
+      showIf: (options) => options.get("grid"),
+      defaultValue: "25%"
+    },
+    {
+      name: "useChildrenForItems",
+      type: "boolean",
+      helperText: "Use child elements for each slide, instead of the array. Useful for dynamically repeating items",
+      advanced: true,
+      defaultValue: false,
+      onChange: (options) => {
+        if (options.get("useChildrenForItems") === true)
+          options.set("items", []);
+      }
+    }
+  ]
+};
 const componentInfo$7 = {
   name: "Custom Code",
   static: true,
@@ -4212,40 +4573,44 @@ const getExtraComponents = () => [
 const getDefaultRegisteredComponents = () => [
   {
     component: Button,
-    ...componentInfo$g
+    ...componentInfo$h
   },
   {
     component: Columns,
-    ...componentInfo$f
+    ...componentInfo$g
   },
   {
     component: FragmentComponent,
-    ...componentInfo$e
+    ...componentInfo$f
   },
   {
     component: Image,
-    ...componentInfo$d
+    ...componentInfo$e
   },
   {
     component: SectionComponent,
-    ...componentInfo$c
+    ...componentInfo$d
   },
   {
     component: Slot,
-    ...componentInfo$b
+    ...componentInfo$c
   },
   {
     component: Symbol$1,
-    ...componentInfo$a
+    ...componentInfo$b
   },
   {
     component: Text,
-    ...componentInfo$8
+    ...componentInfo$9
   },
   ...[
     {
       component: Tabs,
-      ...componentInfo$9
+      ...componentInfo$a
+    },
+    {
+      component: Accordion,
+      ...componentInfo$8
     }
   ],
   ...getExtraComponents()
@@ -4704,7 +5069,7 @@ function isFromTrustedHost(trustedHosts, e) {
   const url = new URL(e.origin), hostname = url.hostname;
   return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
 }
-const SDK_VERSION = "0.14.21";
+const SDK_VERSION = "0.14.22";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -5025,7 +5390,7 @@ const evaluateJsCode = function evaluateJsCode2(props, state, showContentProps,
       enableCache: false
     });
 };
-const onClick = function onClick22(props, state, showContentProps, elementRef, event) {
+const onClick = function onClick24(props, state, showContentProps, elementRef, event) {
   var _a, _b;
   if (props.builderContextSignal.content) {
     const variationId = (_a = props.builderContextSignal.content) == null ? void 0 : _a.testVariationId;
@@ -5184,7 +5549,7 @@ const EnableEditor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
   useTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [elementRef2, props2, showContentProps2, state2] = useLexicalScope();
     if (!props2.apiKey)
-      logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+      logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
     evaluateJsCode(props2);
     runHttpRequests(props2, state2, showContentProps2, elementRef2);
     emitStateUpdate(props2);