@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260320074145 → 0.8.1-dev.20260323045408

package/dist/index.mjs

@@ -1,3 +1,6 @@
+"use client";
+
+
 // src/components/controls/view/ViewControl.tsx
 import React11 from "react";
 
@@ -2912,7 +2915,60 @@ var QuoteNode_default = QuoteNode;
 
 // src/components/pageRenderingEngine/nodes/CodeNode.tsx
 import React42 from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+
+// src/components/CopyButton.tsx
+import { useState as useState8, useRef as useRef3, useEffect as useEffect7 } from "react";
+import { jsx as jsx52, jsxs as jsxs26 } from "react/jsx-runtime";
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState8(false);
+  const timeoutRef = useRef3(null);
+  useEffect7(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs26(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "flex gap-1 items-center hover:text-white transition",
+      children: [
+        /* @__PURE__ */ jsx52(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            className: "w-4 h-4",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx52(
+              "path",
+              {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z"
+              }
+            )
+          }
+        ),
+        copied ? "Copied!" : "Copy code"
+      ]
+    }
+  );
+}
+
+// src/components/pageRenderingEngine/nodes/CodeNode.tsx
+import { jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
 var CodeNode = (props) => {
   const NodeTypes2 = {
     ["text"]: TextNode_default,
@@ -2925,17 +2981,23 @@ var CodeNode = (props) => {
     if (node.type === "link") return node.text || node.url || "";
     return "";
   }).join("") ?? "";
-  return /* @__PURE__ */ jsx52("div", { className: "code-block", children: /* @__PURE__ */ jsx52("code", { className: "block bg-gray-900 text-gray-100 p-4 rounded-b-md text-sm whitespace-pre-wrap", children: props.node.children && props.node.children.map((node, index) => {
-    const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ jsx52(React42.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx52(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
-  }) }) });
+  return /* @__PURE__ */ jsxs27("div", { className: "code-block", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "flex items-center relative text-gray-200 bg-gray-800 px-4 py-2.5 text-xs font-sans justify-between rounded-t-md", children: [
+      /* @__PURE__ */ jsx53("span", { children: "Code Snippet" }),
+      /* @__PURE__ */ jsx53(CopyButton, { text: textContent })
+    ] }),
+    /* @__PURE__ */ jsx53("code", { className: "block bg-gray-900 text-gray-100 p-4 rounded-b-md text-sm whitespace-pre-wrap", children: props.node.children && props.node.children.map((node, index) => {
+      const SelectedNode = NodeTypes2[node.type];
+      return /* @__PURE__ */ jsx53(React42.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx53(SelectedNode, { node, session: props.session, apiBaseUrl: props.apiBaseUrl, routeParameters: props.routeParameters }) }, index);
+    }) })
+  ] });
 };
 var CodeNode_default = CodeNode;
 
 // src/components/pageRenderingEngine/nodes/HorizontalRuleNode.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var HorizontalRuleNode = (props) => {
-  return /* @__PURE__ */ jsx53("hr", {});
+  return /* @__PURE__ */ jsx54("hr", {});
 };
 var HorizontalRuleNode_default = HorizontalRuleNode;
 
