@mindbill/react 0.10.0 → 0.12.0

package/README.md

@@ -16,11 +16,29 @@ import { ConnectedBillLifecycle } from "@mindbill/react";
 <ConnectedBillLifecycle
   billId={billId}
   sessionEndpoint="/api/mindbill/billing-session"
-  appearance={{ accentColor: "#32a9d6", textColor: "#203743" }}
+  appearance={{ preset: "qme-companion" }}
   onChanged={(lifecycle) => syncBillStatus(lifecycle.bill)}
 />
 ```
 
+## Appearance
+
+Choose a complete preset, then override only the tokens your design system owns. The preset applies to review, payer search, attachments, submission, status, EOR, payment, denial, resubmission, and close states.
+
+```tsx
+<ConnectedBillLifecycle
+  billId={billId}
+  appearance={{
+    preset: "orange-bright",
+    accentColor: "#ff4f0a",
+    fontFamily: "Inter, sans-serif",
+    borderRadius: "8px",
+  }}
+/>
+```
+
+Available presets are `mindbill`, `qme-companion`, and `orange-bright`. Preset names describe visual styles rather than customer or partner brands. Supported overrides include accent, accent text, background, surface, input background, text, muted text, border, font, panel radius, control radius, shadow, danger, success, and warning colors.
+
 Add one authenticated route to your app. It verifies that the signed-in user may access the bill, then mints an exact-origin, bill-scoped token. The Partner API key stays on the server.
 
 ```ts
@@ -60,7 +78,7 @@ import { ConnectedBillStatus } from "@mindbill/react";
 <ConnectedBillStatus
   billId={billId}
   sessionEndpoint="/api/mindbill/status-session"
