@multiplatform.one/components 7.4.1 → 7.5.0

package/dist/jsx/Wizard/index.native.js

@@ -0,0 +1,647 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Wizard_exports = {};
+__export(Wizard_exports, {
+  Wizard: () => Wizard,
+  WizardClearable: () => WizardClearable,
+  WizardPanel: () => WizardPanel,
+  WizardReview: () => WizardReview,
+  useWizard: () => useWizard
+});
+module.exports = __toCommonJS(Wizard_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_ActionBar = require("../actions/ActionBar.native.js");
+var import_Button = require("../Button.native.js");
+var import_EmptyState = require("../layouts/EmptyState.native.js");
+var import_ProgressSteps = require("../ProgressSteps/index.native.js");
+var import_Skeleton = require("../Skeleton/index.native.js");
+var import_i18n = require("../shared/i18n.native.js");
+var import_t = require("../shared/t.native.js");
+var WizardContext = /* @__PURE__ */(0, import_react.createContext)(null);
+function useWizard() {
+  var ctx = (0, import_react.useContext)(WizardContext);
+  if (!ctx) {
+    throw new Error("useWizard must be used within Wizard");
+  }
+  return ctx;
+}
+function formatReviewValue(value) {
+  if (value == null || value === "") return "\u2014";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return JSON.stringify(value);
+}
+function stepCaption(t, index, steps) {
+  var _ref;
+  var _steps_index;
+  return (0, import_t.bidiIsolate)((0, import_t.withInterp)(t("Step {{current}} of {{total}} \u2014 {{label}}"), {
+    current: index + 1,
+    total: steps.length,
+    label: (_ref = (_steps_index = steps[index]) === null || _steps_index === void 0 ? void 0 : _steps_index.label) !== null && _ref !== void 0 ? _ref : ""
+  }));
+}
+function WizardRule() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-wizard-separator": "",
+    role: "separator",
+    height: 1,
+    backgroundColor: "$borderColor",
+    alignSelf: "stretch",
+    flexGrow: 0,
+    flexShrink: 0
+  });
+}
+var WizardShell = /* @__PURE__ */(0, import_react.forwardRef)(function WizardShell2(param, ref) {
+  var {
+    compact,
+    children,
+    ...props
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)(compact === void 0 ? void 0 : {
+    compact
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    ref,
+    "data-wizard-shell": "",
+    backgroundColor: "$color3",
+    ...knobProps.containerRadius,
+    ...knobProps.panelPadding,
+    width: "100%",
+    ...props,
+    borderWidth: 1,
+    borderColor: "$color5",
+    children
+  });
+});
+function WizardSkeleton() {
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gapLg,
+    width: "100%",
+    "data-wizard-status": "loading",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$3",
+      alignItems: "center",
+      width: "100%",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "circular",
+        width: 32,
+        height: 32
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "circular",
+        width: 32,
+        height: 32
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "circular",
+        width: 32,
+        height: 32
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.gap,
+      maxWidth: import_forms.formReadableMaxWidth,
+      width: "100%",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: 44
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: 44
+      })]
+    })]
+  });
+}
+function WizardPanel(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-wizard-panel-body": "",
+    width: "100%",
+    children
+  });
+}
+function WizardClearable(param) {
+  var {
+    names,
+    children
+  } = param;
+  var {
+    repaintGeneration
+  } = useWizard();
+  var key = names.map(function (name) {
+    var _repaintGeneration_name;
+    return `${name}:${(_repaintGeneration_name = repaintGeneration[name]) !== null && _repaintGeneration_name !== void 0 ? _repaintGeneration_name : 0}`;
+  }).join("|");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    children
+  }, key);
+}
+function WizardReview(param) {
+  var {
+    groups
+  } = param;
+  var _ref;
+  var {
+    steps,
+    getFieldValue,
+    goTo,
+    editLabel,
+    reviewGroups
+  } = useWizard();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var resolved = (_ref = groups !== null && groups !== void 0 ? groups : reviewGroups) !== null && _ref !== void 0 ? _ref : steps.map(function (step, index) {
+    return {
+      step,
+      index
+    };
+  }).filter(function (param2) {
+    var {
+      step
+    } = param2;
+    return !step.review;
+  }).map(function (param2) {
+    var {
+      step,
+      index
+    } = param2;
+    var _step_fields;
+    return {
+      stepIndex: index,
+      label: step.label,
+      rows: ((_step_fields = step.fields) !== null && _step_fields !== void 0 ? _step_fields : []).map(function (name) {
+        var _ref2;
+        var _step_fieldLabels;
+        return {
+          name,
+          label: (_ref2 = (_step_fieldLabels = step.fieldLabels) === null || _step_fieldLabels === void 0 ? void 0 : _step_fieldLabels[name]) !== null && _ref2 !== void 0 ? _ref2 : name,
+          value: formatReviewValue(getFieldValue(name))
+        };
+      })
+    };
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    "data-wizard-review": "",
+    width: "100%",
+    ...knobProps.gap,
+    children: resolved.map(function (group, groupIndex) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        width: "100%",
+        children: [groupIndex > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(WizardRule, {}) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "baseline",
+          justifyContent: "space-between",
+          gap: "$3",
+          width: "100%",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            ...knobProps.heading,
+            color: "$color12",
+            children: group.label
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            chromeless: true,
+            compact: true,
+            onPress: function onPress() {
+              return goTo(group.stepIndex, {
+                returnToReview: true
+              });
+            },
+            "aria-label": `${editLabel} ${group.label}`,
+            testID: `wizard-edit-${group.stepIndex}`,
+            children: editLabel
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          ...knobProps.gap,
+          width: "100%",
+          children: group.rows.map(function (row) {
+            var _row_value;
+            return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              gap: "$4",
+              alignItems: "flex-start",
+              width: "100%",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                ...knobProps.body,
+                color: "$color10",
+                width: 176,
+                flexShrink: 0,
+                children: row.label
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                ...knobProps.body,
+                color: "$color12",
+                flex: 1,
+                minWidth: 0,
+                children: (_row_value = row.value) !== null && _row_value !== void 0 ? _row_value : "\u2014"
+              })]
+            }, row.name);
+          })
+        })]
+      }, group.label);
+    })
+  });
+}
+function WizardRoot(param) {
+  var {
+    steps,
+    children,
+    current: controlledCurrent,
+    defaultCurrent = 0,
+    onStepChange,
+    onCancel,
+    onComplete,
+    completeLabel,
+    cancelLabel,
+    backLabel,
+    nextLabel,
+    form,
+    validateStep,
+    status = "ready",
+    emptyTitle,
+    emptyDescription,
+    errorTitle,
+    errorDescription,
+    compact,
+    labels = "auto",
+    editLabel,
+    reviewGroups,
+    ...props
+  } = param;
+  var _ref, _ref1;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
+  var media = (0, import_tamagui.useMedia)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)(compact === void 0 ? void 0 : {
+    compact
+  });
+  var reactId = (0, import_react.useId)();
+  var shellRef = (0, import_react.useRef)(null);
+  var panelRefs = (0, import_react.useRef)([]);
+  var [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultCurrent);
+  var [maxVisited, setMaxVisited] = (0, import_react.useState)(defaultCurrent);
+  var [returnTo, setReturnTo] = (0, import_react.useState)(null);
+  var [stepErrors, setStepErrors] = (0, import_react.useState)([]);
+  var [completing, setCompleting] = (0, import_react.useState)(false);
+  var [repaintGeneration, setRepaintGeneration] = (0, import_react.useState)({});
+  var current = controlledCurrent !== null && controlledCurrent !== void 0 ? controlledCurrent : uncontrolled;
+  var hideLabels = labels === "hidden" || labels !== "visible" && Boolean(media.xs);
+  var lastIndex = Math.max(0, steps.length - 1);
+  var isLast = current >= lastIndex;
+  var currentStep = steps[current];
+  var resolvedCancel = cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("Cancel");
+  var resolvedBack = backLabel !== null && backLabel !== void 0 ? backLabel : t("Back");
+  var resolvedEdit = editLabel !== null && editLabel !== void 0 ? editLabel : t("Edit");
+  var panels = import_react.Children.toArray(children);
+  var setCurrent = (0, import_react.useCallback)(function (next) {
+    var clamped = Math.max(0, Math.min(next, lastIndex));
+    setMaxVisited(function (max) {
+      return Math.max(max, clamped);
+    });
+    setStepErrors([]);
+    if (controlledCurrent === void 0) setUncontrolled(clamped);
+    onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(clamped);
+  }, [controlledCurrent, lastIndex, onStepChange]);
+  var goTo = (0, import_react.useCallback)(function (index, opts) {
+    if (opts === null || opts === void 0 ? void 0 : opts.returnToReview) setReturnTo(lastIndex);
+    setCurrent(index);
+  }, [lastIndex, setCurrent]);
+  var getFieldValue = (0, import_react.useCallback)(function (name) {
+    var _ref2;
+    var _form_getFieldValue, _form_state_values, _form_state;
+    return (_ref2 = form === null || form === void 0 ? void 0 : (_form_getFieldValue = form.getFieldValue) === null || _form_getFieldValue === void 0 ? void 0 : _form_getFieldValue.call(form, name)) !== null && _ref2 !== void 0 ? _ref2 : form === null || form === void 0 ? void 0 : (_form_state = form.state) === null || _form_state === void 0 ? void 0 : (_form_state_values = _form_state.values) === null || _form_state_values === void 0 ? void 0 : _form_state_values[name];
+  }, [form]);
+  var setFieldValue = (0, import_react.useCallback)(function (name, value) {
+    var _form_setFieldValue;
+    form === null || form === void 0 ? void 0 : (_form_setFieldValue = form.setFieldValue) === null || _form_setFieldValue === void 0 ? void 0 : _form_setFieldValue.call(form, name, value);
+    setRepaintGeneration(function (prev) {
+      var _prev_name;
+      return {
+        ...prev,
+        [name]: ((_prev_name = prev[name]) !== null && _prev_name !== void 0 ? _prev_name : 0) + 1
+      };
+    });
+  }, [form]);
+  var collectFieldErrors = (0, import_react.useCallback)(async function (names) {
+    var items = [];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = names[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var name = _step.value;
+        var _form_validateField, _form_getFieldMeta_errors, _form_getFieldMeta, _form_getFieldMeta1, _currentStep_fieldLabels;
+        var validated = await Promise.resolve(form === null || form === void 0 ? void 0 : (_form_validateField = form.validateField) === null || _form_validateField === void 0 ? void 0 : _form_validateField.call(form, name, "submit"));
+        var fromMeta = form === null || form === void 0 ? void 0 : (_form_getFieldMeta1 = form.getFieldMeta) === null || _form_getFieldMeta1 === void 0 ? void 0 : (_form_getFieldMeta = _form_getFieldMeta1.call(form, name)) === null || _form_getFieldMeta === void 0 ? void 0 : (_form_getFieldMeta_errors = _form_getFieldMeta.errors) === null || _form_getFieldMeta_errors === void 0 ? void 0 : _form_getFieldMeta_errors[0];
+        var raw = fromMeta !== null && fromMeta !== void 0 ? fromMeta : typeof validated === "string" ? validated : void 0;
+        if (raw == null || raw === false || raw === "") continue;
+        items.push({
+          name,
+          id: name,
+          error: typeof raw === "string" ? raw : String(raw),
+          label: currentStep === null || currentStep === void 0 ? void 0 : (_currentStep_fieldLabels = currentStep.fieldLabels) === null || _currentStep_fieldLabels === void 0 ? void 0 : _currentStep_fieldLabels[name]
+        });
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    return items;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.fieldLabels, form]);
+  var runStepValidation = (0, import_react.useCallback)(async function (index) {
+    var _ref2;
+    var _steps_index;
+    if (validateStep) {
+      var _ref12;
+      var _steps_index1;
+      var ok = await validateStep(index);
+      return ok ? [] : [{
+        name: (_ref12 = (_steps_index1 = steps[index]) === null || _steps_index1 === void 0 ? void 0 : _steps_index1.id) !== null && _ref12 !== void 0 ? _ref12 : String(index),
+        error: t("There is a problem")
+      }];
+    }
+    var names = (_ref2 = (_steps_index = steps[index]) === null || _steps_index === void 0 ? void 0 : _steps_index.fields) !== null && _ref2 !== void 0 ? _ref2 : [];
+    if (names.length === 0) return [];
+    return collectFieldErrors(names);
+  }, [collectFieldErrors, steps, t, validateStep]);
+  var focusFirstStepError = (0, import_react.useCallback)(function (errors, index) {
+    var _ref2, _panelRefs_current_index, _first_id;
+    if (!import_tamagui.isWeb || errors.length === 0) return;
+    var root = (_ref2 = (_panelRefs_current_index = panelRefs.current[index]) !== null && _panelRefs_current_index !== void 0 ? _panelRefs_current_index : shellRef.current) !== null && _ref2 !== void 0 ? _ref2 : typeof document !== "undefined" ? document.body : null;
+    var first = errors[0];
+    var focused = (0, import_forms.focusFieldTarget)(root, {
+      id: (_first_id = first.id) !== null && _first_id !== void 0 ? _first_id : first.name,
+      name: first.name
+    });
+    if (!focused) (0, import_forms.focusFirstInvalid)(root);
+  }, []);
+  var handleNext = (0, import_react.useCallback)(async function () {
+    var errors = await runStepValidation(current);
+    setStepErrors(errors);
+    if (errors.length > 0) {
+      if (import_tamagui.isWeb && typeof window !== "undefined") {
+        window.setTimeout(function () {
+          return focusFirstStepError(errors, current);
+        }, 0);
+      }
+      return;
+    }
+    if (returnTo != null) {
+      var target = returnTo;
+      setReturnTo(null);
+      setCurrent(target);
+      return;
+    }
+    setCurrent(Math.min(current + 1, lastIndex));
+  }, [current, focusFirstStepError, lastIndex, returnTo, runStepValidation, setCurrent]);
+  var handleComplete = (0, import_react.useCallback)(async function () {
+    var errors = await runStepValidation(current);
+    setStepErrors(errors);
+    if (errors.length > 0) {
+      if (import_tamagui.isWeb && typeof window !== "undefined") {
+        window.setTimeout(function () {
+          return focusFirstStepError(errors, current);
+        }, 0);
+      }
+      return;
+    }
+    if (!onComplete) return;
+    setCompleting(true);
+    try {
+      await onComplete();
+    } finally {
+      setCompleting(false);
+    }
+  }, [current, focusFirstStepError, onComplete, runStepValidation]);
+  var handleBack = (0, import_react.useCallback)(function () {
+    setCurrent(Math.max(0, current - 1));
+  }, [current, setCurrent]);
+  (0, import_react.useEffect)(function () {
+    var _first_focus;
+    if (!import_tamagui.isWeb || knobProps.formAutofocus !== "on" || stepErrors.length > 0) return;
+    var panel = panelRefs.current[current];
+    var first = panel === null || panel === void 0 ? void 0 : panel.querySelector("input:not([disabled]), textarea:not([disabled]), select:not([disabled])");
+    first === null || first === void 0 ? void 0 : (_first_focus = first.focus) === null || _first_focus === void 0 ? void 0 : _first_focus.call(first);
+  }, [current, knobProps.formAutofocus, stepErrors.length]);
+  var ctx = (0, import_react.useMemo)(function () {
+    return {
+      current,
+      steps,
+      goTo,
+      setFieldValue,
+      getFieldValue,
+      repaintGeneration,
+      editLabel: resolvedEdit,
+      reviewGroups
+    };
+  }, [current, getFieldValue, goTo, repaintGeneration, resolvedEdit, reviewGroups, setFieldValue, steps]);
+  var railSteps = steps.map(function (step, index) {
+    return {
+      id: step.id,
+      label: step.label,
+      description: step.description,
+      optional: step.optional,
+      error: index === current && stepErrors.length > 0,
+      completed: index !== current && index <= maxVisited,
+      disabled: step.disabled || index > maxVisited
+    };
+  });
+  var nextStep = steps[current + 1];
+  var primaryText = isLast ? completeLabel : (_ref = nextLabel === null || nextLabel === void 0 ? void 0 : nextLabel(nextStep)) !== null && _ref !== void 0 ? _ref : (0, import_t.withInterp)(t("Next: {{label}}"), {
+    label: (_ref1 = nextStep === null || nextStep === void 0 ? void 0 : nextStep.label) !== null && _ref1 !== void 0 ? _ref1 : ""
+  });
+  var hasLeading = Boolean(onCancel) || current > 0;
+  if (status === "loading") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(WizardShell, {
+      compact,
+      ...props,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(WizardSkeleton, {})
+    });
+  }
+  if (status === "empty" || steps.length === 0) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(WizardShell, {
+      compact,
+      "data-wizard-status": "empty",
+      ...props,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_EmptyState.EmptyState, {
+        compact: true,
+        title: emptyTitle !== null && emptyTitle !== void 0 ? emptyTitle : t("No steps"),
+        description: emptyDescription
+      })
+    });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(WizardShell, {
+      compact,
+      "data-wizard-status": "error",
+      ...props,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_EmptyState.EmptyState, {
+        compact: true,
+        intent: "error",
+        title: errorTitle !== null && errorTitle !== void 0 ? errorTitle : t("Could not load this flow"),
+        description: errorDescription
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(WizardContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(WizardShell, {
+      compact,
+      ref: shellRef,
+      "data-wizard-status": "ready",
+      "data-wizard-current": String(current),
+      ...props,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        "data-wizard-rail": "",
+        width: "100%",
+        children: (
+        /*
+        * MPO-81: no `labels` prop here. ProgressStepsProps does not declare
+        * one and ProgressSteps reads no such prop, so passing it was inert
+        * at runtime and failed the build with TS2322. `hideLabels` still
+        * drives the per-step caption below, which is where it has always
+        * had a real effect. Re-add the pass in the same change that gives
+        * ProgressSteps a labels prop it actually honours.
+        */
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)(import_ProgressSteps.ProgressSteps, {
+          steps: railSteps,
+          current,
+          compact,
+          linear: true,
+          onStepChange: function onStepChange2(index) {
+            var _steps_index;
+            if (index <= maxVisited && !((_steps_index = steps[index]) === null || _steps_index === void 0 ? void 0 : _steps_index.disabled)) setCurrent(index);
+          }
+        }))
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        marginTop: knobProps.gap.gap,
+        width: "100%",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(WizardRule, {})
+      }), stepErrors.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        "data-error-summary": "",
+        backgroundColor: "$red3",
+        ...knobProps.borderRadius,
+        borderWidth: 1,
+        borderColor: "$red9",
+        marginTop: knobProps.gap.gap,
+        width: "100%",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.ErrorSummary, {
+          errors: stepErrors,
+          disableAutoFocus: true,
+          formElement: shellRef.current,
+          title: t("There is a problem")
+        })
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        marginTop: knobProps.gap.gap,
+        width: "100%",
+        children: steps.map(function (step, index) {
+          var legend = hideLabels ? stepCaption(t, index, steps) : step.label;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            ref: function ref(node) {
+              panelRefs.current[index] = node;
+            },
+            "data-wizard-panel": "",
+            "data-wizard-fields": "",
+            "data-wizard-step-caption": hideLabels ? "" : void 0,
+            "data-active": index === current ? "true" : "false",
+            "data-step-id": step.id,
+            display: index === current ? "flex" : "none",
+            "aria-hidden": index !== current || void 0,
+            width: "100%",
+            maxWidth: import_forms.formReadableMaxWidth,
+            alignSelf: "flex-start",
+            ...knobProps.gap,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FormSection, {
+              label: legend,
+              compact,
+              children: panels[index]
+            })
+          }, step.id || index);
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        marginTop: knobProps.gapLg.gap,
+        width: "100%",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(WizardRule, {})
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ActionBar.ActionBar, {
+        id: `${reactId}-footer`,
+        "data-wizard-footer": "",
+        align: hasLeading ? "between" : "end",
+        marginTop: knobProps.gap.gap,
+        cancel: hasLeading ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$2",
+          flexWrap: "wrap",
+          alignItems: "center",
+          children: [onCancel ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            chromeless: true,
+            onPress: onCancel,
+            testID: "wizard-cancel",
+            children: resolvedCancel
+          }) : null, current > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            outlined: true,
+            onPress: handleBack,
+            testID: "wizard-back",
+            children: resolvedBack
+          }) : null]
+        }) : void 0,
+        primary: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+          accent: true,
+          "data-primary": "",
+          loading: completing,
+          onPress: isLast ? handleComplete : handleNext,
+          testID: "wizard-primary",
+          children: primaryText
+        })
+      })]
+    })
+  });
+}
+var Wizard = Object.assign(WizardRoot, {
+  Panel: WizardPanel,
+  Clearable: WizardClearable,
+  Review: WizardReview
+});
+//# sourceMappingURL=index.native.js.map