@growth-operations/ui-shared 1.26.0 → 1.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.26.0",
+  "version": "1.26.1",
   "description": "Shared HubSpot UI-extension modules (Home, Billing) for Growth Operations apps.",
   "license": "MIT",
   "private": false,

package/src/alerts/AlertsTab.jsx

@@ -23,6 +23,7 @@
 import React, { useState, useEffect } from "react";
 import {
   Alert,
+  Box,
   EmptyState,
   Text,
   Link,
@@ -207,7 +208,7 @@ export function AlertsTab({
   if (error) {
     return (
       <Alert title="Couldn't load alerts" variant="error">
-        {error}
+        <Box flex="auto">{error}</Box>
       </Alert>
     );
   }

package/src/billing/AutoProvisionToggle.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useReducer, useState } from "react";
-import { Alert, Button, Flex, Heading, Text, Toggle } from "@hubspot/ui-extensions";
+import { Alert, Box, Button, Flex, Heading, Text, Toggle } from "@hubspot/ui-extensions";
 import {
   AUTO_PROVISION_CONFIRM_NO,
   AUTO_PROVISION_CONFIRM_YES,
@@ -101,26 +101,28 @@ export function AutoProvisionToggle({
           cancel snaps back to idle with the flag untouched). */}
       {ui.phase === "confirming" && (
         <Alert variant="warning" title="Disable automatic credit provisioning?">
-          <Flex direction="column" gap="small">
-            <Text>{autoProvisionConfirmBody(appName)}</Text>
-            <Flex direction="row" gap="small">
-              <Button
-                variant="destructive"
-                onClick={() => {
-                  dispatch({ type: "confirm" });
-                  save(false);
-                }}
-              >
-                {AUTO_PROVISION_CONFIRM_YES}
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={() => dispatch({ type: "cancel" })}
-              >
-                {AUTO_PROVISION_CONFIRM_NO}
-              </Button>
+          <Box flex="auto">
+            <Flex direction="column" gap="small">
+              <Text>{autoProvisionConfirmBody(appName)}</Text>
+              <Flex direction="row" gap="small">
+                <Button
+                  variant="destructive"
+                  onClick={() => {
+                    dispatch({ type: "confirm" });
+                    save(false);
+                  }}
+                >
+                  {AUTO_PROVISION_CONFIRM_YES}
+                </Button>
+                <Button
+                  variant="secondary"
+                  onClick={() => dispatch({ type: "cancel" })}
+                >
+                  {AUTO_PROVISION_CONFIRM_NO}
+                </Button>
+              </Flex>
             </Flex>
-          </Flex>
+          </Box>
         </Alert>
       )}
 
@@ -129,7 +131,9 @@ export function AutoProvisionToggle({
           variant={ui.notice.variant}
           title={ui.notice.variant === "success" ? "Saved" : "Couldn't save"}
         >
-          <Text>{ui.notice.text}</Text>
+          <Box flex="auto">
+            <Text>{ui.notice.text}</Text>
+          </Box>
         </Alert>
       )}
     </Flex>

package/src/billing/BillingBanner.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text, Alert, Button } from "@hubspot/ui-extensions";
+import { Box, Flex, Text, Alert, Button } from "@hubspot/ui-extensions";
 import { resolveBillingBanner } from "../lib/creditDisplay";
 
 // Shared app-wide billing banner for the credit archetype (CreditState.
@@ -94,24 +94,26 @@ export function BillingBanner({ state, actionLabel, actionsNoun, appName, onNavi
 
   return (
     <Alert title={banner.title} variant={banner.variant}>
-      <Flex direction="column" gap="extra-small">
-        <Text>{banner.message}</Text>
-        {/* The support footer line rides the trial-state banners (the same
-            microcopy the retired Home TrialBanner rendered). */}
-        {banner.footer && <Text variant="microcopy">{banner.footer}</Text>}
-        {banner.cta?.kind === "portal" && portalStartUrl ? (
-          <Button
-            variant="secondary"
-            href={{ url: portalStartUrl, external: true }}
-          >
-            {banner.cta.label}
-          </Button>
-        ) : !suppressInAppCta && banner.cta && onNavigate ? (
-          <Button variant="secondary" onClick={() => onNavigate("/billing")}>
-            {banner.cta.kind === "portal" ? "Go to Billing →" : banner.cta.label}
-          </Button>
-        ) : null}
-      </Flex>
+      <Box flex="auto">
+        <Flex direction="column" gap="extra-small">
+          <Text>{banner.message}</Text>
+          {/* The support footer line rides the trial-state banners (the same
+              microcopy the retired Home TrialBanner rendered). */}
+          {banner.footer && <Text variant="microcopy">{banner.footer}</Text>}
+          {banner.cta?.kind === "portal" && portalStartUrl ? (
+            <Button
+              variant="secondary"
+              href={{ url: portalStartUrl, external: true }}
+            >
+              {banner.cta.label}
+            </Button>
+          ) : !suppressInAppCta && banner.cta && onNavigate ? (
+            <Button variant="secondary" onClick={() => onNavigate("/billing")}>
+              {banner.cta.kind === "portal" ? "Go to Billing →" : banner.cta.label}
+            </Button>
+          ) : null}
+        </Flex>
+      </Box>
     </Alert>
   );
 }

package/src/billing/BillingTab.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
+  Box,
   Flex,
   Heading,
   Text,
@@ -130,12 +131,14 @@ export function StatusPanel({ entitlement, plansAvailable = true, restartAvailab
             : "Add a payment method in Stripe before then so your subscription continues.";
     return (
       <Alert variant="warning">
-        <Flex direction="column" gap="extra-small">
-          <Text format={{ fontWeight: "bold" }}>{leftLabel}</Text>
-          <Text>
-            Trial ends {fmtDate(trialEnd)}. {trialCta}
-          </Text>
-        </Flex>
+        <Box flex="auto">
+          <Flex direction="column" gap="extra-small">
+            <Text format={{ fontWeight: "bold" }}>{leftLabel}</Text>
+            <Text>
+              Trial ends {fmtDate(trialEnd)}. {trialCta}
+            </Text>
+          </Flex>
+        </Box>
       </Alert>
     );
   }
@@ -149,28 +152,32 @@ export function StatusPanel({ entitlement, plansAvailable = true, restartAvailab
     if (cancel_at_period_end) {
       return (
         <Alert variant="warning">
-          <Flex direction="column" gap="extra-small">
-            <Text format={{ fontWeight: "bold" }}>
-              Your subscription is set to cancel
-            </Text>
-            <Text>
-              It stays active until {fmtDate(current_period_end)}, then your
-              data stops syncing. Changed your mind? Keep it below — no
-              re-checkout needed.
-            </Text>
-          </Flex>
+          <Box flex="auto">
+            <Flex direction="column" gap="extra-small">
+              <Text format={{ fontWeight: "bold" }}>
+                Your subscription is set to cancel
+              </Text>
+              <Text>
+                It stays active until {fmtDate(current_period_end)}, then your
+                data stops syncing. Changed your mind? Keep it below — no
+                re-checkout needed.
+              </Text>
+            </Flex>
+          </Box>
         </Alert>
       );
     }
     return (
       <Alert variant="success">
-        <Flex direction="column" gap="extra-small">
-          <Text format={{ fontWeight: "bold" }}>You're all set</Text>
-          <Text>
-            Your subscription is active. Next renewal:{" "}
-            {fmtDate(current_period_end)}.
-          </Text>
-        </Flex>
+        <Box flex="auto">
+          <Flex direction="column" gap="extra-small">
+            <Text format={{ fontWeight: "bold" }}>You're all set</Text>
+            <Text>
+              Your subscription is active. Next renewal:{" "}
+              {fmtDate(current_period_end)}.
+            </Text>
+          </Flex>
+        </Box>
       </Alert>
     );
   }
@@ -178,15 +185,17 @@ export function StatusPanel({ entitlement, plansAvailable = true, restartAvailab
   if (status === "past_due") {
     return (
       <Alert variant="error">
-        <Flex direction="column" gap="extra-small">
-          <Text format={{ fontWeight: "bold" }}>
-            Your subscription is past due
-          </Text>
-          <Text>
-            We couldn't process your latest payment. Update your payment method
-            in Stripe to avoid losing access.
-          </Text>
-        </Flex>
+        <Box flex="auto">
+          <Flex direction="column" gap="extra-small">
+            <Text format={{ fontWeight: "bold" }}>
+              Your subscription is past due
+            </Text>
+            <Text>
+              We couldn't process your latest payment. Update your payment method
+              in Stripe to avoid losing access.
+            </Text>
+          </Flex>
+        </Box>
       </Alert>
     );
   }
@@ -205,10 +214,12 @@ export function StatusPanel({ entitlement, plansAvailable = true, restartAvailab
         : "Choose a plan below to resume syncing your data.";
     return (
       <Alert variant="warning">
-        <Flex direction="column" gap="extra-small">
-          <Text format={{ fontWeight: "bold" }}>Your free trial has ended</Text>
-          <Text>{resumeCta}</Text>
-        </Flex>
+        <Box flex="auto">
+          <Flex direction="column" gap="extra-small">
+            <Text format={{ fontWeight: "bold" }}>Your free trial has ended</Text>
+            <Text>{resumeCta}</Text>
+          </Flex>
+        </Box>
       </Alert>
     );
   }
@@ -227,13 +238,15 @@ export function StatusPanel({ entitlement, plansAvailable = true, restartAvailab
         : "Restart your previous plan below in one click, or choose a different one — either way your data starts syncing again.";
     return (
       <Alert variant="warning">
-        <Flex direction="column" gap="extra-small">
-          <Text format={{ fontWeight: "bold" }}>Your subscription was canceled</Text>
-          <Text>{resumeCta}</Text>
-          {!plansAvailable && (
-            <Text variant="microcopy">{SUPPORT_FOOTER}</Text>
-          )}
-        </Flex>
+        <Box flex="auto">
+          <Flex direction="column" gap="extra-small">
+            <Text format={{ fontWeight: "bold" }}>Your subscription was canceled</Text>
+            <Text>{resumeCta}</Text>
+            {!plansAvailable && (
+              <Text variant="microcopy">{SUPPORT_FOOTER}</Text>
+            )}
+          </Flex>
+        </Box>
       </Alert>
     );
   }
@@ -258,12 +271,14 @@ export function TrialSubscriptionBilling({ context, state, appKey, openIframe =
     return (
       <Flex direction="column" gap="medium">
         <Alert title="Billing isn't set up yet" variant="info">
-          <Text>
-            Your trial and billing are still being set up for this install. Once
-            setup completes, manage your plan and payment method here. If this
-            persists, reinstall the app from the HubSpot marketplace to complete
-            sign-in.
-          </Text>
+          <Box flex="auto">
+            <Text>
+              Your trial and billing are still being set up for this install. Once
+              setup completes, manage your plan and payment method here. If this
+              persists, reinstall the app from the HubSpot marketplace to complete
+              sign-in.
+            </Text>
+          </Box>
         </Alert>
       </Flex>
     );
@@ -545,7 +560,9 @@ function InvoiceHistory({ billingBaseUrl, billingActionToken }) {
   if (status === "error") {
     return (
       <Alert title="Couldn't load invoice history" variant="warning">
-        <Text>Refresh the page to try again.</Text>
+        <Box flex="auto">
+          <Text>Refresh the page to try again.</Text>
+        </Box>
       </Alert>
     );
   }
@@ -719,10 +736,12 @@ function LegacyBilling({ state }) {
   return (
     <Flex direction="column" gap="medium">
       <Alert title="Managed through your existing subscription" variant="info">
-        <Text>
-          Your plan and payment method are billed through your existing
-          subscription. There's nothing to set up here.
-        </Text>
+        <Box flex="auto">
+          <Text>
+            Your plan and payment method are billed through your existing
+            subscription. There's nothing to set up here.
+          </Text>
+        </Box>
       </Alert>
       {manageUrl && (
         <Button href={{ url: manageUrl, external: true }} variant="secondary">
@@ -736,13 +755,15 @@ function LegacyBilling({ state }) {
 function CompedBilling() {
   return (
     <Alert variant="success">
-      <Flex direction="column" gap="extra-small">
-        <Text format={{ fontWeight: "bold" }}>Free access</Text>
-        <Text>
-          Your account has been granted complimentary access as a Growth Operations partner or
-          team member. No payment method or subscription is required.
-        </Text>
-      </Flex>
+      <Box flex="auto">
+        <Flex direction="column" gap="extra-small">
+          <Text format={{ fontWeight: "bold" }}>Free access</Text>
+          <Text>
+            Your account has been granted complimentary access as a Growth Operations partner or
+            team member. No payment method or subscription is required.
+          </Text>
+        </Flex>
+      </Box>
     </Alert>
   );
 }
@@ -770,7 +791,9 @@ export function BillingTab({ context, state, appKey, openIframe = null }) {
       <Heading>Billing</Heading>
       {!isSuperAdmin ? (
         <Alert variant="warning" title="Access restricted">
-          <Text>Billing settings are only available to super admins.</Text>
+          <Box flex="auto">
+            <Text>Billing settings are only available to super admins.</Text>
+          </Box>
         </Alert>
       ) : mode === "legacy" ? (
         <LegacyBilling state={billingState} />

package/src/billing/SubscriptionGate.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import {
   Alert,
+  Box,
   Flex,
   Link,
   LoadingSpinner,
@@ -80,15 +81,17 @@ export function SubscriptionGate({
 
   return (
     <Alert title="No active subscription" variant="error">
-      <Flex direction="column" gap="extra-small">
-        <Text>
-          Your {appName} subscription was canceled. Your data is still here —
-          manage billing to pick up where you left off.
-        </Text>
-        {billingUrl && (
-          <Link href={{ url: billingUrl, external: true }}>Go to Billing</Link>
-        )}
-      </Flex>
+      <Box flex="auto">
+        <Flex direction="column" gap="extra-small">
+          <Text>
+            Your {appName} subscription was canceled. Your data is still here —
+            manage billing to pick up where you left off.
+          </Text>
+          {billingUrl && (
+            <Link href={{ url: billingUrl, external: true }}>Go to Billing</Link>
+          )}
+        </Flex>
+      </Box>
     </Alert>
   );
 }

package/src/forms/OptionSelect.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Select, LoadingSpinner, Alert, Flex, Text, Link } from "@hubspot/ui-extensions";
+import { Box, Select, LoadingSpinner, Alert, Flex, Text, Link } from "@hubspot/ui-extensions";
 import { useToken } from "../sdk/index";
 import { getForms } from "../sdk/hubspot/forms";
 import { getLists } from "../sdk/hubspot/lists";
@@ -137,7 +137,9 @@ export function OptionSelect({
   if (error) {
     return (
       <Alert title={`Couldn't load ${label.toLowerCase()}`} variant="danger">
-        <Text>{error}</Text>
+        <Box flex="auto">
+          <Text>{error}</Text>
+        </Box>
       </Alert>
     );
   }

package/src/home/CreditMeter.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Tile, Text, ProgressBar, StatusTag, Alert } from "@hubspot/ui-extensions";
+import { Box, Flex, Tile, Text, ProgressBar, StatusTag, Alert } from "@hubspot/ui-extensions";
 import { daysUntil, fmtDate } from "../lib/format";
 import { resolveCreditMeter } from "../lib/creditDisplay";
 
@@ -142,7 +142,9 @@ export function CreditMeter({ entitlement, creditMeter, credits = null }) {
 
         {alert && (
           <Alert title={alert.title} variant={alert.variant}>
-            <Text>{alert.message}</Text>
+            <Box flex="auto">
+              <Text>{alert.message}</Text>
+            </Box>
           </Alert>
         )}
       </Flex>

package/src/home/HealthHero.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Heading, Alert, Text } from "@hubspot/ui-extensions";
+import { Box, Flex, Heading, Alert, Text } from "@hubspot/ui-extensions";
 import { humanizeStatus, statusVariant } from "../lib/format";
 
 const HEALTH_VARIANT = { healthy: "success", attention: "warning", critical: "error" };
@@ -38,12 +38,14 @@ export function HealthHero({ appName, state }) {
           title={HEALTH_TITLE[health.level] ?? "Status"}
           variant={HEALTH_VARIANT[health.level] ?? "info"}
         >
-          <Flex direction="column" gap="extra-small">
-            {(health.reasons ?? []).map((r, i) => (
-              <Text key={i}>{r}</Text>
-            ))}
-            {onRightPlan && <Text>...and you're on the right plan</Text>}
-          </Flex>
+          <Box flex="auto">
+            <Flex direction="column" gap="extra-small">
+              {(health.reasons ?? []).map((r, i) => (
+                <Text key={i}>{r}</Text>
+              ))}
+              {onRightPlan && <Text>...and you're on the right plan</Text>}
+            </Flex>
+          </Box>
         </Alert>
       </Flex>
     );
@@ -64,7 +66,9 @@ export function HealthHero({ appName, state }) {
       <Flex direction="column" gap="small">
         {name && <Heading>{name}</Heading>}
         <Alert title="Free access" variant="success">
-          <Text>Partner or team member access — no subscription required.</Text>
+          <Box flex="auto">
+            <Text>Partner or team member access — no subscription required.</Text>
+          </Box>
         </Alert>
       </Flex>
     );
@@ -84,13 +88,15 @@ export function HealthHero({ appName, state }) {
       <Flex direction="column" gap="small">
         {name && <Heading>{name}</Heading>}
         <Alert title={title} variant={variant}>
-          {(depleted || low) && (
-            <Text>
-              {depleted
-                ? "Pick a plan in Billing to keep going."
-                : "You're getting close to your limit — consider a plan in Billing."}
-            </Text>
-          )}
+          <Box flex="auto">
+            {(depleted || low) && (
+              <Text>
+                {depleted
+                  ? "Pick a plan in Billing to keep going."
+                  : "You're getting close to your limit — consider a plan in Billing."}
+              </Text>
+            )}
+          </Box>
         </Alert>
       </Flex>
     );
@@ -101,12 +107,14 @@ export function HealthHero({ appName, state }) {
     <Flex direction="column" gap="small">
       {name && <Heading>{name}</Heading>}
       <Alert title={humanizeStatus(ent.status)} variant={statusVariant(ent.status)}>
-        {ent.entitled === false && (
-          <Text>
-            This install isn't on an active plan. Open Billing to choose a plan
-            and resume syncing.
-          </Text>
-        )}
+        <Box flex="auto">
+          {ent.entitled === false && (
+            <Text>
+              This install isn't on an active plan. Open Billing to choose a plan
+              and resume syncing.
+            </Text>
+          )}
+        </Box>
       </Alert>
     </Flex>
   );

package/src/home/InstallProgress.jsx

@@ -1,5 +1,6 @@
 import React, { useRef } from "react";
 import {
+  Box,
   Flex,
   Tile,
   Text,
@@ -54,20 +55,22 @@ export function InstallProgress({ state, onRetry }) {
   if (status === "failed") {
     return (
       <Alert title="Setup didn't finish" variant="error">
-        <Flex direction="column" gap="small">
-          <Text>
-            We hit a problem finishing your install. This often clears itself on
-            the next automatic retry; if it persists, retry now or contact
-            support.
-          </Text>
-          {warnings.length > 0 &&
-            warnings.map((w, i) => <Text key={i}>• {w}</Text>)}
-          {onRetry && (
-            <Button variant="primary" onClick={onRetry}>
-              Retry setup
-            </Button>
-          )}
-        </Flex>
+        <Box flex="auto">
+          <Flex direction="column" gap="small">
+            <Text>
+              We hit a problem finishing your install. This often clears itself on
+              the next automatic retry; if it persists, retry now or contact
+              support.
+            </Text>
+            {warnings.length > 0 &&
+              warnings.map((w, i) => <Text key={i}>• {w}</Text>)}
+            {onRetry && (
+              <Button variant="primary" onClick={onRetry}>
+                Retry setup
+              </Button>
+            )}
+          </Flex>
+        </Box>
       </Alert>
     );
   }
@@ -95,11 +98,13 @@ export function InstallProgress({ state, onRetry }) {
   if (complete && warnings.length > 0) {
     return (
       <Alert title="Setup finished with warnings" variant="warning">
-        <Flex direction="column" gap="extra-small">
-          {warnings.map((w, i) => (
-            <Text key={i}>• {w}</Text>
-          ))}
-        </Flex>
+        <Box flex="auto">
+          <Flex direction="column" gap="extra-small">
+            {warnings.map((w, i) => (
+              <Text key={i}>• {w}</Text>
+            ))}
+          </Flex>
+        </Box>
       </Alert>
     );
   }

package/src/home/PlanFitBanner.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, Alert } from "@hubspot/ui-extensions";
+import { Box, Text, Alert } from "@hubspot/ui-extensions";
 import { planFitOf } from "../lib/homeBlocks";
 
 // The plan-fit savings banner: when state.plan_fit.verdict is
@@ -22,7 +22,9 @@ export function PlanFitBanner({ state }) {
 
   return (
     <Alert title="You could save on a higher plan" variant="warning">
-      <Text>{fit.text}</Text>
+      <Box flex="auto">
+        <Text>{fit.text}</Text>
+      </Box>
     </Alert>
   );
 }

package/src/sandbox/SandboxInstall.jsx

@@ -31,6 +31,7 @@
 // calm message.
 import React, { useEffect, useState } from "react";
 import {
+  Box,
   Flex,
   Tile,
   Heading,
@@ -141,13 +142,17 @@ export function SandboxInstall({
 
       {error && (
         <Alert title="Couldn't create a sandbox link" variant="warning">
-          <Text>{error}</Text>
+          <Box flex="auto">
+            <Text>{error}</Text>
+          </Box>
         </Alert>
       )}
 
       {uninstallError && (
         <Alert title="Couldn't uninstall that sandbox" variant="warning">
-          <Text>{uninstallError}</Text>
+          <Box flex="auto">
+            <Text>{uninstallError}</Text>
+          </Box>
         </Alert>
       )}
 

package/src/usage/UsageTab.jsx

@@ -13,6 +13,7 @@
 import React, { useState } from "react";
 import {
   hubspot,
+  Box,
   Flex,
   Heading,
   Text,
@@ -131,7 +132,9 @@ function UsageContent({ context, basePath, portalId, appName, days }) {
   if (error) {
     return (
       <Alert title="Couldn't load usage" variant="warning">
-        <Text>{error}</Text>
+        <Box flex="auto">
+          <Text>{error}</Text>
+        </Box>
       </Alert>
     );
   }