@octaviaflow/core 3.1.0-beta.79 → 3.1.0-beta.81

package/dist/index.js

@@ -1186,6 +1186,7 @@ import {
   useId as useId4,
   useState as useState3
 } from "react";
+import { ArrowLeftIcon, CheckmarkFilledIcon } from "@octaviaflow/icons";
 
 // src/components/SocialButton/SocialButton.tsx
 import { LogoGithubIcon, LogoLinkedinIcon, LogoXIcon } from "@octaviaflow/icons";
@@ -1560,19 +1561,23 @@ function AuthFormHeader({ logo, title, titleId, description, headingLevel }) {
     description && /* @__PURE__ */ jsx6("p", { className: "ods-auth-form__desc", children: description })
   ] });
 }
-function AuthFormSocial({ providers, onSocialClick, dividerLabel, disabled }) {
+function AuthFormSocial({ providers, onSocialClick, dividerLabel, disabled, position = "bottom" }) {
   if (!providers || providers.length === 0) return null;
-  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+  const row = /* @__PURE__ */ jsx6("div", { className: "ods-auth-form__social", children: providers.map((provider) => /* @__PURE__ */ jsx6(
+    SocialButton,
+    {
+      provider,
+      disabled,
+      onClick: () => onSocialClick?.(provider)
+    },
+    provider
+  )) });
+  return position === "top" ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    row,
+    /* @__PURE__ */ jsx6(AuthDivider, { children: dividerLabel })
+  ] }) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
     /* @__PURE__ */ jsx6(AuthDivider, { children: dividerLabel }),
