@aglyn/shared-ui-jsx 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/shared-ui-jsx",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,12 +25,14 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/shared-data-mdi": "1.2.0",
-    "@aglyn/shared-ui-snackstack": "1.2.0",
-    "@aglyn/shared-ui-theme": "1.2.0",
-    "@aglyn/shared-util-tools": "1.2.0",
-    "@aglyn/shared-util-vendor": "1.2.0",
+    "@aglyn/shared-data-mdi": "1.4.0",
+    "@aglyn/shared-ui-snackstack": "1.4.0",
+    "@aglyn/shared-ui-theme": "1.4.0",
+    "@aglyn/shared-util-tools": "1.4.0",
+    "@aglyn/shared-util-vendor": "1.4.0",
     "@mdi/js": "^7.4.47",
+    "@stripe/react-stripe-js": "^6.12.0",
+    "@stripe/stripe-js": "^9.17.0",
     "@swc/helpers": "0.5.23",
     "change-case": "^5.4.4",
     "clsx": "^2.1.1",

package/src/lib/components/blocked-control.component.d.ts

@@ -40,9 +40,12 @@ export interface BlockedControlProps {
  * appears — which would leave a dead button and no reason at all, the exact
  * failure this exists to stop.
  *
- * And the reason lands on the span as a real `aria-label` and `title`, not
- * only inside the Tooltip's popper. An explanation that appears only on
- * hover says nothing to a screen reader and nothing on a touch device.
+ * And the reason lands on the span as a real `aria-label`, not only inside
+ * the Tooltip's popper: an explanation that appears only on hover says
+ * nothing to a screen reader. On a touch device the Tooltip opens on a long
+ * press. Not a `title` as well: MUI's Tooltip refuses one on its child (a
+ * console error on every render of a blocked control, and two tips on
+ * hover), and the label already carries the reason.
  *
  * Both were got right once and then copied; AGL-2113 is the precedent for
  * what copies do — five quota readouts grew their own phrasing and stopped

package/src/lib/components/blocked-control.component.js

@@ -35,9 +35,12 @@ import { cloneElement, isValidElement } from "react";
  * appears — which would leave a dead button and no reason at all, the exact
  * failure this exists to stop.
  *
- * And the reason lands on the span as a real `aria-label` and `title`, not
- * only inside the Tooltip's popper. An explanation that appears only on
- * hover says nothing to a screen reader and nothing on a touch device.
+ * And the reason lands on the span as a real `aria-label`, not only inside
+ * the Tooltip's popper: an explanation that appears only on hover says
+ * nothing to a screen reader. On a touch device the Tooltip opens on a long
+ * press. Not a `title` as well: MUI's Tooltip refuses one on its child (a
+ * console error on every render of a blocked control, and two tips on
+ * hover), and the label already carries the reason.
  *
  * Both were got right once and then copied; AGL-2113 is the precedent for
  * what copies do — five quota readouts grew their own phrasing and stopped
