@octaviaflow/core 3.1.0-beta.70 → 3.1.0-beta.71

package/dist/marketing.js

@@ -258,6 +258,10 @@ function BetaAccessForm({
   teamSizes,
   plans,
   defaultPlan,
+  useCases,
+  showDetails = false,
+  detailsLabel = "Anything else we should know?",
+  detailsPlaceholder = "Current stack, timelines, must-have connectors\u2026",
   submitLabel = "Request access \u2192",
   footnote = "NO CREDIT CARD \xB7 SSO & SELF-HOSTING AVAILABLE",
   onSubmit,
@@ -272,7 +276,9 @@ function BetaAccessForm({
     name: "",
     company: "",
     teamSize: "",
-    plan: defaultPlan ?? ""
+    plan: defaultPlan ?? "",
+    useCase: "",
+    details: ""
   });
   const [phase, setPhase] = useState("idle");
   const [error, setError] = useState(null);
@@ -291,6 +297,10 @@ function BetaAccessForm({
       setError("Please select your team size.");
       return;
     }
+    if (fields === "full" && useCases?.length && !values.useCase) {
+      setError("Please select your primary use case.");
+      return;
+    }
     setError(null);
     setPhase("submitting");
     try {
@@ -414,6 +424,43 @@ function BetaAccessForm({
                   }
                 )
               ] }),
+              fields === "full" && useCases && useCases.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field", children: [
+                /* @__PURE__ */ jsx3("span", { className: "ods-mkt-access__label", id: `${uid}-usecase-label`, children: "Primary use case" }),
+                /* @__PURE__ */ jsx3(
+                  Select,
+                  {
+                    "aria-labelledby": `${uid}-usecase-label`,
+                    placeholder: "Select a use case\u2026",
+                    options: useCases.map((useCase) => ({ value: useCase, label: useCase })),
+                    value: values.useCase ?? "",
+                    onChange: (useCase) => setValues((v) => ({ ...v, useCase })),
+                    disabled: busy
+                  }
+                )
+              ] }),
+              fields === "full" && showDetails && /* @__PURE__ */ jsxs3("div", { className: "ods-mkt-access__field ods-mkt-access__field--wide", children: [
+                /* @__PURE__ */ jsx3(
+                  "label",
+                  {
+                    className: "ods-mkt-access__label",
+                    id: `${uid}-details-label`,
+                    htmlFor: `${uid}-details`,
+                    children: detailsLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  Textarea,
+                  {
+                    id: `${uid}-details`,
+                    "aria-labelledby": `${uid}-details-label`,
+                    placeholder: detailsPlaceholder,
+                    rows: 3,
+                    value: values.details ?? "",
+                    onChange: (e) => setValues((v) => ({ ...v, details: e.target.value })),
+                    disabled: busy
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsx3(
                 Button,
                 {
@@ -1193,7 +1240,24 @@ function MarketingHero({
 }
 
 // src/marketing/components/MarketingNav/MarketingNav.tsx
+import { useState as useState4 } from "react";
 import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function BurgerGlyph({ open }) {
+  return /* @__PURE__ */ jsx16(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "20",
+      height: "20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      children: open ? /* @__PURE__ */ jsx16("path", { d: "M6 6l12 12M18 6 6 18" }) : /* @__PURE__ */ jsx16("path", { d: "M4 7h16M4 12h16M4 17h16" })
+    }
+  );
+}
 function MarketingNav({
   brand,
   brandHref = "/",
@@ -1203,6 +1267,7 @@ function MarketingNav({
   className,
   ...rest
 }) {
+  const [mobileOpen, setMobileOpen] = useState4(false);
   return /* @__PURE__ */ jsxs15("header", { ...rest, className: cn("ods-mkt-nav", sticky && "ods-mkt-nav--sticky", className), children: [
     /* @__PURE__ */ jsx16("a", { className: "ods-mkt-nav__brand", href: brandHref, children: brand ?? /* @__PURE__ */ jsxs15(Fragment3, { children: [
       /* @__PURE__ */ jsx16(BrandMark, {}),
@@ -1218,7 +1283,35 @@ function MarketingNav({
       },
       link.href
     )) }),
-    actions && /* @__PURE__ */ jsx16("div", { className: "ods-mkt-nav__actions", children: actions })
+    actions && /* @__PURE__ */ jsx16("div", { className: "ods-mkt-nav__actions", children: actions }),
+    (links.length > 0 || actions) && /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        className: "ods-mkt-nav__toggle",
+        "aria-expanded": mobileOpen,
+        "aria-label": "Toggle menu",
+        onClick: () => setMobileOpen((open) => !open),
+        children: /* @__PURE__ */ jsx16(BurgerGlyph, { open: mobileOpen })
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ jsxs15("nav", { className: "ods-mkt-nav__mobile", "aria-label": "Main", children: [
+      links.map((link) => /* @__PURE__ */ jsx16(
+        "a",
+        {
+          href: link.href,
+          className: cn(
+            "ods-mkt-nav__mobile-link",
+            link.active && "ods-mkt-nav__mobile-link--active"
+          ),
+          "aria-current": link.active ? "page" : void 0,
+          onClick: () => setMobileOpen(false),
+          children: link.label
+        },
+        link.href
+      )),
+      actions && /* @__PURE__ */ jsx16("div", { className: "ods-mkt-nav__mobile-actions", children: actions })
+    ] })
   ] });
 }
 
@@ -1404,11 +1497,11 @@ import {
   useEffect as useEffect2,
   useMemo as useMemo2,
   useRef as useRef2,
-  useState as useState6
+  useState as useState7
 } from "react";
 
 // src/marketing/components/WorkflowShowcase/ShowcaseScene.tsx
-import { useEffect, useRef, useState as useState4 } from "react";
+import { useEffect, useRef, useState as useState5 } from "react";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function slots(n) {
   return Array.from({ length: n }, (_, i) => 208 + (i - (n - 1) / 2) * 80);
@@ -1481,7 +1574,7 @@ function ShowcaseScene({
   caption,
   onCoreClick
 }) {
-  const [pulse, setPulse] = useState4(false);
+  const [pulse, setPulse] = useState5(false);
   const pulseTimer = useRef(null);
   useEffect(
     () => () => {
@@ -1714,7 +1807,7 @@ function ShowcaseScene({
 
 // src/marketing/components/WorkflowShowcase/ShowcaseSignup.tsx
 import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion3 } from "framer-motion";
-import { useId as useId3, useState as useState5 } from "react";
+import { useId as useId3, useState as useState6 } from "react";
 import { FocusScope } from "react-aria";
 import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var OVERLAY_MOTION = {
@@ -1736,7 +1829,7 @@ function ShowcaseSignup({
   const reducedMotion = useReducedMotion3();
   const titleId = useId3();
   const subtitleId = useId3();
-  const [values, setValues] = useState5({
+  const [values, setValues] = useState6({
     name: "",
     email: "",
     company: "",
@@ -1954,21 +2047,21 @@ function WorkflowShowcase({
 }) {
   const reducedMotion = useReducedMotion4();
   const rotationActive = rotatePrompts && !defaultPrompt && examples.length > 0;
-  const [prompt, setPrompt] = useState6(
+  const [prompt, setPrompt] = useState7(
     defaultPrompt || (rotationActive ? examples[0]?.prompt ?? "" : "")
   );
-  const [engagedWithPrompt, setEngagedWithPrompt] = useState6(false);
-  const [promptHovered, setPromptHovered] = useState6(false);
-  const [promptFocused, setPromptFocused] = useState6(false);
+  const [engagedWithPrompt, setEngagedWithPrompt] = useState7(false);
+  const [promptHovered, setPromptHovered] = useState7(false);
+  const [promptFocused, setPromptFocused] = useState7(false);
   const rotateIdx = useRef2(0);
-  const [selected, setSelected] = useState6([]);
-  const [phase, setPhase] = useState6("idle");
-  const [shown, setShown] = useState6(0);
-  const [status, setStatus] = useState6("");
-  const [pickerOpen, setPickerOpen] = useState6(false);
-  const [schedIdx, setSchedIdx] = useState6(0);
-  const [swap, setSwap] = useState6(null);
-  const [signupError, setSignupError] = useState6(null);
+  const [selected, setSelected] = useState7([]);
+  const [phase, setPhase] = useState7("idle");
+  const [shown, setShown] = useState7(0);
+  const [status, setStatus] = useState7("");
+  const [pickerOpen, setPickerOpen] = useState7(false);
+  const [schedIdx, setSchedIdx] = useState7(0);
+  const [swap, setSwap] = useState7(null);
+  const [signupError, setSignupError] = useState7(null);
   const signupReturnPhase = useRef2("done");
   const cardRef = useRef2(null);
   const timers = useRef2([]);
@@ -2009,7 +2102,7 @@ function WorkflowShowcase({
   const manualSchedule = schedules[schedIdx];
   const scheduleShown = inferredSchedule ?? (manualSchedule === "AUTO" ? "HOURLY" : manualSchedule);
   const triggers = WORKFLOW_SHOWCASE_TRIGGERS;
-  const [triggerIdx, setTriggerIdx] = useState6(0);
+  const [triggerIdx, setTriggerIdx] = useState7(0);
   const manualTrigger = triggers[triggerIdx];
   const cadenceShown = manualTrigger === "SCHEDULE" ? scheduleShown : manualTrigger;
   useEffect2(() => {