@octaviaflow/core 3.1.0-beta.78 → 3.1.0-beta.80

package/dist/index.js

@@ -26,7 +26,7 @@ import {
   handleCentre,
   usePasswordStrength,
   useViewportOrNull
-} from "./chunk-2N74IQCL.js";
+} from "./chunk-PB4O5GEF.js";
 import {
   AVATAR_PALETTE_SIZE,
   Avatar,
@@ -50,7 +50,7 @@ import {
   useTextareaCommands,
   useTextareaSelection,
   useTextareaTools
-} from "./chunk-REEBXURQ.js";
+} from "./chunk-XD5G2K2M.js";
 import {
   $05678f3aee5e7d1a$export$6d08773d2e66f8f2,
   $384704861d32dbed$export$bca9d026f8e704eb,
@@ -64,7 +64,7 @@ import {
   Spinner,
   Tooltip,
   resolveAccessibleName
-} from "./chunk-CRDYAV5R.js";
+} from "./chunk-FJHUWP4K.js";
 import {
   __export,
   cn
@@ -1186,6 +1186,7 @@ import {
   useId as useId4,
   useState as useState3
 } from "react";
+import { 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,
@@ -1742,6 +1758,10 @@ function AuthSignupForm({
   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,6 +1781,8 @@ 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("@");
@@ -1801,138 +1823,180 @@ 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__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: "ods-auth-form__back",
+              onClick: () => setEntryMode("choice"),
+              disabled: loading,
+              children: 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: lastNamePlaceholder,
-                value: lastName,
-                onChange: (e) => setLastName(e.target.value),
+                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: 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: termsLabel,
+              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,
           {
@@ -6977,7 +7041,11 @@ var DialogContent = forwardRef31(function DialogContent2({
       isOpen: open,
       onClose,
       isDismissable: closeOnOverlayClick,
-      isKeyboardDismissDisabled: !closeOnEsc
+      isKeyboardDismissDisabled: !closeOnEsc,
+      // Floating layers (Select/Combobox/DropdownMenu/DatePicker dropdowns)
+      // portal to <body>, OUTSIDE the dialog subtree — without this, picking
+      // an option counted as an outside click and closed the dialog.
+      shouldCloseOnInteractOutside: (element) => !(element instanceof Element && element.closest("[data-ods-floating]"))
     },
     overlayRef
   );
@@ -7644,76 +7712,82 @@ var ContextMenu = forwardRef34(
       );
     }
     const portalTarget = container ?? document.body;
-    const panel = /* @__PURE__ */ jsx42(AnimatePresence8, { children: open && /* @__PURE__ */ jsx42(
-      motion10.div,
+    const panel = /* @__PURE__ */ jsx42(
+      AnimatePresence8,
       {
-        ...rest,
-        ref: (el) => {
-          panelRef.current = el;
-          if (typeof ref === "function") ref(el);
-          else if (ref) {
-            ref.current = el;
-          }
-        },
-        id: baseId,
-        role: "menu",
-        "aria-label": ariaLabel,
-        tabIndex: -1,
-        className: cn("ods-ctxmenu", className),
-        style: {
-          top: adjustedPosition.y,
-          left: adjustedPosition.x
-        },
-        initial: reducedMotion ? void 0 : { opacity: 0, scale: 0.96 },
-        animate: reducedMotion ? void 0 : { opacity: 1, scale: 1 },
-        exit: reducedMotion ? void 0 : { opacity: 0, scale: 0.96 },
-        transition: { duration: 0.12 },
-        onKeyDown: handleKeyDown,
-        onContextMenu: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ jsx42("ul", { className: "ods-ctxmenu__list", children: items.map((item, i) => {
-          if (item.separator) {
-            return /* @__PURE__ */ jsx42(
-              "li",
-              {
-                role: "separator",
-                className: "ods-ctxmenu__separator"
-              },
-              `sep-${i}`
-            );
-          }
-          const isActive2 = i === activeIndex;
-          return /* @__PURE__ */ jsxs42(
-            "li",
-            {
-              role: "menuitem",
-              "aria-disabled": item.disabled || void 0,
-              tabIndex: -1,
-              className: cn(
-                "ods-ctxmenu__item",
-                isActive2 && "ods-ctxmenu__item--active",
-                item.danger && "ods-ctxmenu__item--danger",
-                item.disabled && "ods-ctxmenu__item--disabled"
-              ),
-              onMouseEnter: () => !item.disabled && setActiveIndex(i),
-              onClick: () => handleItemClick(item),
-              children: [
-                item.icon && /* @__PURE__ */ jsx42(
-                  "span",
-                  {
-                    className: "ods-ctxmenu__icon",
-                    "aria-hidden": "true",
-                    children: item.icon
-                  }
-                ),
-                /* @__PURE__ */ jsx42("span", { className: "ods-ctxmenu__label", children: item.label }),
-                item.shortcut && /* @__PURE__ */ jsx42("kbd", { className: "ods-ctxmenu__shortcut", children: item.shortcut })
-              ]
+        "data-ods-floating": "",
+        children: open && /* @__PURE__ */ jsx42(
+          motion10.div,
+          {
+            ...rest,
+            ref: (el) => {
+              panelRef.current = el;
+              if (typeof ref === "function") ref(el);
+              else if (ref) {
+                ref.current = el;
+              }
             },
-            `${item.label}-${i}`
-          );
-        }) })
+            id: baseId,
+            role: "menu",
+            "aria-label": ariaLabel,
+            tabIndex: -1,
+            className: cn("ods-ctxmenu", className),
+            style: {
+              top: adjustedPosition.y,
+              left: adjustedPosition.x
+            },
+            initial: reducedMotion ? void 0 : { opacity: 0, scale: 0.96 },
+            animate: reducedMotion ? void 0 : { opacity: 1, scale: 1 },
+            exit: reducedMotion ? void 0 : { opacity: 0, scale: 0.96 },
+            transition: { duration: 0.12 },
+            onKeyDown: handleKeyDown,
+            onContextMenu: (e) => e.preventDefault(),
+            children: /* @__PURE__ */ jsx42("ul", { className: "ods-ctxmenu__list", children: items.map((item, i) => {
+              if (item.separator) {
+                return /* @__PURE__ */ jsx42(
+                  "li",
+                  {
+                    role: "separator",
+                    className: "ods-ctxmenu__separator"
+                  },
+                  `sep-${i}`
+                );
+              }
+              const isActive2 = i === activeIndex;
+              return /* @__PURE__ */ jsxs42(
+                "li",
+                {
+                  role: "menuitem",
+                  "aria-disabled": item.disabled || void 0,
+                  tabIndex: -1,
+                  className: cn(
+                    "ods-ctxmenu__item",
+                    isActive2 && "ods-ctxmenu__item--active",
+                    item.danger && "ods-ctxmenu__item--danger",
+                    item.disabled && "ods-ctxmenu__item--disabled"
+                  ),
+                  onMouseEnter: () => !item.disabled && setActiveIndex(i),
+                  onClick: () => handleItemClick(item),
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx42(
+                      "span",
+                      {
+                        className: "ods-ctxmenu__icon",
+                        "aria-hidden": "true",
+                        children: item.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx42("span", { className: "ods-ctxmenu__label", children: item.label }),
+                    item.shortcut && /* @__PURE__ */ jsx42("kbd", { className: "ods-ctxmenu__shortcut", children: item.shortcut })
+                  ]
+                },
+                `${item.label}-${i}`
+              );
+            }) })
+          }
+        )
       }
-    ) });
+    );
     return /* @__PURE__ */ jsxs42(Fragment16, { children: [
       /* @__PURE__ */ jsx42(
         "span",
@@ -10648,6 +10722,7 @@ var DatePicker = forwardRef37(
               "div",
               {
                 ref: popoverRef,
+                "data-ods-floating": "",
                 className: "ods-datepicker__popover",
                 role: "dialog",
                 "aria-modal": "false",
@@ -11139,6 +11214,7 @@ function MenuPopup({
   const portalContent = /* @__PURE__ */ jsx50(AnimatePresence9, { children: state.isOpen && /* @__PURE__ */ jsx50(
     motion12.ul,
     {
+      "data-ods-floating": "",
       ...(() => {
         const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safe } = menuProps;
         return safe;
@@ -15658,7 +15734,7 @@ function FlowCanvas2({
 // src/components/FlowDoctor/FlowDoctor.tsx
 import {
   ArrowRightIcon as ArrowRightIcon3,
-  CheckmarkFilledIcon,
+  CheckmarkFilledIcon as CheckmarkFilledIcon2,
   CheckmarkIcon as CheckmarkIcon8,
   ErrorFilledIcon,
   StethoscopeIcon,
@@ -15680,7 +15756,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" })
 };
@@ -25778,6 +25854,7 @@ var MultiSelect = forwardRef65(
               motion20.div,
               {
                 ref: dropdownRef,
+                "data-ods-floating": "",
                 className: "ods-multiselect__dropdown",
                 style: {
                   position: "fixed",