@hanzo/ui 8.27.32 → 8.27.38

package/dist/onboarding/plans.d.ts

@@ -1,40 +1,61 @@
 /**
- * What Hanzo sells, priced from @hanzo/plans and nothing else.
+ * What Hanzo sells, priced from commerce's live catalog (GET /v1/billing/plans)
+ * and nothing else: no price is typed in this package. `adopt` takes the rows,
+ * after which every function here answers from them.
  *
  *   free            chat only; offered on the personal path alone
- *   dev, max        the personal plans, at the catalog's monthly price
- *   team_standard   a Dev seat + the team add-on
- *   team_premium    a Max seat + the team add-on, two seats at least
- *
- * A year is the month times 0.82, paid at once.
+ *   dev             Pro, the personal plan
+ *   max_5x, max_20x one Max card; the tier is picked at checkout
+ *   team_standard   the catalog's per-seat Team plan, two seats at least
+ *   team_premium    a heavier seat, offered only while the catalog lists one
  */
-export type PlanId = 'free' | 'dev' | 'max' | 'team_standard' | 'team_premium';
+export type PlanId = 'free' | 'dev' | 'max_5x' | 'max_20x' | 'team_standard' | 'team_premium';
 export type Interval = 'monthly' | 'annual';
 export type Category = 'individual' | 'team';
-/** Annual price is the monthly price times this. */
-export declare const ANNUAL = 0.82;
-/** What a team seat adds to the personal plan it is built on, per month. */
-export declare const SEAT_ADDON = 5;
 export declare const MIN_SEATS = 2;
 export declare const MAX_SEATS = 150;
 /** From 20 people the team plan becomes a conversation. */
 export declare const ENTERPRISE_FROM = 20;
+/** The commerce catalog's slug for each plan. */
+export declare const SLUG: Record<PlanId, string>;
+/** A row of the catalog, as commerce sends it (prices in cents). */
+export interface Row {
+    slug: string;
+    name: string;
+    description?: string;
+    price: number;
+    annualTotal?: number;
+    features?: string[];
+    limits?: Record<string, number>;
+}
 export interface Offer {
     id: PlanId;
+    slug: string;
     name: string;
     category: Category;
-    /** GA4 item_id / item_category / item_name come from here. */
+    /** Dollars per month (per seat for a team plan). */
     monthly: number;
+    /** Dollars for a year paid at once, where the catalog sells one. */
+    yearly: number | null;
     blurb: string;
     features: string[];
 }
-export declare const OFFERS: Record<PlanId, Offer>;
-/** One unit's price per month at this interval (a year, spread over its twelve months). */
-export declare const unit: (id: PlanId, interval: Interval) => number;
+/** The offers as loaded: a plan the catalog does not list is absent. */
+export declare const OFFERS: Partial<Record<PlanId, Offer>>;
+/** Take the catalog's rows as what is sold. */
+export declare function adopt(rows: Row[]): void;
+/** The offer for a plan; throws while the catalog has not loaded or does not list it. */
+export declare function offer(id: PlanId): Offer;
+/** Whether the catalog lists this plan. */
+export declare const has: (id: PlanId) => boolean;
+/** Whether this plan is sold by the year. */
+export declare const yearly: (id: PlanId) => boolean;
+/** One unit's price per month at this interval (a year spread over its twelve months). */
+export declare function unit(id: PlanId, interval: Interval): number;
 /** What one unit costs per billing period: the month, or the year at once. */
-export declare const period: (id: PlanId, interval: Interval) => number;
+export declare function period(id: PlanId, interval: Interval): number;
 /** What a year saves over twelve months, as a whole percent. */
