@tribe-nest/forge 1.13.0

package/src/ui/styled/CoachingBooking.tsx

@@ -0,0 +1,605 @@
+import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { Calendar, ChevronLeft, ChevronRight, Clock, X } from "lucide-react";
+import type { BookingSlot, CoachingProduct } from "../../types/models";
+import { useCoachingBooking } from "../headless/coaching/useCoachingBooking";
+import { useForgeTheme, type ForgeTheme } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { summarizeTaxQuote } from "../format/PriceDisplay";
+import { Loading } from "./Loading";
+import { usePaymentRenderer, type PaymentRenderProps } from "../payment/ForgePaymentProvider";
+import { buttonStyle } from "./Button";
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from "../headless/dialog";
+
+export interface CoachingBookingProps {
+  /** Coaching product slug (resolves the product + drives the booking flow). */
+  slug?: string;
+  /** Trigger button label. */
+  triggerText?: string;
+  /** Format a numeric amount for display. */
+  formatAmount?: (amount: number) => string;
+  /** Optional payment renderer — falls back to a registered <ForgePaymentProvider>. */
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+  /** Stripe return URL for a PAID booking. Default `/i/coaching/:slug/finalise`. */
+  finalisePath?: (slug: string, bookingId: string) => string;
+  /** Host-owned navigation on FREE completion (e.g. router navigate). */
+  onComplete?: (info: { slug: string; bookingId: string }) => void;
+}
+
+const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+/** Append an alpha to a 6-digit hex color (mirrors frontend-shared addAlphaToHexCode). */
+const a = (hex: string, alpha: number) => hex + Math.round(alpha * 255).toString(16).padStart(2, "0");
+
+/**
+ * Themed coaching session booking — a "Book a session" trigger + modal running
+ * the three-step flow (slot → details → payment) on `useCoachingBooking`. Port
+ * of the client app's CoachingBookingModal, styled from `ForgeThemeProvider`.
+ */
+export function CoachingBooking({
+  slug,
+  triggerText = "Select Availability",
+  formatAmount,
+  renderPayment,
+  finalisePath,
+  onComplete,
+}: CoachingBookingProps) {
+  const theme = useForgeTheme();
+  const registered = usePaymentRenderer();
+  const fmt = useAmountFormatter(formatAmount);
+  const c = useCoachingBooking(slug, { finalisePath, onComplete });
+  const renderPay = renderPayment ?? registered ?? undefined;
+
+  const [open, setOpen] = useState(false);
+
+  const tryClose = (next: boolean) => {
+    if (!next && c.step !== "slot") {
+      if (typeof window !== "undefined" && !window.confirm("Are you sure you want to leave checkout?")) return;
+      // Release the held slot so it's not locked until the timer runs out.
+      void c.releaseReservation();
+    }
+    setOpen(next);
+  };
+
+  return (
+    <DialogRoot open={open} onOpenChange={tryClose}>
+      <DialogTrigger asChild>
+        <button style={triggerButtonStyle(theme)}>{triggerText}</button>
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogOverlay style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 50 }} />
+        <DialogContent
+          style={{
+            position: "fixed",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: "min(640px, calc(100vw - 24px))",
+            maxHeight: "88vh",
+            overflowY: "auto",
+            background: theme.colors.background,
+            color: theme.colors.text,
+            borderRadius: theme.cornerRadius,
+            padding: 24,
+            zIndex: 51,
+            fontFamily: theme.fontFamily,
+          }}
+          aria-describedby={undefined}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+            <DialogTitle style={{ fontSize: 18, fontWeight: 700, margin: 0 }}>
+              {c.product?.title ?? "Book a session"}
+            </DialogTitle>
+            <DialogClose asChild>
+              <button aria-label="Close" style={closeButtonStyle(theme)}>
+                <X size={18} />
+              </button>
+            </DialogClose>
+          </div>
+
+          {c.isLoading && <Loading />}
+          {!c.isLoading && !c.product && <p style={{ marginTop: 8 }}>Coaching session not found.</p>}
+          {c.product && <CoachingBookingBody c={c} product={c.product} fmt={fmt} renderPayment={renderPay} />}
+        </DialogContent>
+      </DialogPortal>
+    </DialogRoot>
+  );
+}
+
+type Booking = ReturnType<typeof useCoachingBooking>;
+
+function CoachingBookingBody({
+  c,
+  product,
+  fmt,
+  renderPayment,
+}: {
+  c: Booking;
+  product: CoachingProduct;
+  fmt: (n: number) => string;
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+}) {
+  const stepIndex = c.step === "slot" ? 0 : c.step === "details" ? 1 : 2;
+  return (
+    <div style={{ width: "100%" }}>
+      {/* Reservation hold countdown — isolated so its per-second tick re-renders
+          only itself, not the modal body (esp. the Stripe payment form). */}
+      <ReservationTimer expiresAt={c.reservationExpiresAt} onExpire={c.expireReservation} />
+      <Progress current={stepIndex} />
+      {c.step === "slot" && <SlotStep c={c} product={product} fmt={fmt} />}
+      {c.step === "details" && <DetailsStep c={c} product={product} fmt={fmt} />}
+      {c.step === "payment" && <PaymentStep c={c} product={product} fmt={fmt} renderPayment={renderPayment} />}
+    </div>
+  );
+}
+
+// ── Reservation hold countdown ────────────────────────────────────────────────
+// Owns its own per-second tick so only this component re-renders each second
+// (keeps the Stripe form in the payment step from re-mounting). Fires `onExpire`
+// exactly once when the hold runs out.
+function ReservationTimer({ expiresAt, onExpire }: { expiresAt: number | null; onExpire: () => void }) {
+  const theme = useForgeTheme();
+  const [now, setNow] = useState(() => Date.now());
+  const firedRef = useRef(false);
+  const onExpireRef = useRef(onExpire);
+  onExpireRef.current = onExpire;
+
+  useEffect(() => {
+    if (expiresAt == null) return;
+    firedRef.current = false;
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [expiresAt]);
+
+  const remaining = expiresAt == null ? 0 : Math.max(0, Math.floor((expiresAt - now) / 1000));
+
+  useEffect(() => {
+    if (expiresAt != null && remaining === 0 && !firedRef.current) {
+      firedRef.current = true;
+      onExpireRef.current();
+    }
+  }, [remaining, expiresAt]);
+
+  if (expiresAt == null) return null;
+
+  const danger = remaining <= 60;
+  const color = danger ? "#ef4444" : theme.colors.primary;
+  const mmss = `${Math.floor(remaining / 60)
+    .toString()
+    .padStart(2, "0")}:${(remaining % 60).toString().padStart(2, "0")}`;
+
+  return (
+    <div
+      style={{
+        marginBottom: 16,
+        padding: 12,
+        borderRadius: theme.cornerRadius,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        background: a(color, danger ? 0.12 : 0.06),
+        border: `1px solid ${a(color, 0.4)}`,
+      }}
+    >
+      <Clock size={16} style={{ color }} />
+      <span style={{ fontWeight: 600, fontSize: 14, color }}>Time remaining: {mmss}</span>
+    </div>
+  );
+}
+
+// ── Progress indicator (3 numbered steps) ────────────────────────────────────
+function Progress({ current }: { current: number }) {
+  const theme = useForgeTheme();
+  const steps = [0, 1, 2];
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
+      {steps.map((s, index) => (
+        <div key={s} style={{ display: "flex", alignItems: "center", flex: index < steps.length - 1 ? 1 : "0 0 auto" }}>
+          <div
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: "9999px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              fontWeight: 600,
+              border: `1px solid ${index <= current ? theme.colors.primary : a(theme.colors.primary, 0.25)}`,
+              background: index <= current ? theme.colors.primary : "transparent",
+              color: index <= current ? "#fff" : theme.colors.primary,
+            }}
+          >
+            {index + 1}
+          </div>
+          {index < steps.length - 1 && (
+            <div
+              style={{
+                flex: 1,
+                height: 2,
+                margin: "0 16px",
+                background: index < current ? theme.colors.primary : a(theme.colors.primary, 0.13),
+              }}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Step 1: week navigation + slot selection (reserve happens on Continue) ─────
+function SlotStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; fmt: (n: number) => string }) {
+  const theme = useForgeTheme();
+  const slots: BookingSlot[] = c.availability.data ?? [];
+
+  const grouped = useMemo(() => {
+    const byDay: Record<string, { slotId: string; time: string; ts: number }[]> = {};
+    for (const slot of slots) {
+      const date = new Date(slot.startTime);
+      const dateKey = date.toISOString().split("T")[0];
+      if (!dateKey) continue;
+      // Shown in the visitor's own timezone (like the client app + the confirmation).
+      const time = date.toLocaleTimeString("en-US", {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+      });
+      (byDay[dateKey] ??= []).push({ slotId: slot.id, time, ts: date.getTime() });
+    }
+    for (const key of Object.keys(byDay)) byDay[key]!.sort((x, y) => x.ts - y.ts);
+    return Object.entries(byDay).sort(([x], [y]) => x.localeCompare(y));
+  }, [slots]);
+
+  // The visitor's local timezone abbreviation (e.g. "EDT") — slots are shown in it.
+  const tzAbbr = (() => {
+    try {
+      return (
+        new Intl.DateTimeFormat("en-US", { timeZoneName: "short" })
+          .formatToParts(new Date())
+          .find((p) => p.type === "timeZoneName")?.value ?? ""
+      );
+    } catch {
+      return "";
+    }
+  })();
+
+  const weekLabel = `${c.weekStart.toLocaleDateString("en-US", { month: "short", day: "numeric" })} – ${c.weekEnd.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
+  const navButton = (disabled: boolean): CSSProperties => ({
+    padding: 8,
+    borderRadius: theme.cornerRadius,
+    border: `1px solid ${a(theme.colors.primary, 0.25)}`,
+    background: "transparent",
+    color: disabled ? a(theme.colors.text, 0.3) : theme.colors.text,
+    cursor: disabled ? "not-allowed" : "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  });
+
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 6 }}>Select Availability</h2>
+      <p style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, color: a(theme.colors.text, 0.6), margin: "0 0 16px" }}>
+        <Clock size={14} /> Times shown in your timezone{tzAbbr ? ` (${tzAbbr})` : ""}
+      </p>
+
+      {/* Week navigation */}
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
+        <span style={{ fontSize: 14, color: a(theme.colors.text, 0.6) }}>{weekLabel}</span>
+        <div style={{ display: "flex", gap: 8 }}>
+          <button aria-label="Previous week" onClick={c.goPrevWeek} disabled={!c.canGoPrevWeek} style={navButton(!c.canGoPrevWeek)}>
+            <ChevronLeft size={16} />
+          </button>
+          <button aria-label="Next week" onClick={c.goNextWeek} style={navButton(false)}>
+            <ChevronRight size={16} />
+          </button>
+        </div>
+      </div>
+
+      {c.availability.isLoading ? (
+        <Loading label="Loading available slots…" />
+      ) : grouped.length === 0 ? (
+        <p style={{ opacity: 0.7 }}>No available slots for this week.</p>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+          {grouped.map(([dateKey, daySlots]) => {
+            const date = new Date(dateKey);
+            const dayName = DAY_NAMES[date.getUTCDay()];
+            const dateString = date.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+              timeZone: "UTC",
+            });
+            return (
+              <div key={dateKey}>
+                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+                  <Calendar size={18} style={{ color: theme.colors.primary }} />
+                  <h3 style={{ fontSize: 17, fontWeight: 600, margin: 0 }}>
+                    {dayName}, {dateString}
+                  </h3>
+                </div>
+                <div className="grid grid-cols-2 md:grid-cols-4" style={{ gap: 10 }}>
+                  {daySlots.map((slot) => {
+                    const selected = slot.slotId === c.selectedSlotId;
+                    return (
+                      <button
+                        key={slot.slotId}
+                        onClick={() => c.selectSlot(slot.slotId)}
+                        disabled={c.isProcessing}
+                        style={{
+                          padding: "12px",
+                          borderRadius: theme.cornerRadius,
+                          border: `2px solid ${selected ? theme.colors.primary : a(theme.colors.primary, 0.25)}`,
+                          background: selected ? a(theme.colors.primary, 0.06) : "transparent",
+                          color: selected ? theme.colors.primary : theme.colors.text,
+                          cursor: c.isProcessing ? "not-allowed" : "pointer",
+                          fontWeight: 600,
+                          fontFamily: theme.fontFamily,
+                        }}
+                      >
+                        {slot.time}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {c.error && <p style={{ color: "#ef4444", fontSize: 14, marginTop: 12 }}>{c.error}</p>}
+      <ActionBar
+        c={c}
+        product={product}
+        fmt={fmt}
+        onNext={c.reserveSelected}
+        nextLabel={c.isProcessing ? "Reserving…" : "Continue"}
+        nextDisabled={!c.selectedSlotId || c.isProcessing}
+      />
+    </div>
+  );
+}
+
+// ── Step 2: buyer details + questionnaire ─────────────────────────────────────
+function DetailsStep({ c, product, fmt }: { c: Booking; product: CoachingProduct; fmt: (n: number) => string }) {
+  const theme = useForgeTheme();
+  const [confirmEmail, setConfirmEmail] = useState("");
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const questions = useMemo(() => product.questionnaire ?? [], [product.questionnaire]);
+
+  const onAnswer = (qid: string, value: string) => {
+    const next = { ...answers, [qid]: value };
+    setAnswers(next);
+    c.setQuestionnaire(questions.map((q) => ({ ...q, answer: next[q.id] ?? "" })));
+  };
+
+  const onContinue = () => {
+    setLocalError(null);
+    if (!c.firstName.trim() || !c.lastName.trim()) return setLocalError("Please enter your name.");
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email)) return setLocalError("Please enter a valid email.");
+    if (c.email !== confirmEmail) return setLocalError("Emails do not match.");
+    for (const q of questions) {
+      if (!q.optional && !(answers[q.id] ?? "").trim()) return setLocalError(`Please answer: ${q.question}`);
+    }
+    c.continueToPayment();
+  };
+
+  const isFree = Number(product.price) <= 0;
+
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>Contact Information</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>
+        Please provide your contact information for the booking.
+      </p>
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <div style={{ display: "flex", gap: 8 }}>
+          <input placeholder="First name" value={c.firstName} onChange={(e) => c.setFirstName(e.target.value)} style={inputStyle(theme)} />
+          <input placeholder="Last name" value={c.lastName} onChange={(e) => c.setLastName(e.target.value)} style={inputStyle(theme)} />
+        </div>
+        <div>
+          <input placeholder="Email" type="email" value={c.email} onChange={(e) => c.setEmail(e.target.value)} style={inputStyle(theme)} />
+          {c.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(c.email) && <FieldError>Please enter a valid email address</FieldError>}
+        </div>
+        <div>
+          <input placeholder="Confirm email" type="email" value={confirmEmail} onChange={(e) => setConfirmEmail(e.target.value)} style={inputStyle(theme)} />
+          {confirmEmail && c.email !== confirmEmail && <FieldError>Email addresses do not match</FieldError>}
+        </div>
+
+        {questions.map((q) => {
+          const missing = !q.optional && !(answers[q.id] ?? "").trim();
+          return (
+            <label key={q.id} style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 14 }}>
+              <span>
+                {q.question}
+                {!q.optional && <span style={{ color: "#ef4444" }}> *</span>}
+              </span>
+              {q.type === "select" && q.options && q.options.length > 0 ? (
+                <select value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)}>
+                  <option value="">Select…</option>
+                  {q.options.map((opt) => (
+                    <option key={opt} value={opt}>
+                      {opt}
+                    </option>
+                  ))}
+                </select>
+              ) : q.type === "textarea" ? (
+                <textarea value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} rows={3} style={inputStyle(theme)} />
+              ) : (
+                <input value={answers[q.id] ?? ""} onChange={(e) => onAnswer(q.id, e.target.value)} style={inputStyle(theme)} />
+              )}
+              {missing && <FieldError>This field is required</FieldError>}
+            </label>
+          );
+        })}
+
+        {(localError || c.error) && <p style={{ color: "#ef4444", fontSize: 14 }}>{localError ?? c.error}</p>}
+
+        <p style={{ fontSize: 12, color: a(theme.colors.text, 0.6), marginTop: 4 }}>
+          By continuing, you agree to receive booking confirmations and important updates about your session via email.
+        </p>
+      </div>
+      <ActionBar
+        c={c}
+        product={product}
+        fmt={fmt}
+        onBack={() => void c.releaseReservation()}
+        onNext={onContinue}
+        nextLabel={c.isProcessing ? "Processing…" : isFree ? "Confirm Booking" : "Continue to payment"}
+        nextDisabled={c.isProcessing}
+      />
+    </div>
+  );
+}
+
+function FieldError({ children }: { children: ReactNode }) {
+  return <p style={{ color: "#ef4444", fontSize: 13, marginTop: 4 }}>{children}</p>;
+}
+
+// ── Step 3: payment ───────────────────────────────────────────────────────────
+function PaymentStep({
+  c,
+  product,
+  fmt,
+  renderPayment,
+}: {
+  c: Booking;
+  product: CoachingProduct;
+  fmt: (n: number) => string;
+  renderPayment?: (props: PaymentRenderProps) => ReactNode;
+}) {
+  const theme = useForgeTheme();
+  const total = c.totalAmount ?? Number(product.price);
+  // Authoritative tax quote from start-payment — the charged total already
+  // reflects it; we only caption the breakdown (display only).
+  const taxSummary = summarizeTaxQuote(c.taxQuote);
+  return (
+    <div>
+      <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 8 }}>Payment</h2>
+      <p style={{ fontSize: 14, opacity: 0.7, marginBottom: 16 }}>Complete your purchase to secure your booking.</p>
+      <div
+        style={{
+          padding: 20,
+          border: `2px solid ${a(theme.colors.primary, 0.25)}`,
+          borderRadius: theme.cornerRadius,
+          marginBottom: 16,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ fontSize: 16 }}>Total Amount</span>
+        <span style={{ fontSize: 22, fontWeight: 700, color: theme.colors.primary, textAlign: "right" }}>
+          {fmt(total)}
+          {taxSummary && (
+            <span style={{ display: "block", fontSize: 12, fontWeight: 400, color: theme.colors.text, opacity: 0.65 }}>
+              {taxSummary.mode === "inclusive" ? taxSummary.label : `incl. ${taxSummary.formattedTax} tax`}
+            </span>
+          )}
+        </span>
+      </div>
+      {!renderPayment ? (
+        <p style={{ color: "#ef4444", fontSize: 14 }}>Payment is not configured.</p>
+      ) : c.clientSecret ? (
+        renderPayment({ clientSecret: c.clientSecret, returnUrl: c.returnUrl, amount: total, mode: "redirect" })
+      ) : (
+        <p style={{ opacity: 0.7 }}>Preparing payment…</p>
+      )}
+      <button onClick={() => c.setStep("details")} style={{ ...secondaryButtonStyle(theme), marginTop: 16 }}>
+        Back
+      </button>
+    </div>
+  );
+}
+
+// ── Shared bits ───────────────────────────────────────────────────────────────
+function ActionBar({
+  c,
+  product,
+  fmt,
+  onBack,
+  onNext,
+  nextLabel,
+  nextDisabled,
+}: {
+  c: Booking;
+  product: CoachingProduct;
+  fmt: (n: number) => string;
+  onBack?: () => void;
+  onNext?: () => void;
+  nextLabel?: string;
+  nextDisabled?: boolean;
+}) {
+  const theme = useForgeTheme();
+  const total = c.totalAmount ?? Number(product.price);
+  return (
+    <div style={{ marginTop: 24 }}>
+      <div
+        style={{
+          padding: 16,
+          border: `1px solid ${a(theme.colors.primary, 0.25)}`,
+          borderRadius: theme.cornerRadius,
+          marginBottom: 16,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ fontWeight: 600 }}>Total</span>
+        <span style={{ fontSize: 18, fontWeight: 700, color: theme.colors.primary }}>{fmt(total)}</span>
+      </div>
+      {(onBack || onNext) && (
+        <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
+          <button onClick={onBack} disabled={!onBack} style={{ ...secondaryButtonStyle(theme), opacity: onBack ? 1 : 0.4 }}>
+            Back
+          </button>
+          {onNext && (
+            <button onClick={onNext} disabled={nextDisabled} style={{ ...primaryButtonStyle(theme), opacity: nextDisabled ? 0.6 : 1 }}>
+              {nextLabel}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const triggerButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "primary", fullWidth: true });
+
+const primaryButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "primary" });
+
+const secondaryButtonStyle = (t: ForgeTheme): CSSProperties => buttonStyle(t, { variant: "outline" });
+
+const closeButtonStyle = (t: ForgeTheme): CSSProperties => ({
+  background: "transparent",
+  border: "none",
+  color: t.colors.text,
+  cursor: "pointer",
+  fontSize: 16,
+  lineHeight: 1,
+  opacity: 0.7,
+});
+
+const inputStyle = (t: ForgeTheme): CSSProperties => ({
+  width: "100%",
+  padding: 10,
+  border: `1px solid ${a(t.colors.primary, 0.25)}`,
+  borderRadius: t.cornerRadius,
+  background: t.colors.background,
+  color: t.colors.text,
+  fontFamily: t.fontFamily,
+});