@@ -51,7 +54,6 @@ import { cloneElement, isValidElement } from "react";
         children: /*#__PURE__*/ _jsx(Box, {
             component: "span",
             "aria-label": reason,
-            title: reason,
             sx: fullWidth ? {
                 display: 'flex',
                 width: '100%',

package/src/lib/components/blocked-control.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/blocked-control.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { Box, Tooltip } from '@mui/material'\nimport { cloneElement, isValidElement, type ReactElement } from 'react'\n\nexport interface BlockedControlProps {\n  /**\n   * Whether the viewer's standing is RESOLVED and refused. Never true while\n   * a claim is still loading: rendering the refusal in that window flashes a\n   * disabled button at everybody, including the people who may use it.\n   */\n  blocked: boolean\n  /** Why, in one sentence. Shown on hover, and to a screen reader. */\n  reason: string\n  /**\n   * A single control that accepts a `disabled` prop — MUI's Button,\n   * IconButton, Switch, TextField and friends all do.\n   */\n  children: ReactElement<{ disabled?: boolean }>\n  /**\n   * Let the wrapper take the full width, for a control that is `fullWidth`\n   * or stretched by its stack. The wrapping span is otherwise as wide as its\n   * content, which shrinks such a control the moment it is blocked.\n   */\n  fullWidth?: boolean\n}\n\n/**\n * Renders a control disabled with the reason attached, or passes it through\n * untouched.\n *\n * DISABLED WITH THE REASON, NOT HIDDEN. Both are defensible and the choice is\n * made here once rather than at every gate. Hiding leaves a reader unable to\n * see that the capability exists at all, and the commonest support act is\n * routing — \"this needs someone with the super role\" is an answer they can\n * give in one message; \"I see no such button\" turns into an investigation of\n * whether the feature shipped.\n *\n * ## Two details that are the whole reason this is shared\n *\n * The tooltip wraps a `span`, not the control: MUI does not fire pointer\n * events on a disabled button, so a tooltip attached directly to one never\n * appears — which would leave a dead button and no reason at all, the exact\n * failure this exists to stop.\n *\n * And the reason lands on the span as a real `aria-label` and `title`, not\n * only inside the Tooltip's popper. An explanation that appears only on\n * hover says nothing to a screen reader and nothing on a touch device.\n *\n * Both were got right once and then copied; AGL-2113 is the precedent for\n * what copies do — five quota readouts grew their own phrasing and stopped\n * agreeing. THIS IS NOT A SECURITY BOUNDARY: the server refuses regardless\n * of what rendered. It exists so a console stops promising what the server\n * will refuse.\n */\nexport function BlockedControl({ blocked, reason, children, fullWidth }: BlockedControlProps) {\n  if (!blocked || !isValidElement(children)) return children\n  return (\n    <Tooltip title={reason}>\n      <Box\n        component=\"span\"\n        aria-label={reason}\n        title={reason}\n        sx={fullWidth ? { display: 'flex', width: '100%', '& > *': { flex: 1 } } : { display: 'inline-flex' }}\n      >\n        {cloneElement(children, { disabled: true })}\n      </Box>\n    </Tooltip>\n  )\n}\n\nBlockedControl.displayName = 'BlockedControl'\nBlockedControl.aglyn = true\n\nexport default BlockedControl\n"],"names":["Box","Tooltip","cloneElement","isValidElement","BlockedControl","blocked","reason","children","fullWidth","title","component","aria-label","sx","display","width","flex","disabled","displayName","aglyn"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,GAAG,EAAEC,OAAO,QAAQ,gBAAe;AAC5C,SAASC,YAAY,EAAEC,cAAc,QAA2B,QAAO;AAwBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,SAASC,eAAe,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAuB;IAC1F,IAAI,CAACH,WAAW,eAACF,eAAeI,WAAW,OAAOA;IAClD,qBACE,KAACN;QAAQQ,OAAOH;kBACd,cAAA,KAACN;YACCU,WAAU;YACVC,cAAYL;YACZG,OAAOH;YACPM,IAAIJ,YAAY;gBAAEK,SAAS;gBAAQC,OAAO;gBAAQ,SAAS;oBAAEC,MAAM;gBAAE;YAAE,IAAI;gBAAEF,SAAS;YAAc;sBAEnGX,cAAAA,aAAaK,UAAU;gBAAES,UAAU;YAAK;;;AAIjD;AAEAZ,eAAea,WAAW,GAAG;AAC7Bb,eAAec,KAAK,GAAG;AAEvB,eAAed,eAAc"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/blocked-control.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { Box, Tooltip } from '@mui/material'\nimport { cloneElement, isValidElement, type ReactElement } from 'react'\n\nexport interface BlockedControlProps {\n  /**\n   * Whether the viewer's standing is RESOLVED and refused. Never true while\n   * a claim is still loading: rendering the refusal in that window flashes a\n   * disabled button at everybody, including the people who may use it.\n   */\n  blocked: boolean\n  /** Why, in one sentence. Shown on hover, and to a screen reader. */\n  reason: string\n  /**\n   * A single control that accepts a `disabled` prop — MUI's Button,\n   * IconButton, Switch, TextField and friends all do.\n   */\n  children: ReactElement<{ disabled?: boolean }>\n  /**\n   * Let the wrapper take the full width, for a control that is `fullWidth`\n   * or stretched by its stack. The wrapping span is otherwise as wide as its\n   * content, which shrinks such a control the moment it is blocked.\n   */\n  fullWidth?: boolean\n}\n\n/**\n * Renders a control disabled with the reason attached, or passes it through\n * untouched.\n *\n * DISABLED WITH THE REASON, NOT HIDDEN. Both are defensible and the choice is\n * made here once rather than at every gate. Hiding leaves a reader unable to\n * see that the capability exists at all, and the commonest support act is\n * routing — \"this needs someone with the super role\" is an answer they can\n * give in one message; \"I see no such button\" turns into an investigation of\n * whether the feature shipped.\n *\n * ## Two details that are the whole reason this is shared\n *\n * The tooltip wraps a `span`, not the control: MUI does not fire pointer\n * events on a disabled button, so a tooltip attached directly to one never\n * appears — which would leave a dead button and no reason at all, the exact\n * failure this exists to stop.\n *\n * And the reason lands on the span as a real `aria-label`, not only inside\n * the Tooltip's popper: an explanation that appears only on hover says\n * nothing to a screen reader. On a touch device the Tooltip opens on a long\n * press. Not a `title` as well: MUI's Tooltip refuses one on its child (a\n * console error on every render of a blocked control, and two tips on\n * hover), and the label already carries the reason.\n *\n * Both were got right once and then copied; AGL-2113 is the precedent for\n * what copies do — five quota readouts grew their own phrasing and stopped\n * agreeing. THIS IS NOT A SECURITY BOUNDARY: the server refuses regardless\n * of what rendered. It exists so a console stops promising what the server\n * will refuse.\n */\nexport function BlockedControl({ blocked, reason, children, fullWidth }: BlockedControlProps) {\n  if (!blocked || !isValidElement(children)) return children\n  return (\n    <Tooltip title={reason}>\n      <Box\n        component=\"span\"\n        aria-label={reason}\n        sx={fullWidth ? { display: 'flex', width: '100%', '& > *': { flex: 1 } } : { display: 'inline-flex' }}\n      >\n        {cloneElement(children, { disabled: true })}\n      </Box>\n    </Tooltip>\n  )\n}\n\nBlockedControl.displayName = 'BlockedControl'\nBlockedControl.aglyn = true\n\nexport default BlockedControl\n"],"names":["Box","Tooltip","cloneElement","isValidElement","BlockedControl","blocked","reason","children","fullWidth","title","component","aria-label","sx","display","width","flex","disabled","displayName","aglyn"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;AAEA,SAASA,GAAG,EAAEC,OAAO,QAAQ,gBAAe;AAC5C,SAASC,YAAY,EAAEC,cAAc,QAA2B,QAAO;AAwBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,eAAe,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAuB;IAC1F,IAAI,CAACH,WAAW,eAACF,eAAeI,WAAW,OAAOA;IAClD,qBACE,KAACN;QAAQQ,OAAOH;kBACd,cAAA,KAACN;YACCU,WAAU;YACVC,cAAYL;YACZM,IAAIJ,YAAY;gBAAEK,SAAS;gBAAQC,OAAO;gBAAQ,SAAS;oBAAEC,MAAM;gBAAE;YAAE,IAAI;gBAAEF,SAAS;YAAc;sBAEnGX,cAAAA,aAAaK,UAAU;gBAAES,UAAU;YAAK;;;AAIjD;AAEAZ,eAAea,WAAW,GAAG;AAC7Bb,eAAec,KAAK,GAAG;AAEvB,eAAed,eAAc"}

package/src/lib/stripe/billing-address-form.component.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/** A billing address, in the words the billing profile takes it. */
+export interface BillingAddressValue {
+    name: string;
+    line1: string;
+    line2: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    country: string;
+}
+export interface BillingAddressFormProps {
+    /** Hand back the address; the server saves it and says whether it took. */
+    onConfirmed: (address: BillingAddressValue) => Promise<void> | void;
+    onCancel: () => void;
+}
+/**
+ * A billing address in Stripe's own Address Element, in our theme, for a
+ * purchase that needs one before it can be taxed. It holds no card data, and
+ * the address goes to the same `set-billing-address` action Billing's own card
+ * uses, so the two cannot disagree.
+ */
+export default function BillingAddressFormComponent(props: BillingAddressFormProps): import("react").JSX.Element;

package/src/lib/stripe/billing-address-form.component.js

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddressElement, Elements, useElements } from "@stripe/react-stripe-js";
+import { Alert, Box, Button, Stack, useColorScheme, useTheme } from "@mui/material";
+import { useMemo, useState } from "react";
+import { getBrowserStripe } from "./browser-stripe.js";
+import { stripeAppearanceFromTheme } from "./stripe-elements-appearance.js";
+function AddressFields({ onConfirmed, onCancel }) {
+    const elements = useElements();
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const submit = async ()=>{
+        const element = elements == null ? void 0 : elements.getElement('address');
+        if (!element) return;
+        setBusy(true);
+        setError(null);
+        try {
+            var _value_address_line2;
+            const { complete, value } = await element.getValue();
+            if (!complete) {
+                setError('Enter the whole address: sales tax is calculated from it.');
+                return;
+            }
+            await onConfirmed({
+                name: value.name,
+                line1: value.address.line1,
+                line2: (_value_address_line2 = value.address.line2) != null ? _value_address_line2 : '',
+                city: value.address.city,
+                state: value.address.state,
+                postalCode: value.address.postal_code,
+                country: value.address.country
+            });
+        } catch (unused) {
+            setError('That address could not be saved. Nothing has changed.');
+        } finally{
+            setBusy(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(AddressElement, {
+                options: {
+                    mode: 'billing'
+                }
+            }),
+            error ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                onClose: ()=>setError(null),
+                children: error
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "small",
+                        disabled: !elements || busy,
+                        onClick: submit,
+                        children: busy ? 'Saving…' : 'Save address'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        disabled: busy,
+                        onClick: onCancel,
+                        children: 'Cancel'
+                    })
+                ]
+            })
+        ]
+    });
+}
+/**
+ * A billing address in Stripe's own Address Element, in our theme, for a
+ * purchase that needs one before it can be taxed. It holds no card data, and
+ * the address goes to the same `set-billing-address` action Billing's own card
+ * uses, so the two cannot disagree.
+ */ export default function BillingAddressFormComponent(props) {
+    const theme = useTheme();
+    const stripe = useMemo(()=>getBrowserStripe(), []);
+    const { mode, systemMode } = useColorScheme();
+    // The scheme is not on `theme`, which stays the same object across a flip.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const appearance = useMemo(()=>stripeAppearanceFromTheme(theme), [
+        theme,
+        mode,
+        systemMode
+    ]);
+    if (!stripe) return null;
+    return /*#__PURE__*/ _jsx(Box, {
+        children: /*#__PURE__*/ _jsx(Elements, {
+            stripe: stripe,
+            options: {
+                appearance
+            },
+            children: /*#__PURE__*/ _jsx(AddressFields, _extends({}, props))
+        })
+    });
+}
+
+//# sourceMappingURL=billing-address-form.component.js.map