-export declare const saving: number;
+export declare function saving(id: PlanId): number;
 export interface Lines {
     seats: number;
     /** What is charged today (before tax): the period's price times the seats. */
@@ -43,9 +64,9 @@ export interface Lines {
     perMonth: number;
 }
 export declare function lines(id: PlanId, interval: Interval, seats?: number): Lines;
-/** GA4-shaped item for a commerce event: price is per unit, quantity is seats. */
+/** GA4-shaped item for a commerce event: price is per unit, quantity is seats. Both Max tiers are item `max`. */
 export declare function item(id: PlanId, interval: Interval, seats?: number): {
-    item_id: PlanId;
+    item_id: string;
     item_name: string;
     item_category: Category;
     item_variant: Interval;
@@ -53,8 +74,6 @@ export declare function item(id: PlanId, interval: Interval, seats?: number): {
     quantity: number;
 };
 export declare const usd: (n: number) => string;
-/** `$19` when whole, `$15.58` when not. */
+/** `$20` when whole, `$16.67` when not. */
 export declare const money: (n: number) => string;
-/** The commerce catalog's slug for a plan, and the quantity it is bought at. */
-export declare const SLUG: Record<PlanId, string>;
 //# sourceMappingURL=plans.d.ts.map

package/dist/onboarding/plans.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plans.d.ts","sourceRoot":"","sources":["../../src/onboarding/plans.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,eAAe,GAAG,cAAc,CAAA;AAC9E,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;AAC3C,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,MAAM,CAAA;AAE5C,oDAAoD;AACpD,eAAO,MAAM,MAAM,OAAO,CAAA;AAC1B,4EAA4E;AAC5E,eAAO,MAAM,UAAU,IAAI,CAAA;AAC3B,eAAO,MAAM,SAAS,IAAI,CAAA;AAC1B,eAAO,MAAM,SAAS,MAAM,CAAA;AAC5B,2DAA2D;AAC3D,eAAO,MAAM,eAAe,KAAK,CAAA;AAUjC,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,QAAQ,CAAA;IAClB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB;AAED,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAyCxC,CAAA;AAED,2FAA2F;AAC3F,eAAO,MAAM,IAAI,OAAQ,MAAM,YAAY,QAAQ,KAAG,MAAyF,CAAA;AAE/I,8EAA8E;AAC9E,eAAO,MAAM,MAAM,OAAQ,MAAM,YAAY,QAAQ,KAAG,MAAwF,CAAA;AAEhJ,gEAAgE;AAChE,eAAO,MAAM,MAAM,QAAiC,CAAA;AAEpD,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,EAAE,MAAM,CAAA;IAChB,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,SAAI,GAAG,KAAK,CAGtE;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,SAAI;IAEnD,OAAO;IAAM,SAAS;IAAU,aAAa;IAAc,YAAY;IAAY,KAAK;IAAwB,QAAQ;EAClI;AAED,eAAO,MAAM,GAAG,MAAO,MAAM,KAAG,MAA4B,CAAA;AAC5D,2CAA2C;AAC3C,eAAO,MAAM,KAAK,MAAO,MAAM,KAAG,MAAkD,CAAA;AAEpF,gFAAgF;AAChF,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAA0G,CAAA"}
+{"version":3,"file":"plans.d.ts","sourceRoot":"","sources":["../../src/onboarding/plans.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,eAAe,GAAG,cAAc,CAAA;AAC7F,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;AAC3C,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG,MAAM,CAAA;AAE5C,eAAO,MAAM,SAAS,IAAI,CAAA;AAC1B,eAAO,MAAM,SAAS,MAAM,CAAA;AAC5B,2DAA2D;AAC3D,eAAO,MAAM,eAAe,KAAK,CAAA;AAEjC,iDAAiD;AACjD,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAA2H,CAAA;AAEnK,oEAAoE;AACpE,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,QAAQ,CAAA;IAClB,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAA;IACf,oEAAoE;IACpE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB;AAMD,wEAAwE;AACxE,eAAO,MAAM,MAAM,gCAAS,CAAA;AAE5B,+CAA+C;AAC/C,wBAAgB,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAiBvC;AAED,yFAAyF;AACzF,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,KAAK,CAIvC;AAED,2CAA2C;AAC3C,eAAO,MAAM,GAAG,OAAQ,MAAM,KAAG,OAAmC,CAAA;AAEpE,6CAA6C;AAC7C,eAAO,MAAM,MAAM,OAAQ,MAAM,KAAG,OAAoC,CAAA;AAExE,0FAA0F;AAC1F,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAG3D;AAED,8EAA8E;AAC9E,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAG7D;AAED,gEAAgE;AAChE,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAGzC;AAED,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,EAAE,MAAM,CAAA;IAChB,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,SAAI,GAAG,KAAK,CAGtE;AAED,iHAAiH;AACjH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,SAAI;;;;;;;EAG7D;AAED,eAAO,MAAM,GAAG,MAAO,MAAM,KAAG,MAA4B,CAAA;AAC5D,2CAA2C;AAC3C,eAAO,MAAM,KAAK,MAAO,MAAM,KAAG,MAAkD,CAAA"}

package/dist/onboarding/plans.js

@@ -1,79 +1,81 @@
-import { subscriptionPlans } from '@hanzo/plans';
-/** Annual price is the monthly price times this. */
-export const ANNUAL = 0.82;
-/** What a team seat adds to the personal plan it is built on, per month. */
-export const SEAT_ADDON = 5;
+/**
+ * What Hanzo sells, priced from commerce's live catalog (GET /v1/billing/plans)
+ * and nothing else: no price is typed in this package. `adopt` takes the rows,
+ * after which every function here answers from them.
+ *
+ *   free            chat only; offered on the personal path alone
+ *   dev             Pro, the personal plan
+ *   max_5x, max_20x one Max card; the tier is picked at checkout
+ *   team_standard   the catalog's per-seat Team plan, two seats at least
+ *   team_premium    a heavier seat, offered only while the catalog lists one
+ */
 export const MIN_SEATS = 2;
 export const MAX_SEATS = 150;
 /** From 20 people the team plan becomes a conversation. */
 export const ENTERPRISE_FROM = 20;
-const monthlyOf = (slug) => {
-    const p = subscriptionPlans.find((x) => x.id === slug);
-    if (!p || p.priceMonthly == null)
-        throw new Error(`@hanzo/plans has no monthly price for ${slug}`);
-    return p.priceMonthly;
-};
+/** The commerce catalog's slug for each plan. */
+export const SLUG = { free: 'free', dev: 'dev', max_5x: 'max-5x', max_20x: 'max-20x', team_standard: 'team', team_premium: 'team-premium' };
 const cents = (n) => Math.round(n * 100) / 100;
-export const OFFERS = {
-    free: {
-        id: 'free',
-        name: 'Free',
-        category: 'individual',
-        monthly: 0,
-        blurb: 'Meet Hanzo',
-        features: ['Chat on web, iOS, Android and desktop', 'The free Zen models, with a daily allowance', 'Built-in web search', 'Add credit at any time for the paid models'],
-    },
-    dev: {
-        id: 'dev',
-        name: 'Dev',
-        category: 'individual',
-        monthly: monthlyOf('dev'),
-        blurb: 'Research, code, and organize',
-        features: ['Everything in Free and:', 'Hanzo Dev in your own repository', 'Every room in the Hanzo app', 'Higher usage limits', 'MCP, the SDK and the CLI included'],
-    },
-    max: {
-        id: 'max',
-        name: 'Max',
-        category: 'individual',
-        monthly: monthlyOf('max'),
-        blurb: 'Higher limits, priority access',
-        features: ['Everything in Dev, plus:', 'Enso orchestration across models', 'Unlimited managed agents', 'Higher output limits for all tasks', 'Priority access at high traffic times'],
-    },
-    team_standard: {
-        id: 'team_standard',
-        name: 'Standard seat',
-        category: 'team',
-        monthly: monthlyOf('dev') + SEAT_ADDON,
-        blurb: 'A Dev seat for each teammate',
-        features: ['Everything in Dev, per person', 'Org workspaces with shared history and projects', 'SSO through Hanzo IAM', 'One bill for everyone'],
-    },
-    team_premium: {
-        id: 'team_premium',
-        name: 'Premium seat',
-        category: 'team',
-        monthly: monthlyOf('max') + SEAT_ADDON,
-        blurb: 'A Max seat for heavy users',
-        features: ['Everything in Max, per person', 'Org workspaces with shared history and projects', 'SSO through Hanzo IAM', 'One bill for everyone'],
-    },
-};
-/** One unit's price per month at this interval (a year, spread over its twelve months). */
-export const unit = (id, interval) => cents(interval === 'annual' ? OFFERS[id].monthly * ANNUAL : OFFERS[id].monthly);
+const offers = {};
+/** The offers as loaded: a plan the catalog does not list is absent. */
+export const OFFERS = offers;
+/** Take the catalog's rows as what is sold. */
+export function adopt(rows) {
+    for (const k of Object.keys(offers))
+        delete offers[k];
+    for (const id of Object.keys(SLUG)) {
+        const r = rows.find((x) => x.slug === SLUG[id]);
+        if (!r)
+            continue;
+        const team = id.startsWith('team');
+        offers[id] = {
+            id,
+            slug: r.slug,
+            name: team ? (id === 'team_standard' ? 'Standard seat' : 'Premium seat') : r.name,
+            category: team ? 'team' : 'individual',
+            monthly: cents(r.price / 100),
+            yearly: r.annualTotal ? cents(r.annualTotal / 100) : null,
+            blurb: r.description ?? '',
+            features: r.features ?? [],
+        };
+    }
+}
+/** The offer for a plan; throws while the catalog has not loaded or does not list it. */
+export function offer(id) {
+    const o = offers[id];
+    if (!o)
+        throw new Error(`the catalog lists no ${id} plan`);
+    return o;
+}
+/** Whether the catalog lists this plan. */
+export const has = (id) => offers[id] !== undefined;
+/** Whether this plan is sold by the year. */
+export const yearly = (id) => offer(id).yearly !== null;
+/** One unit's price per month at this interval (a year spread over its twelve months). */
+export function unit(id, interval) {
+    const o = offer(id);
+    return interval === 'annual' && o.yearly !== null ? cents(o.yearly / 12) : o.monthly;
+}
 /** What one unit costs per billing period: the month, or the year at once. */
-export const period = (id, interval) => (interval === 'annual' ? cents(unit(id, 'annual') * 12) : unit(id, 'monthly'));
+export function period(id, interval) {
+    const o = offer(id);
+    return interval === 'annual' && o.yearly !== null ? o.yearly : o.monthly;
+}
 /** What a year saves over twelve months, as a whole percent. */
-export const saving = Math.round((1 - ANNUAL) * 100);
+export function saving(id) {
+    const o = offer(id);
+    return o.yearly !== null && o.monthly > 0 ? Math.round((1 - o.yearly / (12 * o.monthly)) * 100) : 0;
+}
 export function lines(id, interval, seats = 1) {
-    const n = OFFERS[id].category === 'team' ? Math.max(MIN_SEATS, Math.min(MAX_SEATS, Math.floor(seats))) : 1;
+    const n = offer(id).category === 'team' ? Math.max(MIN_SEATS, Math.min(MAX_SEATS, Math.floor(seats))) : 1;
     return { seats: n, subtotal: cents(period(id, interval) * n), perMonth: cents(unit(id, interval) * n) };
 }
-/** GA4-shaped item for a commerce event: price is per unit, quantity is seats. */
+/** GA4-shaped item for a commerce event: price is per unit, quantity is seats. Both Max tiers are item `max`. */
 export function item(id, interval, seats = 1) {
-    const o = OFFERS[id];
-    return { item_id: id, item_name: o.name, item_category: o.category, item_variant: interval, price: period(id, interval), quantity: lines(id, interval, seats).seats };
+    const o = offer(id);
+    return { item_id: id.startsWith('max') ? 'max' : id, item_name: o.name, item_category: o.category, item_variant: interval, price: period(id, interval), quantity: lines(id, interval, seats).seats };
 }
 export const usd = (n) => `$${n.toFixed(2)}`;
-/** `$19` when whole, `$15.58` when not. */
+/** `$20` when whole, `$16.67` when not. */
 export const money = (n) => (Number.isInteger(n) ? `$${n}` : usd(n));
-/** The commerce catalog's slug for a plan, and the quantity it is bought at. */
-export const SLUG = { free: 'free', dev: 'dev', max: 'max', team_standard: 'team-standard', team_premium: 'team-premium' };
 //# sourceMappingURL=plans.js.map

package/dist/onboarding/plans.js.map

@@ -1 +1 @@
-{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/onboarding/plans.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"plans.js","sourceRoot":"","sources":["../../src/onboarding/plans.ts"],"names":[],"mappings":"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"}

package/dist/onboarding/screens.cjs

@@ -5,6 +5,7 @@ exports.slug = void 0;
 exports.Primary = Primary;
 exports.UseCards = UseCards;
 exports.Plans = Plans;
+exports.Pro = Pro;
 exports.TeamName = TeamName;
 exports.IntervalChoice = IntervalChoice;
 exports.Seats = Seats;
@@ -12,6 +13,7 @@ exports.Enterprise = Enterprise;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const badge_1 = require("../backends/gui/badge.cjs");
 const button_1 = require("../backends/gui/button.cjs");
 const card_1 = require("../backends/gui/card.cjs");
 const choice_1 = require("../backends/gui/choice.cjs");
@@ -49,12 +51,21 @@ function UseCards({ onPick, onAsk }) {
     return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { items: "center", gap: "$5", width: "100%", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { role: "group", "aria-label": "How you will use Hanzo", flexWrap: "wrap", justify: "center", gap: "$6", width: "100%", children: [(0, jsx_runtime_1.jsx)(UseCard, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, { size: 64 }), name: "For personal use", note: "For individuals who want to build and experiment with their own projects", dim: team, onPress: () => onPick('personal') }), (0, jsx_runtime_1.jsx)(UseCard, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Users, { size: 64 }), name: "With my team", note: "For organizations who want to collaborate and build at scale", on: team, onPress: () => setTeam(true) })] }), team ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { role: "group", "aria-label": "Team size", flexWrap: "wrap", justify: "center", gap: "$6", width: "100%", children: [(0, jsx_runtime_1.jsx)(UseCard, { size: "small", name: "Team", note: `For ${plans_1.MIN_SEATS}–${plans_1.MAX_SEATS} people. Predictable per-seat pricing, set up in minutes.`, onPress: () => onPick('team') }), (0, jsx_runtime_1.jsx)(UseCard, { size: "small", name: "Enterprise", note: `For ${plans_1.ENTERPRISE_FROM} or more people. Pooled usage, advanced admin and security controls.`, onPress: () => onPick('enterprise') })] }), (0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$quiet", children: "Questions?" }), (0, jsx_runtime_1.jsx)(Ask, { onAsk: onAsk })] })] })) : null] }));
 }
 /* ---------------------------------------------------------------- plans */