-  appearance={{ accentColor: "#32a9d6", textColor: "#203743" }}
+  appearance={{ preset: "qme-companion" }}
 />
 ```
 
@@ -75,7 +93,7 @@ import { BillReviewForm } from "@mindbill/react";
 
 <BillReviewForm
   data={billReview}
-  appearance={{ accentColor: "#32a9d6", textColor: "#203743" }}
+  appearance={{ preset: "qme-companion" }}
   onSave={(input) => api.patch("/billing/review", input)}
   onSubmit={(input, route) => api.post("/billing/submit", { input, route })}
   onAddAttachment={(file, documentType, description) =>

package/dist/index.d.ts

@@ -2,6 +2,73 @@ import { MindBillAppearance, MindBillEventDetail, MindBillErrorDetail } from '@m
 export { MindBillAppearance, MindBillErrorDetail, MindBillEventDetail } from '@mindbill/embed';
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 
+type MindBillThemePreset = "mindbill" | "qme-companion" | "orange-bright";
+type MindBillReactAppearance = MindBillAppearance & {
+    /** A complete starting point. Individual tokens below always win. */
+    preset?: MindBillThemePreset;
+    accentTextColor?: string;
+    inputBackgroundColor?: string;
+    controlRadius?: string;
+    shadow?: string;
+    dangerColor?: string;
+    successColor?: string;
+    warningColor?: string;
+};
+declare const mindBillThemePresets: {
+    readonly mindbill: {
+        readonly accentColor: "#238dbd";
+        readonly accentTextColor: "#ffffff";
+        readonly backgroundColor: "#f3f8fa";
+        readonly surfaceColor: "#ffffff";
+        readonly inputBackgroundColor: "#ffffff";
+        readonly textColor: "#203743";
+        readonly mutedColor: "#657982";
+        readonly borderColor: "#dbe6ea";
+        readonly borderRadius: "14px";
+        readonly controlRadius: "8px";
+        readonly shadow: "0 8px 24px rgba(28,58,72,.04)";
+        readonly dangerColor: "#b63d35";
+        readonly successColor: "#217449";
+        readonly warningColor: "#8a5c17";
+    };
+    readonly "qme-companion": {
+        readonly accentColor: "#53b5dc";
+        readonly accentTextColor: "#173542";
+        readonly backgroundColor: "#f2f8fb";
+        readonly surfaceColor: "#ffffff";
+        readonly inputBackgroundColor: "#ffffff";
+        readonly textColor: "#1d3440";
+        readonly mutedColor: "#617783";
+        readonly borderColor: "#d7e5eb";
+        readonly borderRadius: "12px";
+        readonly controlRadius: "8px";
+        readonly shadow: "0 1px 2px rgba(29,52,64,.05)";
+        readonly dangerColor: "#b83f3a";
+        readonly successColor: "#21835d";
+        readonly warningColor: "#9a6418";
+        readonly fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif";
+    };
+    readonly "orange-bright": {
+        readonly accentColor: "#ff4f0a";
+        readonly accentTextColor: "#ffffff";
+        readonly backgroundColor: "#fffaf6";
+        readonly surfaceColor: "#ffffff";
+        readonly inputBackgroundColor: "#ffffff";
+        readonly textColor: "#111827";
+        readonly mutedColor: "#626a73";
+        readonly borderColor: "#e5e1dc";
+        readonly borderRadius: "8px";
+        readonly controlRadius: "6px";
+        readonly shadow: "0 4px 18px rgba(17,24,39,.06)";
+        readonly dangerColor: "#b42318";
+        readonly successColor: "#16794f";
+        readonly warningColor: "#9a5b13";
+        readonly fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif";
+    };
+};
+declare function resolveMindBillAppearance(appearance: MindBillReactAppearance | undefined): MindBillReactAppearance;
+declare function mindBillAppearanceStyle(appearance: MindBillReactAppearance | undefined, style?: CSSProperties): CSSProperties;
+
 type BillReviewDocumentType = "final_report" | "letter_of_attestation" | "proof_of_service" | "form_122" | "return_to_work_voucher" | "w9" | "medical_records" | "appeal" | "other";
 type BillReviewBillingProvider = {
     name: string;
@@ -162,7 +229,7 @@ type BillReviewFormProps = {
     onSearchClaimsAdministrators?: (query: string, claimNumber?: string) => Promise<BillReviewPayer[]>;
     className?: string;
     style?: CSSProperties;
-    appearance?: MindBillAppearance;
+    appearance?: MindBillReactAppearance;
     features?: BillReviewFeatures;
     disabled?: boolean;
 };
@@ -200,7 +267,7 @@ type BillStatusSummaryProps = {
     actions?: BillStatusAction[];
     className?: string;
     style?: CSSProperties;
-    appearance?: MindBillAppearance;
+    appearance?: MindBillReactAppearance;
 };
 type BillStatusAction = {
     id: string;
@@ -389,7 +456,7 @@ type UseBillLifecycleResult = {
 declare function createBillLifecycleClient({ billId, sessionEndpoint, getSession, apiBaseUrl, fetch: fetchOverride, }: BillLifecycleClientOptions): BillLifecycleClient;
 declare function useBillLifecycle({ billId: providedBillId, sessionEndpoint, getSession, apiBaseUrl, refreshInterval, enabled, initialData, onBillIdChange, fetch: fetchOverride, }: UseBillLifecycleOptions): UseBillLifecycleResult;
 type ConnectedBillLifecycleProps = UseBillLifecycleOptions & {
-    appearance?: MindBillAppearance;
+    appearance?: MindBillReactAppearance;
     features?: BillReviewFeatures;
     className?: string;
     style?: CSSProperties;
@@ -411,4 +478,4 @@ type MindBillWidgetProps = {
 declare function MindBillBillTimeline(props: MindBillWidgetProps): ReactElement;
 declare function MindBillBillReview(props: MindBillWidgetProps): ReactElement;
 
-export { type BillEorDocument, type BillLifecycleAction, type BillLifecycleActionId, type BillLifecycleClient, type BillLifecycleClientOptions, type BillLifecycleData, type BillLifecycleSession, type BillLifecycleSessionProvider, type BillLifecycleSessionRequest, type BillReviewAttachment, type BillReviewBillingProvider, type BillReviewClinician, type BillReviewData, type BillReviewDocumentType, type BillReviewDraft, type BillReviewFeatures, BillReviewForm, type BillReviewFormProps, type BillReviewLineItem, type BillReviewLocation, type BillReviewPayer, type BillReviewSaveInput, type BillStatusAction, type BillStatusClient, type BillStatusClientOptions, type BillStatusData, type BillStatusSession, type BillStatusSessionProvider, type BillStatusSessionRequest, BillStatusSummary, type BillStatusSummaryProps, type BillSubmissionRoute, type CloseBillInput, ConnectedBillLifecycle, type ConnectedBillLifecycleProps, ConnectedBillStatus, type ConnectedBillStatusProps, MindBillBillReview, MindBillBillTimeline, type MindBillWidgetProps, type PostBillPaymentInput, type SubmitSecondReviewInput, type UseBillLifecycleOptions, type UseBillLifecycleResult, type UseBillStatusOptions, type UseBillStatusResult, buildBillReviewSaveInput, createBillLifecycleClient, createBillStatusClient, useBillLifecycle, useBillStatus };
+export { type BillEorDocument, type BillLifecycleAction, type BillLifecycleActionId, type BillLifecycleClient, type BillLifecycleClientOptions, type BillLifecycleData, type BillLifecycleSession, type BillLifecycleSessionProvider, type BillLifecycleSessionRequest, type BillReviewAttachment, type BillReviewBillingProvider, type BillReviewClinician, type BillReviewData, type BillReviewDocumentType, type BillReviewDraft, type BillReviewFeatures, BillReviewForm, type BillReviewFormProps, type BillReviewLineItem, type BillReviewLocation, type BillReviewPayer, type BillReviewSaveInput, type BillStatusAction, type BillStatusClient, type BillStatusClientOptions, type BillStatusData, type BillStatusSession, type BillStatusSessionProvider, type BillStatusSessionRequest, BillStatusSummary, type BillStatusSummaryProps, type BillSubmissionRoute, type CloseBillInput, ConnectedBillLifecycle, type ConnectedBillLifecycleProps, ConnectedBillStatus, type ConnectedBillStatusProps, MindBillBillReview, MindBillBillTimeline, type MindBillReactAppearance, type MindBillThemePreset, type MindBillWidgetProps, type PostBillPaymentInput, type SubmitSecondReviewInput, type UseBillLifecycleOptions, type UseBillLifecycleResult, type UseBillStatusOptions, type UseBillStatusResult, buildBillReviewSaveInput, createBillLifecycleClient, createBillStatusClient, mindBillAppearanceStyle, mindBillThemePresets, resolveMindBillAppearance, useBillLifecycle, useBillStatus };

package/dist/index.js

@@ -4,6 +4,85 @@
 import "@mindbill/embed";
 import { createElement, useEffect as useEffect4, useRef as useRef4 } from "react";
 
+// src/appearance.ts
+var mindBillThemePresets = {
+  mindbill: {
+    accentColor: "#238dbd",
+    accentTextColor: "#ffffff",
+    backgroundColor: "#f3f8fa",
+    surfaceColor: "#ffffff",
+    inputBackgroundColor: "#ffffff",
+    textColor: "#203743",
+    mutedColor: "#657982",
+    borderColor: "#dbe6ea",
+    borderRadius: "14px",
+    controlRadius: "8px",
+    shadow: "0 8px 24px rgba(28,58,72,.04)",
+    dangerColor: "#b63d35",
+    successColor: "#217449",
+    warningColor: "#8a5c17"
+  },
+  "qme-companion": {
+    accentColor: "#53b5dc",
+    accentTextColor: "#173542",
+    backgroundColor: "#f2f8fb",
+    surfaceColor: "#ffffff",
+    inputBackgroundColor: "#ffffff",
+    textColor: "#1d3440",
+    mutedColor: "#617783",
+    borderColor: "#d7e5eb",
+    borderRadius: "12px",
+    controlRadius: "8px",
+    shadow: "0 1px 2px rgba(29,52,64,.05)",
+    dangerColor: "#b83f3a",
+    successColor: "#21835d",
+    warningColor: "#9a6418",
+    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
+  },
+  "orange-bright": {
+    accentColor: "#ff4f0a",
+    accentTextColor: "#ffffff",
+    backgroundColor: "#fffaf6",
+    surfaceColor: "#ffffff",
+    inputBackgroundColor: "#ffffff",
+    textColor: "#111827",
+    mutedColor: "#626a73",
+    borderColor: "#e5e1dc",
+    borderRadius: "8px",
+    controlRadius: "6px",
+    shadow: "0 4px 18px rgba(17,24,39,.06)",
+    dangerColor: "#b42318",
+    successColor: "#16794f",
+    warningColor: "#9a5b13",
+    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
+  }
+};
+function resolveMindBillAppearance(appearance) {
+  const preset = appearance?.preset ?? "mindbill";
+  return { ...mindBillThemePresets[preset], ...appearance, preset };
+}
+function mindBillAppearanceStyle(appearance, style) {
+  const resolved = resolveMindBillAppearance(appearance);
+  return {
+    "--mb-accent": resolved.accentColor,
+    "--mb-accent-contrast": resolved.accentTextColor,
+    "--mb-text": resolved.textColor,
+    "--mb-muted": resolved.mutedColor,
+    "--mb-border": resolved.borderColor,
+    "--mb-soft": resolved.backgroundColor,
+    "--mb-surface": resolved.surfaceColor,
+    "--mb-input": resolved.inputBackgroundColor,
+    "--mb-font": resolved.fontFamily,
+    "--mb-radius": resolved.borderRadius,
+    "--mb-control-radius": resolved.controlRadius,
+    "--mb-shadow": resolved.shadow,
+    "--mb-danger": resolved.dangerColor,
+    "--mb-success": resolved.successColor,
+    "--mb-warning": resolved.warningColor,
+    ...style
+  };
+}
+
 // src/native-bill-review.tsx
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -131,18 +210,6 @@ function money(value) {
     currency: "USD"
   }).format(value);
 }
-function appearanceStyle(appearance, style) {
-  return {
-    ...appearance?.accentColor ? { "--mb-accent": appearance.accentColor } : {},
-    ...appearance?.textColor ? { "--mb-text": appearance.textColor } : {},
-    ...appearance?.mutedColor ? { "--mb-muted": appearance.mutedColor } : {},
-    ...appearance?.borderColor ? { "--mb-border": appearance.borderColor } : {},
-    ...appearance?.backgroundColor ? { "--mb-soft": appearance.backgroundColor } : {},
-    ...appearance?.surfaceColor ? { "--mb-surface": appearance.surfaceColor } : {},
-    ...appearance?.fontFamily ? { "--mb-font": appearance.fontFamily } : {},
-    ...style
-  };
-}
 function Field({
   label,
   value,
@@ -448,10 +515,11 @@ function BillReviewForm({
     "form",
     {
       className: ["mb-native-review", className].filter(Boolean).join(" "),
-      style: appearanceStyle(appearance, style),
+      style: mindBillAppearanceStyle(appearance, style),
       onSubmit: handleSave,
       children: [
         /* @__PURE__ */ jsx("style", { children: NATIVE_BILL_REVIEW_STYLES }),
+        /* @__PURE__ */ jsx("style", { children: NATIVE_THEME_OVERRIDE_STYLES }),
         /* @__PURE__ */ jsxs("header", { className: "mb-native-heading", children: [
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("span", { className: "mb-native-eyebrow", children: "Billing review" }),
@@ -760,8 +828,9 @@ function BillReviewForm({
   );
 }
 function BillStatusSummary({ status, submittedAt, agingDays, updatedAt, totalCharge, totalPaid, balanceDue, actions = [], className, style, appearance }) {
-  return /* @__PURE__ */ jsxs("section", { className: ["mb-native-status", className].filter(Boolean).join(" "), style: appearanceStyle(appearance, style), children: [
+  return /* @__PURE__ */ jsxs("section", { className: ["mb-native-status", className].filter(Boolean).join(" "), style: mindBillAppearanceStyle(appearance, style), children: [
     /* @__PURE__ */ jsx("style", { children: NATIVE_BILL_REVIEW_STYLES }),
+    /* @__PURE__ */ jsx("style", { children: NATIVE_THEME_OVERRIDE_STYLES }),
     /* @__PURE__ */ jsxs("div", { className: "mb-native-status-copy", children: [
       /* @__PURE__ */ jsx("span", { className: "mb-native-eyebrow", children: "Bill status" }),
       /* @__PURE__ */ jsx("h3", { children: status.replaceAll("_", " ") }),
@@ -816,6 +885,23 @@ var NATIVE_BILL_REVIEW_STYLES = `
 .mb-native-eams{margin-top:13px!important;font-size:12px}.mb-native-eams a{color:var(--mb-accent);font-weight:750}
 @media(max-width:620px){.mb-native-review{padding:12px}.mb-native-grid.two{grid-template-columns:1fr}}
 `;
+var NATIVE_THEME_OVERRIDE_STYLES = `
+.mb-native-review,.mb-native-status{color:var(--mb-text);font-family:var(--mb-font,Inter,ui-sans-serif,system-ui,sans-serif)}
+.mb-native-review{background:var(--mb-soft)}
+.mb-native-heading>div:first-child>p,.mb-native-section>header p,.mb-native-total span,.mb-native-status-copy p,.mb-native-status dt{color:var(--mb-muted)}
+.mb-native-summary,.mb-native-section,.mb-native-status{border-color:var(--mb-border);border-radius:var(--mb-radius);background:var(--mb-surface);box-shadow:var(--mb-shadow)}
+.mb-native-field input,.mb-native-field select,.mb-native-field textarea,.mb-native-attachment-form input,.mb-native-attachment-form select{border-color:var(--mb-border);border-radius:var(--mb-control-radius);background:var(--mb-input);color:var(--mb-text)}
+.mb-native-line,.mb-native-note,.mb-native-file,.mb-native-attachment-form,.mb-native-payer-insight,.mb-native-blockers,.mb-native-message{border-radius:var(--mb-control-radius)}
+.mb-native-line,.mb-native-note,.mb-native-attachment-form,.mb-native-payer-insight{border-color:var(--mb-border);background:var(--mb-soft)}
+.mb-native-file{border-color:var(--mb-border);background:var(--mb-surface)}
+.mb-native-button.primary,.mb-native-presets button.active{border-color:var(--mb-accent);background:var(--mb-accent);color:var(--mb-accent-contrast)}
+.mb-native-button.primary:hover,.mb-native-presets button.active:hover{filter:brightness(.96)}
+.mb-native-button.secondary,.mb-native-presets button,.mb-native-chips button{border-color:var(--mb-border);border-radius:var(--mb-control-radius);background:var(--mb-input);color:var(--mb-text)}
+.mb-native-message.error{background:color-mix(in srgb,var(--mb-danger) 10%,white);color:var(--mb-danger)}
+.mb-native-message.success{background:color-mix(in srgb,var(--mb-success) 10%,white);color:var(--mb-success)}
+.mb-native-blockers{border-color:color-mix(in srgb,var(--mb-warning) 35%,white);background:color-mix(in srgb,var(--mb-warning) 8%,white);color:var(--mb-warning)}
+.mb-native-combo-list{border-color:var(--mb-border);border-radius:var(--mb-control-radius);background:var(--mb-surface);box-shadow:var(--mb-shadow)}
+`;
 
 // src/connected-bill-status.tsx
 import {
@@ -1545,18 +1631,6 @@ function dateInputValue() {
   const offset = now.getTimezoneOffset() * 6e4;
   return new Date(now.getTime() - offset).toISOString().slice(0, 10);
 }
-function appearanceStyle2(appearance, style) {
-  return {
-    ...appearance?.accentColor ? { "--mb-accent": appearance.accentColor } : {},
-    ...appearance?.textColor ? { "--mb-text": appearance.textColor } : {},
-    ...appearance?.mutedColor ? { "--mb-muted": appearance.mutedColor } : {},
-    ...appearance?.borderColor ? { "--mb-border": appearance.borderColor } : {},
-    ...appearance?.backgroundColor ? { "--mb-soft": appearance.backgroundColor } : {},
-    ...appearance?.surfaceColor ? { "--mb-surface": appearance.surfaceColor } : {},
-    ...appearance?.fontFamily ? { "--mb-font": appearance.fontFamily } : {},
-    ...style
-  };
-}
 function SupportingDocumentControl({
   disabled,
   onAdd
@@ -1664,8 +1738,9 @@ function ConnectedBillLifecycle({
     disabled: !action.enabled || lifecycle.isMutating
   }));
   const canEditAndSubmit = Boolean(has("edit_and_submit"));
-  return /* @__PURE__ */ jsxs3("section", { className: ["mb-connected-lifecycle", className].filter(Boolean).join(" "), style: appearanceStyle2(appearance, style), children: [
+  return /* @__PURE__ */ jsxs3("section", { className: ["mb-connected-lifecycle", className].filter(Boolean).join(" "), style: mindBillAppearanceStyle(appearance, style), children: [
     /* @__PURE__ */ jsx3("style", { children: CONNECTED_LIFECYCLE_STYLES }),
+    /* @__PURE__ */ jsx3("style", { children: CONNECTED_THEME_OVERRIDE_STYLES }),
     canEditAndSubmit ? /* @__PURE__ */ jsx3(
       BillReviewForm,
       {
@@ -1863,6 +1938,22 @@ function ConnectedBillLifecycle({
 var CONNECTED_LIFECYCLE_STYLES = `
 .mb-connected-lifecycle{--mb-accent:#238dbd;--mb-text:#203743;--mb-muted:#657982;--mb-border:#dbe6ea;--mb-soft:#f3f8fa;--mb-surface:#fff;display:grid;gap:14px;color:var(--mb-text);font:14px/1.45 var(--mb-font,Inter,ui-sans-serif,system-ui,sans-serif)}.mb-connected-lifecycle *{box-sizing:border-box}.mb-lifecycle-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--mb-border);border-radius:10px;background:var(--mb-surface)}.mb-lifecycle-toolbar>div:first-child{display:grid;gap:2px}.mb-lifecycle-toolbar span,.mb-lifecycle-card p,.mb-lifecycle-panel p,.mb-lifecycle-info span{color:var(--mb-muted)}.mb-lifecycle-toolbar-actions,.mb-lifecycle-panel-actions{display:flex;justify-content:flex-end;gap:8px}.mb-lifecycle-button{min-height:38px;border:1px solid var(--mb-border);border-radius:8px;background:#fff;color:var(--mb-text);cursor:pointer;font:inherit;font-weight:750;padding:8px 13px}.mb-lifecycle-button.primary{border-color:var(--mb-accent);background:var(--mb-accent);color:#fff}.mb-lifecycle-button.quiet{border-color:transparent;background:transparent;color:var(--mb-muted)}.mb-lifecycle-button.danger{border-color:#b63d35;background:#b63d35;color:#fff}.mb-lifecycle-button:disabled{cursor:not-allowed;opacity:.5}.mb-lifecycle-card,.mb-lifecycle-panel{padding:18px;border:1px solid var(--mb-border);border-radius:12px;background:var(--mb-surface)}.mb-lifecycle-card header{display:flex;align-items:start;justify-content:space-between;gap:16px}.mb-lifecycle-card h3,.mb-lifecycle-panel h3{margin:0;font-size:18px}.mb-lifecycle-card p,.mb-lifecycle-panel p{margin:3px 0 0}.mb-lifecycle-card header>span{padding:5px 8px;border-radius:999px;background:var(--mb-soft);color:var(--mb-muted);font-size:11px;font-weight:800;text-transform:uppercase}.mb-lifecycle-documents{list-style:none;margin:12px 0 0;padding:0}.mb-lifecycle-documents li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--mb-border)}.mb-lifecycle-documents li>div{display:grid}.mb-lifecycle-documents span{color:var(--mb-muted);font-size:12px}.mb-lifecycle-info{display:grid;gap:3px;padding:13px 15px;border:1px solid #cddfe5;border-radius:10px;background:var(--mb-soft)}.mb-lifecycle-panel{display:grid;gap:16px;box-shadow:0 14px 38px rgba(30,56,68,.08)}.mb-lifecycle-panel.danger{border-color:#ecc5c2}.mb-lifecycle-panel label{display:grid;gap:6px;font-size:12px;font-weight:750}.mb-lifecycle-panel label small{color:var(--mb-muted);font-size:inherit;font-weight:500}.mb-lifecycle-panel input,.mb-lifecycle-panel select,.mb-lifecycle-panel textarea,.mb-lifecycle-upload input,.mb-lifecycle-upload select{width:100%;min-height:42px;border:1px solid var(--mb-border);border-radius:8px;background:#fff;color:var(--mb-text);font:inherit;padding:9px 11px}.mb-lifecycle-panel textarea{min-height:100px;resize:vertical}.mb-lifecycle-fields{display:grid;gap:12px}.mb-lifecycle-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}.mb-lifecycle-fields .full{grid-column:1/-1}.mb-lifecycle-packet{display:grid;gap:0;margin:0;padding:0;border:0}.mb-lifecycle-packet legend{margin-bottom:7px;font-size:12px;font-weight:800}.mb-lifecycle-packet>label{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--mb-border)}.mb-lifecycle-packet>label>input{width:16px;min-height:16px}.mb-lifecycle-packet>label>span{display:grid}.mb-lifecycle-packet button{border:0;background:transparent;color:var(--mb-accent);cursor:pointer;font:inherit}.mb-lifecycle-upload{display:grid;grid-template-columns:220px 1fr auto;align-items:end;gap:10px;padding:12px;border-radius:9px;background:var(--mb-soft)}.mb-lifecycle-message,.mb-lifecycle-error,.mb-lifecycle-loading{padding:12px 14px;border-radius:9px}.mb-lifecycle-message.success{background:#edf9f2;color:#217449}.mb-lifecycle-message.error,.mb-lifecycle-error{background:#fff0ef;color:#9d3029}.mb-lifecycle-error{display:flex;align-items:center;gap:12px}.mb-lifecycle-error span{flex:1}.mb-lifecycle-error button{border:1px solid currentColor;border-radius:7px;background:transparent;color:inherit;padding:7px 10px}@media(max-width:760px){.mb-lifecycle-toolbar,.mb-lifecycle-card header{align-items:stretch;flex-direction:column}.mb-lifecycle-toolbar-actions,.mb-lifecycle-panel-actions{justify-content:start}.mb-lifecycle-fields.two,.mb-lifecycle-upload{grid-template-columns:1fr}.mb-lifecycle-documents li{align-items:start}.mb-lifecycle-packet>label{grid-template-columns:auto 1fr auto}}
 `;
+var CONNECTED_THEME_OVERRIDE_STYLES = `
+.mb-connected-lifecycle{color:var(--mb-text);font-family:var(--mb-font,Inter,ui-sans-serif,system-ui,sans-serif)}
+.mb-lifecycle-toolbar,.mb-lifecycle-card,.mb-lifecycle-panel{border-color:var(--mb-border);border-radius:var(--mb-radius);background:var(--mb-surface)}
+.mb-lifecycle-panel{box-shadow:var(--mb-shadow)}
+.mb-lifecycle-toolbar span,.mb-lifecycle-card p,.mb-lifecycle-panel p,.mb-lifecycle-info span{color:var(--mb-muted)}
+.mb-lifecycle-button{border-color:var(--mb-border);border-radius:var(--mb-control-radius);background:var(--mb-input);color:var(--mb-text)}
+.mb-lifecycle-button.primary{border-color:var(--mb-accent);background:var(--mb-accent);color:var(--mb-accent-contrast)}
+.mb-lifecycle-button.primary:hover{filter:brightness(.96)}
+.mb-lifecycle-button.danger{border-color:var(--mb-danger);background:var(--mb-danger);color:white}
+.mb-lifecycle-card header>span,.mb-lifecycle-info,.mb-lifecycle-upload{background:var(--mb-soft)}
+.mb-lifecycle-info,.mb-lifecycle-panel input,.mb-lifecycle-panel select,.mb-lifecycle-panel textarea,.mb-lifecycle-upload input,.mb-lifecycle-upload select{border-color:var(--mb-border);border-radius:var(--mb-control-radius)}
+.mb-lifecycle-panel input,.mb-lifecycle-panel select,.mb-lifecycle-panel textarea,.mb-lifecycle-upload input,.mb-lifecycle-upload select{background:var(--mb-input);color:var(--mb-text)}
+.mb-lifecycle-message,.mb-lifecycle-error,.mb-lifecycle-loading,.mb-lifecycle-upload{border-radius:var(--mb-control-radius)}
+.mb-lifecycle-message.success{background:color-mix(in srgb,var(--mb-success) 10%,white);color:var(--mb-success)}
+.mb-lifecycle-message.error,.mb-lifecycle-error{background:color-mix(in srgb,var(--mb-danger) 10%,white);color:var(--mb-danger)}
+`;
 
 // src/index.tsx
 function widget(tagName, props) {
@@ -1914,6 +2005,9 @@ export {
   buildBillReviewSaveInput,
   createBillLifecycleClient,
   createBillStatusClient,
+  mindBillAppearanceStyle,
+  mindBillThemePresets,
+  resolveMindBillAppearance,
   useBillLifecycle,
   useBillStatus
 };