@mindbill/react 0.28.0 → 0.28.2

package/README.md

@@ -20,6 +20,11 @@ import { ConnectedBillLifecycle } from "@mindbill/react";
 />
 ```
 
+Sandbox and live responses use the same component contract. Simulation controls
+are hidden by default, including when the connected organization is a sandbox.
+Only a dedicated developer playground should opt in with
+`sandboxControls={true}`; production applications should omit the prop.
+
 ## 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.
@@ -27,16 +32,13 @@ Choose a complete preset, then override only the tokens your design system owns.
 ```tsx
 <ConnectedBillLifecycle
   billId={billId}
-  appearance={{
-    preset: "orange-bright",
-    accentColor: "#ff4f0a",
-    fontFamily: "Inter, sans-serif",
-    borderRadius: "8px",
-  }}
+  appearance={{ preset: "midnight-cyan" }}
 />
 ```
 
-Available presets are `mindbill`, `qme-companion`, `orange-bright`, and `clinical-blue`. 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.
+`midnight-cyan` gives every billing surface a spacious pale-blue canvas, crisp white panels, midnight actions and typography, cyan-compatible accents, and pill-shaped controls. No extra CSS is required.
+
+Available presets are `mindbill`, `qme-companion`, `orange-bright`, `clinical-blue`, and `midnight-cyan`. 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 maps the signed-in user's role to billing permissions, then mints an exact-origin token for that user in your MindBill organization. The Partner API key stays on the server.
 

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { BillReviewData as BillReviewData$1, BillLifecycleDelivery, BillReviewAttachment as BillReviewAttachment$1, BrowserBillSubmissionResult, BillLifecycleSessionProvider, BillReviewPayer as BillReviewPayer$1, BrowserBillSubmissionDocument, BillRemittanceSummary, BillEorDocument, BillPaymentRecord, BillLifecycleAction, BillLifecycleData, BillLifecycleClientOptions, BillLifecycleClient } from '@mindbill/browser';
 export { BillActivityRecord, BillClaimsAdministratorContact, BillClaimsAdministratorDirectory, BillClaimsAdministratorMailingAddress, BillClaimsAdministratorPattern, BillEorDocument, BillLifecycleAction, BillLifecycleActionId, BillLifecycleClient, BillLifecycleClientOptions, BillLifecycleData, BillLifecycleDelivery, BillLifecycleSession, BillLifecycleSessionProvider, BillLifecycleSessionRequest, BillPaymentRecord, BillRemittanceSummary, BrowserBillSubmissionResult, CloseBillInput, PostBillPaymentInput, ReopenBillInput, SubmitSecondReviewInput, createBillLifecycleClient } from '@mindbill/browser';
 
-type MindBillThemePreset = "mindbill" | "qme-companion" | "orange-bright" | "clinical-blue";
+type MindBillThemePreset = "mindbill" | "qme-companion" | "orange-bright" | "clinical-blue" | "midnight-cyan";
 type MindBillReactAppearance = MindBillAppearance & {
     /** A complete starting point. Individual tokens below always win. */
     preset?: MindBillThemePreset;
@@ -84,6 +84,23 @@ declare const mindBillThemePresets: {
         readonly warningColor: "#d48806";
         readonly fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif";
     };
+    readonly "midnight-cyan": {
+        readonly accentColor: "#05092e";
+        readonly accentTextColor: "#ffffff";
+        readonly backgroundColor: "#edf6ff";
+        readonly surfaceColor: "#ffffff";
+        readonly inputBackgroundColor: "#ffffff";
+        readonly textColor: "#05092e";
+        readonly mutedColor: "#596078";
+        readonly borderColor: "#d9dae1";
+        readonly borderRadius: "0px";
+        readonly controlRadius: "999px";
+        readonly shadow: "0 1px 2px rgba(5,9,46,.04)";
+        readonly dangerColor: "#b42318";
+        readonly successColor: "#167a58";
+        readonly warningColor: "#9a6418";
+        readonly fontFamily: "Geist, Inter, ui-sans-serif, system-ui, sans-serif";
+    };
 };
 declare function resolveMindBillAppearance(appearance: MindBillReactAppearance | undefined): MindBillReactAppearance;
 declare function mindBillAppearanceStyle(appearance: MindBillReactAppearance | undefined, style?: CSSProperties): CSSProperties;
@@ -844,13 +861,19 @@ type UseBillLifecycleResult = {
 declare function useBillLifecycle({ billId: providedBillId, sessionEndpoint, getSession, apiBaseUrl, refreshInterval, enabled, fetch: fetchOverride, }: UseBillLifecycleOptions): UseBillLifecycleResult;
 type ConnectedBillLifecycleProps = UseBillLifecycleOptions & {
     appearance?: MindBillReactAppearance;
+    /**
+     * Exposes payer-response simulation controls for an explicit sandbox
+     * playground. Sandbox responses remain indistinguishable from live
+     * lifecycle responses to ordinary host applications.
+     */
+    sandboxControls?: boolean;
     className?: string;
     style?: CSSProperties;
     loadingFallback?: ReactNode;
     errorFallback?: (error: Error, retry: () => Promise<void>) => ReactNode;
     onChanged?: (data: BillLifecycleData) => void;
 };
-declare function ConnectedBillLifecycle({ appearance, className, style, loadingFallback, errorFallback, onChanged, ...options }: ConnectedBillLifecycleProps): ReactElement;
+declare function ConnectedBillLifecycle({ appearance, sandboxControls, className, style, loadingFallback, errorFallback, onChanged, ...options }: ConnectedBillLifecycleProps): ReactElement;
 
 type MindBillWidgetProps = {
     sessionToken: string;

package/dist/index.js

@@ -72,6 +72,23 @@ var mindBillThemePresets = {
     successColor: "#389e0d",
     warningColor: "#d48806",
     fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
+  },
+  "midnight-cyan": {
+    accentColor: "#05092e",
+    accentTextColor: "#ffffff",
+    backgroundColor: "#edf6ff",
+    surfaceColor: "#ffffff",
+    inputBackgroundColor: "#ffffff",
+    textColor: "#05092e",
+    mutedColor: "#596078",
+    borderColor: "#d9dae1",
+    borderRadius: "0px",
+    controlRadius: "999px",
+    shadow: "0 1px 2px rgba(5,9,46,.04)",
+    dangerColor: "#b42318",
+    successColor: "#167a58",
+    warningColor: "#9a6418",
+    fontFamily: "Geist, Inter, ui-sans-serif, system-ui, sans-serif"
   }
 };
 function resolveMindBillAppearance(appearance) {
@@ -3566,7 +3583,10 @@ function sandboxScenarios(state) {
   ];
   return [];
 }
-function ConnectedBillLifecycle({ appearance, className, style, loadingFallback, errorFallback, onChanged, ...options }) {
+function shouldShowSandboxControls(environment, enabled = false) {
+  return enabled && environment === "sandbox";
+}
+function ConnectedBillLifecycle({ appearance, sandboxControls = false, className, style, loadingFallback, errorFallback, onChanged, ...options }) {
   const lifecycle = useBillLifecycle(options);
   const { data } = lifecycle;
   const [tab, setTab] = useState6("details");
@@ -3615,7 +3635,8 @@ function ConnectedBillLifecycle({ appearance, className, style, loadingFallback,
   const viewEor = data.lifecycle.actions.find((action) => action.id === "view_eor" && action.enabled);
   const supportedActions = /* @__PURE__ */ new Set(["resubmit", "second_review", "post_payment", "close", "reopen"]);
   const actions = data.lifecycle.actions.filter((action) => action.enabled && supportedActions.has(action.id));
-  const simulations = data.environment === "sandbox" ? sandboxScenarios(data.lifecycle.state) : [];
+  const showSandboxControls = shouldShowSandboxControls(data.environment, sandboxControls);
+  const simulations = showSandboxControls ? sandboxScenarios(data.lifecycle.state) : [];
   return /* @__PURE__ */ jsxs7("section", { className: ["mb-connected-lifecycle", className].filter(Boolean).join(" "), style: mindBillAppearanceStyle(appearance, style), children: [
     /* @__PURE__ */ jsx7("style", { children: CONNECTED_LIFECYCLE_STYLES }),
     /* @__PURE__ */ jsx7(BillLifecycleProgress, { state: data.lifecycle.state, nativeStatus: data.lifecycle.nativeStatus, submittedAt: data.lifecycle.submittedAt ?? null, agingDays: data.lifecycle.agingDays ?? null, ...appearance ? { appearance } : {} }),
@@ -3639,7 +3660,7 @@ function ConnectedBillLifecycle({ appearance, className, style, loadingFallback,
     ] }),
     tab === "details" ? /* @__PURE__ */ jsxs7("div", { className: "mb-lifecycle-tabpanel", role: "tabpanel", children: [
       data.eors.length || data.payments.length || ["processed", "denied", "partially_paid"].includes(data.lifecycle.state) ? /* @__PURE__ */ jsx7(BillExplanationOfReview, { remittance: data.remittance, eors: data.eors, payments: data.payments, submittedAt: data.lifecycle.submittedAt ?? null, onOpenEor: lifecycle.openEor, ...appearance ? { appearance } : {} }) : null,
-      data.environment === "sandbox" ? /* @__PURE__ */ jsxs7("section", { className: "mb-lifecycle-simulator", "aria-label": "Sandbox lifecycle simulator", children: [
+      showSandboxControls ? /* @__PURE__ */ jsxs7("section", { className: "mb-lifecycle-simulator", "aria-label": "Sandbox lifecycle simulator", children: [
         /* @__PURE__ */ jsxs7("div", { children: [
           /* @__PURE__ */ jsx7("span", { children: "Sandbox demo controls" }),
           /* @__PURE__ */ jsx7("h3", { children: "Simulate the next payer response" }),