-function PlanCard({ id, cta, onPick, interval, setInterval, toggle }) {
-    const o = plans_1.OFFERS[id];
-    return ((0, jsx_runtime_1.jsxs)(card_1.Card, { "aria-label": o.name, bg: "$panel", flex: 1, flexBasis: 300, maxW: 380, gap: "$0", py: 0, children: [(0, jsx_runtime_1.jsxs)(layout_1.YStack, { p: "$5", gap: "$3", borderBottomWidth: 1, borderBottomColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(layout_1.XStack, { minH: 36, justify: "flex-end", children: toggle ? (0, jsx_runtime_1.jsx)(frame_1.IntervalToggle, { interval: interval, onChange: setInterval, name: o.name }) : null }), (0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$7", fontWeight: "600", color: "$ink", m: 0, children: o.name }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$3", color: "$quiet", m: 0, children: o.blurb }), (0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$2", my: "$2", children: [(0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$10", fontWeight: "600", color: "$ink", children: (0, plans_1.money)((0, plans_1.unit)(id, interval)) }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$1", color: "$quiet", children: `USD / month\nbilled ${interval === 'annual' ? 'yearly' : 'monthly'}` })] }), (0, jsx_runtime_1.jsx)(Primary, { onClick: onPick, children: cta }), o.monthly > 0 ? ((0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "No commitment \u00B7 Cancel anytime" })) : null] }), (0, jsx_runtime_1.jsx)(layout_1.YStack, { render: "ul", p: "$5", gap: "$2.5", m: 0, children: o.features.map((f) => ((0, jsx_runtime_1.jsxs)(layout_1.XStack, { render: "li", items: "flex-start", gap: "$2.5", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16 }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$quiet", flex: 1, children: f })] }, f))) })] }));
+/** A plan's features: a line ending in a colon is a heading for the ones under it, the rest are ticked. */
+function Features({ items }) {
+    return ((0, jsx_runtime_1.jsx)(layout_1.YStack, { render: "ul", p: "$5", gap: "$2.5", m: 0, children: items.map((f) => f.endsWith(':') ? ((0, jsx_runtime_1.jsx)(layout_1.XStack, { render: "li", children: (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$ink", fontWeight: "500", children: f }) }, f)) : ((0, jsx_runtime_1.jsxs)(layout_1.XStack, { render: "li", items: "flex-start", gap: "$2.5", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16 }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$quiet", flex: 1, children: f })] }, f))) }));
 }
