@wise/dynamic-flow-client 5.28.1 → 5.29.0-experimental-f7c2300

package/build/main.css

@@ -104,6 +104,30 @@
   flex-wrap: wrap;
 }
 
+.df-filter-loader .np-chip {
+  background: linear-gradient(
+    -45deg,
+    var(--color-background-neutral) 40%,
+    var(--color-background-elevated) 50%,
+    var(--color-background-neutral) 60%
+  );
+  background-size: 300%;
+  background-position-x: 100%;
+  animation: shimmer 1s infinite linear;
+  transition: background 200ms;
+  border-color: var(--color-border-neutral);
+}
+
+.df-filter-loader .np-chip > * {
+  visibility: hidden;
+}
+
+@keyframes shimmer {
+  to {
+    background-position-x: 0%;
+  }
+}
+
 .df-columns-renderer-container {
   display: flex;
   gap: var(--size-4);

package/build/main.js

@@ -861,6 +861,7 @@ function findRendererPropsByType(root, type, predicate = () => true) {
 }
 var isType = (node, type) => node.type === type;
 var getChildren = (node) => {
+  var _a;
   switch (node.type) {
     case "root":
     case "box":
@@ -882,9 +883,16 @@ var getChildren = (node) => {
       return node.childrenProps ? [node.childrenProps] : [];
     case "tabs":
       return node.tabs.flatMap((c) => c.childrenProps);
+    case "collection": {
+      const { beforeSectionsProps, afterSectionsProps, sections, search } = node.state;
+      return [
+        ...beforeSectionsProps,
+        ...afterSectionsProps,
+        ...[...sections, ...(_a = search == null ? void 0 : search.initialSections) != null ? _a : []].filter((section) => section.type === "layout").flatMap((section) => section.childrenProps)
+      ];
+    }
     case "alert":
     case "button":
-    case "collection":
     case "input-checkbox":
     case "input-date":
     case "decision":
@@ -1713,89 +1721,121 @@ function mergeArrays(valueA, valueB) {
   );
 }
 
-// src/domain/components/collectionComponent/CollectionComponent.ts
+// src/domain/components/collectionComponent/mergeSections.ts
+var mergeSections = (existing, incoming) => {
+  const knownIds = new Set(existing.map((section) => section.id));
+  const newSections = incoming.filter((section) => !knownIds.has(section.id));
+  const merged = existing.map((section) => {
+    var _a, _b, _c, _d;
+    const match = incoming.find((s) => s.id === section.id);
+    if (!match) return section;
+    if (section.type !== match.type) return section;
+    const baseProps = {
+      type: section.type,
+      id: match.id,
+      title: (_a = match.title) != null ? _a : section.title,
+      callToAction: (_b = match.callToAction) != null ? _b : section.callToAction,
+      help: (_c = match.help) != null ? _c : section.help,
+      inlineAlert: (_d = match.inlineAlert) != null ? _d : section.inlineAlert
+    };
+    if (section.type === "layout" && match.type === "layout") {
+      return __spreadProps(__spreadValues({}, baseProps), {
+        type: "layout",
+        components: [...section.components, ...match.components]
+      });
+    }
+    if (section.type === "items" && match.type === "items") {
+      return __spreadProps(__spreadValues({}, baseProps), {
+        type: "items",
+        items: [...section.items, ...match.items]
+      });
+    }
+    return section;
+  });
+  return [...merged, ...newSections];
+};
+
+// src/domain/components/collectionComponent/CollectionState.ts
 var DEBOUNCE_TIME = 800;
-var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackEvent) => {
-  const { uid, analyticsId, control, margin, tags, state } = props;
-  const update = getInputUpdateFunction(onComponentUpdate);
+var createCollectionState = ({
+  id,
+  initialState,
+  searchQuery,
+  onComponentUpdate,
+  queryFunction,
+  trackEvent
+}) => {
+  const _a = initialState, { search, filters } = _a, response = __objRest(_a, ["search", "filters"]);
   let abortController = new AbortController();
-  const trackCollectionEvent = (source, status) => trackEvent(getEventName(source, status), component.state.analytics);
-  const query = (mode, source) => {
-    var _a, _b;
+  const update = (updateFn) => {
+    updateFn(state);
+    onComponentUpdate();
+  };
+  const getIdleStatus = (nextCursor) => ({
+    type: "idle",
+    loadMore: nextCursor ? () => query("pagination") : void 0
+  });
+  const query = (mode) => {
+    var _a2, _b;
     abortController.abort();
     abortController = new AbortController();
     const { signal } = abortController;
-    trackCollectionEvent(source != null ? source : mode, "Triggered");
+    trackEvent(getEventName(mode, "Triggered"), state.analytics);
     queryFunction({
-      searchParam: (_a = component.state.search) == null ? void 0 : _a.param,
-      query: (_b = component.state.search) == null ? void 0 : _b.query,
-      cursor: mode === "pagination" ? component.state.nextCursor : void 0,
+      searchParam: (_a2 = state.search) == null ? void 0 : _a2.param,
+      query: (_b = state.search) == null ? void 0 : _b.query,
+      cursor: mode === "pagination" ? state.nextCursor : void 0,
       signal,
-      filters: component.state.filters
-    }).then((response) => {
-      if (!response) {
+      filters: state.filters
+    }).then((incoming) => {
+      if (!incoming || signal.aborted) {
         return;
       }
-      update(component, (draft) => {
-        draft.state = mergeState(mode, component.state, response);
-        draft.status = {
-          type: "idle",
-          loadMore: response.nextCursor ? paginate : void 0
-        };
-      });
-      trackCollectionEvent(source != null ? source : mode, "Succeeded");
+      update((draft) => mergeResponse(draft, mode, incoming));
+      trackEvent(getEventName(mode, "Succeeded"), state.analytics);
     }).catch(() => {
       if (!signal.aborted) {
         const retry = () => {
-          update(component, (draft) => {
+          update((draft) => {
             draft.status = { type: "loading", reason: mode };
           });
-          query(mode, source);
+          query(mode);
         };
-        update(component, (draft) => {
-          if (mode === "search") {
-            draft.state.sections = [];
+        update((draft) => {
+          if (mode === "search" || mode === "filter") {
+            draft.sections = [];
           }
           draft.status = { type: "error", reason: mode, retry };
         });
-        trackCollectionEvent(source != null ? source : mode, "Failed");
+        trackEvent(getEventName(mode, "Failed"), state.analytics);
       }
     });
   };
   const debouncedQuery = debounce(query, DEBOUNCE_TIME);
-  const search = () => {
-    abortController.abort();
-    debouncedQuery("search");
-  };
-  const filter = () => {
-    debouncedQuery("search", "filter");
-    debouncedQuery.flush();
-  };
-  const paginate = () => query("pagination");
-  const mergeState = (mode, original, incoming) => {
-    var _a, _b;
-    return {
-      sections: mode === "pagination" ? mergeSections(original.sections, incoming.sections) : incoming.sections,
-      nextCursor: incoming.nextCursor,
-      filters: incoming.filters ? mapFilters(incoming.filters) : original.filters,
-      search: incoming.search ? mapSearch(incoming.search) : original.search,
-      beforeSections: (_a = incoming.beforeSections) != null ? _a : original.beforeSections,
-      afterSections: (_b = incoming.afterSections) != null ? _b : original.afterSections,
-      analytics: mode === "pagination" ? recursiveMerge(original.analytics, incoming.analytics) : incoming.analytics
-    };
+  const mergeResponse = (draft, mode, incoming) => {
+    var _a2, _b, _c, _d;
+    draft.sections = mode === "pagination" ? mergeSections(draft.sections, incoming.sections) : incoming.sections;
+    draft.nextCursor = incoming.nextCursor;
+    draft.analytics = mode === "pagination" ? recursiveMerge(draft.analytics, incoming.analytics) : incoming.analytics;
+    draft.filters = incoming.filters ? mapFilters(incoming.filters) : draft.filters;
+    draft.search = incoming.search ? mapSearch2(incoming.search, (_b = (_a2 = draft.search) == null ? void 0 : _a2.query) != null ? _b : "") : draft.search;
+    draft.beforeSections = (_c = incoming.beforeSections) != null ? _c : draft.beforeSections;
+    draft.afterSections = (_d = incoming.afterSections) != null ? _d : draft.afterSections;
+    draft.status = getIdleStatus(incoming.nextCursor);
   };
   const selectFilter = (filterIndex, optionIndex) => {
-    var _a;
-    const selected = (_a = component.state.filters) == null ? void 0 : _a[filterIndex];
+    var _a2;
+    const selected = (_a2 = state.filters) == null ? void 0 : _a2[filterIndex];
     if (!selected) {
       return;
     }
     const currentValue = selected.options[optionIndex].selected;
-    update(component, (draft) => {
-      if (!draft.state.filters) {
+    update((draft) => {
+      var _a3;
+      const draftFilter = (_a3 = draft.filters) == null ? void 0 : _a3[filterIndex];
+      if (!draftFilter) {
         return;
       }
-      const draftFilter = draft.state.filters[filterIndex];
       if (selected.multiSelect) {
         draftFilter.options[optionIndex].selected = !currentValue;
       } else {
@@ -1803,35 +1843,86 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
           draftOption.selected = index === optionIndex ? !currentValue : false;
         });
       }
-      draft.status = { type: "loading", reason: "search" };
+      draft.status = { type: "loading", reason: "filter" };
     });
-    filter();
+    debouncedQuery("filter");
+    debouncedQuery.flush();
   };
-  const mapFilters = (filters) => filters == null ? void 0 : filters.map((f, filterIndex) => {
-    var _a;
+  const changeQuery = (value) => {
+    update((draft) => {
+      if (draft.search) {
+        draft.search.query = value;
+        draft.status = { type: "loading", reason: "search" };
+      }
+    });
+    abortController.abort();
+    debouncedQuery("search");
+  };
+  const mapFilters = (filtersToMap) => filtersToMap == null ? void 0 : filtersToMap.map((f, filterIndex) => {
+    var _a2;
     return __spreadProps(__spreadValues({}, f), {
-      options: (_a = f.options) == null ? void 0 : _a.map((option, optionIndex) => {
-        var _a2;
+      options: (_a2 = f.options) == null ? void 0 : _a2.map((option, optionIndex) => {
+        var _a3;
         return __spreadProps(__spreadValues({}, option), {
-          selected: (_a2 = option.selected) != null ? _a2 : false,
+          selected: (_a3 = option.selected) != null ? _a3 : false,
           onSelect: () => selectFilter(filterIndex, optionIndex)
         });
       })
     });
   });
-  const mapSearch = (searchConfig) => searchConfig ? __spreadProps(__spreadValues({
-    query: ""
-  }, searchConfig), {
-    onChange(value) {
-      update(component, (draft) => {
-        if (draft.state.search) {
-          draft.state.search.query = value;
-          draft.status = { type: "loading", reason: "search" };
-        }
+  const mapSearch2 = (searchConfig, value) => searchConfig ? __spreadProps(__spreadValues({}, searchConfig), { query: value, onChange: changeQuery }) : void 0;
+  const state = __spreadProps(__spreadValues({}, response), {
+    id,
+    status: getIdleStatus(response.nextCursor),
+    filters: mapFilters(filters),
+    search: mapSearch2(search, searchQuery),
+    fork(forkedId) {
+      var _a2, _b;
+      return createCollectionState({
+        id: forkedId,
+        initialState: state,
+        searchQuery: (_b = (_a2 = state.search) == null ? void 0 : _a2.query) != null ? _b : "",
+        onComponentUpdate,
+        queryFunction,
+        trackEvent
       });
-      search();
+    },
+    cancel() {
+      debouncedQuery.cancel();
+      abortController.abort();
+    },
+    getChildren() {
+      var _a2, _b, _c, _d;
+      return [
+        ...(_a2 = state.beforeSections) != null ? _a2 : [],
+        ...getSectionsChildren(state.sections),
+        ...getSectionsChildren((_c = (_b = state.search) == null ? void 0 : _b.initialSections) != null ? _c : []),
+        ...(_d = state.afterSections) != null ? _d : []
+      ];
     }
-  }) : void 0;
+  });
+  return state;
+};
+var getSectionsChildren = (sections) => sections.filter((section) => section.type === "layout").flatMap((section) => section.components);
+var getEventName = (mode, state) => {
+  const getMode = () => {
+    switch (mode) {
+      case "pagination":
+        return "Pagination";
+      case "search":
+        return "Search";
+      case "filter":
+        return "Filter";
+    }
+  };
+  return `Collection ${getMode()} ${state}`;
+};
+
+// src/domain/components/collectionComponent/CollectionComponent.ts
+var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackEvent) => {
+  const { uid, analyticsId, control, margin, tags, state } = props;
+  const update = getInputUpdateFunction(onComponentUpdate);
+  let forkCount = 0;
   const component = {
     type: "collection",
     kind: "layout",
@@ -1840,21 +1931,38 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
     control,
     margin,
     tags,
-    getChildren() {
-      var _a, _b, _c, _d;
-      return [
-        ...(_b = (_a = component.state) == null ? void 0 : _a.beforeSections) != null ? _b : [],
-        ...(_d = (_c = component.state) == null ? void 0 : _c.afterSections) != null ? _d : []
-      ];
+    stack: [
+      createCollectionState({
+        id: `${uid}-state-0`,
+        initialState: state,
+        searchQuery: "",
+        onComponentUpdate,
+        queryFunction,
+        trackEvent
+      })
+    ],
+    fork() {
+      const { stack } = component;
+      forkCount += 1;
+      const forkedState = stack[stack.length - 1].fork(`${uid}-state-${forkCount}`);
+      update(component, (draft) => {
+        draft.stack = [...draft.stack, forkedState];
+      });
     },
-    status: {
-      type: "idle",
-      loadMore: state.nextCursor ? () => query("pagination") : void 0
+    pop() {
+      const [rootState, ...forkedStates] = component.stack;
+      const poppedState = forkedStates.at(-1);
+      if (!poppedState) {
+        return;
+      }
+      poppedState.cancel();
+      update(component, (draft) => {
+        draft.stack = [rootState, ...forkedStates.slice(0, -1)];
+      });
+    },
+    getChildren() {
+      return component.stack[component.stack.length - 1].getChildren();
     },
-    state: __spreadProps(__spreadValues({}, state), {
-      filters: mapFilters(state.filters),
-      search: mapSearch(props.search)
-    }),
     start() {
       component.getChildren().forEach((child) => child.start());
     },
@@ -1864,37 +1972,6 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
   };
   return component;
 };
-var mergeSections = (existing, incoming) => {
-  const knownIds = new Set(existing.map((section) => section.id));
-  const newSections = incoming.filter((section) => !knownIds.has(section.id));
-  const merged = existing.map((section) => {
-    var _a, _b, _c, _d;
-    const match = incoming.find((s) => s.id === section.id);
-    if (!match) return section;
-    return {
-      id: match.id,
-      title: (_a = match.title) != null ? _a : section.title,
-      callToAction: (_b = match.callToAction) != null ? _b : section.callToAction,
-      help: (_c = match.help) != null ? _c : section.help,
-      inlineAlert: (_d = match.inlineAlert) != null ? _d : section.inlineAlert,
-      items: [...section.items, ...match.items]
-    };
-  });
-  return [...merged, ...newSections];
-};
-var getEventName = (mode, state) => {
-  const getMode = () => {
-    switch (mode) {
-      case "pagination":
-        return "Pagination";
-      case "search":
-        return "Search";
-      case "filter":
-        return "Filter";
-    }
-  };
-  return `Collection ${getMode()} ${state}`;
-};
 
 // src/domain/features/collection/getPerformCollectionQuery.ts
 var getPerformCollectionQuery = (httpClient, baseRequest, mapState) => {
@@ -1987,9 +2064,19 @@ var hashRequest = ({
 }) => JSON.stringify({ query, cursor, filters: getFilterValues(filters != null ? filters : []) });
 
 // src/domain/mappers/layout/collectionLayoutToComponent.ts
-var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, margin, search, tags, baseRequest }, mapperProps) => {
+var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, margin, search, tags, baseRequest }, mapperProps, schemaComponents) => {
+  var _a;
   const { httpClient, onComponentUpdate, trackEvent } = mapperProps;
-  const mapLayout = (layout, index) => mapLayoutToComponent(`${uid}-collection-response-${index}`, layout, mapperProps, []);
+  let layoutIndex = 0;
+  const mapLayout = (layout) => {
+    layoutIndex += 1;
+    return mapLayoutToComponent(
+      `${uid}-collection-response-${layoutIndex}`,
+      layout,
+      mapperProps,
+      schemaComponents
+    );
+  };
   const mapState = (state) => mapCollectionSpecToDomainState(state, mapperProps, mapLayout);
   const queryFunction = getPerformCollectionQuery(httpClient, baseRequest, mapState);
   const component = createCollectionComponent(
@@ -1999,8 +2086,9 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
       control,
       margin: margin != null ? margin : "md",
       tags,
-      state: mapState(initialState),
-      search
+      state: mapState(__spreadProps(__spreadValues({}, initialState), {
+        search: (_a = initialState.search) != null ? _a : search
+      }))
     },
     onComponentUpdate,
     queryFunction,
@@ -2010,6 +2098,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
 };
 var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
   const {
+    search,
     sections,
     filters,
     beforeSections,
@@ -2018,29 +2107,8 @@ var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
     analytics = {}
   } = specState;
   return {
-    sections: sections.map((section) => {
-      var _a;
-      return __spreadProps(__spreadValues({}, section), {
-        callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
-        help: (_a = section.help) == null ? void 0 : _a.markdown,
-        inlineAlert: mapInlineAlert(section.inlineAlert),
-        items: section.items.map((item) => {
-          const behavior = getDomainLayerBehavior(
-            { behavior: item.primaryBehavior },
-            [],
-            mapperProps.registerSubmissionBehavior
-          );
-          return __spreadProps(__spreadValues({}, item), {
-            id: item.entityId,
-            onClick: item.primaryBehavior ? () => {
-              void mapperProps.onBehavior(behavior);
-            } : void 0,
-            callToAction: getDomainLayerCallToAction(item.callToAction, mapperProps),
-            inlineAlert: mapInlineAlert(item.inlineAlert)
-          });
-        })
-      });
-    }),
+    search: search ? mapSearch(search, mapperProps, mapLayout) : void 0,
+    sections: sections.map((section) => mapSection(section, mapperProps, mapLayout)),
     filters: filters == null ? void 0 : filters.map(mapFilter),
     beforeSections: beforeSections == null ? void 0 : beforeSections.map(mapLayout),
     afterSections: afterSections == null ? void 0 : afterSections.map(mapLayout),
@@ -2048,6 +2116,49 @@ var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
     analytics
   };
 };
+var mapSearch = (search, mapperProps, mapLayout) => {
+  var _a, _b, _c;
+  return search ? __spreadProps(__spreadValues({}, search), {
+    help: (_a = search.help) == null ? void 0 : _a.markdown,
+    hints: (_b = search.hints) != null ? _b : search.hint ? [search.hint] : void 0,
+    initialSections: (_c = search.initialSections) == null ? void 0 : _c.map(
+      (section) => mapSection(section, mapperProps, mapLayout)
+    )
+  }) : void 0;
+};
+var mapSection = (section, mapperProps, mapLayout) => {
+  var _a;
+  const baseProps = __spreadProps(__spreadValues({}, section), {
+    callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
+    help: (_a = section.help) == null ? void 0 : _a.markdown,
+    inlineAlert: mapInlineAlert(section.inlineAlert)
+  });
+  if (section.type === "layout") {
+    return __spreadProps(__spreadValues({}, baseProps), {
+      type: "layout",
+      components: section.components.map(mapLayout)
+    });
+  }
+  return __spreadProps(__spreadValues({}, baseProps), {
+    type: "items",
+    items: section.items.map((item) => mapResultItem(item, mapperProps))
+  });
+};
+var mapResultItem = (item, mapperProps) => {
+  const behavior = getDomainLayerBehavior(
+    { behavior: item.primaryBehavior },
+    [],
+    mapperProps.registerSubmissionBehavior
+  );
+  return __spreadProps(__spreadValues({}, item), {
+    id: item.entityId,
+    onClick: item.primaryBehavior ? () => {
+      void mapperProps.onBehavior(behavior);
+    } : void 0,
+    callToAction: getDomainLayerCallToAction(item.callToAction, mapperProps),
+    inlineAlert: mapInlineAlert(item.inlineAlert)
+  });
+};
 var mapFilter = (filter) => {
   const anySelected = filter.options.some((option) => option.selected);
   return __spreadProps(__spreadValues({}, filter), {
@@ -3310,7 +3421,7 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
     case "button":
       return buttonLayoutToComponent(uid, layout, mapperProps);
     case "collection":
-      return collectionLayoutToComponent(uid, layout, mapperProps);
+      return collectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "columns":
       return columnsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "decision":
@@ -8971,31 +9082,52 @@ var mapBoxControl = ({
 
 // src/renderers/mappers/collectionComponentToProps.ts
 var collectionComponentToProps = (component, rendererMapperProps) => {
+  const { stack } = component;
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "fork", "pop")), rendererMapperProps), {
+    state: mapCollectionState(stack[stack.length - 1], rendererMapperProps),
+    depth: stack.length - 1
+  });
+};
+var mapCollectionState = (state, rendererMapperProps) => {
   var _a, _b, _c, _d, _e;
   const { render } = rendererMapperProps;
-  const beforeSectionsProps = (_b = (_a = component.state.beforeSections) == null ? void 0 : _a.map(
-    (child) => componentToRendererProps(child, rendererMapperProps)
-  )) != null ? _b : [];
-  const afterSectionsProps = (_d = (_c = component.state.afterSections) == null ? void 0 : _c.map(
-    (child) => componentToRendererProps(child, rendererMapperProps)
-  )) != null ? _d : [];
-  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), rendererMapperProps), {
-    status: component.status,
-    state: __spreadProps(__spreadValues({}, component.state), {
-      filters: (_e = component.state.filters) != null ? _e : [],
-      sections: component.state.sections.map((section) => __spreadProps(__spreadValues({}, section), {
-        callToAction: mapCallToActionOptional(section.callToAction),
-        items: section.items.map((item) => __spreadProps(__spreadValues({}, item), {
-          callToAction: mapCallToActionOptional(item.callToAction),
-          additionalInfo: mapAdditionalInfo2(item.additionalInfo),
-          disabled: rendererMapperProps.stepLoadingState !== "idle" || item.disabled
-        }))
-      })),
-      beforeSectionsProps,
-      beforeSections: beforeSectionsProps.map(render),
-      afterSectionsProps,
-      afterSections: afterSectionsProps.map(render)
-    })
+  const { search } = state;
+  const beforeSectionsProps = (_b = (_a = state.beforeSections) == null ? void 0 : _a.map((child) => componentToRendererProps(child, rendererMapperProps))) != null ? _b : [];
+  const afterSectionsProps = (_d = (_c = state.afterSections) == null ? void 0 : _c.map((child) => componentToRendererProps(child, rendererMapperProps))) != null ? _d : [];
+  return __spreadProps(__spreadValues({}, pick(state, "id", "status")), {
+    sections: mapSections(state.sections, rendererMapperProps),
+    filters: (_e = state.filters) != null ? _e : [],
+    beforeSectionsProps,
+    beforeSections: beforeSectionsProps.map(render),
+    afterSectionsProps,
+    afterSections: afterSectionsProps.map(render),
+    search: search ? __spreadProps(__spreadValues({}, pick(search, "title", "hint", "hints", "query", "onChange")), {
+      initialSections: search.initialSections ? mapSections(search.initialSections, rendererMapperProps) : void 0
+    }) : void 0
+  });
+};
+var mapSections = (sections, rendererMapperProps) => sections.map((section) => mapSection2(section, rendererMapperProps));
+var mapSection2 = (section, rendererMapperProps) => {
+  const baseProps = __spreadProps(__spreadValues({}, section), {
+    callToAction: mapCallToActionOptional(section.callToAction)
+  });
+  if (section.type === "layout") {
+    const childrenProps = section.components.map(
+      (child) => componentToRendererProps(child, rendererMapperProps)
+    );
+    return __spreadProps(__spreadValues({}, baseProps), {
+      type: "layout",
+      childrenProps,
+      children: childrenProps.map(rendererMapperProps.render)
+    });
+  }
+  return __spreadProps(__spreadValues({}, baseProps), {
+    type: "items",
+    items: section.items.map((item) => __spreadProps(__spreadValues({}, item), {
+      callToAction: mapCallToActionOptional(item.callToAction),
+      additionalInfo: mapAdditionalInfo2(item.additionalInfo),
+      disabled: rendererMapperProps.stepLoadingState !== "idle" || item.disabled
+    }))
   });
 };