@oatfi/ui 0.5.0 → 0.7.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Theme as Theme$1 } from '@mui/material/styles';
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { FC } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 
@@ -678,14 +678,17 @@ declare function UnderwritingStatus({ status, creditLimit, children, testId, }:
  * a trailing action.
  *
  * `$default` marks the selected method (accent border and tint); `$readonly` marks
- * one the borrower cannot edit here, such as an account managed through Plaid.
+ * one the borrower cannot edit here, such as an account managed through Plaid;
+ * `$edited` marks one carrying changes that have not been saved yet.
  */
-declare const MethodCard: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly"> & {
+declare const MethodCard: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly" | "$edited"> & {
     $default?: boolean;
     $readonly?: boolean;
-}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly"> & {
+    $edited?: boolean;
+}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly" | "$edited"> & {
     $default?: boolean;
     $readonly?: boolean;
+    $edited?: boolean;
 }, never>>> & string;
 declare const MethodBody: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 /** `$tight` for a card with no form fields under the header. */
@@ -699,6 +702,15 @@ declare const MethodTitle: styled_components_dist_types.IStyledComponentBase<"we
 declare const FieldsGrid: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 /** Accent-tinted note with a leading icon slot. */
 declare const Banner: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+/**
+ * Footer row for a step's actions.
+ *
+ * `space-between` is for the two-part footer a stepped flow has — Back on the
+ * left, status and the primary action on the right. A servicing screen that saves
+ * in place has no Back, and space-between then drops its lone action on the left,
+ * where it reads as the secondary half of a pair that isn't there. So a single
+ * child is pushed to the right instead; two or more keep the split.
+ */
 declare const FooterActions: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare const FooterRight: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 
@@ -733,11 +745,30 @@ interface ManualMethodValue {
     account: string;
     routing: string;
 }