-function Plans({ interval, setInterval, onFree, onPick }) {
-    return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { items: "center", gap: "$4", width: "100%", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { flexWrap: "wrap", justify: "center", gap: "$5", width: "100%", children: [(0, jsx_runtime_1.jsx)(PlanCard, { id: "free", cta: "Use Hanzo for free", onPick: onFree, interval: interval, setInterval: setInterval }), (0, jsx_runtime_1.jsx)(PlanCard, { id: "dev", cta: "Get Dev plan", onPick: () => onPick('dev'), interval: interval, setInterval: setInterval, toggle: true }), (0, jsx_runtime_1.jsx)(PlanCard, { id: "max", cta: "Get Max plan", onPick: () => onPick('max'), interval: interval, setInterval: setInterval })] }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "Prices are in US dollars. Usage limits apply, and plans are subject to change." })] }));
+function PlanCard({ id, cta, onPick, interval, setInterval, toggle, from }) {
+    const o = (0, plans_1.offer)(id);
+    return ((0, jsx_runtime_1.jsxs)(card_1.Card, { "aria-label": from ? 'Max' : o.name, bg: "$panel", flex: 1, flexBasis: 300, maxW: 380, gap: "$0", py: 0, children: [(0, jsx_runtime_1.jsxs)(layout_1.YStack, { p: "$5", gap: "$3", borderBottomWidth: 1, borderBottomColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(layout_1.XStack, { minH: 36, justify: "flex-end", children: toggle && (0, plans_1.yearly)(id) ? (0, jsx_runtime_1.jsx)(frame_1.IntervalToggle, { interval: interval, onChange: setInterval, name: o.name, save: (0, plans_1.saving)(id) }) : null }), (0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$7", fontWeight: "600", color: "$ink", m: 0, children: from ? 'Max' : o.name }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$3", color: "$quiet", m: 0, children: o.blurb }), (0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$2", my: "$2", children: [(0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$10", fontWeight: "600", color: "$ink", children: `${from ? 'From ' : ''}${(0, plans_1.money)((0, plans_1.unit)(id, interval))}` }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$1", color: "$quiet", children: `USD / month\nbilled ${interval === 'annual' && (0, plans_1.yearly)(id) ? 'yearly' : 'monthly'}` })] }), (0, jsx_runtime_1.jsx)(Primary, { onClick: onPick, children: cta }), o.monthly > 0 ? ((0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "No commitment \u00B7 Cancel anytime" })) : null] }), (0, jsx_runtime_1.jsx)(Features, { items: o.features })] }));
+}
+function Plans({ interval, setInterval, onFree, onPick, onTeam }) {
+    return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { items: "center", gap: "$4", width: "100%", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { flexWrap: "wrap", justify: "center", gap: "$5", width: "100%", children: [(0, jsx_runtime_1.jsx)(PlanCard, { id: "free", cta: "Use Hanzo for free", onPick: onFree, interval: interval, setInterval: setInterval }), (0, jsx_runtime_1.jsx)(PlanCard, { id: "dev", cta: `Get ${(0, plans_1.offer)('dev').name} plan`, onPick: () => onPick('dev'), interval: interval, setInterval: setInterval, toggle: true }), (0, jsx_runtime_1.jsx)(PlanCard, { id: "max_5x", cta: "Get Max plan", onPick: () => onPick('max_5x'), interval: interval, setInterval: setInterval, from: true })] }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "Prices are in US dollars. Usage limits apply. Prices and plans are subject to change at Hanzo\u2019s discretion." }), onTeam ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "link", size: "sm", onClick: onTeam, children: "Using Hanzo with a team?" })) : null] }));
+}
+/** "Do more with Hanzo Pro": the one plan worth recommending, with the way to stay free and the way to see the rest. */
+function Pro({ interval, setInterval, onPro, onFree, onAll }) {
+    const o = (0, plans_1.offer)('dev');
+    return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { items: "center", gap: "$4", width: "100%", children: [(0, jsx_runtime_1.jsx)(frame_1.IntervalToggle, { interval: interval, onChange: setInterval, name: o.name, save: (0, plans_1.saving)('dev') }), (0, jsx_runtime_1.jsxs)(card_1.Card, { "aria-label": o.name, bg: "$panel", width: "100%", gap: "$0", py: 0, children: [(0, jsx_runtime_1.jsxs)(layout_1.YStack, { p: "$5", gap: "$3", borderBottomWidth: 1, borderBottomColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(layout_1.XStack, { justify: "flex-end", minH: 24, children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: "secondary", children: "Recommended" }) }), (0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$7", fontWeight: "600", color: "$ink", m: 0, children: o.name }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$3", color: "$quiet", m: 0, children: o.blurb }), (0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$2", my: "$2", children: [(0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$10", fontWeight: "600", color: "$ink", children: (0, plans_1.money)((0, plans_1.unit)('dev', interval)) }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$1", color: "$quiet", children: `USD / month\nbilled ${interval === 'annual' && (0, plans_1.yearly)('dev') ? 'yearly' : 'monthly'}` })] }), (0, jsx_runtime_1.jsx)(Primary, { onClick: onPro, children: `Get ${o.name} plan` }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "secondary", size: "lg", rounded: "$10", onClick: onFree, children: "Use Hanzo for free" }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "No commitment \u00B7 Cancel anytime" })] }), (0, jsx_runtime_1.jsx)(Features, { items: o.features })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "secondary", size: "lg", width: "100%", onClick: onAll, children: "View all plans" }), (0, jsx_runtime_1.jsx)(layout_1.Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "Prices are in US dollars. Prices and plans are subject to change at Hanzo\u2019s discretion." })] }));
 }
 /* ----------------------------------------------------------------- team */
 function TeamName({ api, onCreated }) {
@@ -84,15 +95,16 @@ function TeamName({ api, onCreated }) {
     return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: (0, jsx_runtime_1.jsx)("form", { onSubmit: submit, noValidate: true }), gap: "$4", items: "stretch", children: [(0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-team", children: "Team name" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-team", name: "team", autoComplete: "organization", value: name, onChangeText: setName, maxLength: 60, height: 48, autoFocus: true })] }), wrong ? (0, jsx_runtime_1.jsx)(field_1.FieldError, { children: wrong }) : null, (0, jsx_runtime_1.jsx)(Primary, { type: "submit", disabled: !handle || busy, self: "flex-start", px: "$6", children: busy ? 'One moment…' : 'Continue' })] }));
 }
 /* ---------------------------------------------------------------- seats */
