@secmia/openui-flow 3.0.0

package/dist/index.mjs

@@ -0,0 +1,1073 @@
+"use client";
+
+// src/AdaptiveFlow.tsx
+import * as React from "react";
+
+// src/engine.ts
+var DefaultAppRequirements = {
+  HAS_EMAIL: "has_email",
+  EMAIL_VERIFIED: "email_verified",
+  HAS_PASSWORD: "has_password",
+  HAS_FIRST_NAME: "has_first_name",
+  HAS_LAST_NAME: "has_last_name",
+  ACCEPTED_TOS: "accepted_tos",
+  HAS_JOB_TITLE: "has_job_title"
+};
+var DefaultAdaptiveSteps = {
+  COLLECT_EMAIL: "COLLECT_EMAIL",
+  VERIFY_OTP: "VERIFY_OTP",
+  COLLECT_PASSWORD: "COLLECT_PASSWORD",
+  COLLECT_PROFILE: "COLLECT_PROFILE",
+  COLLECT_TOS: "COLLECT_TOS",
+  COMPLETE: "COMPLETE"
+};
+var defaultRequirements = [
+  DefaultAppRequirements.HAS_EMAIL,
+  DefaultAppRequirements.EMAIL_VERIFIED,
+  DefaultAppRequirements.HAS_PASSWORD,
+  DefaultAppRequirements.HAS_FIRST_NAME,
+  DefaultAppRequirements.ACCEPTED_TOS
+];
+var initialContext = {
+  email: null,
+  isVerified: false,
+  hasPassword: false,
+  profile: {
+    firstName: null,
+    lastName: null,
+    jobTitle: null
+  },
+  agreedToTos: false
+};
+var defaultRequirementResolvers = {
+  has_email: {
+    isMet: (context) => Boolean(context.email),
+    step: DefaultAdaptiveSteps.COLLECT_EMAIL
+  },
+  email_verified: {
+    isMet: (context) => context.isVerified,
+    step: DefaultAdaptiveSteps.VERIFY_OTP
+  },
+  has_password: {
+    isMet: (context) => context.hasPassword,
+    step: DefaultAdaptiveSteps.COLLECT_PASSWORD
+  },
+  has_first_name: {
+    isMet: (context) => Boolean(context.profile.firstName),
+    step: DefaultAdaptiveSteps.COLLECT_PROFILE
+  },
+  has_last_name: {
+    isMet: (context) => Boolean(context.profile.lastName),
+    step: DefaultAdaptiveSteps.COLLECT_PROFILE
+  },
+  accepted_tos: {
+    isMet: (context) => context.agreedToTos,
+    step: DefaultAdaptiveSteps.COLLECT_TOS
+  },
+  has_job_title: {
+    isMet: (context) => Boolean(context.profile.jobTitle),
+    step: DefaultAdaptiveSteps.COLLECT_PROFILE
+  }
+};
+function createRequirementGraph(requirements, resolvers, options) {
+  const graph = [];
+  for (const requirement of requirements) {
+    const resolver = resolvers[requirement];
+    if (!resolver) {
+      continue;
+    }
+    graph.push({
+      requirement,
+      step: resolver.step,
+      isMet: resolver.isMet,
+      when: options?.conditions?.[requirement],
+      priority: options?.priorities?.[requirement] ?? 0,
+      dependsOn: options?.dependencies?.[requirement] ?? []
+    });
+  }
+  return graph;
+}
+function createDefaultRequirementGraph(options) {
+  const requirements = options?.requirements ?? defaultRequirements;
+  const resolvers = {
+    ...defaultRequirementResolvers,
+    ...options?.resolvers ?? {}
+  };
+  return createRequirementGraph(requirements, resolvers, {
+    priorities: options?.priorities,
+    conditions: options?.conditions,
+    dependencies: options?.dependencies
+  });
+}
+function sortGraph(graph) {
+  return [...graph].sort((left, right) => {
+    const byPriority = (right.priority ?? 0) - (left.priority ?? 0);
+    if (byPriority !== 0) {
+      return byPriority;
+    }
+    return 0;
+  });
+}
+async function evaluateNextStep(context, graph, completeStep) {
+  for (const node of sortGraph(graph)) {
+    if (node.when && !await node.when(context)) {
+      continue;
+    }
+    if (node.dependsOn && node.dependsOn.length > 0) {
+      const prerequisiteNodes = graph.filter(
+        (candidate) => node.dependsOn?.includes(candidate.requirement)
+      );
+      if (prerequisiteNodes.length > 0) {
+        const prerequisitesMet = await Promise.all(
+          prerequisiteNodes.map(async (candidate) => candidate.isMet(context))
+        );
+        if (prerequisitesMet.includes(false)) {
+          continue;
+        }
+      }
+    }
+    if (!await node.isMet(context)) {
+      return node.step;
+    }
+  }
+  return completeStep;
+}
+async function getMissingRequirements(context, graph) {
+  const missing = [];
+  for (const node of sortGraph(graph)) {
+    if (node.when && !await node.when(context)) {
+      continue;
+    }
+    if (!await node.isMet(context)) {
+      missing.push(node.requirement);
+    }
+  }
+  return missing;
+}
+
+// src/AdaptiveFlow.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var defaultStepTitle = {
+  COLLECT_EMAIL: "Enter your email",
+  VERIFY_OTP: "Verify your email",
+  COLLECT_PASSWORD: "Set up your password",
+  COLLECT_PROFILE: "Complete your profile",
+  COLLECT_TOS: "Accept terms",
+  COMPLETE: "Done"
+};
+var styleSlots = [
+  "shell",
+  "headerRow",
+  "eyebrow",
+  "title",
+  "badge",
+  "success",
+  "error",
+  "info",
+  "caption",
+  "formRow",
+  "formColumn",
+  "input",
+  "button",
+  "checkboxRow",
+  "complete",
+  "footer",
+  "oauthButton"
+];
+function mergeContext(current, patch) {
+  return {
+    ...current,
+    ...patch,
+    profile: {
+      ...current.profile,
+      ...patch.profile
+    }
+  };
+}
+function withDefaults(initialValue) {
+  if (!initialValue) {
+    return initialContext;
+  }
+  return mergeContext(initialContext, initialValue);
+}
+function toError(error) {
+  if (error instanceof Error) {
+    return error;
+  }
+  return new Error("Unknown error while processing adaptive flow");
+}
+function cx(...names) {
+  const value = names.filter(Boolean).join(" ").trim();
+  return value.length > 0 ? value : void 0;
+}
+function pickStorage(storage) {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!storage || storage === "session") {
+    return window.sessionStorage;
+  }
+  if (storage === "local") {
+    return window.localStorage;
+  }
+  return storage;
+}
+function readPersistedState(persistence) {
+  if (!persistence) {
+    return null;
+  }
+  const storage = pickStorage(persistence.storage);
+  if (!storage) {
+    return null;
+  }
+  const raw = storage.getItem(persistence.key);
+  if (!raw) {
+    return null;
+  }
+  const deserialize = persistence.deserialize ?? ((value) => JSON.parse(value));
+  return deserialize(raw);
+}
+function writePersistedState(persistence, state) {
+  if (!persistence) {
+    return;
+  }
+  const storage = pickStorage(persistence.storage);
+  if (!storage) {
+    return;
+  }
+  const serialize = persistence.serialize ?? ((value) => JSON.stringify(value));
+  storage.setItem(persistence.key, serialize(state));
+}
+function clearPersistedState(persistence) {
+  if (!persistence) {
+    return;
+  }
+  const storage = pickStorage(persistence.storage);
+  if (!storage) {
+    return;
+  }
+  storage.removeItem(persistence.key);
+}
+async function assertValid(result) {
+  const message = await result;
+  if (typeof message === "string" && message.trim().length > 0) {
+    throw new Error(message);
+  }
+}
+function resolveStyles(unstyled, styleOverrides) {
+  const resolved = {};
+  for (const slot of styleSlots) {
+    if (unstyled) {
+      resolved[slot] = styleOverrides?.[slot];
+      continue;
+    }
+    resolved[slot] = {
+      ...defaultStyles[slot],
+      ...styleOverrides?.[slot] ?? {}
+    };
+  }
+  return resolved;
+}
+function AdaptiveFlow({
+  adapter,
+  requirements,
+  requirementGraph,
+  requirementGraphConfig,
+  requirementResolvers,
+  completeStep,
+  stepTitles,
+  renderStep,
+  stepRegistry,
+  initialValue,
+  onComplete,
+  onError,
+  onStepTransition,
+  className,
+  classNames,
+  styles,
+  unstyled = false,
+  persistence,
+  validators
+}) {
+  const normalizedRequirements = React.useMemo(
+    () => requirements ?? defaultRequirements,
+    [requirements]
+  );
+  const normalizedCompleteStep = React.useMemo(
+    () => completeStep ?? "COMPLETE",
+    [completeStep]
+  );
+  const resolvers = React.useMemo(
+    () => ({
+      ...defaultRequirementResolvers,
+      ...requirementResolvers ?? {}
+    }),
+    [requirementResolvers]
+  );
+  const graph = React.useMemo(
+    () => requirementGraph ?? createDefaultRequirementGraph({
+      requirements: normalizedRequirements,
+      resolvers,
+      priorities: requirementGraphConfig?.priorities,
+      conditions: requirementGraphConfig?.conditions,
+      dependencies: requirementGraphConfig?.dependencies
+    }),
+    [
+      requirementGraph,
+      normalizedRequirements,
+      resolvers,
+      requirementGraphConfig?.priorities,
+      requirementGraphConfig?.conditions,
+      requirementGraphConfig?.dependencies
+    ]
+  );
+  const uiStyles = React.useMemo(() => resolveStyles(unstyled, styles), [unstyled, styles]);
+  const [context, setContext] = React.useState(() => withDefaults(initialValue));
+  const [step, setStep] = React.useState(normalizedCompleteStep);
+  const [missingRequirements, setMissingRequirements] = React.useState([]);
+  const [transitions, setTransitions] = React.useState([]);
+  const [busy, setBusy] = React.useState(false);
+  const [message, setMessage] = React.useState(null);
+  const [errorMessage, setErrorMessage] = React.useState(null);
+  const [oauthPendingProvider, setOauthPendingProvider] = React.useState(null);
+  const [persistenceHydrated, setPersistenceHydrated] = React.useState(!persistence);
+  const attemptByStepRef = React.useRef({});
+  const previousStepRef = React.useRef(null);
+  const evaluationRef = React.useRef(0);
+  const completed = React.useRef(false);
+  React.useEffect(() => {
+    if (!persistence) {
+      return;
+    }
+    try {
+      const persisted = readPersistedState(persistence);
+      if (persisted?.context) {
+        setContext(mergeContext(withDefaults(initialValue), persisted.context));
+      }
+      if (persisted?.oauthPendingProvider) {
+        setOauthPendingProvider(persisted.oauthPendingProvider);
+      }
+    } catch {
+    } finally {
+      setPersistenceHydrated(true);
+    }
+  }, [initialValue, persistence]);
+  React.useEffect(() => {
+    let isCancelled = false;
+    const currentEvaluation = ++evaluationRef.current;
+    void (async () => {
+      const [missing2, next] = await Promise.all([
+        getMissingRequirements(context, graph),
+        evaluateNextStep(context, graph, normalizedCompleteStep)
+      ]);
+      if (isCancelled || currentEvaluation !== evaluationRef.current) {
+        return;
+      }
+      setMissingRequirements(missing2);
+      setStep(next);
+      const from = previousStepRef.current;
+      const attemptKey = String(next);
+      const nextAttempt = from === next ? (attemptByStepRef.current[attemptKey] ?? 0) + 1 : 1;
+      attemptByStepRef.current[attemptKey] = nextAttempt;
+      const transition = {
+        from,
+        to: next,
+        at: Date.now(),
+        attempt: nextAttempt
+      };
+      setTransitions((previous) => [...previous, transition].slice(-100));
+      previousStepRef.current = next;
+      onStepTransition?.(transition, context);
+    })().catch((error) => {
+      if (isCancelled || currentEvaluation !== evaluationRef.current) {
+        return;
+      }
+      const normalized = toError(error);
+      setErrorMessage(normalized.message);
+      onError?.(normalized);
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [context, graph, normalizedCompleteStep, onError, onStepTransition]);
+  React.useEffect(() => {
+    if (step === normalizedCompleteStep) {
+      if (!completed.current) {
+        completed.current = true;
+        onComplete?.(context);
+        const shouldClearPersistence = persistence?.clearOnComplete ?? true;
+        if (shouldClearPersistence) {
+          clearPersistedState(persistence);
+        }
+      }
+    } else {
+      completed.current = false;
+    }
+  }, [context, normalizedCompleteStep, onComplete, persistence, step]);
+  React.useEffect(() => {
+    if (!persistence || !persistenceHydrated) {
+      return;
+    }
+    try {
+      writePersistedState(persistence, { context, oauthPendingProvider });
+    } catch {
+    }
+  }, [context, oauthPendingProvider, persistence, persistenceHydrated]);
+  const run = React.useCallback(
+    async (job) => {
+      setBusy(true);
+      setErrorMessage(null);
+      try {
+        await job();
+      } catch (error) {
+        const normalized = toError(error);
+        setErrorMessage(normalized.message);
+        onError?.(normalized);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [onError]
+  );
+  const patchContext = React.useCallback((patch) => {
+    setContext((prev) => mergeContext(prev, patch));
+  }, []);
+  const patchBaseContext = React.useCallback(
+    (patch) => {
+      patchContext(patch);
+    },
+    [patchContext]
+  );
+  React.useEffect(() => {
+    const completeOAuth = adapter?.completeOAuth;
+    if (!oauthPendingProvider || !completeOAuth) {
+      return;
+    }
+    void run(async () => {
+      const patch = await completeOAuth(oauthPendingProvider, context);
+      if (patch) {
+        patchContext(patch);
+      }
+      setOauthPendingProvider(null);
+      setMessage("OAuth sign-in completed.");
+    });
+  }, [adapter, context, oauthPendingProvider, patchContext, run]);
+  const handleEmail = (emailInput) => {
+    const email = emailInput.trim().toLowerCase();
+    if (!email) {
+      return;
+    }
+    void run(async () => {
+      if (validators?.email) {
+        await assertValid(validators.email(email, { context }));
+      }
+      const identity = await adapter?.lookupByEmail?.(email) ?? null;
+      patchBaseContext({
+        email,
+        hasPassword: Boolean(identity?.hasPassword),
+        isVerified: Boolean(identity?.isVerified),
+        agreedToTos: Boolean(identity?.agreedToTos),
+        profile: {
+          firstName: identity?.profile?.firstName ?? null,
+          lastName: identity?.profile?.lastName ?? null,
+          jobTitle: identity?.profile?.jobTitle ?? null
+        }
+      });
+      if (identity?.accountExists && identity.hasPassword) {
+        setMessage("Welcome back. Enter your password to continue.");
+        return;
+      }
+      if (adapter?.requestOtp) {
+        await adapter.requestOtp(email);
+        setMessage("We sent a 6-digit code to your inbox.");
+      } else {
+        patchBaseContext({ isVerified: true });
+        setMessage("No OTP adapter configured. Email verification was skipped.");
+      }
+    });
+  };
+  const handleOtp = (code) => {
+    if (!context.email) {
+      return;
+    }
+    void run(async () => {
+      if (validators?.otp) {
+        await assertValid(validators.otp(code, { context, email: context.email }));
+      }
+      if (adapter?.verifyOtp) {
+        await adapter.verifyOtp(context.email, code);
+      }
+      patchBaseContext({ isVerified: true });
+      setMessage("Email verified.");
+    });
+  };
+  const handlePassword = (password) => {
+    if (!context.email) {
+      return;
+    }
+    void run(async () => {
+      if (validators?.password) {
+        await assertValid(validators.password(password, { context, hasPassword: context.hasPassword }));
+      }
+      if (context.hasPassword) {
+        if (adapter?.signInWithPassword) {
+          await adapter.signInWithPassword(context.email, password);
+        }
+      } else {
+        if (adapter?.createPassword) {
+          await adapter.createPassword(password);
+        }
+        patchBaseContext({ hasPassword: true });
+      }
+      setMessage("Password step complete.");
+    });
+  };
+  const handleProfile = (profile) => {
+    void run(async () => {
+      if (validators?.profile) {
+        await assertValid(validators.profile(profile, { context }));
+      }
+      const next = mergeContext(context, {
+        profile: {
+          firstName: profile.firstName || null,
+          lastName: profile.lastName || null,
+          jobTitle: profile.jobTitle || null
+        }
+      });
+      if (adapter?.saveProfile) {
+        await adapter.saveProfile(next);
+      }
+      patchContext({ profile: next.profile });
+      setMessage("Profile saved.");
+    });
+  };
+  const handleTos = () => {
+    void run(async () => {
+      if (validators?.tos) {
+        await assertValid(validators.tos(true, { context }));
+      }
+      const next = mergeContext(context, { agreedToTos: true });
+      if (adapter?.acceptTos) {
+        await adapter.acceptTos(next);
+      }
+      patchBaseContext({ agreedToTos: true });
+      setMessage("Terms accepted.");
+    });
+  };
+  const handleOAuth = (provider) => {
+    const startOAuth = adapter?.startOAuth;
+    if (!startOAuth) {
+      return;
+    }
+    void run(async () => {
+      setOauthPendingProvider(provider);
+      setMessage(`Starting ${provider} sign-in...`);
+      await startOAuth(provider, context);
+    });
+  };
+  const missing = missingRequirements;
+  const needsJobTitle = normalizedRequirements.includes("has_job_title");
+  const stepLabel = stepTitles?.[step] ?? defaultStepTitle[step] ?? step;
+  const defaultView = /* @__PURE__ */ jsxs(Fragment, { children: [
+    step === "COLLECT_EMAIL" ? /* @__PURE__ */ jsx(
+      EmailBlock,
+      {
+        onSubmit: handleEmail,
+        disabled: busy,
+        styles: uiStyles,
+        classNames
+      }
+    ) : null,
+    step === "VERIFY_OTP" ? /* @__PURE__ */ jsx(
+      OtpBlock,
+      {
+        onSubmit: handleOtp,
+        email: context.email ?? "your email",
+        disabled: busy,
+        styles: uiStyles,
+        classNames
+      }
+    ) : null,
+    step === "COLLECT_PASSWORD" ? /* @__PURE__ */ jsx(
+      PasswordBlock,
+      {
+        onSubmit: handlePassword,
+        disabled: busy,
+        hasPassword: context.hasPassword,
+        styles: uiStyles,
+        classNames
+      }
+    ) : null,
+    step === "COLLECT_PROFILE" ? /* @__PURE__ */ jsx(
+      ProfileBlock,
+      {
+        defaultValue: context.profile,
+        requireJobTitle: needsJobTitle,
+        onSubmit: handleProfile,
+        disabled: busy,
+        styles: uiStyles,
+        classNames
+      }
+    ) : null,
+    step === "COLLECT_TOS" ? /* @__PURE__ */ jsx(
+      TosBlock,
+      {
+        onSubmit: handleTos,
+        disabled: busy,
+        styles: uiStyles,
+        classNames
+      }
+    ) : null,
+    step === normalizedCompleteStep ? /* @__PURE__ */ jsx(CompleteBlock, { styles: uiStyles, classNames }) : null,
+    step !== "COLLECT_EMAIL" && step !== "VERIFY_OTP" && step !== "COLLECT_PASSWORD" && step !== "COLLECT_PROFILE" && step !== "COLLECT_TOS" && step !== normalizedCompleteStep ? /* @__PURE__ */ jsxs("div", { className: classNames?.info, style: uiStyles.info, children: [
+      'No default renderer for step "',
+      step,
+      '". Provide renderStep to handle custom steps.'
+    ] }) : null
+  ] });
+  const customView = renderStep ? renderStep({
+    step,
+    context,
+    busy,
+    message,
+    errorMessage,
+    missingRequirements: missing,
+    requirements: normalizedRequirements,
+    defaultView,
+    setContextPatch: patchContext,
+    run,
+    adapter,
+    transitions
+  }) : null;
+  const registryView = stepRegistry?.[step] ? stepRegistry[step]?.({
+    step,
+    context,
+    busy,
+    message,
+    errorMessage,
+    missingRequirements: missing,
+    requirements: normalizedRequirements,
+    setContextPatch: patchContext,
+    run,
+    adapter,
+    transitions
+  }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cx(className, classNames?.shell), style: uiStyles.shell, children: [
+    /* @__PURE__ */ jsxs("div", { className: classNames?.headerRow, style: uiStyles.headerRow, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: classNames?.eyebrow, style: uiStyles.eyebrow, children: "Adaptive flow" }),
+        /* @__PURE__ */ jsx("h2", { className: classNames?.title, style: uiStyles.title, children: stepLabel })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: classNames?.badge, style: uiStyles.badge, children: [
+        normalizedRequirements.length - missing.length,
+        "/",
+        normalizedRequirements.length
+      ] })
+    ] }),
+    message ? /* @__PURE__ */ jsx("div", { className: classNames?.success, style: uiStyles.success, children: message }) : null,
+    errorMessage ? /* @__PURE__ */ jsx("div", { className: classNames?.error, style: uiStyles.error, children: errorMessage }) : null,
+    customView ?? registryView ?? defaultView,
+    /* @__PURE__ */ jsxs("div", { className: classNames?.footer, style: uiStyles.footer, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.oauthButton,
+          style: uiStyles.oauthButton,
+          disabled: busy || !adapter?.startOAuth,
+          onClick: () => {
+            handleOAuth("google");
+          },
+          children: "Continue with Google"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classNames?.oauthButton,
+          style: uiStyles.oauthButton,
+          disabled: busy || !adapter?.startOAuth,
+          onClick: () => {
+            handleOAuth("apple");
+          },
+          children: "Continue with Apple"
+        }
+      )
+    ] })
+  ] });
+}
+function EmailBlock({ onSubmit, disabled, styles, classNames }) {
+  const [email, setEmail] = React.useState("");
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: classNames?.formRow,
+      style: styles.formRow,
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit(email);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: classNames?.input,
+            style: styles.input,
+            type: "email",
+            autoComplete: "email",
+            placeholder: "Enter your email",
+            value: email,
+            onChange: (event) => setEmail(event.target.value),
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { className: classNames?.button, style: styles.button, disabled, type: "submit", children: "Continue" })
+      ]
+    }
+  );
+}
+function OtpBlock({
+  onSubmit,
+  disabled,
+  email,
+  styles,
+  classNames
+}) {
+  const [code, setCode] = React.useState("");
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: classNames?.formColumn,
+      style: styles.formColumn,
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit(code);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: classNames?.caption, style: styles.caption, children: [
+          "Use the verification code sent to ",
+          email,
+          "."
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: classNames?.formRow, style: styles.formRow, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: classNames?.input,
+              style: styles.input,
+              inputMode: "numeric",
+              placeholder: "Enter 6-digit code",
+              value: code,
+              onChange: (event) => setCode(event.target.value.replace(/\D/g, "").slice(0, 6)),
+              required: true,
+              maxLength: 6,
+              pattern: "[0-9]{6}"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames?.button,
+              style: styles.button,
+              disabled: disabled || code.length !== 6,
+              type: "submit",
+              children: "Verify"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PasswordBlock({
+  onSubmit,
+  disabled,
+  hasPassword,
+  styles,
+  classNames
+}) {
+  const [password, setPassword] = React.useState("");
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: classNames?.formRow,
+      style: styles.formRow,
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit(password);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: classNames?.input,
+            style: styles.input,
+            type: "password",
+            autoComplete: hasPassword ? "current-password" : "new-password",
+            placeholder: hasPassword ? "Enter your password" : "Create a password",
+            value: password,
+            onChange: (event) => setPassword(event.target.value),
+            required: true,
+            minLength: 8
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { className: classNames?.button, style: styles.button, disabled, type: "submit", children: "Continue" })
+      ]
+    }
+  );
+}
+function ProfileBlock({
+  onSubmit,
+  disabled,
+  defaultValue,
+  requireJobTitle,
+  styles,
+  classNames
+}) {
+  const [firstName, setFirstName] = React.useState(defaultValue.firstName ?? "");
+  const [lastName, setLastName] = React.useState(defaultValue.lastName ?? "");
+  const [jobTitle, setJobTitle] = React.useState(defaultValue.jobTitle ?? "");
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: classNames?.formColumn,
+      style: styles.formColumn,
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit({
+          firstName: firstName || null,
+          lastName: lastName || null,
+          jobTitle: jobTitle || null
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: classNames?.formRow, style: styles.formRow, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: classNames?.input,
+              style: styles.input,
+              type: "text",
+              autoComplete: "given-name",
+              placeholder: "First name",
+              value: firstName,
+              onChange: (event) => setFirstName(event.target.value),
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: classNames?.input,
+              style: styles.input,
+              type: "text",
+              autoComplete: "family-name",
+              placeholder: "Last name",
+              value: lastName,
+              onChange: (event) => setLastName(event.target.value),
+              required: true
+            }
+          )
+        ] }),
+        requireJobTitle ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: classNames?.input,
+            style: styles.input,
+            type: "text",
+            autoComplete: "organization-title",
+            placeholder: "Job title",
+            value: jobTitle,
+            onChange: (event) => setJobTitle(event.target.value),
+            required: true
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("button", { className: classNames?.button, style: styles.button, disabled, type: "submit", children: "Continue" })
+      ]
+    }
+  );
+}
+function TosBlock({
+  onSubmit,
+  disabled,
+  styles,
+  classNames
+}) {
+  const [checked, setChecked] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: classNames?.formColumn,
+      style: styles.formColumn,
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (checked) {
+          onSubmit();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("label", { className: classNames?.checkboxRow, style: styles.checkboxRow, children: [
+          /* @__PURE__ */ jsx("input", { type: "checkbox", checked, onChange: (event) => setChecked(event.target.checked) }),
+          /* @__PURE__ */ jsx("span", { children: "I agree to the Terms of Service and Privacy Policy." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: classNames?.button,
+            style: styles.button,
+            disabled: disabled || !checked,
+            type: "submit",
+            children: "Accept and Continue"
+          }
+        )
+      ]
+    }
+  );
+}
+function CompleteBlock({
+  styles,
+  classNames
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: classNames?.complete, style: styles.complete, children: [
+    /* @__PURE__ */ jsx("strong", { children: "You are fully authenticated." }),
+    /* @__PURE__ */ jsx("p", { className: classNames?.caption, style: styles.caption, children: "All requirements are complete." })
+  ] });
+}
+var defaultStyles = {
+  shell: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+    width: "100%",
+    maxWidth: 560,
+    border: "1px solid #e5e7eb",
+    borderRadius: 14,
+    padding: 16,
+    background: "#ffffff",
+    fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
+  },
+  headerRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 12
+  },
+  eyebrow: {
+    fontSize: 12,
+    textTransform: "uppercase",
+    letterSpacing: 1.2,
+    color: "#6b7280",
+    marginBottom: 4
+  },
+  title: {
+    margin: 0,
+    fontSize: 22,
+    lineHeight: "28px"
+  },
+  badge: {
+    border: "1px solid #d1d5db",
+    borderRadius: 999,
+    padding: "4px 10px",
+    fontSize: 12,
+    fontWeight: 600,
+    color: "#374151"
+  },
+  success: {
+    border: "1px solid #bbf7d0",
+    background: "#f0fdf4",
+    color: "#166534",
+    borderRadius: 10,
+    padding: "8px 10px",
+    fontSize: 14
+  },
+  error: {
+    border: "1px solid #fecaca",
+    background: "#fef2f2",
+    color: "#991b1b",
+    borderRadius: 10,
+    padding: "8px 10px",
+    fontSize: 14
+  },
+  info: {
+    border: "1px solid #bfdbfe",
+    background: "#eff6ff",
+    color: "#1e3a8a",
+    borderRadius: 10,
+    padding: "8px 10px",
+    fontSize: 14
+  },
+  caption: {
+    margin: 0,
+    color: "#4b5563",
+    fontSize: 14
+  },
+  formRow: {
+    display: "flex",
+    gap: 8,
+    alignItems: "center"
+  },
+  formColumn: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10
+  },
+  input: {
+    width: "100%",
+    border: "1px solid #d1d5db",
+    borderRadius: 8,
+    height: 40,
+    padding: "0 12px",
+    fontSize: 14
+  },
+  button: {
+    border: "1px solid #d1d5db",
+    borderRadius: 8,
+    height: 40,
+    padding: "0 14px",
+    fontWeight: 600,
+    background: "#ffffff",
+    whiteSpace: "nowrap",
+    cursor: "pointer"
+  },
+  checkboxRow: {
+    display: "flex",
+    gap: 8,
+    alignItems: "flex-start",
+    fontSize: 14,
+    color: "#374151"
+  },
+  complete: {
+    border: "1px solid #bbf7d0",
+    background: "#f0fdf4",
+    color: "#166534",
+    borderRadius: 12,
+    padding: 12
+  },
+  footer: {
+    display: "flex",
+    gap: 8,
+    marginTop: 4
+  },
+  oauthButton: {
+    flex: 1,
+    border: "1px solid #d1d5db",
+    borderRadius: 8,
+    padding: "10px 12px",
+    background: "#f9fafb",
+    cursor: "pointer"
+  }
+};
+export {
+  AdaptiveFlow,
+  DefaultAdaptiveSteps,
+  DefaultAppRequirements,
+  createDefaultRequirementGraph,
+  createRequirementGraph,
+  defaultRequirementResolvers,
+  defaultRequirements,
+  evaluateNextStep,
+  getMissingRequirements,
+  initialContext
+};
+//# sourceMappingURL=index.mjs.map