@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/index.js

@@ -0,0 +1,8 @@
+export { makeHttpClient } from './common/makeHttpClient';
+export { default as translations } from './i18n';
+export { findRendererPropsByType } from './renderers/utils';
+export { useDynamicFlow } from './useDynamicFlow';
+export { useDynamicFlowModal } from './useDynamicFlowModal';
+export { DynamicFlowCore as DynamicFlow } from './DynamicFlowCore';
+export { makeRequestCache } from './domain/features/prefetch/request-cache';
+export { eventNames } from './domain/features/eventNames';

package/build/main.js

@@ -836,6 +836,7 @@ var getChildren = (node) => {
     case "heading":
     case "hidden":
     case "image":
+    case "loading-state":
     case "instructions":
     case "input-integer":
     case "list":
@@ -2091,7 +2092,7 @@ var debounce = (callback, waitMs) => {
 // src/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
-  const { uid, analyticsId, control, emptyMessage, hint, margin, tags, title } = searchProps;
+  const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = searchProps;
   const update = getInputUpdateFunction(onComponentUpdate);
   let abortController = new AbortController();
   const search = (component2, query, searchConfig) => {
@@ -2105,7 +2106,7 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     }).then((state) => {
       if (!signal.aborted) {
         update(component2, (draft) => {
-          draft.state = state;
+          draft.state = state != null ? state : initialState;
           draft.isLoading = false;
           draft.error = void 0;
         });
@@ -2127,9 +2128,10 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     analyticsId,
     control,
     emptyMessage,
+    initialState,
     hint,
     margin,
-    state: null,
+    state: initialState,
     tags,
     title,
     isLoading: false,
@@ -2138,11 +2140,22 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
       update(this, updateFn);
     },
     onChange(query) {
-      this._update((draft) => {
-        draft.query = query;
-        draft.isLoading = true;
-      });
-      debouncedSearch(this, query.trim());
+      if (query.trim()) {
+        this._update((draft) => {
+          draft.query = query;
+          draft.isLoading = true;
+        });
+        debouncedSearch(this, query.trim());
+      } else {
+        abortController.abort();
+        debouncedSearch.cancel();
+        update(component, (draft) => {
+          draft.query = query;
+          draft.state = initialState;
+          draft.isLoading = false;
+          draft.error = void 0;
+        });
+      }
     },
     onSelect({ type, value }) {
       if (type === "action") {
@@ -2238,11 +2251,23 @@ var isValidResponseBody = (body) => {
 var hashRequest = (query, config) => JSON.stringify({ query, config });
 
 // src/domain/mappers/layout/searchLayoutToComponent.ts
-var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint, method, param, title, url, margin, tags }, mapperProps) => {
+var searchLayoutToComponent = (uid, {
+  analyticsId,
+  control,
+  emptyMessage = "",
+  initialState,
+  hint,
+  method,
+  param,
+  title,
+  url,
+  margin,
+  tags
+}, mapperProps) => {
   const { httpClient, onBehavior, onComponentUpdate } = mapperProps;
   const search = getPerformSearchFunction(
     httpClient,
-    (layout) => mapLayoutToComponent(`${uid}-search-response`, layout, mapperProps, []),
+    (layout, index) => mapLayoutToComponent(`${uid}-search-response-${index}`, layout, mapperProps, []),
     { method, param, url }
   );
   return createSearchComponent(
@@ -2250,7 +2275,8 @@ var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint,
       uid,
       analyticsId,
       control,
-      emptyMessage: emptyMessage != null ? emptyMessage : "",
+      emptyMessage,
+      initialState: getInitialState(uid, initialState, mapperProps),
       hint,
       margin: margin != null ? margin : "md",
       tags,
@@ -2261,6 +2287,33 @@ var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint,
     onComponentUpdate
   );
 };
+var getInitialState = (uid, initialState, mapperProps) => {
+  if (!initialState) {
+    return emptyInitialState;
+  }
+  switch (initialState.type) {
+    case "layout":
+      return {
+        type: "layout",
+        content: initialState.content.map(
+          (layout, index) => mapLayoutToComponent(`${uid}-initial-${index}`, layout, mapperProps, [])
+        )
+      };
+    case "results":
+      return {
+        type: "results",
+        results: initialState.results
+      };
+    default: {
+      const exhaustiveCheck = initialState;
+      return emptyInitialState;
+    }
+  }
+};
+var emptyInitialState = {
+  type: "layout",
+  content: []
+};
 
 // src/domain/components/SectionComponent.ts
 var createSectionComponent = (props) => {
@@ -2351,24 +2404,13 @@ var createUpsellComponent = (upsellProps, onComponentUpdate) => {
 };
 
 // src/domain/mappers/layout/upsellLayoutToComponent.ts
-var upsellLayoutToComponent = (uid, {
-  analyticsId,
-  callToAction,
-  context,
-  control,
-  margin,
-  media,
-  onDismiss,
-  tags,
-  text
-}, mapperProps) => {
+var upsellLayoutToComponent = (uid, { analyticsId, callToAction, control, margin, media, onDismiss, tags, text }, mapperProps) => {
   const { onComponentUpdate } = mapperProps;
   return createUpsellComponent(
     {
       uid,
       analyticsId,
       callToAction: getDomainLayerCallToAction(callToAction, mapperProps),
-      context: context ? mapLegacyContext(context) : "neutral",
       control,
       margin: margin != null ? margin : "md",
       media: getDomainLayerMedia({ media }),
@@ -6983,16 +7025,23 @@ var CoreContainerRenderer = {
   render: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children })
 };
 
-// src/renderers/CoreRootRenderer.tsx
+// src/renderers/EmptyLoadingStateRenderer.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var EmptyLoadingStateRenderer = {
+  canRenderType: "loading-state",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {})
+};
+
+// src/renderers/CoreRootRenderer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var CoreRootRenderer = {
   canRenderType: "root",
   render: ({ children, childrenProps, subflow }) => {
     if ((subflow == null ? void 0 : subflow.presentation.type) === "push") {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: subflow.children });
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: subflow.children });
     }
     const [stepProps] = findRendererPropsByType(childrenProps, "step");
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [
       children,
       (subflow == null ? void 0 : subflow.presentation.type) === "modal" ? subflow.children : void 0
     ] });
@@ -7000,7 +7049,7 @@ var CoreRootRenderer = {
 };
 
 // src/renderers/getRenderFunction.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var getRenderFunction = (renderers) => {
   function ComponentRenderer(props) {
     const { type } = props;
@@ -7020,9 +7069,9 @@ var getRenderFunction = (renderers) => {
   }
   const render = (props) => {
     if (!props) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComponentRenderer, __spreadValues({}, props), props.uid);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComponentRenderer, __spreadValues({}, props), props.uid);
   };
   return render;
 };