-function IntervalChoice({ interval, setInterval, price }) {
-    return ((0, jsx_runtime_1.jsx)(choice_1.ChoiceGroup, { label: "Billing interval", flexWrap: "wrap", children: ['monthly', 'annual'].map((i) => ((0, jsx_runtime_1.jsxs)(choice_1.ChoiceCard, { selected: interval === i, onSelect: () => setInterval(i), flex: 1, flexBasis: 200, children: [i === 'annual' ? ((0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$1", color: "$ink", self: "flex-end", bg: "$edge", px: "$2", rounded: "$1", children: `Save ${plans_1.saving}%` })) : null, (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$3", fontWeight: "600", color: "$ink", children: i === 'annual' ? 'Annually' : 'Monthly' }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$ink", children: price(i) })] }, i))) }));
+function IntervalChoice({ interval, setInterval, price, save }) {
+    return ((0, jsx_runtime_1.jsx)(choice_1.ChoiceGroup, { label: "Billing interval", flexWrap: "wrap", children: ['monthly', 'annual'].filter((i) => i === 'monthly' || save > 0).map((i) => ((0, jsx_runtime_1.jsxs)(choice_1.ChoiceCard, { selected: interval === i, onSelect: () => setInterval(i), flex: 1, flexBasis: 200, children: [i === 'annual' ? ((0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$1", color: "$ink", self: "flex-end", bg: "$edge", px: "$2", rounded: "$1", children: `Save ${save}%` })) : null, (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$3", fontWeight: "600", color: "$ink", children: i === 'annual' ? 'Annually' : 'Monthly' }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$ink", children: price(i) })] }, i))) }));
 }
 function Seats({ interval, setInterval, value, setValue, onContinue, onEnterprise, onAsk, }) {
     const [adjust, setAdjust] = (0, react_1.useState)(false);
     const std = value.plan === 'team_standard';
+    const premium = (0, plans_1.has)('team_premium');
     const l = (0, plans_1.lines)(value.plan, interval, value.seats);
     const set = (plan, seats) => setValue({ plan, seats: Math.max(plans_1.MIN_SEATS, Math.min(plans_1.MAX_SEATS, seats)) });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IntervalChoice, { interval: interval, setInterval: setInterval, price: (i) => `${(0, plans_1.usd)((0, plans_1.lines)(value.plan, i, value.seats).subtotal)}/${i === 'annual' ? 'year' : 'month'} + tax` }), (0, jsx_runtime_1.jsxs)(frame_1.Panel, { label: "Order details", children: [(0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$5", fontWeight: "600", color: "$ink", m: 0, children: "Order details" }), (0, jsx_runtime_1.jsx)(frame_1.Line, { label: `${value.seats} ${std ? 'Standard' : 'Premium'} seats`, note: `× ${(0, plans_1.usd)((0, plans_1.unit)(value.plan, interval))} per seat /month${interval === 'annual' ? ', billed yearly' : ''}`, value: (0, plans_1.usd)(l.subtotal), strong: true }), (0, jsx_runtime_1.jsxs)(button_1.Button, { type: "button", variant: "secondary", size: "lg", "aria-expanded": adjust, onClick: () => setAdjust((a) => !a), children: ["Adjust seats", (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16 })] }), adjust ? ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { gap: "$3", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { justify: "space-between", items: "center", gap: "$3", children: [(0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Standard seat", note: `Dev + ${(0, plans_1.usd)(plans_1.SEAT_ADDON)} · ${(0, plans_1.usd)((0, plans_1.unit)('team_standard', interval))}/seat/month`, value: "" }), (0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Standard seats", value: std ? value.seats : 0, min: 0, max: plans_1.MAX_SEATS, onChange: (n) => (n === 0 ? set('team_premium', value.seats) : set('team_standard', n)) })] }), (0, jsx_runtime_1.jsxs)(layout_1.XStack, { justify: "space-between", items: "center", gap: "$3", children: [(0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Premium seat", note: `Max + ${(0, plans_1.usd)(plans_1.SEAT_ADDON)} · ${(0, plans_1.usd)((0, plans_1.unit)('team_premium', interval))}/seat/month`, value: "" }), (0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Premium seats", value: std ? 0 : value.seats, min: 0, max: plans_1.MAX_SEATS, onChange: (n) => (n === 0 ? set('team_standard', value.seats) : set('team_premium', n)) })] }), value.seats >= plans_1.ENTERPRISE_FROM ? ((0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsxs)(layout_1.SizableText, { size: "$1", color: "$quiet", children: [plans_1.ENTERPRISE_FROM, " or more?"] }), onAsk ? ((0, jsx_runtime_1.jsx)(Ask, { onAsk: onAsk })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "link", size: "sm", px: 0, minH: 0, onClick: onEnterprise, children: "Talk to sales" }))] })) : null] })) : null, (0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Subtotal", value: (0, plans_1.usd)(l.subtotal), strong: true }), (0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Tax (if applicable)", value: "Calculated at payment", muted: true }), (0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Total due today", value: `${(0, plans_1.usd)(l.subtotal)} + tax`, strong: true })] }), (0, jsx_runtime_1.jsx)(Primary, { onClick: onContinue, children: "Continue to payment" })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IntervalChoice, { interval: interval, setInterval: setInterval, save: (0, plans_1.saving)(value.plan), price: (i) => `${(0, plans_1.usd)((0, plans_1.lines)(value.plan, i, value.seats).subtotal)}/${i === 'annual' ? 'year' : 'month'} + tax` }), (0, jsx_runtime_1.jsxs)(frame_1.Panel, { label: "Order details", children: [(0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h2", size: "$5", fontWeight: "600", color: "$ink", m: 0, children: "Order details" }), (0, jsx_runtime_1.jsx)(frame_1.Line, { label: `${value.seats} ${std ? 'Standard' : 'Premium'} seats`, note: `× ${(0, plans_1.usd)((0, plans_1.unit)(value.plan, interval))} per seat /month${interval === 'annual' ? ', billed yearly' : ''}`, value: (0, plans_1.usd)(l.subtotal), strong: true }), (0, jsx_runtime_1.jsxs)(button_1.Button, { type: "button", variant: "secondary", size: "lg", "aria-expanded": adjust, onClick: () => setAdjust((a) => !a), children: ["Adjust seats", (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16 })] }), adjust ? ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { gap: "$3", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { justify: "space-between", items: "center", gap: "$3", children: [(0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Standard seat", note: `${(0, plans_1.usd)((0, plans_1.unit)('team_standard', interval))}/seat/month`, value: "" }), (0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Standard seats", value: std ? value.seats : 0, min: 0, max: plans_1.MAX_SEATS, onChange: (n) => (n === 0 && premium ? set('team_premium', value.seats) : set('team_standard', Math.max(n, plans_1.MIN_SEATS))) })] }), premium ? ((0, jsx_runtime_1.jsxs)(layout_1.XStack, { justify: "space-between", items: "center", gap: "$3", children: [(0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Premium seat", note: `${(0, plans_1.usd)((0, plans_1.unit)('team_premium', interval))}/seat/month`, value: "" }), (0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Premium seats", value: std ? 0 : value.seats, min: 0, max: plans_1.MAX_SEATS, onChange: (n) => (n === 0 ? set('team_standard', value.seats) : set('team_premium', n)) })] })) : null, value.seats >= plans_1.ENTERPRISE_FROM ? ((0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsxs)(layout_1.SizableText, { size: "$1", color: "$quiet", children: [plans_1.ENTERPRISE_FROM, " or more?"] }), onAsk ? ((0, jsx_runtime_1.jsx)(Ask, { onAsk: onAsk })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "link", size: "sm", px: 0, minH: 0, onClick: onEnterprise, children: "Talk to sales" }))] })) : null] })) : null, (0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Subtotal", value: (0, plans_1.usd)(l.subtotal), strong: true }), (0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Tax (if applicable)", value: "Calculated at payment", muted: true }), (0, jsx_runtime_1.jsx)(frame_1.Line, { label: "Total due today", value: `${(0, plans_1.usd)(l.subtotal)} + tax`, strong: true })] }), (0, jsx_runtime_1.jsx)(Primary, { onClick: onContinue, children: "Continue to payment" })] }));
 }
 /* ----------------------------------------------------------- enterprise */
 function Enterprise({ api, onSent }) {

package/dist/onboarding/screens.d.ts

@@ -9,20 +9,30 @@ export declare function UseCards({ onPick, onAsk }: {
     onPick: (u: Use) => void;
     onAsk?: () => void;
 }): import("react").JSX.Element;
-export declare function Plans({ interval, setInterval, onFree, onPick }: {
+export declare function Plans({ interval, setInterval, onFree, onPick, onTeam }: {
     interval: Interval;
     setInterval: (i: Interval) => void;
     onFree: () => void;
     onPick: (p: PlanId) => void;
+    onTeam?: () => void;
+}): import("react").JSX.Element;
+/** "Do more with Hanzo Pro": the one plan worth recommending, with the way to stay free and the way to see the rest. */
+export declare function Pro({ interval, setInterval, onPro, onFree, onAll }: {
+    interval: Interval;
+    setInterval: (i: Interval) => void;
+    onPro: () => void;
+    onFree: () => void;
+    onAll: () => void;
 }): import("react").JSX.Element;
 export declare function TeamName({ api, onCreated }: {
     api: string;
     onCreated: (org: string) => void | Promise<void>;
 }): import("react").JSX.Element;
-export declare function IntervalChoice({ interval, setInterval, price }: {
+export declare function IntervalChoice({ interval, setInterval, price, save }: {
     interval: Interval;
     setInterval: (i: Interval) => void;
     price: (i: Interval) => string;
+    save: number;
 }): import("react").JSX.Element;
 export declare function Seats({ interval, setInterval, value, setValue, onContinue, onEnterprise, onAsk, }: {
     interval: Interval;

package/dist/onboarding/screens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../src/onboarding/screens.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAU/C,OAAO,EAA8F,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AAChJ,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAElC,mGAAmG;AACnG,eAAO,MAAM,IAAI,SAAU,MAAM,KAAG,MAOb,CAAA;AAEvB,iDAAiD;AACjD,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,+BAMlF;AA+BD,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;IAAE,MAAM,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAwB3F;AAiDD,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,+BAa3K;AAID,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,+BAiC7G;AAID,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAA;CAAE,+BAoB1J;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;IAClC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IACtC,QAAQ,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACtD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,+BAyDA;AAID,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,+BAiD9E"}
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../src/onboarding/screens.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAU/C,OAAO,EAA8F,KAAK,QAAQ,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAA;AAChJ,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAElC,mGAAmG;AACnG,eAAO,MAAM,IAAI,SAAU,MAAM,KAAG,MAOb,CAAA;AAEvB,iDAAiD;AACjD,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,+BAMlF;AA+BD,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;IAAE,MAAM,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAwB3F;AAgED,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAkBxM;AAED,wHAAwH;AACxH,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,+BA0CxL;AAID,wBAAgB,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,+BAiC7G;AAID,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,+BAoB9K;AAED,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,QAAQ,CAAA;IAClB,WAAW,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;IAClC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IACtC,QAAQ,EAAE,CAAC,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACtD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,+BA4DA;AAID,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,+BAiD9E"}

package/dist/onboarding/screens.js

@@ -2,6 +2,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Check, ChevronDown, User, Users } from '@hanzogui/lucide-icons-2';
+import { Badge } from '../backends/gui/badge.js';
 import { Button } from '../backends/gui/button.js';
 import { Card } from '../backends/gui/card.js';
 import { ChoiceCard, ChoiceGroup } from '../backends/gui/choice.js';
@@ -12,7 +13,7 @@ import { Stepper } from '../backends/gui/stepper.js';
 import { Textarea } from '../backends/gui/textarea.js';
 import { ApiError, call } from './api.js';
 import { IntervalToggle, Line, Panel } from './frame.js';
-import { ENTERPRISE_FROM, MAX_SEATS, MIN_SEATS, OFFERS, SEAT_ADDON, lines, money, saving, unit, usd } from './plans.js';
+import { ENTERPRISE_FROM, MAX_SEATS, MIN_SEATS, has, lines, money, offer, saving, unit, usd, yearly } from './plans.js';
 /** A team's IAM handle from its name: lowercase words joined by hyphens, 39 characters at most. */
 export const slug = (name) => name
     .normalize('NFKD')
@@ -38,12 +39,21 @@ export function UseCards({ onPick, onAsk }) {
     return (_jsxs(YStack, { items: "center", gap: "$5", width: "100%", children: [_jsxs(XStack, { role: "group", "aria-label": "How you will use Hanzo", flexWrap: "wrap", justify: "center", gap: "$6", width: "100%", children: [_jsx(UseCard, { icon: _jsx(User, { size: 64 }), name: "For personal use", note: "For individuals who want to build and experiment with their own projects", dim: team, onPress: () => onPick('personal') }), _jsx(UseCard, { icon: _jsx(Users, { size: 64 }), name: "With my team", note: "For organizations who want to collaborate and build at scale", on: team, onPress: () => setTeam(true) })] }), team ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { role: "group", "aria-label": "Team size", flexWrap: "wrap", justify: "center", gap: "$6", width: "100%", children: [_jsx(UseCard, { size: "small", name: "Team", note: `For ${MIN_SEATS}–${MAX_SEATS} people. Predictable per-seat pricing, set up in minutes.`, onPress: () => onPick('team') }), _jsx(UseCard, { size: "small", name: "Enterprise", note: `For ${ENTERPRISE_FROM} or more people. Pooled usage, advanced admin and security controls.`, onPress: () => onPick('enterprise') })] }), _jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$quiet", children: "Questions?" }), _jsx(Ask, { onAsk: onAsk })] })] })) : null] }));
 }
 /* ---------------------------------------------------------------- plans */
-function PlanCard({ id, cta, onPick, interval, setInterval, toggle }) {
-    const o = OFFERS[id];
-    return (_jsxs(Card, { "aria-label": o.name, bg: "$panel", flex: 1, flexBasis: 300, maxW: 380, gap: "$0", py: 0, children: [_jsxs(YStack, { p: "$5", gap: "$3", borderBottomWidth: 1, borderBottomColor: "$borderColor", children: [_jsx(XStack, { minH: 36, justify: "flex-end", children: toggle ? _jsx(IntervalToggle, { interval: interval, onChange: setInterval, name: o.name }) : null }), _jsx(Heading, { render: "h2", size: "$7", fontWeight: "600", color: "$ink", m: 0, children: o.name }), _jsx(Paragraph, { size: "$3", color: "$quiet", m: 0, children: o.blurb }), _jsxs(XStack, { items: "center", gap: "$2", my: "$2", children: [_jsx(SizableText, { size: "$10", fontWeight: "600", color: "$ink", children: money(unit(id, interval)) }), _jsx(SizableText, { size: "$1", color: "$quiet", children: `USD / month\nbilled ${interval === 'annual' ? 'yearly' : 'monthly'}` })] }), _jsx(Primary, { onClick: onPick, children: cta }), o.monthly > 0 ? (_jsx(Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "No commitment \u00B7 Cancel anytime" })) : null] }), _jsx(YStack, { render: "ul", p: "$5", gap: "$2.5", m: 0, children: o.features.map((f) => (_jsxs(XStack, { render: "li", items: "flex-start", gap: "$2.5", children: [_jsx(Check, { size: 16 }), _jsx(SizableText, { size: "$2", color: "$quiet", flex: 1, children: f })] }, f))) })] }));
+/** A plan's features: a line ending in a colon is a heading for the ones under it, the rest are ticked. */
+function Features({ items }) {
+    return (_jsx(YStack, { render: "ul", p: "$5", gap: "$2.5", m: 0, children: items.map((f) => f.endsWith(':') ? (_jsx(XStack, { render: "li", children: _jsx(SizableText, { size: "$2", color: "$ink", fontWeight: "500", children: f }) }, f)) : (_jsxs(XStack, { render: "li", items: "flex-start", gap: "$2.5", children: [_jsx(Check, { size: 16 }), _jsx(SizableText, { size: "$2", color: "$quiet", flex: 1, children: f })] }, f))) }));
 }
-export function Plans({ interval, setInterval, onFree, onPick }) {
-    return (_jsxs(YStack, { items: "center", gap: "$4", width: "100%", children: [_jsxs(XStack, { flexWrap: "wrap", justify: "center", gap: "$5", width: "100%", children: [_jsx(PlanCard, { id: "free", cta: "Use Hanzo for free", onPick: onFree, interval: interval, setInterval: setInterval }), _jsx(PlanCard, { id: "dev", cta: "Get Dev plan", onPick: () => onPick('dev'), interval: interval, setInterval: setInterval, toggle: true }), _jsx(PlanCard, { id: "max", cta: "Get Max plan", onPick: () => onPick('max'), interval: interval, setInterval: setInterval })] }), _jsx(Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "Prices are in US dollars. Usage limits apply, and plans are subject to change." })] }));
+function PlanCard({ id, cta, onPick, interval, setInterval, toggle, from }) {
+    const o = offer(id);
+    return (_jsxs(Card, { "aria-label": from ? 'Max' : o.name, bg: "$panel", flex: 1, flexBasis: 300, maxW: 380, gap: "$0", py: 0, children: [_jsxs(YStack, { p: "$5", gap: "$3", borderBottomWidth: 1, borderBottomColor: "$borderColor", children: [_jsx(XStack, { minH: 36, justify: "flex-end", children: toggle && yearly(id) ? _jsx(IntervalToggle, { interval: interval, onChange: setInterval, name: o.name, save: saving(id) }) : null }), _jsx(Heading, { render: "h2", size: "$7", fontWeight: "600", color: "$ink", m: 0, children: from ? 'Max' : o.name }), _jsx(Paragraph, { size: "$3", color: "$quiet", m: 0, children: o.blurb }), _jsxs(XStack, { items: "center", gap: "$2", my: "$2", children: [_jsx(SizableText, { size: "$10", fontWeight: "600", color: "$ink", children: `${from ? 'From ' : ''}${money(unit(id, interval))}` }), _jsx(SizableText, { size: "$1", color: "$quiet", children: `USD / month\nbilled ${interval === 'annual' && yearly(id) ? 'yearly' : 'monthly'}` })] }), _jsx(Primary, { onClick: onPick, children: cta }), o.monthly > 0 ? (_jsx(Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "No commitment \u00B7 Cancel anytime" })) : null] }), _jsx(Features, { items: o.features })] }));
+}
+export function Plans({ interval, setInterval, onFree, onPick, onTeam }) {
+    return (_jsxs(YStack, { items: "center", gap: "$4", width: "100%", children: [_jsxs(XStack, { flexWrap: "wrap", justify: "center", gap: "$5", width: "100%", children: [_jsx(PlanCard, { id: "free", cta: "Use Hanzo for free", onPick: onFree, interval: interval, setInterval: setInterval }), _jsx(PlanCard, { id: "dev", cta: `Get ${offer('dev').name} plan`, onPick: () => onPick('dev'), interval: interval, setInterval: setInterval, toggle: true }), _jsx(PlanCard, { id: "max_5x", cta: "Get Max plan", onPick: () => onPick('max_5x'), interval: interval, setInterval: setInterval, from: true })] }), _jsx(Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "Prices are in US dollars. Usage limits apply. Prices and plans are subject to change at Hanzo\u2019s discretion." }), onTeam ? (_jsx(Button, { type: "button", variant: "link", size: "sm", onClick: onTeam, children: "Using Hanzo with a team?" })) : null] }));
+}
+/** "Do more with Hanzo Pro": the one plan worth recommending, with the way to stay free and the way to see the rest. */
+export function Pro({ interval, setInterval, onPro, onFree, onAll }) {
+    const o = offer('dev');
+    return (_jsxs(YStack, { items: "center", gap: "$4", width: "100%", children: [_jsx(IntervalToggle, { interval: interval, onChange: setInterval, name: o.name, save: saving('dev') }), _jsxs(Card, { "aria-label": o.name, bg: "$panel", width: "100%", gap: "$0", py: 0, children: [_jsxs(YStack, { p: "$5", gap: "$3", borderBottomWidth: 1, borderBottomColor: "$borderColor", children: [_jsx(XStack, { justify: "flex-end", minH: 24, children: _jsx(Badge, { variant: "secondary", children: "Recommended" }) }), _jsx(Heading, { render: "h2", size: "$7", fontWeight: "600", color: "$ink", m: 0, children: o.name }), _jsx(Paragraph, { size: "$3", color: "$quiet", m: 0, children: o.blurb }), _jsxs(XStack, { items: "center", gap: "$2", my: "$2", children: [_jsx(SizableText, { size: "$10", fontWeight: "600", color: "$ink", children: money(unit('dev', interval)) }), _jsx(SizableText, { size: "$1", color: "$quiet", children: `USD / month\nbilled ${interval === 'annual' && yearly('dev') ? 'yearly' : 'monthly'}` })] }), _jsx(Primary, { onClick: onPro, children: `Get ${o.name} plan` }), _jsx(Button, { type: "button", variant: "secondary", size: "lg", rounded: "$10", onClick: onFree, children: "Use Hanzo for free" }), _jsx(Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "No commitment \u00B7 Cancel anytime" })] }), _jsx(Features, { items: o.features })] }), _jsx(Button, { type: "button", variant: "secondary", size: "lg", width: "100%", onClick: onAll, children: "View all plans" }), _jsx(Paragraph, { size: "$1", color: "$quiet", text: "center", m: 0, children: "Prices are in US dollars. Prices and plans are subject to change at Hanzo\u2019s discretion." })] }));
 }
 /* ----------------------------------------------------------------- team */
 export function TeamName({ api, onCreated }) {
@@ -73,15 +83,16 @@ export function TeamName({ api, onCreated }) {
     return (_jsxs(YStack, { render: _jsx("form", { onSubmit: submit, noValidate: true }), gap: "$4", items: "stretch", children: [_jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-team", children: "Team name" }), _jsx(Input, { id: "hanzo-team", name: "team", autoComplete: "organization", value: name, onChangeText: setName, maxLength: 60, height: 48, autoFocus: true })] }), wrong ? _jsx(FieldError, { children: wrong }) : null, _jsx(Primary, { type: "submit", disabled: !handle || busy, self: "flex-start", px: "$6", children: busy ? 'One moment…' : 'Continue' })] }));
 }
 /* ---------------------------------------------------------------- seats */
-export function IntervalChoice({ interval, setInterval, price }) {
-    return (_jsx(ChoiceGroup, { label: "Billing interval", flexWrap: "wrap", children: ['monthly', 'annual'].map((i) => (_jsxs(ChoiceCard, { selected: interval === i, onSelect: () => setInterval(i), flex: 1, flexBasis: 200, children: [i === 'annual' ? (_jsx(SizableText, { size: "$1", color: "$ink", self: "flex-end", bg: "$edge", px: "$2", rounded: "$1", children: `Save ${saving}%` })) : null, _jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", children: i === 'annual' ? 'Annually' : 'Monthly' }), _jsx(SizableText, { size: "$2", color: "$ink", children: price(i) })] }, i))) }));
+export function IntervalChoice({ interval, setInterval, price, save }) {
+    return (_jsx(ChoiceGroup, { label: "Billing interval", flexWrap: "wrap", children: ['monthly', 'annual'].filter((i) => i === 'monthly' || save > 0).map((i) => (_jsxs(ChoiceCard, { selected: interval === i, onSelect: () => setInterval(i), flex: 1, flexBasis: 200, children: [i === 'annual' ? (_jsx(SizableText, { size: "$1", color: "$ink", self: "flex-end", bg: "$edge", px: "$2", rounded: "$1", children: `Save ${save}%` })) : null, _jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", children: i === 'annual' ? 'Annually' : 'Monthly' }), _jsx(SizableText, { size: "$2", color: "$ink", children: price(i) })] }, i))) }));
 }
 export function Seats({ interval, setInterval, value, setValue, onContinue, onEnterprise, onAsk, }) {
     const [adjust, setAdjust] = useState(false);
     const std = value.plan === 'team_standard';
+    const premium = has('team_premium');
     const l = lines(value.plan, interval, value.seats);
     const set = (plan, seats) => setValue({ plan, seats: Math.max(MIN_SEATS, Math.min(MAX_SEATS, seats)) });
-    return (_jsxs(_Fragment, { children: [_jsx(IntervalChoice, { interval: interval, setInterval: setInterval, price: (i) => `${usd(lines(value.plan, i, value.seats).subtotal)}/${i === 'annual' ? 'year' : 'month'} + tax` }), _jsxs(Panel, { label: "Order details", children: [_jsx(Heading, { render: "h2", size: "$5", fontWeight: "600", color: "$ink", m: 0, children: "Order details" }), _jsx(Line, { label: `${value.seats} ${std ? 'Standard' : 'Premium'} seats`, note: `× ${usd(unit(value.plan, interval))} per seat /month${interval === 'annual' ? ', billed yearly' : ''}`, value: usd(l.subtotal), strong: true }), _jsxs(Button, { type: "button", variant: "secondary", size: "lg", "aria-expanded": adjust, onClick: () => setAdjust((a) => !a), children: ["Adjust seats", _jsx(ChevronDown, { size: 16 })] }), adjust ? (_jsxs(YStack, { gap: "$3", children: [_jsxs(XStack, { justify: "space-between", items: "center", gap: "$3", children: [_jsx(Line, { label: "Standard seat", note: `Dev + ${usd(SEAT_ADDON)} · ${usd(unit('team_standard', interval))}/seat/month`, value: "" }), _jsx(Stepper, { label: "Standard seats", value: std ? value.seats : 0, min: 0, max: MAX_SEATS, onChange: (n) => (n === 0 ? set('team_premium', value.seats) : set('team_standard', n)) })] }), _jsxs(XStack, { justify: "space-between", items: "center", gap: "$3", children: [_jsx(Line, { label: "Premium seat", note: `Max + ${usd(SEAT_ADDON)} · ${usd(unit('team_premium', interval))}/seat/month`, value: "" }), _jsx(Stepper, { label: "Premium seats", value: std ? 0 : value.seats, min: 0, max: MAX_SEATS, onChange: (n) => (n === 0 ? set('team_standard', value.seats) : set('team_premium', n)) })] }), value.seats >= ENTERPRISE_FROM ? (_jsxs(XStack, { items: "center", gap: "$1", children: [_jsxs(SizableText, { size: "$1", color: "$quiet", children: [ENTERPRISE_FROM, " or more?"] }), onAsk ? (_jsx(Ask, { onAsk: onAsk })) : (_jsx(Button, { type: "button", variant: "link", size: "sm", px: 0, minH: 0, onClick: onEnterprise, children: "Talk to sales" }))] })) : null] })) : null, _jsx(Line, { label: "Subtotal", value: usd(l.subtotal), strong: true }), _jsx(Line, { label: "Tax (if applicable)", value: "Calculated at payment", muted: true }), _jsx(Line, { label: "Total due today", value: `${usd(l.subtotal)} + tax`, strong: true })] }), _jsx(Primary, { onClick: onContinue, children: "Continue to payment" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(IntervalChoice, { interval: interval, setInterval: setInterval, save: saving(value.plan), price: (i) => `${usd(lines(value.plan, i, value.seats).subtotal)}/${i === 'annual' ? 'year' : 'month'} + tax` }), _jsxs(Panel, { label: "Order details", children: [_jsx(Heading, { render: "h2", size: "$5", fontWeight: "600", color: "$ink", m: 0, children: "Order details" }), _jsx(Line, { label: `${value.seats} ${std ? 'Standard' : 'Premium'} seats`, note: `× ${usd(unit(value.plan, interval))} per seat /month${interval === 'annual' ? ', billed yearly' : ''}`, value: usd(l.subtotal), strong: true }), _jsxs(Button, { type: "button", variant: "secondary", size: "lg", "aria-expanded": adjust, onClick: () => setAdjust((a) => !a), children: ["Adjust seats", _jsx(ChevronDown, { size: 16 })] }), adjust ? (_jsxs(YStack, { gap: "$3", children: [_jsxs(XStack, { justify: "space-between", items: "center", gap: "$3", children: [_jsx(Line, { label: "Standard seat", note: `${usd(unit('team_standard', interval))}/seat/month`, value: "" }), _jsx(Stepper, { label: "Standard seats", value: std ? value.seats : 0, min: 0, max: MAX_SEATS, onChange: (n) => (n === 0 && premium ? set('team_premium', value.seats) : set('team_standard', Math.max(n, MIN_SEATS))) })] }), premium ? (_jsxs(XStack, { justify: "space-between", items: "center", gap: "$3", children: [_jsx(Line, { label: "Premium seat", note: `${usd(unit('team_premium', interval))}/seat/month`, value: "" }), _jsx(Stepper, { label: "Premium seats", value: std ? 0 : value.seats, min: 0, max: MAX_SEATS, onChange: (n) => (n === 0 ? set('team_standard', value.seats) : set('team_premium', n)) })] })) : null, value.seats >= ENTERPRISE_FROM ? (_jsxs(XStack, { items: "center", gap: "$1", children: [_jsxs(SizableText, { size: "$1", color: "$quiet", children: [ENTERPRISE_FROM, " or more?"] }), onAsk ? (_jsx(Ask, { onAsk: onAsk })) : (_jsx(Button, { type: "button", variant: "link", size: "sm", px: 0, minH: 0, onClick: onEnterprise, children: "Talk to sales" }))] })) : null] })) : null, _jsx(Line, { label: "Subtotal", value: usd(l.subtotal), strong: true }), _jsx(Line, { label: "Tax (if applicable)", value: "Calculated at payment", muted: true }), _jsx(Line, { label: "Total due today", value: `${usd(l.subtotal)} + tax`, strong: true })] }), _jsx(Primary, { onClick: onContinue, children: "Continue to payment" })] }));
 }
 /* ----------------------------------------------------------- enterprise */
 export function Enterprise({ api, onSent }) {