@@ -2944,11 +3006,11 @@ import React48 from "react";
 
 // src/components/pageRenderingEngine/nodes/ImageNode.tsx
 import React43 from "react";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var ImageNode = (props) => {
   const { node, apiBaseUrl = "" } = props;
   let imageUrl = node.imageUrl.startsWith("http") ? node.imageUrl : `${apiBaseUrl}/digitalassets/storefront/${node.imageUrl}`;
-  return /* @__PURE__ */ jsx54(React43.Fragment, { children: node.width ? /* @__PURE__ */ jsx54("div", { style: { width: node.width }, children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(React43.Fragment, { children: node.width ? /* @__PURE__ */ jsx55("div", { style: { width: node.width }, children: /* @__PURE__ */ jsx55(
     "img",
     {
       loading: "lazy",
@@ -2958,7 +3020,7 @@ var ImageNode = (props) => {
       height: node.intrinsicHeight,
       alt: node.title
     }
-  ) }) : /* @__PURE__ */ jsx54(
+  ) }) : /* @__PURE__ */ jsx55(
     "img",
     {
       loading: "lazy",
@@ -2974,7 +3036,7 @@ var ImageNode_default = ImageNode;
 
 // src/components/pageRenderingEngine/nodes/WidgetNode.tsx
 import { Suspense } from "react";
-import { Fragment as Fragment5, jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs28 } from "react/jsx-runtime";
 var WidgetNode = (props) => {
   const getWidgetParameters = () => {
     const widgetInputParameters = { ...props.routeParameters ?? {} };
@@ -3029,12 +3091,12 @@ var WidgetNode = (props) => {
   const SelectedWidget = props.widgetRegistry?.[props.node.widgetCode];
   if (!SelectedWidget) {
     console.warn("Widget not found:", props.node.widgetCode);
-    return /* @__PURE__ */ jsxs26(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs28(Fragment5, { children: [
       "Widget not found: ",
       props.node.widgetCode
     ] });
   }
-  return /* @__PURE__ */ jsx55(Suspense, { fallback: /* @__PURE__ */ jsx55("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(Suspense, { fallback: /* @__PURE__ */ jsx56("div", { className: "container mt-2", children: "..." }), children: /* @__PURE__ */ jsx56(
     SelectedWidget,
     {
       params: getWidgetParameters(),
@@ -3049,42 +3111,42 @@ var WidgetNode = (props) => {
 var WidgetNode_default = WidgetNode;
 
 // src/components/pageRenderingEngine/nodes/IframeClient.tsx
-import React46, { useEffect as useEffect7, useRef as useRef3, useState as useState8 } from "react";
+import React46, { useEffect as useEffect8, useRef as useRef4, useState as useState9 } from "react";
 
 // src/components/IFrameLoaderView.tsx
 import React45 from "react";
-import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs29 } from "react/jsx-runtime";
 var IFrameLoaderView = (props) => {
-  return /* @__PURE__ */ jsxs27(React45.Fragment, { children: [
-    props.isDataFound == null && /* @__PURE__ */ jsx56("div", { className: "", children: /* @__PURE__ */ jsxs27("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
-      /* @__PURE__ */ jsxs27("div", { className: "flex items-center mb-4", children: [
-        /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
-        /* @__PURE__ */ jsxs27("div", { className: "ml-2", children: [
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
+  return /* @__PURE__ */ jsxs29(React45.Fragment, { children: [
+    props.isDataFound == null && /* @__PURE__ */ jsx57("div", { className: "", children: /* @__PURE__ */ jsxs29("div", { className: "mt-4 bg-gray-200 rounded-md p-4 animate-pulse", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center mb-4", children: [
+        /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
+        /* @__PURE__ */ jsxs29("div", { className: "ml-2", children: [
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-3 w-16 animate-pulse" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 h-2 w-12 animate-pulse" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs27("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+      /* @__PURE__ */ jsxs29("div", { className: "grid grid-cols-3 gap-4 mt-6", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "animate-pulse", children: [
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
-          /* @__PURE__ */ jsx56("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
+        /* @__PURE__ */ jsxs29("div", { className: "animate-pulse", children: [
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-12 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-24 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-32 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-16 mb-2" }),
+          /* @__PURE__ */ jsx57("div", { className: "bg-gray-300 rounded-full h-3 w-28 mb-2" })
         ] })
       ] })
     ] }) }),
@@ -3094,12 +3156,12 @@ var IFrameLoaderView = (props) => {
 var IFrameLoaderView_default = IFrameLoaderView;
 
 // src/components/pageRenderingEngine/nodes/IframeClient.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var IframeClient = ({ src }) => {
-  const iframeRef = useRef3(null);
-  const [iframeHeight, setIframeHeight] = useState8("100%");
-  const [isDataFound, setIsDataFound] = useState8(null);
-  useEffect7(() => {
+  const iframeRef = useRef4(null);
+  const [iframeHeight, setIframeHeight] = useState9("100%");
+  const [isDataFound, setIsDataFound] = useState9(null);
+  useEffect8(() => {
     const handleReceiveMessage = (event) => {
       const eventName = event?.data?.eventName;
       const payload = event?.data?.payload;
@@ -3114,7 +3176,7 @@ var IframeClient = ({ src }) => {
     window.addEventListener("message", handleReceiveMessage);
     return () => window.removeEventListener("message", handleReceiveMessage);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleResize = () => {
       if (iframeRef.current) {
         iframeRef.current.contentWindow?.postMessage({ eventName: "RESIZE" }, "*");
@@ -3126,7 +3188,7 @@ var IframeClient = ({ src }) => {
   const handleIframeLoad = () => {
     setIsDataFound(true);
   };
-  return /* @__PURE__ */ jsx57(React46.Fragment, { children: /* @__PURE__ */ jsx57(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(React46.Fragment, { children: /* @__PURE__ */ jsx58(IFrameLoaderView_default, { isDataFound, children: /* @__PURE__ */ jsx58(
     "iframe",
     {
       ref: iframeRef,
@@ -3140,7 +3202,7 @@ var IframeClient = ({ src }) => {
 var IframeClient_default = IframeClient;
 
 // src/components/pageRenderingEngine/nodes/EmbedNode.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var EmbedNode = (props) => {
   let src;
   if (props.node.provider == "youtube") {
@@ -3150,13 +3212,13 @@ var EmbedNode = (props) => {
   } else {
     src = props.node.embedSrc;
   }
-  return /* @__PURE__ */ jsx58("div", { className: "aspect-video", children: src && /* @__PURE__ */ jsx58(IframeClient_default, { src }) });
+  return /* @__PURE__ */ jsx59("div", { className: "aspect-video", children: src && /* @__PURE__ */ jsx59(IframeClient_default, { src }) });
 };
 var EmbedNode_default = EmbedNode;
 
 // src/components/pageRenderingEngine/nodes/VideoNode.tsx
 import React47 from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var VideoNode = (props) => {
   let src;
   if (props.node.provider == "youtube") {
@@ -3164,12 +3226,12 @@ var VideoNode = (props) => {
   } else if (props.node.provider == "bunny") {
     src = `https://iframe.mediadelivery.net/embed/${props.node.videoId}?autoplay=false&loop=false&muted=false&preload=true&responsive=true`;
   }
-  return /* @__PURE__ */ jsx59(React47.Fragment, { children: src && /* @__PURE__ */ jsx59("iframe", { className: "w-full aspect-video rounded", src, loading: "lazy", allow: "accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;", allowFullScreen: true }) });
+  return /* @__PURE__ */ jsx60(React47.Fragment, { children: src && /* @__PURE__ */ jsx60("iframe", { className: "w-full aspect-video rounded", src, loading: "lazy", allow: "accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;", allowFullScreen: true }) });
 };
 var VideoNode_default = VideoNode;
 
 // src/components/pageRenderingEngine/nodes/LayoutItemNode.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var LayoutItemNode = (props) => {
   const NodeTypes2 = {
     ["paragraph"]: ParagraphNode_default,
@@ -3230,11 +3292,11 @@ var LayoutItemNode = (props) => {
   } else {
     updatedLayout = removeParagraphsAtStartAndEnd(props.node);
   }
-  return /* @__PURE__ */ jsx60(React48.Fragment, { children: /* @__PURE__ */ jsx60("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
+  return /* @__PURE__ */ jsx61(React48.Fragment, { children: /* @__PURE__ */ jsx61("div", { className: "layout-item " + cssClasses, style: { ...styles }, children: updatedLayout.children.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes2[node.type];
-    return /* @__PURE__ */ jsx60(React48.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx61(React48.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx61(
       SelectedNode,
       {
         node,
@@ -3264,7 +3326,7 @@ var AssetUtility = class {
 var AssetUtility_default = AssetUtility;
 
 // src/components/pageRenderingEngine/nodes/LayoutContainerNode.tsx
-import { Fragment as Fragment6, jsx as jsx61, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs30 } from "react/jsx-runtime";
 var LayoutContainerNode = (props) => {
   const VERTICAL_ALIGNMENT_CLASSES = {
     start: "items-start",
@@ -3334,7 +3396,7 @@ var LayoutContainerNode = (props) => {
   if (backgroundLayers.length) {
     styles.background = backgroundLayers.join(", ");
   }
-  const renderChildren = () => props.node.children?.map((node, index) => /* @__PURE__ */ jsx61(
+  const renderChildren = () => props.node.children?.map((node, index) => /* @__PURE__ */ jsx62(
     LayoutItemNode_default,
     {
       node,
@@ -3348,8 +3410,8 @@ var LayoutContainerNode = (props) => {
     },
     index
   ));
-  return /* @__PURE__ */ jsxs28(Fragment6, { children: [
-    sectionWidth === "mixed" && /* @__PURE__ */ jsx61("div", { className: cssClasses, style: styles, children: /* @__PURE__ */ jsx61("div", { className: "container", children: /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsxs30(Fragment6, { children: [
+    sectionWidth === "mixed" && /* @__PURE__ */ jsx62("div", { className: cssClasses, style: styles, children: /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
       "div",
       {
         className: `grid gap-y-4 lg:gap-y-0 ${gridCssClasses} ${addPadding ? "py-8 lg:py-6" : ""}`,
@@ -3357,7 +3419,7 @@ var LayoutContainerNode = (props) => {
         children: renderChildren()
       }
     ) }) }),
-    sectionWidth === "full" && /* @__PURE__ */ jsx61(
+    sectionWidth === "full" && /* @__PURE__ */ jsx62(
       "div",
       {
         className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "p-8 lg:p-0" : ""}`,
@@ -3365,7 +3427,7 @@ var LayoutContainerNode = (props) => {
         children: renderChildren()
       }
     ),
-    sectionWidth === "fixed" && /* @__PURE__ */ jsx61("div", { className: "container", children: /* @__PURE__ */ jsx61(
+    sectionWidth === "fixed" && /* @__PURE__ */ jsx62("div", { className: "container", children: /* @__PURE__ */ jsx62(
       "div",
       {
         className: `grid gap-y-4 lg:gap-y-0 ${cssClasses} ${gridCssClasses} ${addPadding ? "px-8 py-6 lg:px-6 lg:py-6" : ""}`,
@@ -3378,12 +3440,12 @@ var LayoutContainerNode = (props) => {
 var LayoutContainerNode_default = LayoutContainerNode;
 
 // src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
-import React49, { useRef as useRef4, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect8 } from "react";
+import React49, { useRef as useRef5, useReducer as useReducer2, useCallback as useCallback3, useEffect as useEffect9 } from "react";
 
 // src/components/pageRenderingEngine/nodes/InputControlNode.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var InputControlNode = (props) => {
-  return /* @__PURE__ */ jsx62("div", { children: /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63("div", { children: /* @__PURE__ */ jsx63(
     InputControl_default,
     {
       name: props.node.name,
@@ -3412,13 +3474,13 @@ var InputControlNode = (props) => {
 var InputControlNode_default = InputControlNode;
 
 // src/components/pageRenderingEngine/nodes/FormContainerNode.tsx
-import { jsx as jsx63, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs31 } from "react/jsx-runtime";
 var FormContainerNode = (props) => {
   const NodeTypes2 = {
     ["input-control"]: InputControlNode_default
   };
   const { node } = props;
-  const formRef = useRef4(null);
+  const formRef = useRef5(null);
   const initialState = {
     inputValues: {},
     lastPropertyChanged: ""
@@ -3435,7 +3497,7 @@ var FormContainerNode = (props) => {
       return true;
     }
   };
-  useEffect8(() => {
+  useEffect9(() => {
     const fetchInitialData = async () => {
       if (!props.fetchData || !node.dataFetchApi) return;
       const response = await props.fetchData(
@@ -3452,12 +3514,12 @@ var FormContainerNode = (props) => {
     };
     fetchInitialData();
   }, [props.fetchData, node.dataFetchApi, props.routeParameters]);
-  return /* @__PURE__ */ jsxs29("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
+  return /* @__PURE__ */ jsxs31("form", { className: "group space-y-6 pb-6 overflow-y-auto", noValidate: true, ref: formRef, children: [
     node.children && node.children.map((node2, index) => {
       {
       }
       const SelectedNode = NodeTypes2[node2.type];
-      return /* @__PURE__ */ jsx63(React49.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx63(
+      return /* @__PURE__ */ jsx64(React49.Fragment, { children: SelectedNode && node2.type == "input-control" && /* @__PURE__ */ jsx64(
         InputControlNode_default,
         {
           value: formState.inputValues[node2.name],
@@ -3466,7 +3528,7 @@ var FormContainerNode = (props) => {
         }
       ) }, index);
     }),
-    node.children.length == 0 && /* @__PURE__ */ jsx63("div", { className: "py-0.5 lg:py-1.5" })
+    node.children.length == 0 && /* @__PURE__ */ jsx64("div", { className: "py-0.5 lg:py-1.5" })
   ] });
 };
 var FormContainerNode_default = FormContainerNode;
@@ -3474,7 +3536,7 @@ var FormContainerNode_default = FormContainerNode;
 // src/components/pageRenderingEngine/nodes/DivContainer.tsx
 import React50 from "react";
 import Link3 from "next/link";
-import { jsx as jsx64, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs32 } from "react/jsx-runtime";
 var DivContainer = (props) => {
   const { cssProperties: styles, hoverCssProperties: hoverStyles, mobileCssProperties: mobileStyles } = props.node;
   const updatedStyles = convertKeysToCamelCase(styles);
@@ -3593,9 +3655,9 @@ ${mobileCssRules.join("\n")}
     return css2;
   };
   const css = generateCssString(updatedStyle, hoverStyles, mobileStyles);
-  return /* @__PURE__ */ jsxs30(React50.Fragment, { children: [
-    /* @__PURE__ */ jsx64("style", { dangerouslySetInnerHTML: { __html: css } }),
-    props.node.href && props.node.href !== "" ? /* @__PURE__ */ jsx64(Link3, { href: props.node.href, className: "block", children: /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsxs32(React50.Fragment, { children: [
+    /* @__PURE__ */ jsx65("style", { dangerouslySetInnerHTML: { __html: css } }),
+    props.node.href && props.node.href !== "" ? /* @__PURE__ */ jsx65(Link3, { href: props.node.href, className: "block", children: /* @__PURE__ */ jsx65(
       "div",
       {
         id: guid,
@@ -3603,7 +3665,7 @@ ${mobileCssRules.join("\n")}
         className: containerPaddingClass,
         children: props.node.children?.map((node, index) => {
           const SelectedNode = NodeTypes2[node.type];
-          return /* @__PURE__ */ jsx64(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx64(
+          return /* @__PURE__ */ jsx65(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx65(
             SelectedNode,
             {
               node,
@@ -3618,9 +3680,9 @@ ${mobileCssRules.join("\n")}
           ) }, index);
         })
       }
-    ) }) : /* @__PURE__ */ jsx64("div", { id: guid, style: { ...backgroundStyle }, className: containerPaddingClass, children: props.node.children && props.node.children.map((node, index) => {
+    ) }) : /* @__PURE__ */ jsx65("div", { id: guid, style: { ...backgroundStyle }, className: containerPaddingClass, children: props.node.children && props.node.children.map((node, index) => {
       const SelectedNode = NodeTypes2[node.type];
-      return /* @__PURE__ */ jsx64(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx64(
+      return /* @__PURE__ */ jsx65(React50.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx65(
         SelectedNode,
         {
           node,
@@ -3639,7 +3701,7 @@ ${mobileCssRules.join("\n")}
 var DivContainer_default = DivContainer;
 
 // src/components/pageRenderingEngine/PageBodyRenderer.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var NodeTypes = {
   ["paragraph"]: ParagraphNode_default,
   ["heading"]: HeadingNode_default,
@@ -3667,11 +3729,11 @@ var PageBodyRenderer = (props) => {
   if (pageBodyTree && pageBodyTree.root) {
     rootNode = pageBodyTree.root;
   }
-  return /* @__PURE__ */ jsx65(React51.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
+  return /* @__PURE__ */ jsx66(React51.Fragment, { children: rootNode && rootNode?.children?.map((node, index) => {
     {
     }
     const SelectedNode = NodeTypes[node.type];
-    return /* @__PURE__ */ jsx65(React51.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx65(React51.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx65(React51.Fragment, { children: /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx66(React51.Fragment, { children: SelectedNode && /* @__PURE__ */ jsx66(React51.Fragment, { children: node.type == "layout-container" ? /* @__PURE__ */ jsx66(React51.Fragment, { children: /* @__PURE__ */ jsx66(
       SelectedNode,
       {
         node,
@@ -3684,7 +3746,7 @@ var PageBodyRenderer = (props) => {
         apiBaseUrl: props.apiBaseUrl,
         widgetRegistry: props.widgetRegistry
       }
-    ) }) : /* @__PURE__ */ jsx65(React51.Fragment, { children: /* @__PURE__ */ jsx65(
+    ) }) : /* @__PURE__ */ jsx66(React51.Fragment, { children: /* @__PURE__ */ jsx66(
       SelectedNode,
       {
         node,
@@ -3708,4 +3770,3 @@ export {
   ViewControl_default as ViewControl,
   ViewControlTypes_default as ViewControlTypes
 };
-//# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260320074145",
+  "version": "0.8.1-dev.20260323045408",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -9,12 +9,18 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts"
+    "build": "tsup"
   },
   "peerDependencies": {
+    "katex": "^0.16.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
+  "peerDependenciesMeta": {
+    "katex": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^25.5.0",
     "@types/react": "^19",