package/src/lib/stripe/billing-address-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/stripe/billing-address-form.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { AddressElement, Elements, useElements } from '@stripe/react-stripe-js'\nimport { Alert, Box, Button, Stack, useColorScheme, useTheme } from '@mui/material'\nimport { useMemo, useState } from 'react'\nimport { getBrowserStripe } from './browser-stripe'\nimport { stripeAppearanceFromTheme } from './stripe-elements-appearance'\n\n/** A billing address, in the words the billing profile takes it. */\nexport interface BillingAddressValue {\n  name: string\n  line1: string\n  line2: string\n  city: string\n  state: string\n  postalCode: string\n  country: string\n}\n\nexport interface BillingAddressFormProps {\n  /** Hand back the address; the server saves it and says whether it took. */\n  onConfirmed: (address: BillingAddressValue) => Promise<void> | void\n  onCancel: () => void\n}\n\nfunction AddressFields({ onConfirmed, onCancel }: BillingAddressFormProps) {\n  const elements = useElements()\n  const [busy, setBusy] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n\n  const submit = async () => {\n    const element = elements?.getElement('address')\n    if (!element) return\n    setBusy(true)\n    setError(null)\n    try {\n      const { complete, value } = await element.getValue()\n      if (!complete) {\n        setError('Enter the whole address: sales tax is calculated from it.')\n        return\n      }\n      await onConfirmed({\n        name: value.name,\n        line1: value.address.line1,\n        line2: value.address.line2 ?? '',\n        city: value.address.city,\n        state: value.address.state,\n        postalCode: value.address.postal_code,\n        country: value.address.country,\n      })\n    } catch {\n      setError('That address could not be saved. Nothing has changed.')\n    } finally {\n      setBusy(false)\n    }\n  }\n\n  return (\n    <Stack spacing={2}>\n      <AddressElement options={{ mode: 'billing' }} />\n      {error ? (\n        <Alert severity=\"warning\" onClose={() => setError(null)}>\n          {error}\n        </Alert>\n      ) : null}\n      <Stack direction=\"row\" spacing={1}>\n        <Button variant=\"contained\" size=\"small\" disabled={!elements || busy} onClick={submit}>\n          {busy ? 'Saving…' : 'Save address'}\n        </Button>\n        <Button size=\"small\" disabled={busy} onClick={onCancel}>\n          {'Cancel'}\n        </Button>\n      </Stack>\n    </Stack>\n  )\n}\n\n/**\n * A billing address in Stripe's own Address Element, in our theme, for a\n * purchase that needs one before it can be taxed. It holds no card data, and\n * the address goes to the same `set-billing-address` action Billing's own card\n * uses, so the two cannot disagree.\n */\nexport default function BillingAddressFormComponent(props: BillingAddressFormProps) {\n  const theme = useTheme()\n  const stripe = useMemo(() => getBrowserStripe(), [])\n  const { mode, systemMode } = useColorScheme()\n  // The scheme is not on `theme`, which stays the same object across a flip.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const appearance = useMemo(() => stripeAppearanceFromTheme(theme), [theme, mode, systemMode])\n  if (!stripe) return null\n  return (\n    <Box>\n      <Elements stripe={stripe} options={{ appearance }}>\n        <AddressFields {...props} />\n      </Elements>\n    </Box>\n  )\n}\n"],"names":["AddressElement","Elements","useElements","Alert","Box","Button","Stack","useColorScheme","useTheme","useMemo","useState","getBrowserStripe","stripeAppearanceFromTheme","AddressFields","onConfirmed","onCancel","elements","busy","setBusy","error","setError","submit","element","getElement","value","complete","getValue","name","line1","address","line2","city","state","postalCode","postal_code","country","spacing","options","mode","severity","onClose","direction","variant","size","disabled","onClick","BillingAddressFormComponent","props","theme","stripe","systemMode","appearance"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;;AAEA,SAASA,cAAc,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,0BAAyB;AAC/E,SAASC,KAAK,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,gBAAe;AACnF,SAASC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AACzC,SAASC,gBAAgB,QAAQ,sBAAkB;AACnD,SAASC,yBAAyB,QAAQ,kCAA8B;AAmBxE,SAASC,cAAc,EAAEC,WAAW,EAAEC,QAAQ,EAA2B;IACvE,MAAMC,WAAWd;IACjB,MAAM,CAACe,MAAMC,QAAQ,GAAGR,SAAS;IACjC,MAAM,CAACS,OAAOC,SAAS,GAAGV,SAAwB;IAElD,MAAMW,SAAS;QACb,MAAMC,UAAUN,4BAAAA,SAAUO,UAAU,CAAC;QACrC,IAAI,CAACD,SAAS;QACdJ,QAAQ;QACRE,SAAS;QACT,IAAI;gBASOI;YART,MAAM,EAAEC,QAAQ,EAAED,KAAK,EAAE,GAAG,MAAMF,QAAQI,QAAQ;YAClD,IAAI,CAACD,UAAU;gBACbL,SAAS;gBACT;YACF;YACA,MAAMN,YAAY;gBAChBa,MAAMH,MAAMG,IAAI;gBAChBC,OAAOJ,MAAMK,OAAO,CAACD,KAAK;gBAC1BE,KAAK,GAAEN,uBAAAA,MAAMK,OAAO,CAACC,KAAK,YAAnBN,uBAAuB;gBAC9BO,MAAMP,MAAMK,OAAO,CAACE,IAAI;gBACxBC,OAAOR,MAAMK,OAAO,CAACG,KAAK;gBAC1BC,YAAYT,MAAMK,OAAO,CAACK,WAAW;gBACrCC,SAASX,MAAMK,OAAO,CAACM,OAAO;YAChC;QACF,EAAE,eAAM;YACNf,SAAS;QACX,SAAU;YACRF,QAAQ;QACV;IACF;IAEA,qBACE,MAACZ;QAAM8B,SAAS;;0BACd,KAACpC;gBAAeqC,SAAS;oBAAEC,MAAM;gBAAU;;YAC1CnB,sBACC,KAAChB;gBAAMoC,UAAS;gBAAUC,SAAS,IAAMpB,SAAS;0BAC/CD;iBAED;0BACJ,MAACb;gBAAMmC,WAAU;gBAAML,SAAS;;kCAC9B,KAAC/B;wBAAOqC,SAAQ;wBAAYC,MAAK;wBAAQC,UAAU,CAAC5B,YAAYC;wBAAM4B,SAASxB;kCAC5EJ,OAAO,YAAY;;kCAEtB,KAACZ;wBAAOsC,MAAK;wBAAQC,UAAU3B;wBAAM4B,SAAS9B;kCAC3C;;;;;;AAKX;AAEA;;;;;CAKC,GACD,eAAe,SAAS+B,4BAA4BC,KAA8B;IAChF,MAAMC,QAAQxC;IACd,MAAMyC,SAASxC,QAAQ,IAAME,oBAAoB,EAAE;IACnD,MAAM,EAAE2B,IAAI,EAAEY,UAAU,EAAE,GAAG3C;IAC7B,2EAA2E;IAC3E,uDAAuD;IACvD,MAAM4C,aAAa1C,QAAQ,IAAMG,0BAA0BoC,QAAQ;QAACA;QAAOV;QAAMY;KAAW;IAC5F,IAAI,CAACD,QAAQ,OAAO;IACpB,qBACE,KAAC7C;kBACC,cAAA,KAACH;YAASgD,QAAQA;YAAQZ,SAAS;gBAAEc;YAAW;sBAC9C,cAAA,KAACtC,4BAAkBkC;;;AAI3B"}

package/src/lib/stripe/billing-card-form.component.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Add a card WITHOUT leaving the page or the design (AGL follow-up to the
+ * native billing surface).
+ *
+ * ## Why this is not a dialog any more
+ *
+ * It used to open Stripe's hosted checkout in a modal. Being asked for
+ * payment details by an interface that has just appeared and looks like a
+ * different product is a reason to stop being a customer — and that reaction
+ * is about PRESENTATION, not about where the card data goes.
+ *
+ * Elements answers exactly that half. Each field is its own cross-origin
+ * iframe on Stripe's domain, so the guarantee is unchanged — the PAN, the CVC
+ * and the expiry are typed into Stripe's document and posted to Stripe, and
+ * never touch our DOM, our server or our logs. What changes is that the
+ * fields render inline, at our sizes, in our type, with our Save button
+ * beside them.
+ *
+ * ## The part that is easy to get wrong
+ *
+ * `appearance` must carry LITERAL colors. Elements paints inside Stripe's
+ * origin, where our CSS custom properties do not exist, so a
+ * `var(--mui-palette-…)` string resolves to nothing and the field silently
+ * falls back to Stripe's default styling. `stripeAppearanceFromTheme`
+ * resolves them against the document before they cross that boundary.
+ *
+ * ## Fulfilment still is not here
+ *
+ * Confirming a SetupIntent saves a card; it grants nothing. The default is
+ * set server-side in `finalize-card-setup`, which re-reads the intent from
+ * Stripe rather than trusting this component's word that it succeeded.
+ */
+export interface BillingCardFormProps {
+    /** SetupIntent client secret from `create-setup-intent`. */
+    clientSecret: string;
+    /** Hand back the confirmed intent id; the server verifies it from there. */
+    onConfirmed: (setupIntentId: string) => Promise<void> | void;
+    onCancel: () => void;
+}
+export default function BillingCardFormComponent({ clientSecret, onConfirmed, onCancel, }: BillingCardFormProps): import("react").JSX.Element;

package/src/lib/stripe/billing-card-form.component.js

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { Alert, Box, Button, Stack, useColorScheme, useTheme } from "@mui/material";
+import { useMemo, useState } from "react";
+import { getBrowserStripe } from "./browser-stripe.js";
+import { stripeAppearanceFromTheme } from "./stripe-elements-appearance.js";
+function CardFields({ onConfirmed, onCancel }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [busy, setBusy] = useState(false);
+    /** Stripe's own refusal for the card just submitted, or null. */ const [error, setError] = useState(null);
+    const submit = async ()=>{
+        if (!stripe || !elements) return;
+        setBusy(true);
+        setError(null);
+        try {
+            var _result_setupIntent;
+            // `redirect: 'if_required'` keeps the customer here for an ordinary
+            // card. A bank that demands 3DS still gets its own Stripe-hosted step —
+            // that one is the issuer's and is not ours to restyle or skip.
+            const result = await stripe.confirmSetup({
+                elements,
+                redirect: 'if_required'
+            });
+            if (result.error) {
+                var _result_error_message;
+                // Stripe's own sentence. It names what the issuer or the validator
+                // objected to, which is what the customer needs in order to fix it,
+                // and it stays true as the rules change.
+                setError((_result_error_message = result.error.message) != null ? _result_error_message : 'That card could not be saved.');
+                return;
+            }
+            const setupIntentId = (_result_setupIntent = result.setupIntent) == null ? void 0 : _result_setupIntent.id;
+            if (!setupIntentId) {
+                setError('That card could not be saved. Nothing has changed.');
+                return;
+            }
+            await onConfirmed(setupIntentId);
+        } catch (unused) {
+            setError('We could not reach Stripe. Nothing has changed.');
+        } finally{
+            setBusy(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsx(PaymentElement, {
+                options: {
+                    layout: 'tabs'
+                }
+            }),
+            error ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                onClose: ()=>setError(null),
+                children: error
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "small",
+                        disabled: !stripe || busy,
+                        onClick: submit,
+                        children: busy ? 'Saving…' : 'Save card'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        disabled: busy,
+                        onClick: onCancel,
+                        children: 'Cancel'
+                    })
+                ]
+            })
+        ]
+    });
+}
+export default function BillingCardFormComponent({ clientSecret, onConfirmed, onCancel }) {
+    const theme = useTheme();
+    const stripe = useMemo(()=>getBrowserStripe(), []);
+    // Rebuilt when the scheme flips, so a customer who switches to dark mode
+    // mid-form does not keep a light card form.
+    const { mode, systemMode } = useColorScheme();
+    const appearance = useMemo(()=>stripeAppearanceFromTheme(theme), // The scheme is not on `theme`, which stays the same object across a flip.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        theme,
+        mode,
+        systemMode
+    ]);
+    if (!stripe) return null;
+    return /*#__PURE__*/ _jsx(Box, {
+        children: /*#__PURE__*/ _jsx(Elements, {
+            stripe: stripe,
+            options: {
+                clientSecret,
+                appearance,
+                loader: 'always'
+            },
+            children: /*#__PURE__*/ _jsx(CardFields, {
+                onConfirmed: onConfirmed,
+                onCancel: onCancel
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=billing-card-form.component.js.map

package/src/lib/stripe/billing-card-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/stripe/billing-card-form.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport {\n  Elements,\n  PaymentElement,\n  useElements,\n  useStripe,\n} from '@stripe/react-stripe-js'\nimport { Alert, Box, Button, Stack, useColorScheme, useTheme } from '@mui/material'\nimport { useMemo, useState } from 'react'\nimport { getBrowserStripe } from './browser-stripe'\nimport { stripeAppearanceFromTheme } from './stripe-elements-appearance'\n\n/**\n * Add a card WITHOUT leaving the page or the design (AGL follow-up to the\n * native billing surface).\n *\n * ## Why this is not a dialog any more\n *\n * It used to open Stripe's hosted checkout in a modal. Being asked for\n * payment details by an interface that has just appeared and looks like a\n * different product is a reason to stop being a customer — and that reaction\n * is about PRESENTATION, not about where the card data goes.\n *\n * Elements answers exactly that half. Each field is its own cross-origin\n * iframe on Stripe's domain, so the guarantee is unchanged — the PAN, the CVC\n * and the expiry are typed into Stripe's document and posted to Stripe, and\n * never touch our DOM, our server or our logs. What changes is that the\n * fields render inline, at our sizes, in our type, with our Save button\n * beside them.\n *\n * ## The part that is easy to get wrong\n *\n * `appearance` must carry LITERAL colors. Elements paints inside Stripe's\n * origin, where our CSS custom properties do not exist, so a\n * `var(--mui-palette-…)` string resolves to nothing and the field silently\n * falls back to Stripe's default styling. `stripeAppearanceFromTheme`\n * resolves them against the document before they cross that boundary.\n *\n * ## Fulfilment still is not here\n *\n * Confirming a SetupIntent saves a card; it grants nothing. The default is\n * set server-side in `finalize-card-setup`, which re-reads the intent from\n * Stripe rather than trusting this component's word that it succeeded.\n */\n\nexport interface BillingCardFormProps {\n  /** SetupIntent client secret from `create-setup-intent`. */\n  clientSecret: string\n  /** Hand back the confirmed intent id; the server verifies it from there. */\n  onConfirmed: (setupIntentId: string) => Promise<void> | void\n  onCancel: () => void\n}\n\nfunction CardFields({ onConfirmed, onCancel }: Omit<BillingCardFormProps, 'clientSecret'>) {\n  const stripe = useStripe()\n  const elements = useElements()\n  const [busy, setBusy] = useState(false)\n  /** Stripe's own refusal for the card just submitted, or null. */\n  const [error, setError] = useState<string | null>(null)\n\n  const submit = async () => {\n    if (!stripe || !elements) return\n    setBusy(true)\n    setError(null)\n    try {\n      // `redirect: 'if_required'` keeps the customer here for an ordinary\n      // card. A bank that demands 3DS still gets its own Stripe-hosted step —\n      // that one is the issuer's and is not ours to restyle or skip.\n      const result = await stripe.confirmSetup({\n        elements,\n        redirect: 'if_required',\n      })\n      if (result.error) {\n        // Stripe's own sentence. It names what the issuer or the validator\n        // objected to, which is what the customer needs in order to fix it,\n        // and it stays true as the rules change.\n        setError(result.error.message ?? 'That card could not be saved.')\n        return\n      }\n      const setupIntentId = result.setupIntent?.id\n      if (!setupIntentId) {\n        setError('That card could not be saved. Nothing has changed.')\n        return\n      }\n      await onConfirmed(setupIntentId)\n    } catch {\n      setError('We could not reach Stripe. Nothing has changed.')\n    } finally {\n      setBusy(false)\n    }\n  }\n\n  return (\n    <Stack spacing={2}>\n      {/*\n        Stripe's fields. There is deliberately no input of ours anywhere in\n        this component — `billing-card-entry-stays-in-stripe.spec.ts` sweeps\n        for one, and that guard is what keeps \"looks like our form\" from\n        drifting into \"is our form\".\n      */}\n      <PaymentElement options={{ layout: 'tabs' }} />\n      {error ? (\n        <Alert severity=\"warning\" onClose={() => setError(null)}>\n          {error}\n        </Alert>\n      ) : null}\n      <Stack direction=\"row\" spacing={1}>\n        <Button\n          variant=\"contained\"\n          size=\"small\"\n          disabled={!stripe || busy}\n          onClick={submit}\n        >\n          {busy ? 'Saving…' : 'Save card'}\n        </Button>\n        <Button size=\"small\" disabled={busy} onClick={onCancel}>\n          {'Cancel'}\n        </Button>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default function BillingCardFormComponent({\n  clientSecret,\n  onConfirmed,\n  onCancel,\n}: BillingCardFormProps) {\n  const theme = useTheme()\n  const stripe = useMemo(() => getBrowserStripe(), [])\n  // Rebuilt when the scheme flips, so a customer who switches to dark mode\n  // mid-form does not keep a light card form.\n  const { mode, systemMode } = useColorScheme()\n  const appearance = useMemo(\n    () => stripeAppearanceFromTheme(theme),\n    // The scheme is not on `theme`, which stays the same object across a flip.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [theme, mode, systemMode],\n  )\n  if (!stripe) return null\n  return (\n    <Box>\n      {/* Stripe's own skeleton, so a slow first load is not an empty box. */}\n      <Elements stripe={stripe} options={{ clientSecret, appearance, loader: 'always' }}>\n        <CardFields onConfirmed={onConfirmed} onCancel={onCancel} />\n      </Elements>\n    </Box>\n  )\n}\n"],"names":["Elements","PaymentElement","useElements","useStripe","Alert","Box","Button","Stack","useColorScheme","useTheme","useMemo","useState","getBrowserStripe","stripeAppearanceFromTheme","CardFields","onConfirmed","onCancel","stripe","elements","busy","setBusy","error","setError","submit","result","confirmSetup","redirect","message","setupIntentId","setupIntent","id","spacing","options","layout","severity","onClose","direction","variant","size","disabled","onClick","BillingCardFormComponent","clientSecret","theme","mode","systemMode","appearance","loader"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SACEA,QAAQ,EACRC,cAAc,EACdC,WAAW,EACXC,SAAS,QACJ,0BAAyB;AAChC,SAASC,KAAK,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,gBAAe;AACnF,SAASC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AACzC,SAASC,gBAAgB,QAAQ,sBAAkB;AACnD,SAASC,yBAAyB,QAAQ,kCAA8B;AA2CxE,SAASC,WAAW,EAAEC,WAAW,EAAEC,QAAQ,EAA8C;IACvF,MAAMC,SAASd;IACf,MAAMe,WAAWhB;IACjB,MAAM,CAACiB,MAAMC,QAAQ,GAAGT,SAAS;IACjC,+DAA+D,GAC/D,MAAM,CAACU,OAAOC,SAAS,GAAGX,SAAwB;IAElD,MAAMY,SAAS;QACb,IAAI,CAACN,UAAU,CAACC,UAAU;QAC1BE,QAAQ;QACRE,SAAS;QACT,IAAI;gBAeoBE;YAdtB,oEAAoE;YACpE,wEAAwE;YACxE,+DAA+D;YAC/D,MAAMA,SAAS,MAAMP,OAAOQ,YAAY,CAAC;gBACvCP;gBACAQ,UAAU;YACZ;YACA,IAAIF,OAAOH,KAAK,EAAE;oBAIPG;gBAHT,mEAAmE;gBACnE,oEAAoE;gBACpE,yCAAyC;gBACzCF,UAASE,wBAAAA,OAAOH,KAAK,CAACM,OAAO,YAApBH,wBAAwB;gBACjC;YACF;YACA,MAAMI,iBAAgBJ,sBAAAA,OAAOK,WAAW,qBAAlBL,oBAAoBM,EAAE;YAC5C,IAAI,CAACF,eAAe;gBAClBN,SAAS;gBACT;YACF;YACA,MAAMP,YAAYa;QACpB,EAAE,eAAM;YACNN,SAAS;QACX,SAAU;YACRF,QAAQ;QACV;IACF;IAEA,qBACE,MAACb;QAAMwB,SAAS;;0BAOd,KAAC9B;gBAAe+B,SAAS;oBAAEC,QAAQ;gBAAO;;YACzCZ,sBACC,KAACjB;gBAAM8B,UAAS;gBAAUC,SAAS,IAAMb,SAAS;0BAC/CD;iBAED;0BACJ,MAACd;gBAAM6B,WAAU;gBAAML,SAAS;;kCAC9B,KAACzB;wBACC+B,SAAQ;wBACRC,MAAK;wBACLC,UAAU,CAACtB,UAAUE;wBACrBqB,SAASjB;kCAERJ,OAAO,YAAY;;kCAEtB,KAACb;wBAAOgC,MAAK;wBAAQC,UAAUpB;wBAAMqB,SAASxB;kCAC3C;;;;;;AAKX;AAEA,eAAe,SAASyB,yBAAyB,EAC/CC,YAAY,EACZ3B,WAAW,EACXC,QAAQ,EACa;IACrB,MAAM2B,QAAQlC;IACd,MAAMQ,SAASP,QAAQ,IAAME,oBAAoB,EAAE;IACnD,yEAAyE;IACzE,4CAA4C;IAC5C,MAAM,EAAEgC,IAAI,EAAEC,UAAU,EAAE,GAAGrC;IAC7B,MAAMsC,aAAapC,QACjB,IAAMG,0BAA0B8B,QAChC,2EAA2E;IAC3E,uDAAuD;IACvD;QAACA;QAAOC;QAAMC;KAAW;IAE3B,IAAI,CAAC5B,QAAQ,OAAO;IACpB,qBACE,KAACZ;kBAEC,cAAA,KAACL;YAASiB,QAAQA;YAAQe,SAAS;gBAAEU;gBAAcI;gBAAYC,QAAQ;YAAS;sBAC9E,cAAA,KAACjC;gBAAWC,aAAaA;gBAAaC,UAAUA;;;;AAIxD"}

package/src/lib/stripe/browser-stripe.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type Stripe } from '@stripe/stripe-js';
+export declare function getBrowserStripe(): Promise<Stripe | null> | null;
+/** Whether this browser bundle can render a Stripe payment surface at all. */
+export declare function browserStripeConfigured(): boolean;

package/src/lib/stripe/browser-stripe.js

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { loadStripe } from "@stripe/stripe-js";
+/**
+ * ONE browser Stripe instance for the whole console.
+ *
+ * `loadStripe` injects a script tag, so a per-component singleton means a tag
+ * per component that ever mounts. There were two; the SCA step on the billing
+ * page would have made a third.
+ *
+ * Null when `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` is unset, which every caller
+ * must handle: it is the state a self-hosted deployment with no Stripe keys is
+ * in, and rendering a payment surface against it produces an empty white box
+ * that looks like a broken form.
+ */ const publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
+let stripePromise = null;
+export function getBrowserStripe() {
+    if (!publishableKey) return null;
+    if (!stripePromise) stripePromise = loadStripe(publishableKey);
+    return stripePromise;
+}
+/** Whether this browser bundle can render a Stripe payment surface at all. */ export function browserStripeConfigured() {
+    return Boolean(publishableKey);
+}
+
+//# sourceMappingURL=browser-stripe.js.map

package/src/lib/stripe/browser-stripe.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/stripe/browser-stripe.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { loadStripe, type Stripe } from '@stripe/stripe-js'\n\n/**\n * ONE browser Stripe instance for the whole console.\n *\n * `loadStripe` injects a script tag, so a per-component singleton means a tag\n * per component that ever mounts. There were two; the SCA step on the billing\n * page would have made a third.\n *\n * Null when `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` is unset, which every caller\n * must handle: it is the state a self-hosted deployment with no Stripe keys is\n * in, and rendering a payment surface against it produces an empty white box\n * that looks like a broken form.\n */\nconst publishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY\nlet stripePromise: Promise<Stripe | null> | null = null\n\nexport function getBrowserStripe(): Promise<Stripe | null> | null {\n  if (!publishableKey) return null\n  if (!stripePromise) stripePromise = loadStripe(publishableKey)\n  return stripePromise\n}\n\n/** Whether this browser bundle can render a Stripe payment surface at all. */\nexport function browserStripeConfigured(): boolean {\n  return Boolean(publishableKey)\n}\n"],"names":["loadStripe","publishableKey","process","env","NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY","stripePromise","getBrowserStripe","browserStripeConfigured","Boolean"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,UAAU,QAAqB,oBAAmB;AAE3D;;;;;;;;;;;CAWC,GACD,MAAMC,iBAAiBC,QAAQC,GAAG,CAACC,kCAAkC;AACrE,IAAIC,gBAA+C;AAEnD,OAAO,SAASC;IACd,IAAI,CAACL,gBAAgB,OAAO;IAC5B,IAAI,CAACI,eAAeA,gBAAgBL,WAAWC;IAC/C,OAAOI;AACT;AAEA,4EAA4E,GAC5E,OAAO,SAASE;IACd,OAAOC,QAAQP;AACjB"}

package/src/lib/stripe/lazy-stripe.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * STRIPE, ONLY ONCE SOMEONE IS PAYING (AGL-4049).
+ *
+ * Importing `@stripe/stripe-js` injects the Stripe script by itself, so a
+ * surface that might take a payment must not import it until it does: on a
+ * page nobody is buying from, it is the largest thing on the page
+ * (`stripe-stays-lazy.spec.ts`).
+ *
+ * The boundary lives HERE, inside this library, rather than at each caller.
+ * A `lazy(() => import('@aglyn/shared-ui-jsx/…'))` in a plugin is a dynamic
+ * edge between two projects, and one such edge makes every ordinary import of
+ * this library across the console a lint error. This file is the static import
+ * they take instead, and it imports nothing of Stripe's.
+ */
+/** The billing card form, loaded when it is first shown. */
+export declare const LazyBillingCardForm: import("react").LazyExoticComponent<typeof import("./billing-card-form.component").default>;
+/** The billing address form, loaded when it is first shown. */
+export declare const LazyBillingAddressForm: import("react").LazyExoticComponent<typeof import("./billing-address-form.component").default>;
+/**
+ * Runs the bank's own step for a payment sitting at `requires_action`.
+ *
+ * Resolves to Stripe's refusal, or `null` once the bank is satisfied. Never
+ * throws: a library that will not load is a refusal like any other, and the
+ * payment it stopped has not been charged.
+ */
+export declare function handleStripeNextAction(clientSecret: string): Promise<string | null>;

package/src/lib/stripe/lazy-stripe.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { lazy } from "react";
+/**
+ * STRIPE, ONLY ONCE SOMEONE IS PAYING (AGL-4049).
+ *
+ * Importing `@stripe/stripe-js` injects the Stripe script by itself, so a
+ * surface that might take a payment must not import it until it does: on a
+ * page nobody is buying from, it is the largest thing on the page
+ * (`stripe-stays-lazy.spec.ts`).
+ *
+ * The boundary lives HERE, inside this library, rather than at each caller.
+ * A `lazy(() => import('@aglyn/shared-ui-jsx/…'))` in a plugin is a dynamic
+ * edge between two projects, and one such edge makes every ordinary import of
+ * this library across the console a lint error. This file is the static import
+ * they take instead, and it imports nothing of Stripe's.
+ */ /** The billing card form, loaded when it is first shown. */ export const LazyBillingCardForm = /*#__PURE__*/ lazy(()=>import("./billing-card-form.component.js"));
+/** The billing address form, loaded when it is first shown. */ export const LazyBillingAddressForm = /*#__PURE__*/ lazy(()=>import("./billing-address-form.component.js"));
+/**
+ * Runs the bank's own step for a payment sitting at `requires_action`.
+ *
+ * Resolves to Stripe's refusal, or `null` once the bank is satisfied. Never
+ * throws: a library that will not load is a refusal like any other, and the
+ * payment it stopped has not been charged.
+ */ export async function handleStripeNextAction(clientSecret) {
+    try {
+        var _result_error_message;
+        const { getBrowserStripe } = await import("./browser-stripe.js");
+        const stripe = await getBrowserStripe();
+        if (!stripe) {
+            return 'Your bank needs to confirm this payment, but the payment library could not load.';
+        }
+        const result = await stripe.handleNextAction({
+            clientSecret
+        });
+        return result.error ? (_result_error_message = result.error.message) != null ? _result_error_message : 'Your bank did not confirm the payment.' : null;
+    } catch (unused) {
+        return 'Your bank needs to confirm this payment, but the payment library could not load.';
+    }
+}
+
+//# sourceMappingURL=lazy-stripe.js.map

package/src/lib/stripe/lazy-stripe.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/stripe/lazy-stripe.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { lazy } from 'react'\n\n/**\n * STRIPE, ONLY ONCE SOMEONE IS PAYING (AGL-4049).\n *\n * Importing `@stripe/stripe-js` injects the Stripe script by itself, so a\n * surface that might take a payment must not import it until it does: on a\n * page nobody is buying from, it is the largest thing on the page\n * (`stripe-stays-lazy.spec.ts`).\n *\n * The boundary lives HERE, inside this library, rather than at each caller.\n * A `lazy(() => import('@aglyn/shared-ui-jsx/…'))` in a plugin is a dynamic\n * edge between two projects, and one such edge makes every ordinary import of\n * this library across the console a lint error. This file is the static import\n * they take instead, and it imports nothing of Stripe's.\n */\n\n/** The billing card form, loaded when it is first shown. */\nexport const LazyBillingCardForm = lazy(() => import('./billing-card-form.component'))\n\n/** The billing address form, loaded when it is first shown. */\nexport const LazyBillingAddressForm = lazy(() => import('./billing-address-form.component'))\n\n/**\n * Runs the bank's own step for a payment sitting at `requires_action`.\n *\n * Resolves to Stripe's refusal, or `null` once the bank is satisfied. Never\n * throws: a library that will not load is a refusal like any other, and the\n * payment it stopped has not been charged.\n */\nexport async function handleStripeNextAction(clientSecret: string): Promise<string | null> {\n  try {\n    const { getBrowserStripe } = await import('./browser-stripe')\n    const stripe = await getBrowserStripe()\n    if (!stripe) {\n      return 'Your bank needs to confirm this payment, but the payment library could not load.'\n    }\n    const result = await stripe.handleNextAction({ clientSecret })\n    return result.error\n      ? (result.error.message ?? 'Your bank did not confirm the payment.')\n      : null\n  } catch {\n    return 'Your bank needs to confirm this payment, but the payment library could not load.'\n  }\n}\n"],"names":["lazy","LazyBillingCardForm","LazyBillingAddressForm","handleStripeNextAction","clientSecret","result","getBrowserStripe","stripe","handleNextAction","error","message"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;AAEA,SAASA,IAAI,QAAQ,QAAO;AAE5B;;;;;;;;;;;;;CAaC,GAED,0DAA0D,GAC1D,OAAO,MAAMC,oCAAsBD,KAAK,IAAM,MAAM,CAAC,qCAAiC;AAEtF,6DAA6D,GAC7D,OAAO,MAAME,uCAAyBF,KAAK,IAAM,MAAM,CAAC,wCAAoC;AAE5F;;;;;;CAMC,GACD,OAAO,eAAeG,uBAAuBC,YAAoB;IAC/D,IAAI;YAQGC;QAPL,MAAM,EAAEC,gBAAgB,EAAE,GAAG,MAAM,MAAM,CAAC;QAC1C,MAAMC,SAAS,MAAMD;QACrB,IAAI,CAACC,QAAQ;YACX,OAAO;QACT;QACA,MAAMF,SAAS,MAAME,OAAOC,gBAAgB,CAAC;YAAEJ;QAAa;QAC5D,OAAOC,OAAOI,KAAK,IACdJ,wBAAAA,OAAOI,KAAK,CAACC,OAAO,YAApBL,wBAAwB,2CACzB;IACN,EAAE,eAAM;QACN,OAAO;IACT;AACF"}

package/src/lib/stripe/stripe-elements-appearance.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type Theme } from '@mui/material/styles';
+/**
+ * Stripe Elements' `appearance`, built from the RESOLVED MUI theme.
+ *
+ * The card form is Stripe's iframe sitting in the middle of our own card,
+ * between our own `TextField`s. If its fields are a different height, radius,
+ * font or border weight, the seam is the thing the customer notices — which
+ * is the whole objection inline Elements exist to answer. So every value here
+ * is read off the theme, and none is written down: a hardcoded palette copy
+ * stops matching the first time the scheme moves, and nothing would fail.
+ *
+ * ## Why CSS variables have to be resolved first
+ *
+ * The console's theme is served through MUI's `cssVariables` surfaces, so
+ * `theme.palette.primary.main` can come back as the STRING
+ * `'var(--mui-palette-primary-main)'` rather than a color. That string is
+ * fine in our own DOM and useless to Stripe: Elements paints inside a
+ * cross-origin iframe on Stripe's domain, where our custom properties do not
+ * exist. The variable resolves to nothing, and the field renders with
+ * Stripe's default — silently, on a surface nobody re-checks after a theme
+ * change.
+ *
+ * `resolveCssVar` is therefore not a nicety. It reads the computed value off
+ * the document once, so what crosses the iframe boundary is always a literal
+ * color.
+ */
+/** Reads a custom property's computed value from the document root. */
+export type CssVarResolver = (name: string) => string;
+/**
+ * Turn whatever the theme handed us into a literal a cross-origin iframe can
+ * paint with.
+ *
+ * Handles the nested form MUI emits — `var(--a, var(--b, #fff))` — by
+ * resolving outside-in and falling back to the declared default, which is
+ * what the browser itself would do.
+ */
+export declare function resolveThemeColor(value: unknown, resolveCssVar?: CssVarResolver, depth?: number): string;
+/** The subset of Stripe's appearance object this builds. */
+export interface StripeAppearance {
+    theme: 'stripe' | 'night';
+    variables: Record<string, string>;
+    rules: Record<string, Record<string, string>>;
+}
+/**
+ * Build the appearance for one resolved MUI theme.
+ *
+ * `theme: 'night'` for a dark scheme rather than only recoloring: Stripe's
+ * base theme decides things the variables do not reach — icon artwork, the
+ * dropdown surface, autofill styling — and a light base wearing dark colors
+ * shows through on exactly those.
+ *
+ * ## The scheme comes off the resolved surface
+ *
+ * On a `cssVariables` theme, `theme.palette` is the DEFAULT scheme whichever
+ * one is showing: `useTheme()` hands the light palette to a page painted dark,
+ * and the fields came out white on a dark panel with their labels unreadable.
+ * `theme.vars.palette` holds the variables that do change, so those are what
+ * gets resolved, and the base theme is read from the surface they resolve to.
+ */
+export declare function stripeAppearanceFromTheme(theme: Theme, resolveCssVar?: CssVarResolver): StripeAppearance;

package/src/lib/stripe/stripe-elements-appearance.js

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { getLuminance } from "@mui/material/styles";
+const documentResolver = (name)=>{
+    if (typeof document === 'undefined') return '';
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+};
+/**
+ * Turn whatever the theme handed us into a literal a cross-origin iframe can
+ * paint with.
+ *
+ * Handles the nested form MUI emits — `var(--a, var(--b, #fff))` — by
+ * resolving outside-in and falling back to the declared default, which is
+ * what the browser itself would do.
+ */ export function resolveThemeColor(value, resolveCssVar = documentResolver, depth = 0) {
+    const raw = String(value != null ? value : '').trim();
+    if (!raw) return '';
+    // Bounded: a malformed theme could otherwise loop on a self-referential var.
+    if (depth > 4) return '';
+    if (!raw.startsWith('var(')) return raw;
+    const inner = raw.slice('var('.length, raw.lastIndexOf(')'));
+    const comma = inner.indexOf(',');
+    const name = (comma === -1 ? inner : inner.slice(0, comma)).trim();
+    const fallback = comma === -1 ? '' : inner.slice(comma + 1).trim();
+    const resolved = resolveCssVar(name);
+    if (resolved) return resolveThemeColor(resolved, resolveCssVar, depth + 1);
+    return fallback ? resolveThemeColor(fallback, resolveCssVar, depth + 1) : '';
+}
+/** Whether a resolved surface color reads as dark, or `fallback` when it cannot be read. */ function surfaceIsDark(surface, fallback) {
+    try {
+        return getLuminance(surface) < 0.5;
+    } catch (unused) {
+        return fallback;
+    }
+}
+/**
+ * Build the appearance for one resolved MUI theme.
+ *
+ * `theme: 'night'` for a dark scheme rather than only recoloring: Stripe's
+ * base theme decides things the variables do not reach — icon artwork, the
+ * dropdown surface, autofill styling — and a light base wearing dark colors
+ * shows through on exactly those.
+ *
+ * ## The scheme comes off the resolved surface
+ *
+ * On a `cssVariables` theme, `theme.palette` is the DEFAULT scheme whichever
+ * one is showing: `useTheme()` hands the light palette to a page painted dark,
+ * and the fields came out white on a dark panel with their labels unreadable.
+ * `theme.vars.palette` holds the variables that do change, so those are what
+ * gets resolved, and the base theme is read from the surface they resolve to.
+ */ export function stripeAppearanceFromTheme(theme, resolveCssVar = documentResolver) {
+    var _ref, _ref1, _ref2, _ref3;
+    var _theme_vars, _theme_shape, _theme_shape1, _palette_background, _palette_primary, _palette_background1, _palette_text, _palette_text1, _palette_text2, _palette_error, _palette_success, _theme_typography, _theme_typography_body1, _theme_typography1, _palette_text3, _palette_primary1, _palette_error1, _palette_text4;
+    const color = (value)=>resolveThemeColor(value, resolveCssVar);
+    const palette = (_ref = (_theme_vars = theme.vars) == null ? void 0 : _theme_vars.palette) != null ? _ref : theme.palette;
+    const radius = typeof ((_theme_shape = theme.shape) == null ? void 0 : _theme_shape.borderRadius) === 'number' ? `${theme.shape.borderRadius}px` : String((_ref1 = (_theme_shape1 = theme.shape) == null ? void 0 : _theme_shape1.borderRadius) != null ? _ref1 : '4px');
+    const dark = surfaceIsDark(color((_palette_background = palette.background) == null ? void 0 : _palette_background.paper), theme.palette.mode === 'dark');
+    return {
+        theme: dark ? 'night' : 'stripe',
+        variables: {
+            colorPrimary: color((_palette_primary = palette.primary) == null ? void 0 : _palette_primary.main),
+            // The card's own surface, not the page's — Elements sits inside a
+            // `CardDisplay`, which is `background.paper`.
+            colorBackground: color((_palette_background1 = palette.background) == null ? void 0 : _palette_background1.paper),
+            colorText: color((_palette_text = palette.text) == null ? void 0 : _palette_text.primary),
+            colorTextSecondary: color((_palette_text1 = palette.text) == null ? void 0 : _palette_text1.secondary),
+            colorTextPlaceholder: color((_palette_text2 = palette.text) == null ? void 0 : _palette_text2.disabled),
+            colorDanger: color((_palette_error = palette.error) == null ? void 0 : _palette_error.main),
+            colorSuccess: color((_palette_success = palette.success) == null ? void 0 : _palette_success.main),
+            // The whole font stack, so a fallback face matches ours too.
+            fontFamily: String((_ref2 = (_theme_typography = theme.typography) == null ? void 0 : _theme_typography.fontFamily) != null ? _ref2 : ''),
+            fontSizeBase: String((_ref3 = (_theme_typography1 = theme.typography) == null ? void 0 : (_theme_typography_body1 = _theme_typography1.body1) == null ? void 0 : _theme_typography_body1.fontSize) != null ? _ref3 : '1rem'),
+            borderRadius: radius,
+            // Spacing is 8 here; Stripe multiplies its own scale by this.
+            spacingUnit: theme.spacing(0.5)
+        },
+        rules: {
+            '.Input': {
+                // The token that exists because MUI has none — see `PaletteOptions`.
+                border: `1px solid ${color(palette.inputOutline)}`,
+                boxShadow: 'none'
+            },
+            '.Input:hover': {
+                border: `1px solid ${color((_palette_text3 = palette.text) == null ? void 0 : _palette_text3.primary)}`
+            },
+            '.Input:focus': {
+                // MUI's outlined field thickens its border on focus rather than
+                // adding a glow; matching that is what keeps the two seamless.
+                border: `2px solid ${color((_palette_primary1 = palette.primary) == null ? void 0 : _palette_primary1.main)}`,
+                boxShadow: 'none',
+                outline: 'none'
+            },
+            '.Input--invalid': {
+                border: `1px solid ${color((_palette_error1 = palette.error) == null ? void 0 : _palette_error1.main)}`,
+                boxShadow: 'none'
+            },
+            '.Label': {
+                color: color((_palette_text4 = palette.text) == null ? void 0 : _palette_text4.secondary)
+            }
+        }
+    };
+}
+
+//# sourceMappingURL=stripe-elements-appearance.js.map

package/src/lib/stripe/stripe-elements-appearance.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/stripe/stripe-elements-appearance.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { getLuminance, type Theme } from '@mui/material/styles'\n\n/**\n * Stripe Elements' `appearance`, built from the RESOLVED MUI theme.\n *\n * The card form is Stripe's iframe sitting in the middle of our own card,\n * between our own `TextField`s. If its fields are a different height, radius,\n * font or border weight, the seam is the thing the customer notices — which\n * is the whole objection inline Elements exist to answer. So every value here\n * is read off the theme, and none is written down: a hardcoded palette copy\n * stops matching the first time the scheme moves, and nothing would fail.\n *\n * ## Why CSS variables have to be resolved first\n *\n * The console's theme is served through MUI's `cssVariables` surfaces, so\n * `theme.palette.primary.main` can come back as the STRING\n * `'var(--mui-palette-primary-main)'` rather than a color. That string is\n * fine in our own DOM and useless to Stripe: Elements paints inside a\n * cross-origin iframe on Stripe's domain, where our custom properties do not\n * exist. The variable resolves to nothing, and the field renders with\n * Stripe's default — silently, on a surface nobody re-checks after a theme\n * change.\n *\n * `resolveCssVar` is therefore not a nicety. It reads the computed value off\n * the document once, so what crosses the iframe boundary is always a literal\n * color.\n */\n\n/** Reads a custom property's computed value from the document root. */\nexport type CssVarResolver = (name: string) => string\n\nconst documentResolver: CssVarResolver = (name) => {\n  if (typeof document === 'undefined') return ''\n  return getComputedStyle(document.documentElement)\n    .getPropertyValue(name)\n    .trim()\n}\n\n/**\n * Turn whatever the theme handed us into a literal a cross-origin iframe can\n * paint with.\n *\n * Handles the nested form MUI emits — `var(--a, var(--b, #fff))` — by\n * resolving outside-in and falling back to the declared default, which is\n * what the browser itself would do.\n */\nexport function resolveThemeColor(\n  value: unknown,\n  resolveCssVar: CssVarResolver = documentResolver,\n  depth = 0,\n): string {\n  const raw = String(value ?? '').trim()\n  if (!raw) return ''\n  // Bounded: a malformed theme could otherwise loop on a self-referential var.\n  if (depth > 4) return ''\n  if (!raw.startsWith('var(')) return raw\n  const inner = raw.slice('var('.length, raw.lastIndexOf(')'))\n  const comma = inner.indexOf(',')\n  const name = (comma === -1 ? inner : inner.slice(0, comma)).trim()\n  const fallback = comma === -1 ? '' : inner.slice(comma + 1).trim()\n  const resolved = resolveCssVar(name)\n  if (resolved) return resolveThemeColor(resolved, resolveCssVar, depth + 1)\n  return fallback ? resolveThemeColor(fallback, resolveCssVar, depth + 1) : ''\n}\n\n/** Whether a resolved surface color reads as dark, or `fallback` when it cannot be read. */\nfunction surfaceIsDark(surface: string, fallback: boolean): boolean {\n  try {\n    return getLuminance(surface) < 0.5\n  } catch {\n    return fallback\n  }\n}\n\n/** The subset of Stripe's appearance object this builds. */\nexport interface StripeAppearance {\n  theme: 'stripe' | 'night'\n  variables: Record<string, string>\n  rules: Record<string, Record<string, string>>\n}\n\n/**\n * Build the appearance for one resolved MUI theme.\n *\n * `theme: 'night'` for a dark scheme rather than only recoloring: Stripe's\n * base theme decides things the variables do not reach — icon artwork, the\n * dropdown surface, autofill styling — and a light base wearing dark colors\n * shows through on exactly those.\n *\n * ## The scheme comes off the resolved surface\n *\n * On a `cssVariables` theme, `theme.palette` is the DEFAULT scheme whichever\n * one is showing: `useTheme()` hands the light palette to a page painted dark,\n * and the fields came out white on a dark panel with their labels unreadable.\n * `theme.vars.palette` holds the variables that do change, so those are what\n * gets resolved, and the base theme is read from the surface they resolve to.\n */\nexport function stripeAppearanceFromTheme(\n  theme: Theme,\n  resolveCssVar: CssVarResolver = documentResolver,\n): StripeAppearance {\n  const color = (value: unknown) => resolveThemeColor(value, resolveCssVar)\n  const palette = (theme.vars?.palette ?? theme.palette) as Theme['palette']\n  const radius =\n    typeof theme.shape?.borderRadius === 'number'\n      ? `${theme.shape.borderRadius}px`\n      : String(theme.shape?.borderRadius ?? '4px')\n\n  const dark = surfaceIsDark(color(palette.background?.paper), theme.palette.mode === 'dark')\n\n  return {\n    theme: dark ? 'night' : 'stripe',\n    variables: {\n      colorPrimary: color(palette.primary?.main),\n      // The card's own surface, not the page's — Elements sits inside a\n      // `CardDisplay`, which is `background.paper`.\n      colorBackground: color(palette.background?.paper),\n      colorText: color(palette.text?.primary),\n      colorTextSecondary: color(palette.text?.secondary),\n      colorTextPlaceholder: color(palette.text?.disabled),\n      colorDanger: color(palette.error?.main),\n      colorSuccess: color(palette.success?.main),\n      // The whole font stack, so a fallback face matches ours too.\n      fontFamily: String(theme.typography?.fontFamily ?? ''),\n      fontSizeBase: String(theme.typography?.body1?.fontSize ?? '1rem'),\n      borderRadius: radius,\n      // Spacing is 8 here; Stripe multiplies its own scale by this.\n      spacingUnit: theme.spacing(0.5),\n    },\n    rules: {\n      '.Input': {\n        // The token that exists because MUI has none — see `PaletteOptions`.\n        border: `1px solid ${color(palette.inputOutline)}`,\n        boxShadow: 'none',\n      },\n      '.Input:hover': {\n        border: `1px solid ${color(palette.text?.primary)}`,\n      },\n      '.Input:focus': {\n        // MUI's outlined field thickens its border on focus rather than\n        // adding a glow; matching that is what keeps the two seamless.\n        border: `2px solid ${color(palette.primary?.main)}`,\n        boxShadow: 'none',\n        outline: 'none',\n      },\n      '.Input--invalid': {\n        border: `1px solid ${color(palette.error?.main)}`,\n        boxShadow: 'none',\n      },\n      '.Label': {\n        color: color(palette.text?.secondary),\n      },\n    },\n  }\n}\n"],"names":["getLuminance","documentResolver","name","document","getComputedStyle","documentElement","getPropertyValue","trim","resolveThemeColor","value","resolveCssVar","depth","raw","String","startsWith","inner","slice","length","lastIndexOf","comma","indexOf","fallback","resolved","surfaceIsDark","surface","stripeAppearanceFromTheme","theme","palette","color","vars","radius","shape","borderRadius","dark","background","paper","mode","variables","colorPrimary","primary","main","colorBackground","colorText","text","colorTextSecondary","secondary","colorTextPlaceholder","disabled","colorDanger","error","colorSuccess","success","fontFamily","typography","fontSizeBase","body1","fontSize","spacingUnit","spacing","rules","border","inputOutline","boxShadow","outline"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,YAAY,QAAoB,uBAAsB;AA+B/D,MAAMC,mBAAmC,CAACC;IACxC,IAAI,OAAOC,aAAa,aAAa,OAAO;IAC5C,OAAOC,iBAAiBD,SAASE,eAAe,EAC7CC,gBAAgB,CAACJ,MACjBK,IAAI;AACT;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,kBACdC,KAAc,EACdC,gBAAgCT,gBAAgB,EAChDU,QAAQ,CAAC;IAET,MAAMC,MAAMC,OAAOJ,gBAAAA,QAAS,IAAIF,IAAI;IACpC,IAAI,CAACK,KAAK,OAAO;IACjB,6EAA6E;IAC7E,IAAID,QAAQ,GAAG,OAAO;IACtB,IAAI,CAACC,IAAIE,UAAU,CAAC,SAAS,OAAOF;IACpC,MAAMG,QAAQH,IAAII,KAAK,CAAC,OAAOC,MAAM,EAAEL,IAAIM,WAAW,CAAC;IACvD,MAAMC,QAAQJ,MAAMK,OAAO,CAAC;IAC5B,MAAMlB,OAAO,AAACiB,CAAAA,UAAU,CAAC,IAAIJ,QAAQA,MAAMC,KAAK,CAAC,GAAGG,MAAK,EAAGZ,IAAI;IAChE,MAAMc,WAAWF,UAAU,CAAC,IAAI,KAAKJ,MAAMC,KAAK,CAACG,QAAQ,GAAGZ,IAAI;IAChE,MAAMe,WAAWZ,cAAcR;IAC/B,IAAIoB,UAAU,OAAOd,kBAAkBc,UAAUZ,eAAeC,QAAQ;IACxE,OAAOU,WAAWb,kBAAkBa,UAAUX,eAAeC,QAAQ,KAAK;AAC5E;AAEA,0FAA0F,GAC1F,SAASY,cAAcC,OAAe,EAAEH,QAAiB;IACvD,IAAI;QACF,OAAOrB,aAAawB,WAAW;IACjC,EAAE,eAAM;QACN,OAAOH;IACT;AACF;AASA;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASI,0BACdC,KAAY,EACZhB,gBAAgCT,gBAAgB;;QAG/ByB,aAERA,cAEIA,eAEoBC,qBAKTA,kBAGGA,sBACNA,eACSA,gBACEA,gBACTA,gBACCA,kBAEDD,mBACEA,yBAAAA,oBAYQC,gBAKAA,mBAKAA,iBAIdA;IAjDnB,MAAMC,QAAQ,CAACnB,QAAmBD,kBAAkBC,OAAOC;IAC3D,MAAMiB,mBAAWD,cAAAA,MAAMG,IAAI,qBAAVH,YAAYC,OAAO,mBAAID,MAAMC,OAAO;IACrD,MAAMG,SACJ,SAAOJ,eAAAA,MAAMK,KAAK,qBAAXL,aAAaM,YAAY,MAAK,WACjC,GAAGN,MAAMK,KAAK,CAACC,YAAY,CAAC,EAAE,CAAC,GAC/BnB,iBAAOa,gBAAAA,MAAMK,KAAK,qBAAXL,cAAaM,YAAY,oBAAI;IAE1C,MAAMC,OAAOV,cAAcK,OAAMD,sBAAAA,QAAQO,UAAU,qBAAlBP,oBAAoBQ,KAAK,GAAGT,MAAMC,OAAO,CAACS,IAAI,KAAK;IAEpF,OAAO;QACLV,OAAOO,OAAO,UAAU;QACxBI,WAAW;YACTC,cAAcV,OAAMD,mBAAAA,QAAQY,OAAO,qBAAfZ,iBAAiBa,IAAI;YACzC,kEAAkE;YAClE,8CAA8C;YAC9CC,iBAAiBb,OAAMD,uBAAAA,QAAQO,UAAU,qBAAlBP,qBAAoBQ,KAAK;YAChDO,WAAWd,OAAMD,gBAAAA,QAAQgB,IAAI,qBAAZhB,cAAcY,OAAO;YACtCK,oBAAoBhB,OAAMD,iBAAAA,QAAQgB,IAAI,qBAAZhB,eAAckB,SAAS;YACjDC,sBAAsBlB,OAAMD,iBAAAA,QAAQgB,IAAI,qBAAZhB,eAAcoB,QAAQ;YAClDC,aAAapB,OAAMD,iBAAAA,QAAQsB,KAAK,qBAAbtB,eAAea,IAAI;YACtCU,cAActB,OAAMD,mBAAAA,QAAQwB,OAAO,qBAAfxB,iBAAiBa,IAAI;YACzC,6DAA6D;YAC7DY,YAAYvC,iBAAOa,oBAAAA,MAAM2B,UAAU,qBAAhB3B,kBAAkB0B,UAAU,oBAAI;YACnDE,cAAczC,iBAAOa,qBAAAA,MAAM2B,UAAU,sBAAhB3B,0BAAAA,mBAAkB6B,KAAK,qBAAvB7B,wBAAyB8B,QAAQ,oBAAI;YAC1DxB,cAAcF;YACd,8DAA8D;YAC9D2B,aAAa/B,MAAMgC,OAAO,CAAC;QAC7B;QACAC,OAAO;YACL,UAAU;gBACR,qEAAqE;gBACrEC,QAAQ,CAAC,UAAU,EAAEhC,MAAMD,QAAQkC,YAAY,GAAG;gBAClDC,WAAW;YACb;YACA,gBAAgB;gBACdF,QAAQ,CAAC,UAAU,EAAEhC,OAAMD,iBAAAA,QAAQgB,IAAI,qBAAZhB,eAAcY,OAAO,GAAG;YACrD;YACA,gBAAgB;gBACd,gEAAgE;gBAChE,+DAA+D;gBAC/DqB,QAAQ,CAAC,UAAU,EAAEhC,OAAMD,oBAAAA,QAAQY,OAAO,qBAAfZ,kBAAiBa,IAAI,GAAG;gBACnDsB,WAAW;gBACXC,SAAS;YACX;YACA,mBAAmB;gBACjBH,QAAQ,CAAC,UAAU,EAAEhC,OAAMD,kBAAAA,QAAQsB,KAAK,qBAAbtB,gBAAea,IAAI,GAAG;gBACjDsB,WAAW;YACb;YACA,UAAU;gBACRlC,OAAOA,OAAMD,iBAAAA,QAAQgB,IAAI,qBAAZhB,eAAckB,SAAS;YACtC;QACF;IACF;AACF"}