+/**
+ * Where the row stands against what is stored.
+ *
+ * `saved` — on file and unchanged. `edited` — on file, with changes not yet
+ * written. A row the borrower has just added is neither: omit the prop.
+ *
+ * Only `edited` is marked. `saved` deliberately renders the same as a new row for
+ * now — the card stays quiet until the borrower actually changes something — but
+ * it remains a distinct value because the caller already tells the two apart, and
+ * marking a stored row is a change of copy here rather than a change of API.
+ *
+ * The caller owns the comparison, because only it knows what was loaded.
+ */
+type ManualMethodStatus = 'saved' | 'edited';
 interface ManualMethodCardProps {
     /** Zero-based; rendered as "Account {index + 1}". */
     index: number;
     value: ManualMethodValue;
     isDefault?: boolean;
+    /**
+     * Whether this account is already stored, and whether it has been changed
+     * since. Omit for a row the borrower has just added. Only `edited` is marked.
+     */
+    status?: ManualMethodStatus;
     /** Disables removal when this is the last remaining method. */
     trashDisabled?: boolean;
     disabled?: boolean;
@@ -755,8 +786,12 @@ interface ManualMethodCardProps {
  * Validation is the caller's: pass `accountError`/`routingError` and use
  * `onBlurField` to decide when to surface them. Onboarding shows errors on blur
  * and never while typing, which is worth keeping.
+ *
+ * A stored account is an ordinary editable field here — nothing about the inputs
+ * says the borrower is overwriting something real. `status` is what says it, and
+ * it is worth passing wherever saved accounts are rendered.
  */
-declare function ManualMethodCard({ index, value, isDefault, trashDisabled, disabled, accountError, routingError, onSelectDefault, onChangeField, onBlurField, onRemove, name, }: ManualMethodCardProps): react__default.JSX.Element;
+declare function ManualMethodCard({ index, value, isDefault, status, trashDisabled, disabled, accountError, routingError, onSelectDefault, onChangeField, onBlurField, onRemove, name, }: ManualMethodCardProps): react__default.JSX.Element;
 
 interface AchVerificationConsentProps {
     consentGiven?: boolean;
@@ -776,6 +811,28 @@ interface AchVerificationConsentProps {
  */
 declare function AchVerificationConsent({ consentGiven, onChange, disabled, actionLabel, testId, }: AchVerificationConsentProps): react__default.JSX.Element;
 
+interface EnvironmentTagProps {
+    /** The Vercel project the bundle was built for (`OATFI_ENV`), `local` under a dev server. */
+    bundleEnv?: string;
+    /** The host's `environment` attribute. */
+    apiEnv?: string;
+    /** Git ref the bundle was built from, for the tooltip. */
+    buildRef?: string;
+    /** Short commit SHA, for the tooltip. */
+    buildSha?: string;
+    size?: 'small' | 'medium';
+    /** `data-testid` on the chip. Override when several embeds share a page. */
+    testId?: string;
+}
+/**
+ * The environment chip for embedded components. Shows which API the component
+ * calls and, when it differs, which Vercel project the bundle came from:
+ * `DEV` on a match, `LOCAL | API DEV` for a local dev server, `BUNDLE DEV | API STG`
+ * (red-bordered) on a mismatch, a red `API ?` for an unrecognised API env, and
+ * nothing in production/production. See `resolveComponentEnvTag` for the rules.
+ */
+declare const EnvironmentTag: FC<EnvironmentTagProps>;
+
 interface PreviewProps {
     /** Partner branding to render the sample with. Omit for the default theme. */
     branding?: Branding;
@@ -789,5 +846,78 @@ interface PreviewProps {
  */
 declare function Preview({ branding, className }: PreviewProps): react__default.JSX.Element;
 
-export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
-export type { AchVerificationConsentProps, BadgeVariant, Branding, CollapsibleSourceProps, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, FileInputProps, FootnoteLink, FootnoteProps, LoaderProps, ManualMethodCardProps, ManualMethodValue, Option, PhoneInputProps, PlaidConnection, PlaidMethodCardProps, PlaidTileProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TermsDocumentProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography, UnderwritingDecision, UnderwritingStatusProps, UploadZoneProps, UploadedFile };
+/**
+ * Environment chip logic for embedded components. Framework-free so the
+ * React-18 bundle (`mf-remote-react`), which can't take this package, can copy
+ * it verbatim.
+ *
+ * Ported from `oatfi-app-shell/src/lib/environment.ts`. The difference: a
+ * dashboard has one environment, a component has two — the Vercel project the
+ * bundle was built for (`bundleEnv`) and the API the host points it at
+ * (`apiEnv`, the `environment` attribute). They render as one chip that splits
+ * when they disagree.
+ */
+type EnvironmentName = 'production' | 'staging' | 'qa' | 'development' | 'local';
+interface EnvironmentTagInfo {
+    /** Short chip text, e.g. "STG". */
+    readonly label: string;
+    /** Full name, for the tooltip. */
+    readonly name: string;
+    /** Chip fill. */
+    readonly fill: string;
+    /** Text color on the fill. */
+    readonly ink: string;
+}
+type ComponentEnvTag = 
+/** Bundle and API agree (or the bundle env is unset). */
+{
+    kind: 'single';
+    tag: EnvironmentTagInfo;
+}
+/** A local dev-server bundle on a non-prod API: informational, not a warning. */
+ | {
+    kind: 'local';
+    api: EnvironmentTagInfo;
+}
+/** Bundle and API disagree, or the bundle env is unrecognised (`bundleEnv: null`): a warning. */
+ | {
+    kind: 'split';
+    bundleEnv: EnvironmentName | null;
+    bundle: EnvironmentTagInfo;
+    api: EnvironmentTagInfo;
+}
+/** The API env is set but unrecognised, so the component calls the wrong API (or none). */
+ | {
+    kind: 'invalid-api';
+    apiEnv: string;
+};
+interface ComponentEnv {
+    /** The Vercel project the bundle was built for (`OATFI_ENV`), `local` under a dev server. */
+    bundleEnv?: string | null;
+    /** The host's `environment` attribute — which API the component calls. */
+    apiEnv?: string | null;
+}
+/**
+ * What the chip shows. Unset envs stay quiet; set-but-unrecognised ones are flagged:
+ * - API env unset → nothing (it means production)
+ * - API env unrecognised → `invalid-api`, an error (the host is calling the wrong API)
+ * - bundle env unset → treated as a match on the API env
+ * - bundle env unrecognised → a warning split against the API env
+ * - local bundle → informational `LOCAL | API X` on a non-prod API, a single `LOCAL` on
+ *   the local API, and a warning against prod
+ * - prod/prod → nothing
+ */
+declare const resolveComponentEnvTag: ({ bundleEnv, apiEnv, }: ComponentEnv) => ComponentEnvTag | null;
+interface ComponentBuildInfo extends ComponentEnv {
+    /** Git ref the bundle was built from, e.g. `dev12` or `v1.4.0`. */
+    ref?: string | null;
+    /** Short commit SHA. */
+    sha?: string | null;
+}
+/** One-line debug string for the console: `bundle=development api=staging ref=dev12 sha=abc1234`. */
+declare const describeComponentEnv: ({ bundleEnv, apiEnv, ref, sha }: ComponentBuildInfo) => string;
+/** Tooltip text: `Bundle: Development (dev12, abc1234) · API: Staging`. */
+declare const describeComponentEnvTitle: ({ bundleEnv, apiEnv, ref, sha, }: ComponentBuildInfo) => string;
+
+export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, EnvironmentTag, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, describeComponentEnv, describeComponentEnvTitle, mergeBranding, resolveComponentEnvTag, useTheme };
+export type { AchVerificationConsentProps, BadgeVariant, Branding, CollapsibleSourceProps, ComponentBuildInfo, ComponentEnv, ComponentEnvTag, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, EnvironmentName, EnvironmentTagInfo, EnvironmentTagProps, FileInputProps, FootnoteLink, FootnoteProps, LoaderProps, ManualMethodCardProps, ManualMethodStatus, ManualMethodValue, Option, PhoneInputProps, PlaidConnection, PlaidMethodCardProps, PlaidTileProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TermsDocumentProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography, UnderwritingDecision, UnderwritingStatusProps, UploadZoneProps, UploadedFile };

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { createTheme, ThemeProvider as ThemeProvider$2, useTheme as useTheme$2, alpha } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useMemo, useId, useRef, useState } from 'react';
-import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from 'styled-components';
+import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css } from 'styled-components';
 import { TextField, InputAdornment, IconButton, FormControl, InputLabel as InputLabel$1, Select, MenuItem, FormHelperText, Autocomplete, Box, CircularProgress } from '@mui/material';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
@@ -2100,6 +2100,17 @@ const MethodCard = styled.div`
   transition:
     border-color 0.15s ease,
     background 0.15s ease;
+
+  /**
+   * The unsaved-edit bar. It thickens the left border rather than adding one, so
+   * the padding gives back the 2px it takes and the card's contents do not shift
+   * when it appears mid-keystroke. Declared last so it wins over the shorthand
+   * above, including on a $default card that already has an accent border.
+   */
+  ${({ theme, $edited }) => $edited && css`
+      border-left: 3px solid ${theme.colors.accent};
+      padding-left: 14px;
+    `}
 `;
 const MethodBody = styled.div`
   flex: 1;
@@ -2164,6 +2175,10 @@ const FooterActions = styled.div`
   button {
     margin-top: 0;
   }
+
+  > :only-child {
+    margin-left: auto;
+  }
 `;
 const FooterRight = styled.div`
   display: flex;
@@ -2214,6 +2229,7 @@ function ManualMethodCard({
   index,
   value,
   isDefault = false,
+  status,
   trashDisabled = false,
   disabled = false,
   accountError,
@@ -2225,7 +2241,7 @@ function ManualMethodCard({
   name = "default-method"
 }) {
   const radioId = `default-${value.id}`;
-  return /* @__PURE__ */ jsxs(MethodCard, { $default: isDefault, children: [
+  return /* @__PURE__ */ jsxs(MethodCard, { $default: isDefault, $edited: status === "edited", children: [
     /* @__PURE__ */ jsx(
       RadioInput,
       {
@@ -2244,7 +2260,8 @@ function ManualMethodCard({
             "Account ",
             index + 1
           ] }),
-          isDefault && /* @__PURE__ */ jsx(Badge, { $variant: "filled", children: "Default" })
+          isDefault && /* @__PURE__ */ jsx(Badge, { $variant: "filled", children: "Default" }),
+          status === "edited" && /* @__PURE__ */ jsx(Badge, { $variant: "info", children: "Unsaved" })
         ] }),
         /* @__PURE__ */ jsx(
           IconButton$1,
@@ -2348,6 +2365,167 @@ function AchVerificationConsent({
   ] });
 }
 
+const AMBER = "#F59E0B";
+const CYAN = "#22D3EE";
+const GREY = "#9CA3AF";
+const GREEN = "#22C55E";
+const WHITE = "#FFFFFF";
+const INK = "#141312";
+const RED = "#DC2626";
+const ENVIRONMENT_MISMATCH_BORDER = RED;
+const ENVIRONMENT_TAGS = Object.freeze({
+  production: Object.freeze({ label: "PROD", name: "Production", fill: WHITE, ink: INK }),
+  staging: Object.freeze({ label: "STG", name: "Staging", fill: AMBER, ink: INK }),
+  qa: Object.freeze({ label: "QA", name: "QA", fill: CYAN, ink: INK }),
+  development: Object.freeze({ label: "DEV", name: "Development", fill: GREY, ink: INK }),
+  local: Object.freeze({ label: "LOCAL", name: "Local", fill: GREEN, ink: INK })
+});
+const UNKNOWN_ENVIRONMENT_TAG = Object.freeze({
+  label: "?",
+  name: "Unknown",
+  fill: WHITE,
+  ink: INK
+});
+const INVALID_API_TAG = Object.freeze({
+  label: "?",
+  name: "Unknown",
+  fill: RED,
+  ink: WHITE
+});
+const ALIASES = /* @__PURE__ */ new Map([
+  ["production", "production"],
+  ["prod", "production"],
+  ["staging", "staging"],
+  ["stg", "staging"],
+  ["qa", "qa"],
+  ["development", "development"],
+  ["dev", "development"],
+  ["local", "local"]
+]);
+const normalizeEnvironment = (value) => {
+  const key = value?.trim().toLowerCase();
+  return key && ALIASES.get(key) || null;
+};
+const resolveComponentEnvTag = ({
+  bundleEnv,
+  apiEnv
+}) => {
+  const apiValue = apiEnv?.trim();
+  if (!apiValue) return null;
+  const api = normalizeEnvironment(apiValue);
+  if (!api) return { kind: "invalid-api", apiEnv: apiValue };
+  const bundleValue = bundleEnv?.trim();
+  const bundle = normalizeEnvironment(bundleValue);
+  const apiTag = ENVIRONMENT_TAGS[api];
+  if (bundleValue && !bundle) {
+    return { kind: "split", bundleEnv: null, bundle: UNKNOWN_ENVIRONMENT_TAG, api: apiTag };
+  }
+  if (bundle === "local" && api !== "local" && api !== "production") {
+    return { kind: "local", api: apiTag };
+  }
+  if (bundle && bundle !== api) {
+    return { kind: "split", bundleEnv: bundle, bundle: ENVIRONMENT_TAGS[bundle], api: apiTag };
+  }
+  if (api === "production") return null;
+  return { kind: "single", tag: apiTag };
+};
+const environmentDebug = (value) => {
+  const env = normalizeEnvironment(value);
+  if (env) return env;
+  const raw = value?.trim();
+  return raw ? `unrecognised:${raw}` : "unknown";
+};
+const describeComponentEnv = ({ bundleEnv, apiEnv, ref, sha }) => [
+  `bundle=${environmentDebug(bundleEnv)}`,
+  `api=${environmentDebug(apiEnv)}`,
+  `ref=${ref || "unknown"}`,
+  `sha=${sha || "unknown"}`
+].join(" ");
+const environmentTitle = (value) => {
+  const env = normalizeEnvironment(value);
+  if (env) return ENVIRONMENT_TAGS[env].name;
+  const raw = value?.trim();
+  return raw ? `Unrecognised "${raw}"` : "Unknown";
+};
+const describeComponentEnvTitle = ({
+  bundleEnv,
+  apiEnv,
+  ref,
+  sha
+}) => {
+  const build = [ref, sha].filter(Boolean).join(", ");
+  return `Bundle: ${environmentTitle(bundleEnv)}${build ? ` (${build})` : ""} \xB7 API: ${environmentTitle(apiEnv)}`;
+};
+
+const FONT_SIZE = { small: 9, medium: 11 };
+const PADDING_X = { small: 6, medium: 8 };
+const FONT_FAMILY = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+const BORDER_WIDTH = 1.5;
+const base = (size) => ({
+  display: "inline-flex",
+  alignItems: "stretch",
+  boxSizing: "border-box",
+  fontFamily: FONT_FAMILY,
+  fontSize: FONT_SIZE[size],
+  fontWeight: 800,
+  letterSpacing: "0.1em",
+  lineHeight: 1.4,
+  whiteSpace: "nowrap",
+  borderRadius: 0
+});
+const half = (tag, label, size) => /* @__PURE__ */ jsx("span", { style: { padding: `2px ${PADDING_X[size]}px`, background: tag.fill, color: tag.ink }, children: label });
+const EnvironmentTag = ({
+  bundleEnv,
+  apiEnv,
+  buildRef,
+  buildSha,
+  size = "small",
+  testId = "oatfi-env-tag"
+}) => {
+  const result = resolveComponentEnvTag({ bundleEnv, apiEnv });
+  if (!result) return null;
+  const title = describeComponentEnvTitle({ bundleEnv, apiEnv, ref: buildRef, sha: buildSha });
+  const chip = (border, children) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "note",
+      "aria-label": `Environment: ${title}`,
+      "data-testid": testId,
+      "data-env-kind": result.kind,
+      title,
+      style: { ...base(size), border: `${BORDER_WIDTH}px solid ${border}` },
+      children
+    }
+  );
+  switch (result.kind) {
+    case "single":
+      return chip(result.tag.fill, half(result.tag, result.tag.label, size));
+    case "local":
+      return chip(
+        ENVIRONMENT_TAGS.local.fill,
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          half(ENVIRONMENT_TAGS.local, ENVIRONMENT_TAGS.local.label, size),
+          half(result.api, `API ${result.api.label}`, size)
+        ] })
+      );
+    case "invalid-api":
+      return chip(
+        INVALID_API_TAG.fill,
+        half(INVALID_API_TAG, `API ${INVALID_API_TAG.label}`, size)
+      );
+    case "split": {
+      const bundleLabel = result.bundleEnv === "local" ? "LOCAL" : `BUNDLE ${result.bundle.label}`;
+      return chip(
+        ENVIRONMENT_MISMATCH_BORDER,
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          half(result.bundle, bundleLabel, size),
+          half(result.api, `API ${result.api.label}`, size)
+        ] })
+      );
+    }
+  }
+};
+
 const PreviewCard = styled.div`
   display: flex;
   gap: 2rem;
@@ -2419,5 +2597,5 @@ function Preview({ branding, className }) {
   return /* @__PURE__ */ jsx(ThemeProvider, { branding, children: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(PreviewContent, {}) }) });
 }
 
-export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content$1 as Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
+export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content$1 as Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, EnvironmentTag, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, describeComponentEnv, describeComponentEnvTitle, mergeBranding, resolveComponentEnvTag, useTheme };
 //# sourceMappingURL=index.esm.js.map