@@ -7919,14 +7968,17 @@ var getToolbarProps = (toolbar, rendererMapperProps) => {
 
 // src/renderers/mappers/rootComponentToProps.ts
 var rootComponentToProps = (rootComponent, rendererMapperProps) => {
-  const childrenProps = rootComponent.getChildren().map((child) => {
-    if (child.type === "step") {
-      return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
-        showBack: rootComponent.canPerformBack()
-      }));
-    }
-    return componentToRendererProps(child, rendererMapperProps);
-  });
+  const childrenProps = [
+    __spreadValues({ type: "loading-state", uid: "loading-state" }, rendererMapperProps),
+    ...rootComponent.getChildren().map((child) => {
+      if (child.type === "step") {
+        return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
+          showBack: rootComponent.canPerformBack()
+        }));
+      }
+      return componentToRendererProps(child, rendererMapperProps);
+    })
+  ];
   const subflow = rootComponent.subflow ? {
     presentation: rootComponent.subflow.presentation,
     children: rendererMapperProps.render(
@@ -7982,7 +8034,7 @@ var getSearchState = ({
   onChange,
   onSelect
 }) => {
-  if (!query || isLoading) {
+  if (isLoading) {
     return { type: "pending" };
   }
   if (error) {
@@ -8002,19 +8054,21 @@ var getSearchState = ({
       layoutProps
     };
   }
-  if (state.results.length === 0) {
+  if (query && state.results.length === 0) {
     return { type: "noResults", message: emptyMessage };
   }
-  const rendererResults = state.results.map((result) => {
-    var _a;
-    return __spreadProps(__spreadValues({}, result), {
-      id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
-      image: mapSpecImage(result.image),
-      media: getDomainLayerMedia(result),
-      onClick: () => onSelect(result)
-    });
-  });
-  return { type: "results", results: rendererResults };
+  return {
+    type: "results",
+    results: state.results.map((result) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, result), {
+        id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
+        image: mapSpecImage(result.image),
+        media: getDomainLayerMedia(result),
+        onClick: () => onSelect(result)
+      });
+    })
+  };
 };
 
 // src/renderers/mappers/sectionComponentToProps.ts
@@ -8129,7 +8183,6 @@ var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(
   "analyticsId",
   "type",
   "callToAction",
-  "context",
   "control",
   "margin",
   "media",
@@ -8308,7 +8361,7 @@ function useStableCallback(handler) {
 }
 
 // src/useDynamicFlow.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var className = "dynamic-flow";
 var noop3 = () => {
 };
@@ -8359,7 +8412,12 @@ function useDynamicFlow(props) {
     scrollToTop
   }));
   const render = (0, import_react3.useMemo)(
-    () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
+    () => getRenderFunction([
+      CoreRootRenderer,
+      CoreContainerRenderer,
+      ...renderers,
+      EmptyLoadingStateRenderer
+    ]),
     [renderers]
   );
   const tree = componentToRendererProps(rootComponent, {
@@ -8376,7 +8434,7 @@ function useDynamicFlow(props) {
       validate: () => rootComponent.validate(),
       cancel
     },
-    view: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    view: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ErrorBoundary_default,
       {
         onError: (error) => {
@@ -8386,7 +8444,7 @@ function useDynamicFlow(props) {
             errorMessage: getErrorMessage(error)
           });
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
       }
     )
   };

package/build/main.mjs

@@ -806,6 +806,7 @@ var getChildren = (node) => {
     case "heading":
     case "hidden":
     case "image":
+    case "loading-state":
     case "instructions":
     case "input-integer":
     case "list":
@@ -2061,7 +2062,7 @@ var debounce = (callback, waitMs) => {
 // src/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
-  const { uid, analyticsId, control, emptyMessage, hint, margin, tags, title } = searchProps;
+  const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = searchProps;
   const update = getInputUpdateFunction(onComponentUpdate);
   let abortController = new AbortController();
   const search = (component2, query, searchConfig) => {
@@ -2075,7 +2076,7 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     }).then((state) => {
       if (!signal.aborted) {
         update(component2, (draft) => {
-          draft.state = state;
+          draft.state = state != null ? state : initialState;
           draft.isLoading = false;
           draft.error = void 0;
         });
@@ -2097,9 +2098,10 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     analyticsId,
     control,
     emptyMessage,
+    initialState,
     hint,
     margin,
-    state: null,
+    state: initialState,
     tags,
     title,
     isLoading: false,
@@ -2108,11 +2110,22 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
       update(this, updateFn);
     },
     onChange(query) {
-      this._update((draft) => {
-        draft.query = query;
-        draft.isLoading = true;
-      });
-      debouncedSearch(this, query.trim());
+      if (query.trim()) {
+        this._update((draft) => {
+          draft.query = query;
+          draft.isLoading = true;
+        });
+        debouncedSearch(this, query.trim());
+      } else {
+        abortController.abort();
+        debouncedSearch.cancel();
+        update(component, (draft) => {
+          draft.query = query;
+          draft.state = initialState;
+          draft.isLoading = false;
+          draft.error = void 0;
+        });
+      }
     },
     onSelect({ type, value }) {
       if (type === "action") {
@@ -2208,11 +2221,23 @@ var isValidResponseBody = (body) => {
 var hashRequest = (query, config) => JSON.stringify({ query, config });
 
 // src/domain/mappers/layout/searchLayoutToComponent.ts
-var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint, method, param, title, url, margin, tags }, mapperProps) => {
+var searchLayoutToComponent = (uid, {
+  analyticsId,
+  control,
+  emptyMessage = "",
+  initialState,
+  hint,
+  method,
+  param,
+  title,
+  url,
+  margin,
+  tags
+}, mapperProps) => {
   const { httpClient, onBehavior, onComponentUpdate } = mapperProps;
   const search = getPerformSearchFunction(
     httpClient,
-    (layout) => mapLayoutToComponent(`${uid}-search-response`, layout, mapperProps, []),
+    (layout, index) => mapLayoutToComponent(`${uid}-search-response-${index}`, layout, mapperProps, []),
     { method, param, url }
   );
   return createSearchComponent(
@@ -2220,7 +2245,8 @@ var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint,
       uid,
       analyticsId,
       control,
-      emptyMessage: emptyMessage != null ? emptyMessage : "",
+      emptyMessage,
+      initialState: getInitialState(uid, initialState, mapperProps),
       hint,
       margin: margin != null ? margin : "md",
       tags,
@@ -2231,6 +2257,33 @@ var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint,
     onComponentUpdate
   );
 };
+var getInitialState = (uid, initialState, mapperProps) => {
+  if (!initialState) {
+    return emptyInitialState;
+  }
+  switch (initialState.type) {
+    case "layout":
+      return {
+        type: "layout",
+        content: initialState.content.map(
+          (layout, index) => mapLayoutToComponent(`${uid}-initial-${index}`, layout, mapperProps, [])
+        )
+      };
+    case "results":
+      return {
+        type: "results",
+        results: initialState.results
+      };
+    default: {
+      const exhaustiveCheck = initialState;
+      return emptyInitialState;
+    }
+  }
+};
+var emptyInitialState = {
+  type: "layout",
+  content: []
+};
 
 // src/domain/components/SectionComponent.ts
 var createSectionComponent = (props) => {
@@ -2321,24 +2374,13 @@ var createUpsellComponent = (upsellProps, onComponentUpdate) => {
 };
 
 // src/domain/mappers/layout/upsellLayoutToComponent.ts
-var upsellLayoutToComponent = (uid, {
-  analyticsId,
-  callToAction,
-  context,
-  control,
-  margin,
-  media,
-  onDismiss,
-  tags,
-  text
-}, mapperProps) => {
+var upsellLayoutToComponent = (uid, { analyticsId, callToAction, control, margin, media, onDismiss, tags, text }, mapperProps) => {
   const { onComponentUpdate } = mapperProps;
   return createUpsellComponent(
     {
       uid,
       analyticsId,
       callToAction: getDomainLayerCallToAction(callToAction, mapperProps),
-      context: context ? mapLegacyContext(context) : "neutral",
       control,
       margin: margin != null ? margin : "md",
       media: getDomainLayerMedia({ media }),
@@ -6953,13 +6995,20 @@ var CoreContainerRenderer = {
   render: ({ children }) => /* @__PURE__ */ jsx3(Fragment2, { children })
 };
 
+// src/renderers/EmptyLoadingStateRenderer.tsx
+import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
+var EmptyLoadingStateRenderer = {
+  canRenderType: "loading-state",
+  render: () => /* @__PURE__ */ jsx4(Fragment3, {})
+};
+
 // src/renderers/CoreRootRenderer.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var CoreRootRenderer = {
   canRenderType: "root",
   render: ({ children, childrenProps, subflow }) => {
     if ((subflow == null ? void 0 : subflow.presentation.type) === "push") {
-      return /* @__PURE__ */ jsx4(Fragment3, { children: subflow.children });
+      return /* @__PURE__ */ jsx5(Fragment4, { children: subflow.children });
     }
     const [stepProps] = findRendererPropsByType(childrenProps, "step");
     return /* @__PURE__ */ jsxs2("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [
@@ -6970,7 +7019,7 @@ var CoreRootRenderer = {
 };
 
 // src/renderers/getRenderFunction.tsx
-import { Fragment as Fragment4, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx6 } from "react/jsx-runtime";
 var getRenderFunction = (renderers) => {
   function ComponentRenderer(props) {
     const { type } = props;
@@ -6990,9 +7039,9 @@ var getRenderFunction = (renderers) => {
   }
   const render = (props) => {
     if (!props) {
-      return /* @__PURE__ */ jsx5(Fragment4, {});
+      return /* @__PURE__ */ jsx6(Fragment5, {});
     }
-    return /* @__PURE__ */ jsx5(ComponentRenderer, __spreadValues({}, props), props.uid);
+    return /* @__PURE__ */ jsx6(ComponentRenderer, __spreadValues({}, props), props.uid);
   };
   return render;
 };
@@ -7889,14 +7938,17 @@ var getToolbarProps = (toolbar, rendererMapperProps) => {
 
 // src/renderers/mappers/rootComponentToProps.ts
 var rootComponentToProps = (rootComponent, rendererMapperProps) => {
-  const childrenProps = rootComponent.getChildren().map((child) => {
-    if (child.type === "step") {
-      return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
-        showBack: rootComponent.canPerformBack()
-      }));
-    }
-    return componentToRendererProps(child, rendererMapperProps);
-  });
+  const childrenProps = [
+    __spreadValues({ type: "loading-state", uid: "loading-state" }, rendererMapperProps),
+    ...rootComponent.getChildren().map((child) => {
+      if (child.type === "step") {
+        return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
+          showBack: rootComponent.canPerformBack()
+        }));
+      }
+      return componentToRendererProps(child, rendererMapperProps);
+    })
+  ];
   const subflow = rootComponent.subflow ? {
     presentation: rootComponent.subflow.presentation,
     children: rendererMapperProps.render(
@@ -7952,7 +8004,7 @@ var getSearchState = ({
   onChange,
   onSelect
 }) => {
-  if (!query || isLoading) {
+  if (isLoading) {
     return { type: "pending" };
   }
   if (error) {
@@ -7972,19 +8024,21 @@ var getSearchState = ({
       layoutProps
     };
   }
-  if (state.results.length === 0) {
+  if (query && state.results.length === 0) {
     return { type: "noResults", message: emptyMessage };
   }
-  const rendererResults = state.results.map((result) => {
-    var _a;
-    return __spreadProps(__spreadValues({}, result), {
-      id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
-      image: mapSpecImage(result.image),
-      media: getDomainLayerMedia(result),
-      onClick: () => onSelect(result)
-    });
-  });
-  return { type: "results", results: rendererResults };
+  return {
+    type: "results",
+    results: state.results.map((result) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, result), {
+        id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
+        image: mapSpecImage(result.image),
+        media: getDomainLayerMedia(result),
+        onClick: () => onSelect(result)
+      });
+    })
+  };
 };
 
 // src/renderers/mappers/sectionComponentToProps.ts
@@ -8099,7 +8153,6 @@ var upsellComponentToProps = (component, rendererMapperProps) => __spreadValues(
   "analyticsId",
   "type",
   "callToAction",
-  "context",
   "control",
   "margin",
   "media",
@@ -8278,7 +8331,7 @@ function useStableCallback(handler) {
 }
 
 // src/useDynamicFlow.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var className = "dynamic-flow";
 var noop3 = () => {
 };
@@ -8329,7 +8382,12 @@ function useDynamicFlow(props) {
     scrollToTop
   }));
   const render = useMemo(
-    () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
+    () => getRenderFunction([
+      CoreRootRenderer,
+      CoreContainerRenderer,
+      ...renderers,
+      EmptyLoadingStateRenderer
+    ]),
     [renderers]
   );
   const tree = componentToRendererProps(rootComponent, {
@@ -8346,7 +8404,7 @@ function useDynamicFlow(props) {
       validate: () => rootComponent.validate(),
       cancel
     },
-    view: /* @__PURE__ */ jsx6(
+    view: /* @__PURE__ */ jsx7(
       ErrorBoundary_default,
       {
         onError: (error) => {
@@ -8356,7 +8414,7 @@ function useDynamicFlow(props) {
             errorMessage: getErrorMessage(error)
           });
         },
-        children: /* @__PURE__ */ jsx6("div", { id: normalisedFlowId, className, children: render(tree) })
+        children: /* @__PURE__ */ jsx7("div", { id: normalisedFlowId, className, children: render(tree) })
       }
     )
   };

package/build/renderers/CoreContainerRenderer.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const CoreContainerRenderer = {
+    canRenderType: 'container',
+    render: ({ children }) => _jsx(_Fragment, { children: children }),
+};

package/build/renderers/CoreRootRenderer.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { findRendererPropsByType } from './utils';
+export const CoreRootRenderer = {
+    canRenderType: 'root',
+    render: ({ children, childrenProps, subflow }) => {
+        if ((subflow === null || subflow === void 0 ? void 0 : subflow.presentation.type) === 'push') {
+            return _jsx(_Fragment, { children: subflow.children });
+        }
+        const [stepProps] = findRendererPropsByType(childrenProps, 'step');
+        return (_jsxs("div", { id: stepProps === null || stepProps === void 0 ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [children, (subflow === null || subflow === void 0 ? void 0 : subflow.presentation.type) === 'modal' ? subflow.children : undefined] }));
+    },
+};

package/build/renderers/EmptyLoadingStateRenderer.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const EmptyLoadingStateRenderer = {
+    canRenderType: 'loading-state',
+    render: () => _jsx(_Fragment, {}),
+};