-    /* @__PURE__ */ jsx6("div", { className: "ods-auth-form__social", children: providers.map((provider) => /* @__PURE__ */ jsx6(
-      SocialButton,
-      {
-        provider,
-        disabled,
-        onClick: () => onSocialClick?.(provider)
-      },
-      provider
-    )) })
+    row
   ] });
 }
 function AuthFormFooterLink({ prompt, label, href, onClick }) {
@@ -1605,6 +1610,7 @@ function AuthLoginForm({
   forgotLabel = "Forgot your password?",
   socialProviders = ["google"],
   onSocialClick,
+  socialPosition = "bottom",
   socialDividerLabel = "Or, log in with",
   registerHref,
   onRegisterClick,
@@ -1646,6 +1652,16 @@ function AuthLoginForm({
           error && /* @__PURE__ */ jsx6(Banner, { variant: "error", children: error }),
           success && /* @__PURE__ */ jsx6(Banner, { variant: "success", children: success })
         ] }),
+        socialPosition === "top" && /* @__PURE__ */ jsx6(
+          AuthFormSocial,
+          {
+            providers: socialProviders,
+            onSocialClick,
+            dividerLabel: socialDividerLabel,
+            disabled: loading,
+            position: "top"
+          }
+        ),
         /* @__PURE__ */ jsxs6("div", { className: "ods-auth-form__fields", children: [
           /* @__PURE__ */ jsx6(
             Input,
@@ -1688,7 +1704,7 @@ function AuthLoginForm({
           hasForgot && (forgotHref ? /* @__PURE__ */ jsx6("a", { className: "ods-auth-form__link", href: forgotHref, onClick: onForgotClick, children: forgotLabel }) : /* @__PURE__ */ jsx6("button", { type: "button", className: "ods-auth-form__link", onClick: onForgotClick, children: forgotLabel }))
         ] }),
         /* @__PURE__ */ jsx6(Button, { type: "submit", variant: "primary", fullWidth: true, loading, children: submitLabel }),
-        /* @__PURE__ */ jsx6(
+        socialPosition === "bottom" && /* @__PURE__ */ jsx6(
           AuthFormSocial,
           {
             providers: socialProviders,
@@ -1738,10 +1754,16 @@ function AuthSignupForm({
   passwordStrengthRules,
   submitLabel = "Create account",
   showTerms = true,
-  termsLabel = "I agree to the Terms of Service and Privacy Policy",
+  termsLabel,
+  termsHref = "https://octaviaflow.com/terms-and-conditions",
+  privacyHref = "https://octaviaflow.com/privacy-policy",
   socialProviders = ["google"],
   onSocialClick,
   socialDividerLabel = "Or, sign up with",
+  layout = "form-first",
+  emailCtaLabel = "Sign up with email",
+  backLabel = "Back to all options",
+  highlights,
   signInHref,
   onSignInClick,
   signInPrompt = "Already have an account?",
@@ -1761,11 +1783,42 @@ function AuthSignupForm({
   const [isCompanyAccount, setIsCompanyAccount] = useState3(false);
   const [companyName, setCompanyName] = useState3("");
   const [domain, setDomain] = useState3("");
+  const [entryMode, setEntryMode] = useState3("choice");
+  const choiceScreen = layout === "choice-first" && entryMode === "choice";
   useEffect(() => {
     if (!showCompanyToggle || !isCompanyAccount || domain) return;
     const at = email.indexOf("@");
     if (at > -1 && at < email.length - 1) setDomain(email.slice(at + 1));
   }, [showCompanyToggle, isCompanyAccount, email, domain]);
+  const termsContent = termsLabel ?? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    "I agree to the",
+    " ",
+    /* @__PURE__ */ jsx6(
+      "a",
+      {
+        className: "ods-auth-form__terms-link",
+        href: termsHref,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: (e) => e.stopPropagation(),
+        children: "Terms of Service"
+      }
+    ),
+    " ",
+    "and",
+    " ",
+    /* @__PURE__ */ jsx6(
+      "a",
+      {
+        className: "ods-auth-form__terms-link",
+        href: privacyHref,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: (e) => e.stopPropagation(),
+        children: "Privacy Policy"
+      }
+    )
+  ] });
   const handleSubmit = (event) => {
     event.preventDefault();
     const combinedName = nameLayout === "split" ? `${firstName} ${lastName}`.trim() : name;
@@ -1801,138 +1854,183 @@ function AuthSignupForm({
           error && /* @__PURE__ */ jsx6(Banner, { variant: "error", children: error }),
           success && /* @__PURE__ */ jsx6(Banner, { variant: "success", children: success })
         ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "ods-auth-form__fields", children: [
-          nameLayout === "split" ? /* @__PURE__ */ jsxs6("div", { className: "ods-auth-form__grid2", children: [
-            /* @__PURE__ */ jsx6(
+        choiceScreen && /* @__PURE__ */ jsxs6("div", { className: "ods-auth-form__choice", children: [
+          /* @__PURE__ */ jsx6("div", { className: "ods-auth-form__social", children: (socialProviders ?? []).map((provider) => /* @__PURE__ */ jsx6(
+            SocialButton,
+            {
+              provider,
+              disabled: loading,
+              onClick: () => onSocialClick?.(provider)
+            },
+            provider
+          )) }),
+          /* @__PURE__ */ jsx6(AuthDivider, { children: "or" }),
+          /* @__PURE__ */ jsx6(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              fullWidth: true,
+              disabled: loading,
+              onClick: () => setEntryMode("email"),
+              children: emailCtaLabel
+            }
+          ),
+          highlights && highlights.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "ods-auth-form__highlights", children: highlights.map((item, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: static copy row
+            /* @__PURE__ */ jsxs6("li", { children: [
+              /* @__PURE__ */ jsx6(CheckmarkFilledIcon, { size: "sm", "aria-hidden": "true" }),
+              item
+            ] }, i)
+          )) })
+        ] }),
+        !choiceScreen && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+          layout === "choice-first" && /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              className: "ods-auth-form__back",
+              onClick: () => setEntryMode("choice"),
+              disabled: loading,
+              children: [
+                /* @__PURE__ */ jsx6(ArrowLeftIcon, { size: "sm", "aria-hidden": "true" }),
+                backLabel
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs6("div", { className: "ods-auth-form__fields", children: [
+            nameLayout === "split" ? /* @__PURE__ */ jsxs6("div", { className: "ods-auth-form__grid2", children: [
+              /* @__PURE__ */ jsx6(
+                Input,
+                {
+                  label: firstNameLabel,
+                  type: "text",
+                  name: "firstName",
+                  autoComplete: "given-name",
+                  required: true,
+                  placeholder: firstNamePlaceholder,
+                  value: firstName,
+                  onChange: (e) => setFirstName(e.target.value),
+                  disabled: loading
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                Input,
+                {
+                  label: lastNameLabel,
+                  type: "text",
+                  name: "lastName",
+                  autoComplete: "family-name",
+                  required: true,
+                  placeholder: lastNamePlaceholder,
+                  value: lastName,
+                  onChange: (e) => setLastName(e.target.value),
+                  disabled: loading
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx6(
               Input,
               {
-                label: firstNameLabel,
+                label: nameLabel,
                 type: "text",
-                name: "firstName",
-                autoComplete: "given-name",
+                name: "name",
+                autoComplete: "name",
                 required: true,
-                placeholder: firstNamePlaceholder,
-                value: firstName,
-                onChange: (e) => setFirstName(e.target.value),
+                placeholder: namePlaceholder,
+                value: name,
+                onChange: (e) => setName(e.target.value),
                 disabled: loading
               }
             ),
             /* @__PURE__ */ jsx6(
               Input,
               {
-                label: lastNameLabel,
-                type: "text",
-                name: "lastName",
-                autoComplete: "family-name",
+                label: emailLabel,
+                type: "email",
+                name: "email",
+                autoComplete: "email",
+                required: true,
+                placeholder: emailPlaceholder,
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                disabled: loading
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              PasswordInput,
+              {
+                label: passwordLabel,
+                name: "password",
+                autoComplete: "new-password",
                 required: true,
-                placeholder: lastNamePlaceholder,
-                value: lastName,
-                onChange: (e) => setLastName(e.target.value),
+                placeholder: passwordPlaceholder,
+                value: password,
+                onChange: setPassword,
+                strengthRules: passwordStrengthRules,
                 disabled: loading
               }
             )
-          ] }) : /* @__PURE__ */ jsx6(
-            Input,
-            {
-              label: nameLabel,
-              type: "text",
-              name: "name",
-              autoComplete: "name",
-              required: true,
-              placeholder: namePlaceholder,
-              value: name,
-              onChange: (e) => setName(e.target.value),
-              disabled: loading
-            }
-          ),
-          /* @__PURE__ */ jsx6(
-            Input,
+          ] }),
+          showCompanyToggle && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+            /* @__PURE__ */ jsx6(
+              Checkbox,
+              {
+                label: companyToggleLabel,
+                checked: isCompanyAccount,
+                onChange: setIsCompanyAccount,
+                disabled: loading
+              }
+            ),
+            isCompanyAccount && /* @__PURE__ */ jsxs6("div", { className: "ods-auth-form__grid2", children: [
+              /* @__PURE__ */ jsx6(
+                Input,
+                {
+                  label: companyNameLabel,
+                  type: "text",
+                  name: "companyName",
+                  autoComplete: "organization",
+                  required: true,
+                  placeholder: companyNamePlaceholder,
+                  value: companyName,
+                  onChange: (e) => setCompanyName(e.target.value),
+                  disabled: loading
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                Input,
+                {
+                  label: domainLabel,
+                  type: "text",
+                  name: "domain",
+                  placeholder: domainPlaceholder,
+                  value: domain,
+                  onChange: (e) => setDomain(e.target.value),
+                  disabled: loading
+                }
+              )
+            ] })
+          ] }),
+          showTerms && /* @__PURE__ */ jsx6(
+            Checkbox,
             {
-              label: emailLabel,
-              type: "email",
-              name: "email",
-              autoComplete: "email",
+              label: termsContent,
+              checked: acceptTerms,
+              onChange: setAcceptTerms,
               required: true,
-              placeholder: emailPlaceholder,
-              value: email,
-              onChange: (e) => setEmail(e.target.value),
               disabled: loading
             }
           ),
-          /* @__PURE__ */ jsx6(
-            PasswordInput,
+          /* @__PURE__ */ jsx6(Button, { type: "submit", variant: "primary", fullWidth: true, loading, children: submitLabel }),
+          layout === "form-first" && /* @__PURE__ */ jsx6(
+            AuthFormSocial,
             {
-              label: passwordLabel,
-              name: "password",
-              autoComplete: "new-password",
-              required: true,
-              placeholder: passwordPlaceholder,
-              value: password,
-              onChange: setPassword,
-              strengthRules: passwordStrengthRules,
+              providers: socialProviders,
+              onSocialClick,
+              dividerLabel: socialDividerLabel,
               disabled: loading
             }
           )
         ] }),
-        showCompanyToggle && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-          /* @__PURE__ */ jsx6(
-            Checkbox,
-            {
-              label: companyToggleLabel,
-              checked: isCompanyAccount,
-              onChange: setIsCompanyAccount,
-              disabled: loading
-            }
-          ),
-          isCompanyAccount && /* @__PURE__ */ jsxs6("div", { className: "ods-auth-form__grid2", children: [
-            /* @__PURE__ */ jsx6(
-              Input,
-              {
-                label: companyNameLabel,
-                type: "text",
-                name: "companyName",
-                autoComplete: "organization",
-                required: true,
-                placeholder: companyNamePlaceholder,
-                value: companyName,
-                onChange: (e) => setCompanyName(e.target.value),
-                disabled: loading
-              }
-            ),
-            /* @__PURE__ */ jsx6(
-              Input,
-              {
-                label: domainLabel,
-                type: "text",
-                name: "domain",
-                placeholder: domainPlaceholder,
-                value: domain,
-                onChange: (e) => setDomain(e.target.value),
-                disabled: loading
-              }
-            )
-          ] })
-        ] }),
-        showTerms && /* @__PURE__ */ jsx6(
-          Checkbox,
-          {
-            label: termsLabel,
-            checked: acceptTerms,
-            onChange: setAcceptTerms,
-            required: true,
-            disabled: loading
-          }
-        ),
-        /* @__PURE__ */ jsx6(Button, { type: "submit", variant: "primary", fullWidth: true, loading, children: submitLabel }),
-        /* @__PURE__ */ jsx6(
-          AuthFormSocial,
-          {
-            providers: socialProviders,
-            onSocialClick,
-            dividerLabel: socialDividerLabel,
-            disabled: loading
-          }
-        ),
         footer ?? /* @__PURE__ */ jsx6(
           AuthFormFooterLink,
           {
@@ -15670,7 +15768,7 @@ function FlowCanvas2({
 // src/components/FlowDoctor/FlowDoctor.tsx
 import {
   ArrowRightIcon as ArrowRightIcon3,
-  CheckmarkFilledIcon,
+  CheckmarkFilledIcon as CheckmarkFilledIcon2,
   CheckmarkIcon as CheckmarkIcon8,
   ErrorFilledIcon,
   StethoscopeIcon,
@@ -15692,7 +15790,7 @@ function flowDoctorSummary(issues) {
   ].filter(Boolean).join(", ");
 }
 var VERDICT_ICON = {
-  clean: /* @__PURE__ */ jsx66(CheckmarkFilledIcon, { size: "md", "aria-hidden": "true" }),
+  clean: /* @__PURE__ */ jsx66(CheckmarkFilledIcon2, { size: "md", "aria-hidden": "true" }),
   warning: /* @__PURE__ */ jsx66(WarningFilledIcon, { size: "md", "aria-hidden": "true" }),
   error: /* @__PURE__ */ jsx66(ErrorFilledIcon, { size: "md", "aria-hidden": "true" })
 };