@volter/world-ui 0.1.0

package/dist/client/payment.bundle.js

@@ -0,0 +1,77 @@
+var hB=Object.create;var{getPrototypeOf:uB,defineProperty:CB,getOwnPropertyNames:sB}=Object;var dB=Object.prototype.hasOwnProperty;function yB(W){return this[W]}var cB,pB,JB=(W,J,L)=>{var F=W!=null&&typeof W==="object";if(F){var V=J?cB??=new WeakMap:pB??=new WeakMap,E=V.get(W);if(E)return E}L=W!=null?hB(uB(W)):{};let A=J||!W||!W.__esModule?CB(L,"default",{value:W,enumerable:!0}):L;for(let _ of sB(W))if(!dB.call(A,_))CB(A,_,{get:yB.bind(W,_),enumerable:!0});if(F)V.set(W,A);return A};var VB=(W,J)=>()=>(J||W((J={exports:{}}).exports,J),J.exports);var SB=VB((iB,XB)=>{(function(){function W(B,G){Object.defineProperty(F.prototype,B,{get:function(){console.warn("%s(...) is deprecated in plain JavaScript React classes. %s",G[0],G[1])}})}function J(B){if(B===null||typeof B!=="object")return null;return B=PB&&B[PB]||B["@@iterator"],typeof B==="function"?B:null}function L(B,G){B=(B=B.constructor)&&(B.displayName||B.name)||"ReactClass";var M=B+"."+G;wB[M]||(console.error("Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the %s component.",G,B),wB[M]=!0)}function F(B,G,M){this.props=B,this.context=G,this.refs=OB,this.updater=M||DB}function V(){}function E(B,G,M){this.props=B,this.context=G,this.refs=OB,this.updater=M||DB}function A(){}function _(B){return""+B}function f(B){try{_(B);var G=!1}catch(U){G=!0}if(G){G=console;var M=G.error,R=typeof Symbol==="function"&&Symbol.toStringTag&&B[Symbol.toStringTag]||B.constructor.name||"Object";return M.call(G,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",R),_(B)}}function m(B){if(B==null)return null;if(typeof B==="function")return B.$$typeof===gB?null:B.displayName||B.name||null;if(typeof B==="string")return B;switch(B){case s:return"Fragment";case Y:return"Profiler";case H:return"StrictMode";case d:return"Suspense";case w:return"SuspenseList";case HB:return"Activity"}if(typeof B==="object")switch(typeof B.tag==="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),B.$$typeof){case GB:return"Portal";case D:return B.displayName||"Context";case q:return(B._context.displayName||"Context")+".Consumer";case T:var G=B.render;return B=B.displayName,B||(B=G.displayName||G.name||"",B=B!==""?"ForwardRef("+B+")":"ForwardRef"),B;case I:return G=B.displayName||null,G!==null?G:m(B.type)||"Memo";case N:G=B._payload,B=B._init;try{return m(B(G))}catch(M){}}return null}function e(B){if(B===s)return"<>";if(typeof B==="object"&&B!==null&&B.$$typeof===N)return"<...>";try{var G=m(B);return G?"<"+G+">":"<...>"}catch(M){return"<...>"}}function c(){var B=Z.A;return B===null?null:B.getOwner()}function p(){return Error("react-stack-top-frame")}function i(B){if(MB.call(B,"key")){var G=Object.getOwnPropertyDescriptor(B,"key").get;if(G&&G.isReactWarning)return!1}return B.key!==void 0}function YB(B,G){function M(){TB||(TB=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",G))}M.isReactWarning=!0,Object.defineProperty(B,"key",{get:M,configurable:!0})}function o(){var B=m(this.type);return EB[B]||(EB[B]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),B=this.props.ref,B!==void 0?B:null}function l(B,G,M,R,U,z){var X=M.ref;return B={$$typeof:a,type:B,key:G,props:M,_owner:R},(X!==void 0?X:null)!==null?Object.defineProperty(B,"ref",{enumerable:!1,get:o}):Object.defineProperty(B,"ref",{enumerable:!1,value:null}),B._store={},Object.defineProperty(B._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(B,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(B,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(B,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(B.props),Object.freeze(B)),B}function ZB(B,G){return G=l(B.type,G,B.props,B._owner,B._debugStack,B._debugTask),B._store&&(G._store.validated=B._store.validated),G}function BB(B){x(B)?B._store&&(B._store.validated=1):typeof B==="object"&&B!==null&&B.$$typeof===N&&(B._payload.status==="fulfilled"?x(B._payload.value)&&B._payload.value._store&&(B._payload.value._store.validated=1):B._store&&(B._store.validated=1))}function x(B){return typeof B==="object"&&B!==null&&B.$$typeof===a}function zB(B){var G={"=":"=0",":":"=2"};return"$"+B.replace(/[=:]/g,function(M){return G[M]})}function t(B,G){return typeof B==="object"&&B!==null&&B.key!=null?(f(B.key),zB(""+B.key)):G.toString(36)}function QB(B){switch(B.status){case"fulfilled":return B.value;case"rejected":throw B.reason;default:switch(typeof B.status==="string"?B.then(A,A):(B.status="pending",B.then(function(G){B.status==="pending"&&(B.status="fulfilled",B.value=G)},function(G){B.status==="pending"&&(B.status="rejected",B.reason=G)})),B.status){case"fulfilled":return B.value;case"rejected":throw B.reason}}throw B}function j(B,G,M,R,U){var z=typeof B;if(z==="undefined"||z==="boolean")B=null;var X=!1;if(B===null)X=!0;else switch(z){case"bigint":case"string":case"number":X=!0;break;case"object":switch(B.$$typeof){case a:case GB:X=!0;break;case N:return X=B._init,j(X(B._payload),G,M,R,U)}}if(X){X=B,U=U(X);var O=R===""?"."+t(X,0):R;return KB(U)?(M="",O!=null&&(M=O.replace(_B,"$&/")+"/"),j(U,G,M,"",function(C){return C})):U!=null&&(x(U)&&(U.key!=null&&(X&&X.key===U.key||f(U.key)),M=ZB(U,M+(U.key==null||X&&X.key===U.key?"":(""+U.key).replace(_B,"$&/")+"/")+O),R!==""&&X!=null&&x(X)&&X.key==null&&X._store&&!X._store.validated&&(M._store.validated=2),U=M),G.push(U)),1}if(X=0,O=R===""?".":R+":",KB(B))for(var Q=0;Q<B.length;Q++)R=B[Q],z=O+t(R,Q),X+=j(R,G,M,z,U);else if(Q=J(B),typeof Q==="function")for(Q===B.entries&&(NB||console.warn("Using Maps as children is not supported. Use an array of keyed ReactElements instead."),NB=!0),B=Q.call(B),Q=0;!(R=B.next()).done;)R=R.value,z=O+t(R,Q++),X+=j(R,G,M,z,U);else if(z==="object"){if(typeof B.then==="function")return j(QB(B),G,M,R,U);throw G=String(B),Error("Objects are not valid as a React child (found: "+(G==="[object Object]"?"object with keys {"+Object.keys(B).join(", ")+"}":G)+"). If you meant to render a collection of children, use an array instead.")}return X}function v(B,G,M){if(B==null)return B;var R=[],U=0;return j(B,R,"","",function(z){return G.call(M,z,U++)}),R}function LB(B){if(B._status===-1){var G=B._ioInfo;G!=null&&(G.start=G.end=performance.now()),G=B._result;var M=G();if(M.then(function(U){if(B._status===0||B._status===-1){B._status=1,B._result=U;var z=B._ioInfo;z!=null&&(z.end=performance.now()),M.status===void 0&&(M.status="fulfilled",M.value=U)}},function(U){if(B._status===0||B._status===-1){B._status=2,B._result=U;var z=B._ioInfo;z!=null&&(z.end=performance.now()),M.status===void 0&&(M.status="rejected",M.reason=U)}}),G=B._ioInfo,G!=null){G.value=M;var R=M.displayName;typeof R==="string"&&(G.name=R)}B._status===-1&&(B._status=0,B._result=M)}if(B._status===1)return G=B._result,G===void 0&&console.error(`lazy: Expected the result of a dynamic import() call. Instead received: %s
+
+Your code should look like: 
+  const MyComponent = lazy(() => import('./MyComponent'))
+
+Did you accidentally put curly braces around the import?`,G),"default"in G||console.error(`lazy: Expected the result of a dynamic import() call. Instead received: %s
+
+Your code should look like: 
+  const MyComponent = lazy(() => import('./MyComponent'))`,G),G.default;throw B._result}function P(){var B=Z.H;return B===null&&console.error(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+1. You might have mismatching versions of React and the renderer (such as React DOM)
+2. You might be breaking the Rules of Hooks
+3. You might have more than one copy of React in the same app
+See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`),B}function n(){Z.asyncTransitions--}function S(B){if(RB===null)try{var G=("require"+Math.random()).slice(0,7);RB=(XB&&XB[G]).call(XB,"timers").setImmediate}catch(M){RB=function(R){jB===!1&&(jB=!0,typeof MessageChannel>"u"&&console.error("This browser does not have a MessageChannel implementation, so enqueuing tasks via await act(async () => ...) will fail. Please file an issue at https://github.com/facebook/react/issues if you encounter this warning."));var U=new MessageChannel;U.port1.onmessage=R,U.port2.postMessage(void 0)}}return RB(B)}function g(B){return 1<B.length&&typeof AggregateError==="function"?AggregateError(B):B[0]}function k(B,G){G!==UB-1&&console.error("You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. "),UB=G}function h(B,G,M){var R=Z.actQueue;if(R!==null)if(R.length!==0)try{u(R),S(function(){return h(B,G,M)});return}catch(U){Z.thrownErrors.push(U)}else Z.actQueue=null;0<Z.thrownErrors.length?(R=g(Z.thrownErrors),Z.thrownErrors.length=0,M(R)):G(B)}function u(B){if(!$B){$B=!0;var G=0;try{for(;G<B.length;G++){var M=B[G];do{Z.didUsePromise=!1;var R=M(!1);if(R!==null){if(Z.didUsePromise){B[G]=M,B.splice(0,G);return}M=R}else break}while(1)}B.length=0}catch(U){B.splice(0,G+1),Z.thrownErrors.push(U)}finally{$B=!1}}}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart==="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var a=Symbol.for("react.transitional.element"),GB=Symbol.for("react.portal"),s=Symbol.for("react.fragment"),H=Symbol.for("react.strict_mode"),Y=Symbol.for("react.profiler"),q=Symbol.for("react.consumer"),D=Symbol.for("react.context"),T=Symbol.for("react.forward_ref"),d=Symbol.for("react.suspense"),w=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),HB=Symbol.for("react.activity"),PB=Symbol.iterator,wB={},DB={isMounted:function(){return!1},enqueueForceUpdate:function(B){L(B,"forceUpdate")},enqueueReplaceState:function(B){L(B,"replaceState")},enqueueSetState:function(B){L(B,"setState")}},FB=Object.assign,OB={};Object.freeze(OB),F.prototype.isReactComponent={},F.prototype.setState=function(B,G){if(typeof B!=="object"&&typeof B!=="function"&&B!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,B,G,"setState")},F.prototype.forceUpdate=function(B){this.updater.enqueueForceUpdate(this,B,"forceUpdate")};var K={isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."]};for(r in K)K.hasOwnProperty(r)&&W(r,K[r]);V.prototype=F.prototype,K=E.prototype=new V,K.constructor=E,FB(K,F.prototype),K.isPureReactComponent=!0;var KB=Array.isArray,gB=Symbol.for("react.client.reference"),Z={H:null,A:null,T:null,S:null,actQueue:null,asyncTransitions:0,isBatchingLegacy:!1,didScheduleLegacyUpdate:!1,didUsePromise:!1,thrownErrors:[],getCurrentStack:null,recentlyCreatedOwnerStacks:0},MB=Object.prototype.hasOwnProperty,AB=console.createTask?console.createTask:function(){return null};K={react_stack_bottom_frame:function(B){return B()}};var TB,IB,EB={},kB=K.react_stack_bottom_frame.bind(K,p)(),bB=AB(e(p)),NB=!1,_B=/\/+/g,xB=typeof reportError==="function"?reportError:function(B){if(typeof window==="object"&&typeof window.ErrorEvent==="function"){var G=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof B==="object"&&B!==null&&typeof B.message==="string"?String(B.message):String(B),error:B});if(!window.dispatchEvent(G))return}else if(typeof process==="object"&&typeof process.emit==="function"){process.emit("uncaughtException",B);return}console.error(B)},jB=!1,RB=null,UB=0,WB=!1,$B=!1,vB=typeof queueMicrotask==="function"?function(B){queueMicrotask(function(){return queueMicrotask(B)})}:S;K=Object.freeze({__proto__:null,c:function(B){return P().useMemoCache(B)}});var r={map:v,forEach:function(B,G,M){v(B,function(){G.apply(this,arguments)},M)},count:function(B){var G=0;return v(B,function(){G++}),G},toArray:function(B){return v(B,function(G){return G})||[]},only:function(B){if(!x(B))throw Error("React.Children.only expected to receive a single React element child.");return B}};iB.Activity=HB,iB.Children=r,iB.Component=F,iB.Fragment=s,iB.Profiler=Y,iB.PureComponent=E,iB.StrictMode=H,iB.Suspense=d,iB.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=Z,iB.__COMPILER_RUNTIME=K,iB.act=function(B){var G=Z.actQueue,M=UB;UB++;var R=Z.actQueue=G!==null?G:[],U=!1;try{var z=B()}catch(Q){Z.thrownErrors.push(Q)}if(0<Z.thrownErrors.length)throw k(G,M),B=g(Z.thrownErrors),Z.thrownErrors.length=0,B;if(z!==null&&typeof z==="object"&&typeof z.then==="function"){var X=z;return vB(function(){U||WB||(WB=!0,console.error("You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);"))}),{then:function(Q,C){U=!0,X.then(function(y){if(k(G,M),M===0){try{u(R),S(function(){return h(y,Q,C)})}catch(mB){Z.thrownErrors.push(mB)}if(0<Z.thrownErrors.length){var fB=g(Z.thrownErrors);Z.thrownErrors.length=0,C(fB)}}else Q(y)},function(y){k(G,M),0<Z.thrownErrors.length?(y=g(Z.thrownErrors),Z.thrownErrors.length=0,C(y)):C(y)})}}}var O=z;if(k(G,M),M===0&&(u(R),R.length!==0&&vB(function(){U||WB||(WB=!0,console.error("A component suspended inside an `act` scope, but the `act` call was not awaited. When testing React components that depend on asynchronous data, you must await the result:\n\nawait act(() => ...)"))}),Z.actQueue=null),0<Z.thrownErrors.length)throw B=g(Z.thrownErrors),Z.thrownErrors.length=0,B;return{then:function(Q,C){U=!0,M===0?(Z.actQueue=R,S(function(){return h(O,Q,C)})):Q(O)}}},iB.cache=function(B){return function(){return B.apply(null,arguments)}},iB.cacheSignal=function(){return null},iB.captureOwnerStack=function(){var B=Z.getCurrentStack;return B===null?null:B()},iB.cloneElement=function(B,G,M){if(B===null||B===void 0)throw Error("The argument must be a React element, but you passed "+B+".");var R=FB({},B.props),U=B.key,z=B._owner;if(G!=null){var X;B:{if(MB.call(G,"ref")&&(X=Object.getOwnPropertyDescriptor(G,"ref").get)&&X.isReactWarning){X=!1;break B}X=G.ref!==void 0}X&&(z=c()),i(G)&&(f(G.key),U=""+G.key);for(O in G)!MB.call(G,O)||O==="key"||O==="__self"||O==="__source"||O==="ref"&&G.ref===void 0||(R[O]=G[O])}var O=arguments.length-2;if(O===1)R.children=M;else if(1<O){X=Array(O);for(var Q=0;Q<O;Q++)X[Q]=arguments[Q+2];R.children=X}R=l(B.type,U,R,z,B._debugStack,B._debugTask);for(U=2;U<arguments.length;U++)BB(arguments[U]);return R},iB.createContext=function(B){return B={$$typeof:D,_currentValue:B,_currentValue2:B,_threadCount:0,Provider:null,Consumer:null},B.Provider=B,B.Consumer={$$typeof:q,_context:B},B._currentRenderer=null,B._currentRenderer2=null,B},iB.createElement=function(B,G,M){for(var R=2;R<arguments.length;R++)BB(arguments[R]);R={};var U=null;if(G!=null)for(Q in IB||!("__self"in G)||"key"in G||(IB=!0,console.warn("Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform")),i(G)&&(f(G.key),U=""+G.key),G)MB.call(G,Q)&&Q!=="key"&&Q!=="__self"&&Q!=="__source"&&(R[Q]=G[Q]);var z=arguments.length-2;if(z===1)R.children=M;else if(1<z){for(var X=Array(z),O=0;O<z;O++)X[O]=arguments[O+2];Object.freeze&&Object.freeze(X),R.children=X}if(B&&B.defaultProps)for(Q in z=B.defaultProps,z)R[Q]===void 0&&(R[Q]=z[Q]);U&&YB(R,typeof B==="function"?B.displayName||B.name||"Unknown":B);var Q=1e4>Z.recentlyCreatedOwnerStacks++;return l(B,U,R,c(),Q?Error("react-stack-top-frame"):kB,Q?AB(e(B)):bB)},iB.createRef=function(){var B={current:null};return Object.seal(B),B},iB.forwardRef=function(B){B!=null&&B.$$typeof===I?console.error("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...))."):typeof B!=="function"?console.error("forwardRef requires a render function but was given %s.",B===null?"null":typeof B):B.length!==0&&B.length!==2&&console.error("forwardRef render functions accept exactly two parameters: props and ref. %s",B.length===1?"Did you forget to use the ref parameter?":"Any additional parameter will be undefined."),B!=null&&B.defaultProps!=null&&console.error("forwardRef render functions do not support defaultProps. Did you accidentally pass a React component?");var G={$$typeof:T,render:B},M;return Object.defineProperty(G,"displayName",{enumerable:!1,configurable:!0,get:function(){return M},set:function(R){M=R,B.name||B.displayName||(Object.defineProperty(B,"name",{value:R}),B.displayName=R)}}),G},iB.isValidElement=x,iB.lazy=function(B){B={_status:-1,_result:B};var G={$$typeof:N,_payload:B,_init:LB},M={name:"lazy",start:-1,end:-1,value:null,owner:null,debugStack:Error("react-stack-top-frame"),debugTask:console.createTask?console.createTask("lazy()"):null};return B._ioInfo=M,G._debugInfo=[{awaited:M}],G},iB.memo=function(B,G){B==null&&console.error("memo: The first argument must be a component. Instead received: %s",B===null?"null":typeof B),G={$$typeof:I,type:B,compare:G===void 0?null:G};var M;return Object.defineProperty(G,"displayName",{enumerable:!1,configurable:!0,get:function(){return M},set:function(R){M=R,B.name||B.displayName||(Object.defineProperty(B,"name",{value:R}),B.displayName=R)}}),G},iB.startTransition=function(B){var G=Z.T,M={};M._updatedFibers=new Set,Z.T=M;try{var R=B(),U=Z.S;U!==null&&U(M,R),typeof R==="object"&&R!==null&&typeof R.then==="function"&&(Z.asyncTransitions++,R.then(n,n),R.then(A,xB))}catch(z){xB(z)}finally{G===null&&M._updatedFibers&&(B=M._updatedFibers.size,M._updatedFibers.clear(),10<B&&console.warn("Detected a large number of updates inside startTransition. If this is due to a subscription please re-write it to use React provided hooks. Otherwise concurrent mode guarantees are off the table.")),G!==null&&M.types!==null&&(G.types!==null&&G.types!==M.types&&console.error("We expected inner Transitions to have transferred the outer types set and that you cannot add to the outer Transition while inside the inner.This is a bug in React."),G.types=M.types),Z.T=G}},iB.unstable_useCacheRefresh=function(){return P().useCacheRefresh()},iB.use=function(B){return P().use(B)},iB.useActionState=function(B,G,M){return P().useActionState(B,G,M)},iB.useCallback=function(B,G){return P().useCallback(B,G)},iB.useContext=function(B){var G=P();return B.$$typeof===q&&console.error("Calling useContext(Context.Consumer) is not supported and will cause bugs. Did you mean to call useContext(Context) instead?"),G.useContext(B)},iB.useDebugValue=function(B,G){return P().useDebugValue(B,G)},iB.useDeferredValue=function(B,G){return P().useDeferredValue(B,G)},iB.useEffect=function(B,G){return B==null&&console.warn("React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?"),P().useEffect(B,G)},iB.useEffectEvent=function(B){return P().useEffectEvent(B)},iB.useId=function(){return P().useId()},iB.useImperativeHandle=function(B,G,M){return P().useImperativeHandle(B,G,M)},iB.useInsertionEffect=function(B,G){return B==null&&console.warn("React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?"),P().useInsertionEffect(B,G)},iB.useLayoutEffect=function(B,G){return B==null&&console.warn("React Hook useLayoutEffect requires an effect callback. Did you forget to pass a callback to the hook?"),P().useLayoutEffect(B,G)},iB.useMemo=function(B,G){return P().useMemo(B,G)},iB.useOptimistic=function(B,G){return P().useOptimistic(B,G)},iB.useReducer=function(B,G,M){return P().useReducer(B,G,M)},iB.useRef=function(B){return P().useRef(B)},iB.useState=function(B){return P().useState(B)},iB.useSyncExternalStore=function(B,G,M){return P().useSyncExternalStore(B,G,M)},iB.useTransition=function(){return P().useTransition()},iB.version="19.2.7",typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop==="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())})()});var qB=VB((oB)=>{var b=JB(SB());(function(){function W(H){if(H==null)return null;if(typeof H==="function")return H.$$typeof===P?null:H.displayName||H.name||null;if(typeof H==="string")return H;switch(H){case o:return"Fragment";case ZB:return"Profiler";case l:return"StrictMode";case t:return"Suspense";case QB:return"SuspenseList";case LB:return"Activity"}if(typeof H==="object")switch(typeof H.tag==="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),H.$$typeof){case YB:return"Portal";case x:return H.displayName||"Context";case BB:return(H._context.displayName||"Context")+".Consumer";case zB:var Y=H.render;return H=H.displayName,H||(H=Y.displayName||Y.name||"",H=H!==""?"ForwardRef("+H+")":"ForwardRef"),H;case j:return Y=H.displayName||null,Y!==null?Y:W(H.type)||"Memo";case v:Y=H._payload,H=H._init;try{return W(H(Y))}catch(q){}}return null}function J(H){return""+H}function L(H){try{J(H);var Y=!1}catch(T){Y=!0}if(Y){Y=console;var q=Y.error,D=typeof Symbol==="function"&&Symbol.toStringTag&&H[Symbol.toStringTag]||H.constructor.name||"Object";return q.call(Y,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",D),J(H)}}function F(H){if(H===o)return"<>";if(typeof H==="object"&&H!==null&&H.$$typeof===v)return"<...>";try{var Y=W(H);return Y?"<"+Y+">":"<...>"}catch(q){return"<...>"}}function V(){var H=n.A;return H===null?null:H.getOwner()}function E(){return Error("react-stack-top-frame")}function A(H){if(S.call(H,"key")){var Y=Object.getOwnPropertyDescriptor(H,"key").get;if(Y&&Y.isReactWarning)return!1}return H.key!==void 0}function _(H,Y){function q(){h||(h=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",Y))}q.isReactWarning=!0,Object.defineProperty(H,"key",{get:q,configurable:!0})}function f(){var H=W(this.type);return u[H]||(u[H]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),H=this.props.ref,H!==void 0?H:null}function m(H,Y,q,D,T,d){var w=q.ref;return H={$$typeof:i,type:H,key:Y,props:q,_owner:D},(w!==void 0?w:null)!==null?Object.defineProperty(H,"ref",{enumerable:!1,get:f}):Object.defineProperty(H,"ref",{enumerable:!1,value:null}),H._store={},Object.defineProperty(H._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(H,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(H,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(H,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:d}),Object.freeze&&(Object.freeze(H.props),Object.freeze(H)),H}function e(H,Y,q,D,T,d){var w=Y.children;if(w!==void 0)if(D)if(g(w)){for(D=0;D<w.length;D++)c(w[D]);Object.freeze&&Object.freeze(w)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(w);if(S.call(Y,"key")){w=W(H);var I=Object.keys(Y).filter(function(HB){return HB!=="key"});D=0<I.length?"{key: someKey, "+I.join(": ..., ")+": ...}":"{key: someKey}",s[w+D]||(I=0<I.length?"{"+I.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,D,w,I,w),s[w+D]=!0)}if(w=null,q!==void 0&&(L(q),w=""+q),A(Y)&&(L(Y.key),w=""+Y.key),"key"in Y){q={};for(var N in Y)N!=="key"&&(q[N]=Y[N])}else q=Y;return w&&_(q,typeof H==="function"?H.displayName||H.name||"Unknown":H),m(H,w,q,V(),T,d)}function c(H){p(H)?H._store&&(H._store.validated=1):typeof H==="object"&&H!==null&&H.$$typeof===v&&(H._payload.status==="fulfilled"?p(H._payload.value)&&H._payload.value._store&&(H._payload.value._store.validated=1):H._store&&(H._store.validated=1))}function p(H){return typeof H==="object"&&H!==null&&H.$$typeof===i}var i=Symbol.for("react.transitional.element"),YB=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),l=Symbol.for("react.strict_mode"),ZB=Symbol.for("react.profiler"),BB=Symbol.for("react.consumer"),x=Symbol.for("react.context"),zB=Symbol.for("react.forward_ref"),t=Symbol.for("react.suspense"),QB=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),v=Symbol.for("react.lazy"),LB=Symbol.for("react.activity"),P=Symbol.for("react.client.reference"),n=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,S=Object.prototype.hasOwnProperty,g=Array.isArray,k=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(H){return H()}};var h,u={},a=b.react_stack_bottom_frame.bind(b,E)(),GB=k(F(E)),s={};oB.Fragment=o,oB.jsxDEV=function(H,Y,q,D){var T=1e4>n.recentlyCreatedOwnerStacks++;return e(H,Y,q,D,T?Error("react-stack-top-frame"):a,T?k(F(H)):GB)}})()});var $=JB(qB(),1),yG=`document.querySelectorAll('input[data-format="card-expiry"]').forEach(function (el) {
+  el.addEventListener('input', function (e) {
+    var raw = el.value, deleting = typeof e.inputType === 'string' && e.inputType.indexOf('delete') === 0, mm, yy;
+    var cut = raw.indexOf('/');
+    if (cut >= 0) {
+      mm = raw.slice(0, cut).replace(/\\D/g, '').slice(0, 2);
+      yy = raw.slice(cut + 1).replace(/\\D/g, '');
+      if (mm.length === 1 && mm !== '0') mm = '0' + mm;
+    } else {
+      var d = raw.replace(/\\D/g, '');
+      if (d.length === 6 && d.slice(2, 4) === '20') d = d.slice(0, 2) + d.slice(4);
+      if (d.length >= 1 && d.charAt(0) > '1') d = '0' + d;
+      mm = d.slice(0, 2);
+      yy = d.slice(2);
+    }
+    yy = yy.length === 4 ? yy.slice(2) : yy.slice(0, 2);
+    el.value = mm.length < 2 || (deleting && !yy && raw.slice(-2) !== '/ ') ? mm : mm + ' / ' + yy;
+  });
+});`;function cG(W){return $.jsxDEV("div",{className:"pay",children:[$.jsxDEV("section",{className:"pay-summary",children:[W.back?$.jsxDEV("a",{className:"pay-back",href:W.back.href,children:W.back.label},void 0,!1,void 0,this):null,$.jsxDEV("div",{className:"pay-merchant",children:W.merchant},void 0,!1,void 0,this),W.total?$.jsxDEV("div",{className:"pay-total-lead",children:[$.jsxDEV("span",{children:W.total.label},void 0,!1,void 0,this),$.jsxDEV("strong",{children:W.total.amount},void 0,!1,void 0,this),W.total.detail?$.jsxDEV("small",{className:"pay-total-detail",children:W.total.detail},void 0,!1,void 0,this):null]},void 0,!0,void 0,this):null,$.jsxDEV("ul",{className:"pay-lines",children:W.lines.map((J,L)=>$.jsxDEV("li",{className:"pay-line",children:[$.jsxDEV("span",{className:"pay-line-name",children:[J.name,J.detail?$.jsxDEV("small",{children:J.detail},void 0,!1,void 0,this):null]},void 0,!0,void 0,this),$.jsxDEV("span",{className:"pay-line-amount",children:J.amount},void 0,!1,void 0,this)]},`${J.name}:${L}`,!0,void 0,this))},void 0,!1,void 0,this)]},void 0,!0,void 0,this),$.jsxDEV("main",{className:"pay-form",children:[$.jsxDEV("form",{method:"post",action:W.action,children:[W.sections.map((J)=>$.jsxDEV("fieldset",{className:"pay-section",children:[$.jsxDEV("legend",{children:J.heading},void 0,!1,void 0,this),J.fields.map((L)=>$.jsxDEV("label",{className:"pay-field",htmlFor:L.id,children:[$.jsxDEV("span",{children:L.label},void 0,!1,void 0,this),L.options?$.jsxDEV("select",{id:L.id,name:L.id,defaultValue:L.value,children:L.options.map((F)=>$.jsxDEV("option",{value:F.value,children:F.label},F.value,!1,void 0,this))},void 0,!1,void 0,this):$.jsxDEV("input",{id:L.id,name:L.id,type:L.type??"text",placeholder:L.placeholder,autoComplete:L.autoComplete,defaultValue:L.value,...L.format?{"data-format":L.format,inputMode:"numeric"}:{}},void 0,!1,void 0,this)]},L.id,!0,void 0,this))]},J.heading,!0,void 0,this)),W.error?$.jsxDEV("p",{className:"pay-error",role:"alert",children:W.error},void 0,!1,void 0,this):null,$.jsxDEV("button",{type:"submit",className:"pay-submit SubmitButton","data-testid":W.submit.testId,children:W.submit.label},void 0,!1,void 0,this),W.note?$.jsxDEV("p",{className:"pay-note",children:W.note},void 0,!1,void 0,this):null]},void 0,!0,void 0,this),W.sections.some((J)=>J.fields.some((L)=>L.format))?$.jsxDEV("script",{dangerouslySetInnerHTML:{__html:`document.querySelectorAll('input[data-format="card-expiry"]').forEach(function (el) {
+  el.addEventListener('input', function (e) {
+    var raw = el.value, deleting = typeof e.inputType === 'string' && e.inputType.indexOf('delete') === 0, mm, yy;
+    var cut = raw.indexOf('/');
+    if (cut >= 0) {
+      mm = raw.slice(0, cut).replace(/\\D/g, '').slice(0, 2);
+      yy = raw.slice(cut + 1).replace(/\\D/g, '');
+      if (mm.length === 1 && mm !== '0') mm = '0' + mm;
+    } else {
+      var d = raw.replace(/\\D/g, '');
+      if (d.length === 6 && d.slice(2, 4) === '20') d = d.slice(0, 2) + d.slice(4);
+      if (d.length >= 1 && d.charAt(0) > '1') d = '0' + d;
+      mm = d.slice(0, 2);
+      yy = d.slice(2);
+    }
+    yy = yy.length === 4 ? yy.slice(2) : yy.slice(0, 2);
+    el.value = mm.length < 2 || (deleting && !yy && raw.slice(-2) !== '/ ') ? mm : mm + ' / ' + yy;
+  });
+});`}},void 0,!1,void 0,this):null]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)}var pG=`
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.pay { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
+@media (max-width: 800px) { .pay { grid-template-columns: 1fr; } }
+.pay-summary { padding: 48px 48px 24px; }
+.pay-back { display: inline-block; margin-bottom: 24px; text-decoration: none; }
+.pay-merchant { font-weight: 500; margin-bottom: 16px; }
+.pay-total-lead span { display: block; }
+.pay-total-lead strong { display: block; font-size: 36px; font-weight: 600; }
+.pay-total-lead { margin-bottom: 24px; }
+.pay-total-detail { display: block; }
+.pay-note { margin: 12px 0 0; font-size: 13px; text-align: center; }
+.pay-lines { list-style: none; padding: 0; margin: 0; }
+.pay-line { display: flex; justify-content: space-between; padding: 8px 0; }
+.pay-line small { display: block; }
+.pay-form { padding: 48px; }
+.pay-section { border: 0; padding: 0; margin: 0 0 24px; }
+.pay-section legend { font-weight: 500; margin-bottom: 8px; }
+.pay-field { display: block; margin-bottom: 12px; }
+.pay-field span { display: block; font-size: 13px; margin-bottom: 4px; }
+.pay-field input, .pay-field select { box-sizing: border-box; width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid; font: inherit; }
+.pay-error { margin: 0 0 12px; }
+.pay-submit { width: 100%; padding: 12px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
+`;export{cG as Payment,pG as PAYMENT_CSS,yG as FORMAT_SCRIPT};

package/dist/client/payment.d.ts

@@ -0,0 +1,57 @@
+export type PaymentField = {
+    id: string;
+    label: string;
+    type?: string;
+    placeholder?: string;
+    autoComplete?: string;
+    value?: string;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** a field that formats itself as it is typed, as payment vendors' card fields do: `card-expiry` reads the digits
+     *  `1230` as `12 / 30` (FORMAT_SCRIPT). The page still posts without a script; the pack reads what is posted. */
+    format?: 'card-expiry';
+};
+export type PaymentProps = {
+    merchant: string;
+    /** what is paid for, formatted the vendor's way */
+    lines: Array<{
+        name: string;
+        amount: string;
+        detail?: string;
+    }>;
+    /** the lead of the summary: a label over the amount, and a line under it ("Then $12.00 per month") */
+    total?: {
+        label: string;
+        amount: string;
+        detail?: string;
+    };
+    action: string;
+    /** sections of fields, each under its heading ("Contact information", "Payment method") */
+    sections: Array<{
+        heading: string;
+        fields: PaymentField[];
+    }>;
+    submit: {
+        label: string;
+        testId?: string;
+    };
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** the vendor's answer to the last submit, shown above the button */
+    error?: string;
+    /** terms shown under the button (what a trial's end will charge) */
+    note?: string;
+};
+/** Formats a `format`ted field as it is typed, a progressive enhancement over the plain form. `card-expiry`, as a card
+ *  form's expiry reads: four digits at most, ` / ` after the month; a first digit above 1 is the month on its own
+ *  (`5` → `05 / `), as is a single digit followed by a slash (`1/` → `01 / `); a pasted or filled `12/2030` or
+ *  `122030` keeps the year's last two digits; deleting the year's last digit leaves `12 / `, and deleting back into
+ *  the separator removes it. */
+export declare const FORMAT_SCRIPT = "document.querySelectorAll('input[data-format=\"card-expiry\"]').forEach(function (el) {\n  el.addEventListener('input', function (e) {\n    var raw = el.value, deleting = typeof e.inputType === 'string' && e.inputType.indexOf('delete') === 0, mm, yy;\n    var cut = raw.indexOf('/');\n    if (cut >= 0) {\n      mm = raw.slice(0, cut).replace(/\\D/g, '').slice(0, 2);\n      yy = raw.slice(cut + 1).replace(/\\D/g, '');\n      if (mm.length === 1 && mm !== '0') mm = '0' + mm;\n    } else {\n      var d = raw.replace(/\\D/g, '');\n      if (d.length === 6 && d.slice(2, 4) === '20') d = d.slice(0, 2) + d.slice(4);\n      if (d.length >= 1 && d.charAt(0) > '1') d = '0' + d;\n      mm = d.slice(0, 2);\n      yy = d.slice(2);\n    }\n    yy = yy.length === 4 ? yy.slice(2) : yy.slice(0, 2);\n    el.value = mm.length < 2 || (deleting && !yy && raw.slice(-2) !== '/ ') ? mm : mm + ' / ' + yy;\n  });\n});";
+export declare function Payment(props: PaymentProps): import("react").JSX.Element;
+/** The payment page's layout; a pack's skin sets the colours and type over it. */
+export declare const PAYMENT_CSS = "\nbody { margin: 0; font: 14px/1.5 system-ui, -apple-system, \"Segoe UI\", sans-serif; }\n.pay { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }\n@media (max-width: 800px) { .pay { grid-template-columns: 1fr; } }\n.pay-summary { padding: 48px 48px 24px; }\n.pay-back { display: inline-block; margin-bottom: 24px; text-decoration: none; }\n.pay-merchant { font-weight: 500; margin-bottom: 16px; }\n.pay-total-lead span { display: block; }\n.pay-total-lead strong { display: block; font-size: 36px; font-weight: 600; }\n.pay-total-lead { margin-bottom: 24px; }\n.pay-total-detail { display: block; }\n.pay-note { margin: 12px 0 0; font-size: 13px; text-align: center; }\n.pay-lines { list-style: none; padding: 0; margin: 0; }\n.pay-line { display: flex; justify-content: space-between; padding: 8px 0; }\n.pay-line small { display: block; }\n.pay-form { padding: 48px; }\n.pay-section { border: 0; padding: 0; margin: 0 0 24px; }\n.pay-section legend { font-weight: 500; margin-bottom: 8px; }\n.pay-field { display: block; margin-bottom: 12px; }\n.pay-field span { display: block; font-size: 13px; margin-bottom: 4px; }\n.pay-field input, .pay-field select { box-sizing: border-box; width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid; font: inherit; }\n.pay-error { margin: 0 0 12px; }\n.pay-submit { width: 100%; padding: 12px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }\n";

package/dist/client/payment.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Formats a `format`ted field as it is typed, a progressive enhancement over the plain form. `card-expiry`, as a card
+ *  form's expiry reads: four digits at most, ` / ` after the month; a first digit above 1 is the month on its own
+ *  (`5` → `05 / `), as is a single digit followed by a slash (`1/` → `01 / `); a pasted or filled `12/2030` or
+ *  `122030` keeps the year's last two digits; deleting the year's last digit leaves `12 / `, and deleting back into
+ *  the separator removes it. */
+export const FORMAT_SCRIPT = `document.querySelectorAll('input[data-format="card-expiry"]').forEach(function (el) {
+  el.addEventListener('input', function (e) {
+    var raw = el.value, deleting = typeof e.inputType === 'string' && e.inputType.indexOf('delete') === 0, mm, yy;
+    var cut = raw.indexOf('/');
+    if (cut >= 0) {
+      mm = raw.slice(0, cut).replace(/\\D/g, '').slice(0, 2);
+      yy = raw.slice(cut + 1).replace(/\\D/g, '');
+      if (mm.length === 1 && mm !== '0') mm = '0' + mm;
+    } else {
+      var d = raw.replace(/\\D/g, '');
+      if (d.length === 6 && d.slice(2, 4) === '20') d = d.slice(0, 2) + d.slice(4);
+      if (d.length >= 1 && d.charAt(0) > '1') d = '0' + d;
+      mm = d.slice(0, 2);
+      yy = d.slice(2);
+    }
+    yy = yy.length === 4 ? yy.slice(2) : yy.slice(0, 2);
+    el.value = mm.length < 2 || (deleting && !yy && raw.slice(-2) !== '/ ') ? mm : mm + ' / ' + yy;
+  });
+});`;
+export function Payment(props) {
+    return (_jsxs("div", { className: "pay", children: [_jsxs("section", { className: "pay-summary", children: [props.back ? _jsx("a", { className: "pay-back", href: props.back.href, children: props.back.label }) : null, _jsx("div", { className: "pay-merchant", children: props.merchant }), props.total ? _jsxs("div", { className: "pay-total-lead", children: [_jsx("span", { children: props.total.label }), _jsx("strong", { children: props.total.amount }), props.total.detail ? _jsx("small", { className: "pay-total-detail", children: props.total.detail }) : null] }) : null, _jsx("ul", { className: "pay-lines", children: props.lines.map((l, i) => (_jsxs("li", { className: "pay-line", children: [_jsxs("span", { className: "pay-line-name", children: [l.name, l.detail ? _jsx("small", { children: l.detail }) : null] }), _jsx("span", { className: "pay-line-amount", children: l.amount })] }, `${l.name}:${i}`))) })] }), _jsxs("main", { className: "pay-form", children: [_jsxs("form", { method: "post", action: props.action, children: [props.sections.map((s) => (_jsxs("fieldset", { className: "pay-section", children: [_jsx("legend", { children: s.heading }), s.fields.map((f) => (_jsxs("label", { className: "pay-field", htmlFor: f.id, children: [_jsx("span", { children: f.label }), f.options
+                                                ? _jsx("select", { id: f.id, name: f.id, defaultValue: f.value, children: f.options.map((o) => _jsx("option", { value: o.value, children: o.label }, o.value)) })
+                                                : _jsx("input", { id: f.id, name: f.id, type: f.type ?? 'text', placeholder: f.placeholder, autoComplete: f.autoComplete, defaultValue: f.value, ...(f.format ? { 'data-format': f.format, inputMode: 'numeric' } : {}) })] }, f.id)))] }, s.heading))), props.error ? _jsx("p", { className: "pay-error", role: "alert", children: props.error }) : null, _jsx("button", { type: "submit", className: "pay-submit SubmitButton", "data-testid": props.submit.testId, children: props.submit.label }), props.note ? _jsx("p", { className: "pay-note", children: props.note }) : null] }), props.sections.some((s) => s.fields.some((f) => f.format)) ? _jsx("script", { dangerouslySetInnerHTML: { __html: FORMAT_SCRIPT } }) : null] })] }));
+}
+/** The payment page's layout; a pack's skin sets the colours and type over it. */
+export const PAYMENT_CSS = `
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.pay { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
+@media (max-width: 800px) { .pay { grid-template-columns: 1fr; } }
+.pay-summary { padding: 48px 48px 24px; }
+.pay-back { display: inline-block; margin-bottom: 24px; text-decoration: none; }
+.pay-merchant { font-weight: 500; margin-bottom: 16px; }
+.pay-total-lead span { display: block; }
+.pay-total-lead strong { display: block; font-size: 36px; font-weight: 600; }
+.pay-total-lead { margin-bottom: 24px; }
+.pay-total-detail { display: block; }
+.pay-note { margin: 12px 0 0; font-size: 13px; text-align: center; }
+.pay-lines { list-style: none; padding: 0; margin: 0; }
+.pay-line { display: flex; justify-content: space-between; padding: 8px 0; }
+.pay-line small { display: block; }
+.pay-form { padding: 48px; }
+.pay-section { border: 0; padding: 0; margin: 0 0 24px; }
+.pay-section legend { font-weight: 500; margin-bottom: 8px; }
+.pay-field { display: block; margin-bottom: 12px; }
+.pay-field span { display: block; font-size: 13px; margin-bottom: 4px; }
+.pay-field input, .pay-field select { box-sizing: border-box; width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid; font: inherit; }
+.pay-error { margin: 0 0 12px; }
+.pay-submit { width: 100%; padding: 12px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
+`;

package/dist/client/payment.tsx

@@ -0,0 +1,121 @@
+// A HOSTED PAYMENT PAGE — the hosted flow a payments vendor puts between an application's "Buy" and its
+// success page (docs/contributing/architecture.md, "Screens"): what is being paid for, the fields the
+// customer fills, one submit, and the way back. A plain form rendered on the server: the submit posts and
+// the vendor's redirect follows with no script. A pack names its fields and controls the vendor's way
+// (ids, names, labels), since applications' tests fill a vendor's payment fields by those names; its skin
+// gives the look.
+export type PaymentField = {
+  id: string; label: string; type?: string; placeholder?: string; autoComplete?: string; value?: string; options?: Array<{ value: string; label: string }>;
+  /** a field that formats itself as it is typed, as payment vendors' card fields do: `card-expiry` reads the digits
+   *  `1230` as `12 / 30` (FORMAT_SCRIPT). The page still posts without a script; the pack reads what is posted. */
+  format?: 'card-expiry';
+};
+
+export type PaymentProps = {
+  merchant: string;
+  /** what is paid for, formatted the vendor's way */
+  lines: Array<{ name: string; amount: string; detail?: string }>;
+  /** the lead of the summary: a label over the amount, and a line under it ("Then $12.00 per month") */
+  total?: { label: string; amount: string; detail?: string };
+  action: string;
+  /** sections of fields, each under its heading ("Contact information", "Payment method") */
+  sections: Array<{ heading: string; fields: PaymentField[] }>;
+  submit: { label: string; testId?: string };
+  back?: { href: string; label: string };
+  /** the vendor's answer to the last submit, shown above the button */
+  error?: string;
+  /** terms shown under the button (what a trial's end will charge) */
+  note?: string;
+};
+
+/** Formats a `format`ted field as it is typed, a progressive enhancement over the plain form. `card-expiry`, as a card
+ *  form's expiry reads: four digits at most, ` / ` after the month; a first digit above 1 is the month on its own
+ *  (`5` → `05 / `), as is a single digit followed by a slash (`1/` → `01 / `); a pasted or filled `12/2030` or
+ *  `122030` keeps the year's last two digits; deleting the year's last digit leaves `12 / `, and deleting back into
+ *  the separator removes it. */
+export const FORMAT_SCRIPT = `document.querySelectorAll('input[data-format="card-expiry"]').forEach(function (el) {
+  el.addEventListener('input', function (e) {
+    var raw = el.value, deleting = typeof e.inputType === 'string' && e.inputType.indexOf('delete') === 0, mm, yy;
+    var cut = raw.indexOf('/');
+    if (cut >= 0) {
+      mm = raw.slice(0, cut).replace(/\\D/g, '').slice(0, 2);
+      yy = raw.slice(cut + 1).replace(/\\D/g, '');
+      if (mm.length === 1 && mm !== '0') mm = '0' + mm;
+    } else {
+      var d = raw.replace(/\\D/g, '');
+      if (d.length === 6 && d.slice(2, 4) === '20') d = d.slice(0, 2) + d.slice(4);
+      if (d.length >= 1 && d.charAt(0) > '1') d = '0' + d;
+      mm = d.slice(0, 2);
+      yy = d.slice(2);
+    }
+    yy = yy.length === 4 ? yy.slice(2) : yy.slice(0, 2);
+    el.value = mm.length < 2 || (deleting && !yy && raw.slice(-2) !== '/ ') ? mm : mm + ' / ' + yy;
+  });
+});`;
+
+export function Payment(props: PaymentProps) {
+  return (
+    <div className="pay">
+      <section className="pay-summary">
+        {props.back ? <a className="pay-back" href={props.back.href}>{props.back.label}</a> : null}
+        <div className="pay-merchant">{props.merchant}</div>
+        {props.total ? <div className="pay-total-lead"><span>{props.total.label}</span><strong>{props.total.amount}</strong>{props.total.detail ? <small className="pay-total-detail">{props.total.detail}</small> : null}</div> : null}
+        <ul className="pay-lines">
+          {props.lines.map((l, i) => (
+            <li key={`${l.name}:${i}`} className="pay-line">
+              <span className="pay-line-name">{l.name}{l.detail ? <small>{l.detail}</small> : null}</span>
+              <span className="pay-line-amount">{l.amount}</span>
+            </li>
+          ))}
+        </ul>
+      </section>
+      <main className="pay-form">
+        <form method="post" action={props.action}>
+          {props.sections.map((s) => (
+            <fieldset key={s.heading} className="pay-section">
+              <legend>{s.heading}</legend>
+              {s.fields.map((f) => (
+                <label key={f.id} className="pay-field" htmlFor={f.id}>
+                  <span>{f.label}</span>
+                  {f.options
+                    ? <select id={f.id} name={f.id} defaultValue={f.value}>{f.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}</select>
+                    : <input id={f.id} name={f.id} type={f.type ?? 'text'} placeholder={f.placeholder} autoComplete={f.autoComplete} defaultValue={f.value} {...(f.format ? { 'data-format': f.format, inputMode: 'numeric' as const } : {})} />}
+                </label>
+              ))}
+            </fieldset>
+          ))}
+          {props.error ? <p className="pay-error" role="alert">{props.error}</p> : null}
+          <button type="submit" className="pay-submit SubmitButton" data-testid={props.submit.testId}>{props.submit.label}</button>
+          {props.note ? <p className="pay-note">{props.note}</p> : null}
+        </form>
+        {props.sections.some((s) => s.fields.some((f) => f.format)) ? <script dangerouslySetInnerHTML={{ __html: FORMAT_SCRIPT }} /> : null}
+      </main>
+    </div>
+  );
+}
+
+/** The payment page's layout; a pack's skin sets the colours and type over it. */
+export const PAYMENT_CSS = `
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.pay { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
+@media (max-width: 800px) { .pay { grid-template-columns: 1fr; } }
+.pay-summary { padding: 48px 48px 24px; }
+.pay-back { display: inline-block; margin-bottom: 24px; text-decoration: none; }
+.pay-merchant { font-weight: 500; margin-bottom: 16px; }
+.pay-total-lead span { display: block; }
+.pay-total-lead strong { display: block; font-size: 36px; font-weight: 600; }
+.pay-total-lead { margin-bottom: 24px; }
+.pay-total-detail { display: block; }
+.pay-note { margin: 12px 0 0; font-size: 13px; text-align: center; }
+.pay-lines { list-style: none; padding: 0; margin: 0; }
+.pay-line { display: flex; justify-content: space-between; padding: 8px 0; }
+.pay-line small { display: block; }
+.pay-form { padding: 48px; }
+.pay-section { border: 0; padding: 0; margin: 0 0 24px; }
+.pay-section legend { font-weight: 500; margin-bottom: 8px; }
+.pay-field { display: block; margin-bottom: 12px; }
+.pay-field span { display: block; font-size: 13px; margin-bottom: 4px; }
+.pay-field input, .pay-field select { box-sizing: border-box; width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid; font: inherit; }
+.pay-error { margin: 0 0 12px; }
+.pay-submit { width: 100%; padding: 12px; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
+`;

package/dist/client/portal.bundle.js

@@ -0,0 +1,39 @@
+var mB=Object.create;var{getPrototypeOf:uB,defineProperty:CB,getOwnPropertyNames:sB}=Object;var yB=Object.prototype.hasOwnProperty;function dB(L){return this[L]}var pB,cB,JB=(L,J,Q)=>{var D=L!=null&&typeof L==="object";if(D){var K=J?pB??=new WeakMap:cB??=new WeakMap,A=K.get(L);if(A)return A}Q=L!=null?mB(uB(L)):{};let T=J||!L||!L.__esModule?CB(Q,"default",{value:L,enumerable:!0}):Q;for(let x of sB(L))if(!yB.call(T,x))CB(T,x,{get:dB.bind(L,x),enumerable:!0});if(D)K.set(L,T);return T};var VB=(L,J)=>()=>(J||L((J={exports:{}}).exports,J),J.exports);var gB=VB((oB,XB)=>{(function(){function L(B,G){Object.defineProperty(D.prototype,B,{get:function(){console.warn("%s(...) is deprecated in plain JavaScript React classes. %s",G[0],G[1])}})}function J(B){if(B===null||typeof B!=="object")return null;return B=PB&&B[PB]||B["@@iterator"],typeof B==="function"?B:null}function Q(B,G){B=(B=B.constructor)&&(B.displayName||B.name)||"ReactClass";var M=B+"."+G;wB[M]||(console.error("Can't call %s on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the %s component.",G,B),wB[M]=!0)}function D(B,G,M){this.props=B,this.context=G,this.refs=OB,this.updater=M||DB}function K(){}function A(B,G,M){this.props=B,this.context=G,this.refs=OB,this.updater=M||DB}function T(){}function x(B){return""+B}function f(B){try{x(B);var G=!1}catch(U){G=!0}if(G){G=console;var M=G.error,R=typeof Symbol==="function"&&Symbol.toStringTag&&B[Symbol.toStringTag]||B.constructor.name||"Object";return M.call(G,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",R),x(B)}}function h(B){if(B==null)return null;if(typeof B==="function")return B.$$typeof===SB?null:B.displayName||B.name||null;if(typeof B==="string")return B;switch(B){case s:return"Fragment";case X:return"Profiler";case H:return"StrictMode";case y:return"Suspense";case w:return"SuspenseList";case HB:return"Activity"}if(typeof B==="object")switch(typeof B.tag==="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),B.$$typeof){case GB:return"Portal";case F:return B.displayName||"Context";case q:return(B._context.displayName||"Context")+".Consumer";case E:var G=B.render;return B=B.displayName,B||(B=G.displayName||G.name||"",B=B!==""?"ForwardRef("+B+")":"ForwardRef"),B;case N:return G=B.displayName||null,G!==null?G:h(B.type)||"Memo";case _:G=B._payload,B=B._init;try{return h(B(G))}catch(M){}}return null}function e(B){if(B===s)return"<>";if(typeof B==="object"&&B!==null&&B.$$typeof===_)return"<...>";try{var G=h(B);return G?"<"+G+">":"<...>"}catch(M){return"<...>"}}function p(){var B=Y.A;return B===null?null:B.getOwner()}function c(){return Error("react-stack-top-frame")}function o(B){if(MB.call(B,"key")){var G=Object.getOwnPropertyDescriptor(B,"key").get;if(G&&G.isReactWarning)return!1}return B.key!==void 0}function YB(B,G){function M(){TB||(TB=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",G))}M.isReactWarning=!0,Object.defineProperty(B,"key",{get:M,configurable:!0})}function i(){var B=h(this.type);return EB[B]||(EB[B]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),B=this.props.ref,B!==void 0?B:null}function l(B,G,M,R,U,Z){var W=M.ref;return B={$$typeof:r,type:B,key:G,props:M,_owner:R},(W!==void 0?W:null)!==null?Object.defineProperty(B,"ref",{enumerable:!1,get:i}):Object.defineProperty(B,"ref",{enumerable:!1,value:null}),B._store={},Object.defineProperty(B._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(B,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(B,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(B,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(B.props),Object.freeze(B)),B}function ZB(B,G){return G=l(B.type,G,B.props,B._owner,B._debugStack,B._debugTask),B._store&&(G._store.validated=B._store.validated),G}function BB(B){j(B)?B._store&&(B._store.validated=1):typeof B==="object"&&B!==null&&B.$$typeof===_&&(B._payload.status==="fulfilled"?j(B._payload.value)&&B._payload.value._store&&(B._payload.value._store.validated=1):B._store&&(B._store.validated=1))}function j(B){return typeof B==="object"&&B!==null&&B.$$typeof===r}function zB(B){var G={"=":"=0",":":"=2"};return"$"+B.replace(/[=:]/g,function(M){return G[M]})}function t(B,G){return typeof B==="object"&&B!==null&&B.key!=null?(f(B.key),zB(""+B.key)):G.toString(36)}function QB(B){switch(B.status){case"fulfilled":return B.value;case"rejected":throw B.reason;default:switch(typeof B.status==="string"?B.then(T,T):(B.status="pending",B.then(function(G){B.status==="pending"&&(B.status="fulfilled",B.value=G)},function(G){B.status==="pending"&&(B.status="rejected",B.reason=G)})),B.status){case"fulfilled":return B.value;case"rejected":throw B.reason}}throw B}function v(B,G,M,R,U){var Z=typeof B;if(Z==="undefined"||Z==="boolean")B=null;var W=!1;if(B===null)W=!0;else switch(Z){case"bigint":case"string":case"number":W=!0;break;case"object":switch(B.$$typeof){case r:case GB:W=!0;break;case _:return W=B._init,v(W(B._payload),G,M,R,U)}}if(W){W=B,U=U(W);var $=R===""?"."+t(W,0):R;return KB(U)?(M="",$!=null&&(M=$.replace(_B,"$&/")+"/"),v(U,G,M,"",function(V){return V})):U!=null&&(j(U)&&(U.key!=null&&(W&&W.key===U.key||f(U.key)),M=ZB(U,M+(U.key==null||W&&W.key===U.key?"":(""+U.key).replace(_B,"$&/")+"/")+$),R!==""&&W!=null&&j(W)&&W.key==null&&W._store&&!W._store.validated&&(M._store.validated=2),U=M),G.push(U)),1}if(W=0,$=R===""?".":R+":",KB(B))for(var z=0;z<B.length;z++)R=B[z],Z=$+t(R,z),W+=v(R,G,M,Z,U);else if(z=J(B),typeof z==="function")for(z===B.entries&&(NB||console.warn("Using Maps as children is not supported. Use an array of keyed ReactElements instead."),NB=!0),B=z.call(B),z=0;!(R=B.next()).done;)R=R.value,Z=$+t(R,z++),W+=v(R,G,M,Z,U);else if(Z==="object"){if(typeof B.then==="function")return v(QB(B),G,M,R,U);throw G=String(B),Error("Objects are not valid as a React child (found: "+(G==="[object Object]"?"object with keys {"+Object.keys(B).join(", ")+"}":G)+"). If you meant to render a collection of children, use an array instead.")}return W}function C(B,G,M){if(B==null)return B;var R=[],U=0;return v(B,R,"","",function(Z){return G.call(M,Z,U++)}),R}function LB(B){if(B._status===-1){var G=B._ioInfo;G!=null&&(G.start=G.end=performance.now()),G=B._result;var M=G();if(M.then(function(U){if(B._status===0||B._status===-1){B._status=1,B._result=U;var Z=B._ioInfo;Z!=null&&(Z.end=performance.now()),M.status===void 0&&(M.status="fulfilled",M.value=U)}},function(U){if(B._status===0||B._status===-1){B._status=2,B._result=U;var Z=B._ioInfo;Z!=null&&(Z.end=performance.now()),M.status===void 0&&(M.status="rejected",M.reason=U)}}),G=B._ioInfo,G!=null){G.value=M;var R=M.displayName;typeof R==="string"&&(G.name=R)}B._status===-1&&(B._status=0,B._result=M)}if(B._status===1)return G=B._result,G===void 0&&console.error(`lazy: Expected the result of a dynamic import() call. Instead received: %s
+
+Your code should look like: 
+  const MyComponent = lazy(() => import('./MyComponent'))
+
+Did you accidentally put curly braces around the import?`,G),"default"in G||console.error(`lazy: Expected the result of a dynamic import() call. Instead received: %s
+
+Your code should look like: 
+  const MyComponent = lazy(() => import('./MyComponent'))`,G),G.default;throw B._result}function P(){var B=Y.H;return B===null&&console.error(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+1. You might have mismatching versions of React and the renderer (such as React DOM)
+2. You might be breaking the Rules of Hooks
+3. You might have more than one copy of React in the same app
+See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`),B}function n(){Y.asyncTransitions--}function g(B){if(RB===null)try{var G=("require"+Math.random()).slice(0,7);RB=(XB&&XB[G]).call(XB,"timers").setImmediate}catch(M){RB=function(R){jB===!1&&(jB=!0,typeof MessageChannel>"u"&&console.error("This browser does not have a MessageChannel implementation, so enqueuing tasks via await act(async () => ...) will fail. Please file an issue at https://github.com/facebook/react/issues if you encounter this warning."));var U=new MessageChannel;U.port1.onmessage=R,U.port2.postMessage(void 0)}}return RB(B)}function S(B){return 1<B.length&&typeof AggregateError==="function"?AggregateError(B):B[0]}function k(B,G){G!==UB-1&&console.error("You seem to have overlapping act() calls, this is not supported. Be sure to await previous act() calls before making a new one. "),UB=G}function m(B,G,M){var R=Y.actQueue;if(R!==null)if(R.length!==0)try{u(R),g(function(){return m(B,G,M)});return}catch(U){Y.thrownErrors.push(U)}else Y.actQueue=null;0<Y.thrownErrors.length?(R=S(Y.thrownErrors),Y.thrownErrors.length=0,M(R)):G(B)}function u(B){if(!$B){$B=!0;var G=0;try{for(;G<B.length;G++){var M=B[G];do{Y.didUsePromise=!1;var R=M(!1);if(R!==null){if(Y.didUsePromise){B[G]=M,B.splice(0,G);return}M=R}else break}while(1)}B.length=0}catch(U){B.splice(0,G+1),Y.thrownErrors.push(U)}finally{$B=!1}}}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart==="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var r=Symbol.for("react.transitional.element"),GB=Symbol.for("react.portal"),s=Symbol.for("react.fragment"),H=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),q=Symbol.for("react.consumer"),F=Symbol.for("react.context"),E=Symbol.for("react.forward_ref"),y=Symbol.for("react.suspense"),w=Symbol.for("react.suspense_list"),N=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),HB=Symbol.for("react.activity"),PB=Symbol.iterator,wB={},DB={isMounted:function(){return!1},enqueueForceUpdate:function(B){Q(B,"forceUpdate")},enqueueReplaceState:function(B){Q(B,"replaceState")},enqueueSetState:function(B){Q(B,"setState")}},FB=Object.assign,OB={};Object.freeze(OB),D.prototype.isReactComponent={},D.prototype.setState=function(B,G){if(typeof B!=="object"&&typeof B!=="function"&&B!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,B,G,"setState")},D.prototype.forceUpdate=function(B){this.updater.enqueueForceUpdate(this,B,"forceUpdate")};var I={isMounted:["isMounted","Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks."],replaceState:["replaceState","Refactor your code to use setState instead (see https://github.com/facebook/react/issues/3236)."]};for(a in I)I.hasOwnProperty(a)&&L(a,I[a]);K.prototype=D.prototype,I=A.prototype=new K,I.constructor=A,FB(I,D.prototype),I.isPureReactComponent=!0;var KB=Array.isArray,SB=Symbol.for("react.client.reference"),Y={H:null,A:null,T:null,S:null,actQueue:null,asyncTransitions:0,isBatchingLegacy:!1,didScheduleLegacyUpdate:!1,didUsePromise:!1,thrownErrors:[],getCurrentStack:null,recentlyCreatedOwnerStacks:0},MB=Object.prototype.hasOwnProperty,AB=console.createTask?console.createTask:function(){return null};I={react_stack_bottom_frame:function(B){return B()}};var TB,IB,EB={},kB=I.react_stack_bottom_frame.bind(I,c)(),bB=AB(e(c)),NB=!1,_B=/\/+/g,xB=typeof reportError==="function"?reportError:function(B){if(typeof window==="object"&&typeof window.ErrorEvent==="function"){var G=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof B==="object"&&B!==null&&typeof B.message==="string"?String(B.message):String(B),error:B});if(!window.dispatchEvent(G))return}else if(typeof process==="object"&&typeof process.emit==="function"){process.emit("uncaughtException",B);return}console.error(B)},jB=!1,RB=null,UB=0,WB=!1,$B=!1,vB=typeof queueMicrotask==="function"?function(B){queueMicrotask(function(){return queueMicrotask(B)})}:g;I=Object.freeze({__proto__:null,c:function(B){return P().useMemoCache(B)}});var a={map:C,forEach:function(B,G,M){C(B,function(){G.apply(this,arguments)},M)},count:function(B){var G=0;return C(B,function(){G++}),G},toArray:function(B){return C(B,function(G){return G})||[]},only:function(B){if(!j(B))throw Error("React.Children.only expected to receive a single React element child.");return B}};oB.Activity=HB,oB.Children=a,oB.Component=D,oB.Fragment=s,oB.Profiler=X,oB.PureComponent=A,oB.StrictMode=H,oB.Suspense=y,oB.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=Y,oB.__COMPILER_RUNTIME=I,oB.act=function(B){var G=Y.actQueue,M=UB;UB++;var R=Y.actQueue=G!==null?G:[],U=!1;try{var Z=B()}catch(z){Y.thrownErrors.push(z)}if(0<Y.thrownErrors.length)throw k(G,M),B=S(Y.thrownErrors),Y.thrownErrors.length=0,B;if(Z!==null&&typeof Z==="object"&&typeof Z.then==="function"){var W=Z;return vB(function(){U||WB||(WB=!0,console.error("You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);"))}),{then:function(z,V){U=!0,W.then(function(d){if(k(G,M),M===0){try{u(R),g(function(){return m(d,z,V)})}catch(hB){Y.thrownErrors.push(hB)}if(0<Y.thrownErrors.length){var fB=S(Y.thrownErrors);Y.thrownErrors.length=0,V(fB)}}else z(d)},function(d){k(G,M),0<Y.thrownErrors.length?(d=S(Y.thrownErrors),Y.thrownErrors.length=0,V(d)):V(d)})}}}var $=Z;if(k(G,M),M===0&&(u(R),R.length!==0&&vB(function(){U||WB||(WB=!0,console.error("A component suspended inside an `act` scope, but the `act` call was not awaited. When testing React components that depend on asynchronous data, you must await the result:\n\nawait act(() => ...)"))}),Y.actQueue=null),0<Y.thrownErrors.length)throw B=S(Y.thrownErrors),Y.thrownErrors.length=0,B;return{then:function(z,V){U=!0,M===0?(Y.actQueue=R,g(function(){return m($,z,V)})):z($)}}},oB.cache=function(B){return function(){return B.apply(null,arguments)}},oB.cacheSignal=function(){return null},oB.captureOwnerStack=function(){var B=Y.getCurrentStack;return B===null?null:B()},oB.cloneElement=function(B,G,M){if(B===null||B===void 0)throw Error("The argument must be a React element, but you passed "+B+".");var R=FB({},B.props),U=B.key,Z=B._owner;if(G!=null){var W;B:{if(MB.call(G,"ref")&&(W=Object.getOwnPropertyDescriptor(G,"ref").get)&&W.isReactWarning){W=!1;break B}W=G.ref!==void 0}W&&(Z=p()),o(G)&&(f(G.key),U=""+G.key);for($ in G)!MB.call(G,$)||$==="key"||$==="__self"||$==="__source"||$==="ref"&&G.ref===void 0||(R[$]=G[$])}var $=arguments.length-2;if($===1)R.children=M;else if(1<$){W=Array($);for(var z=0;z<$;z++)W[z]=arguments[z+2];R.children=W}R=l(B.type,U,R,Z,B._debugStack,B._debugTask);for(U=2;U<arguments.length;U++)BB(arguments[U]);return R},oB.createContext=function(B){return B={$$typeof:F,_currentValue:B,_currentValue2:B,_threadCount:0,Provider:null,Consumer:null},B.Provider=B,B.Consumer={$$typeof:q,_context:B},B._currentRenderer=null,B._currentRenderer2=null,B},oB.createElement=function(B,G,M){for(var R=2;R<arguments.length;R++)BB(arguments[R]);R={};var U=null;if(G!=null)for(z in IB||!("__self"in G)||"key"in G||(IB=!0,console.warn("Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform")),o(G)&&(f(G.key),U=""+G.key),G)MB.call(G,z)&&z!=="key"&&z!=="__self"&&z!=="__source"&&(R[z]=G[z]);var Z=arguments.length-2;if(Z===1)R.children=M;else if(1<Z){for(var W=Array(Z),$=0;$<Z;$++)W[$]=arguments[$+2];Object.freeze&&Object.freeze(W),R.children=W}if(B&&B.defaultProps)for(z in Z=B.defaultProps,Z)R[z]===void 0&&(R[z]=Z[z]);U&&YB(R,typeof B==="function"?B.displayName||B.name||"Unknown":B);var z=1e4>Y.recentlyCreatedOwnerStacks++;return l(B,U,R,p(),z?Error("react-stack-top-frame"):kB,z?AB(e(B)):bB)},oB.createRef=function(){var B={current:null};return Object.seal(B),B},oB.forwardRef=function(B){B!=null&&B.$$typeof===N?console.error("forwardRef requires a render function but received a `memo` component. Instead of forwardRef(memo(...)), use memo(forwardRef(...))."):typeof B!=="function"?console.error("forwardRef requires a render function but was given %s.",B===null?"null":typeof B):B.length!==0&&B.length!==2&&console.error("forwardRef render functions accept exactly two parameters: props and ref. %s",B.length===1?"Did you forget to use the ref parameter?":"Any additional parameter will be undefined."),B!=null&&B.defaultProps!=null&&console.error("forwardRef render functions do not support defaultProps. Did you accidentally pass a React component?");var G={$$typeof:E,render:B},M;return Object.defineProperty(G,"displayName",{enumerable:!1,configurable:!0,get:function(){return M},set:function(R){M=R,B.name||B.displayName||(Object.defineProperty(B,"name",{value:R}),B.displayName=R)}}),G},oB.isValidElement=j,oB.lazy=function(B){B={_status:-1,_result:B};var G={$$typeof:_,_payload:B,_init:LB},M={name:"lazy",start:-1,end:-1,value:null,owner:null,debugStack:Error("react-stack-top-frame"),debugTask:console.createTask?console.createTask("lazy()"):null};return B._ioInfo=M,G._debugInfo=[{awaited:M}],G},oB.memo=function(B,G){B==null&&console.error("memo: The first argument must be a component. Instead received: %s",B===null?"null":typeof B),G={$$typeof:N,type:B,compare:G===void 0?null:G};var M;return Object.defineProperty(G,"displayName",{enumerable:!1,configurable:!0,get:function(){return M},set:function(R){M=R,B.name||B.displayName||(Object.defineProperty(B,"name",{value:R}),B.displayName=R)}}),G},oB.startTransition=function(B){var G=Y.T,M={};M._updatedFibers=new Set,Y.T=M;try{var R=B(),U=Y.S;U!==null&&U(M,R),typeof R==="object"&&R!==null&&typeof R.then==="function"&&(Y.asyncTransitions++,R.then(n,n),R.then(T,xB))}catch(Z){xB(Z)}finally{G===null&&M._updatedFibers&&(B=M._updatedFibers.size,M._updatedFibers.clear(),10<B&&console.warn("Detected a large number of updates inside startTransition. If this is due to a subscription please re-write it to use React provided hooks. Otherwise concurrent mode guarantees are off the table.")),G!==null&&M.types!==null&&(G.types!==null&&G.types!==M.types&&console.error("We expected inner Transitions to have transferred the outer types set and that you cannot add to the outer Transition while inside the inner.This is a bug in React."),G.types=M.types),Y.T=G}},oB.unstable_useCacheRefresh=function(){return P().useCacheRefresh()},oB.use=function(B){return P().use(B)},oB.useActionState=function(B,G,M){return P().useActionState(B,G,M)},oB.useCallback=function(B,G){return P().useCallback(B,G)},oB.useContext=function(B){var G=P();return B.$$typeof===q&&console.error("Calling useContext(Context.Consumer) is not supported and will cause bugs. Did you mean to call useContext(Context) instead?"),G.useContext(B)},oB.useDebugValue=function(B,G){return P().useDebugValue(B,G)},oB.useDeferredValue=function(B,G){return P().useDeferredValue(B,G)},oB.useEffect=function(B,G){return B==null&&console.warn("React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?"),P().useEffect(B,G)},oB.useEffectEvent=function(B){return P().useEffectEvent(B)},oB.useId=function(){return P().useId()},oB.useImperativeHandle=function(B,G,M){return P().useImperativeHandle(B,G,M)},oB.useInsertionEffect=function(B,G){return B==null&&console.warn("React Hook useInsertionEffect requires an effect callback. Did you forget to pass a callback to the hook?"),P().useInsertionEffect(B,G)},oB.useLayoutEffect=function(B,G){return B==null&&console.warn("React Hook useLayoutEffect requires an effect callback. Did you forget to pass a callback to the hook?"),P().useLayoutEffect(B,G)},oB.useMemo=function(B,G){return P().useMemo(B,G)},oB.useOptimistic=function(B,G){return P().useOptimistic(B,G)},oB.useReducer=function(B,G,M){return P().useReducer(B,G,M)},oB.useRef=function(B){return P().useRef(B)},oB.useState=function(B){return P().useState(B)},oB.useSyncExternalStore=function(B,G,M){return P().useSyncExternalStore(B,G,M)},oB.useTransition=function(){return P().useTransition()},oB.version="19.2.7",typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop==="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())})()});var qB=VB((iB)=>{var b=JB(gB());(function(){function L(H){if(H==null)return null;if(typeof H==="function")return H.$$typeof===P?null:H.displayName||H.name||null;if(typeof H==="string")return H;switch(H){case i:return"Fragment";case ZB:return"Profiler";case l:return"StrictMode";case t:return"Suspense";case QB:return"SuspenseList";case LB:return"Activity"}if(typeof H==="object")switch(typeof H.tag==="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),H.$$typeof){case YB:return"Portal";case j:return H.displayName||"Context";case BB:return(H._context.displayName||"Context")+".Consumer";case zB:var X=H.render;return H=H.displayName,H||(H=X.displayName||X.name||"",H=H!==""?"ForwardRef("+H+")":"ForwardRef"),H;case v:return X=H.displayName||null,X!==null?X:L(H.type)||"Memo";case C:X=H._payload,H=H._init;try{return L(H(X))}catch(q){}}return null}function J(H){return""+H}function Q(H){try{J(H);var X=!1}catch(E){X=!0}if(X){X=console;var q=X.error,F=typeof Symbol==="function"&&Symbol.toStringTag&&H[Symbol.toStringTag]||H.constructor.name||"Object";return q.call(X,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",F),J(H)}}function D(H){if(H===i)return"<>";if(typeof H==="object"&&H!==null&&H.$$typeof===C)return"<...>";try{var X=L(H);return X?"<"+X+">":"<...>"}catch(q){return"<...>"}}function K(){var H=n.A;return H===null?null:H.getOwner()}function A(){return Error("react-stack-top-frame")}function T(H){if(g.call(H,"key")){var X=Object.getOwnPropertyDescriptor(H,"key").get;if(X&&X.isReactWarning)return!1}return H.key!==void 0}function x(H,X){function q(){m||(m=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",X))}q.isReactWarning=!0,Object.defineProperty(H,"key",{get:q,configurable:!0})}function f(){var H=L(this.type);return u[H]||(u[H]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),H=this.props.ref,H!==void 0?H:null}function h(H,X,q,F,E,y){var w=q.ref;return H={$$typeof:o,type:H,key:X,props:q,_owner:F},(w!==void 0?w:null)!==null?Object.defineProperty(H,"ref",{enumerable:!1,get:f}):Object.defineProperty(H,"ref",{enumerable:!1,value:null}),H._store={},Object.defineProperty(H._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(H,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(H,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:E}),Object.defineProperty(H,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:y}),Object.freeze&&(Object.freeze(H.props),Object.freeze(H)),H}function e(H,X,q,F,E,y){var w=X.children;if(w!==void 0)if(F)if(S(w)){for(F=0;F<w.length;F++)p(w[F]);Object.freeze&&Object.freeze(w)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else p(w);if(g.call(X,"key")){w=L(H);var N=Object.keys(X).filter(function(HB){return HB!=="key"});F=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",s[w+F]||(N=0<N.length?"{"+N.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,F,w,N,w),s[w+F]=!0)}if(w=null,q!==void 0&&(Q(q),w=""+q),T(X)&&(Q(X.key),w=""+X.key),"key"in X){q={};for(var _ in X)_!=="key"&&(q[_]=X[_])}else q=X;return w&&x(q,typeof H==="function"?H.displayName||H.name||"Unknown":H),h(H,w,q,K(),E,y)}function p(H){c(H)?H._store&&(H._store.validated=1):typeof H==="object"&&H!==null&&H.$$typeof===C&&(H._payload.status==="fulfilled"?c(H._payload.value)&&H._payload.value._store&&(H._payload.value._store.validated=1):H._store&&(H._store.validated=1))}function c(H){return typeof H==="object"&&H!==null&&H.$$typeof===o}var o=Symbol.for("react.transitional.element"),YB=Symbol.for("react.portal"),i=Symbol.for("react.fragment"),l=Symbol.for("react.strict_mode"),ZB=Symbol.for("react.profiler"),BB=Symbol.for("react.consumer"),j=Symbol.for("react.context"),zB=Symbol.for("react.forward_ref"),t=Symbol.for("react.suspense"),QB=Symbol.for("react.suspense_list"),v=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),LB=Symbol.for("react.activity"),P=Symbol.for("react.client.reference"),n=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,g=Object.prototype.hasOwnProperty,S=Array.isArray,k=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(H){return H()}};var m,u={},r=b.react_stack_bottom_frame.bind(b,A)(),GB=k(D(A)),s={};iB.Fragment=i,iB.jsxDEV=function(H,X,q,F){var E=1e4>n.recentlyCreatedOwnerStacks++;return e(H,X,q,F,E?Error("react-stack-top-frame"):r,E?k(D(H)):GB)}})()});var O=JB(qB(),1);function dG(L){return O.jsxDEV("div",{className:"portal",children:[O.jsxDEV("aside",{className:"portal-side",children:[O.jsxDEV("div",{className:"portal-merchant",children:L.merchant},void 0,!1,void 0,this),L.back?O.jsxDEV("a",{className:"portal-back",href:L.back.href,children:L.back.label},void 0,!1,void 0,this):null]},void 0,!0,void 0,this),O.jsxDEV("main",{className:"portal-main",children:[L.notice?O.jsxDEV("p",{className:"portal-notice",role:"status",children:L.notice},void 0,!1,void 0,this):null,L.sections.map((J)=>O.jsxDEV("section",{className:"portal-section",children:[O.jsxDEV("h2",{children:J.heading},void 0,!1,void 0,this),J.items.length===0&&J.empty?O.jsxDEV("p",{className:"portal-empty",children:J.empty},void 0,!1,void 0,this):null,O.jsxDEV("ul",{children:J.items.map((Q,D)=>O.jsxDEV("li",{className:"portal-item",children:[O.jsxDEV("div",{className:"portal-item-text",children:[O.jsxDEV("strong",{children:Q.title},void 0,!1,void 0,this),Q.badge?O.jsxDEV("span",{className:"portal-badge",children:Q.badge},void 0,!1,void 0,this):null,Q.detail?O.jsxDEV("span",{className:"portal-detail",children:Q.detail},void 0,!1,void 0,this):null,Q.note?O.jsxDEV("span",{className:"portal-note",children:Q.note},void 0,!1,void 0,this):null]},void 0,!0,void 0,this),O.jsxDEV("div",{className:"portal-actions",children:(Q.actions??[]).map((K)=>O.jsxDEV("form",{method:K.method??"post",action:K.action,children:[Object.entries(K.fields??{}).map(([A,T])=>O.jsxDEV("input",{type:"hidden",name:A,value:T},A,!1,void 0,this)),O.jsxDEV("button",{type:"submit",className:`portal-button${K.tone?` portal-${K.tone}`:""}`,children:K.label},void 0,!1,void 0,this)]},K.label,!0,void 0,this))},void 0,!1,void 0,this)]},`${Q.title}:${D}`,!0,void 0,this))},void 0,!1,void 0,this)]},J.heading,!0,void 0,this)),(L.forms??[]).map((J)=>O.jsxDEV("section",{className:"portal-section",children:[O.jsxDEV("h2",{children:J.heading},void 0,!1,void 0,this),O.jsxDEV("form",{method:"post",action:J.action,className:"portal-form",children:[J.fields.map((Q)=>O.jsxDEV("label",{className:"portal-field",htmlFor:Q.id,children:[O.jsxDEV("span",{children:Q.label},void 0,!1,void 0,this),Q.options?O.jsxDEV("select",{id:Q.id,name:Q.id,defaultValue:Q.value,children:Q.options.map((D)=>O.jsxDEV("option",{value:D.value,children:D.label},D.value,!1,void 0,this))},void 0,!1,void 0,this):O.jsxDEV("input",{id:Q.id,name:Q.id,type:Q.type??"text",placeholder:Q.placeholder,defaultValue:Q.value},void 0,!1,void 0,this)]},Q.id,!0,void 0,this)),O.jsxDEV("button",{type:"submit",className:"portal-button portal-primary",children:J.submit.label},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},J.heading,!0,void 0,this))]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)}var pG=`
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.portal { display: grid; grid-template-columns: 1fr 2fr; min-height: 100vh; }
+@media (max-width: 800px) { .portal { grid-template-columns: 1fr; } }
+.portal-side { padding: 48px; }
+.portal-merchant { font-weight: 600; font-size: 18px; margin-bottom: 16px; }
+.portal-back { text-decoration: none; }
+.portal-main { padding: 48px; max-width: 640px; }
+.portal-notice { padding: 12px 16px; border-radius: 6px; margin: 0 0 24px; }
+.portal-section { margin-bottom: 32px; }
+.portal-section h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid; }
+.portal-section ul { list-style: none; padding: 0; margin: 0; }
+.portal-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
+.portal-item-text { display: flex; flex-direction: column; }
+.portal-badge { align-self: flex-start; font-size: 12px; padding: 0 6px; border-radius: 4px; margin: 2px 0; }
+.portal-detail, .portal-note { font-size: 13px; }
+.portal-actions { display: flex; gap: 8px; align-items: flex-start; }
+.portal-button { padding: 6px 12px; border-radius: 6px; border: 1px solid; font: inherit; cursor: pointer; background: transparent; }
+.portal-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
+.portal-field { display: flex; flex-direction: column; gap: 4px; width: 100%; }
+.portal-field input, .portal-field select { padding: 8px 10px; border: 1px solid; border-radius: 6px; font: inherit; }
+`;export{dG as Portal,pG as PORTAL_CSS};

package/dist/client/portal.d.ts

@@ -0,0 +1,44 @@
+import type { PaymentField } from './payment.js';
+/** A move on an item: a form that posts, or with `method: 'get'` a button that opens another page (a link a person follows). */
+export type PortalAction = {
+    label: string;
+    action: string;
+    fields?: Record<string, string>;
+    tone?: 'danger' | 'primary';
+    method?: 'get' | 'post';
+};
+export type PortalItem = {
+    title: string;
+    detail?: string;
+    note?: string;
+    badge?: string;
+    actions?: PortalAction[];
+};
+export type PortalSection = {
+    heading: string;
+    items: PortalItem[];
+    empty?: string;
+};
+/** A form that makes something new from fields the person fills, named the vendor's way. */
+export type PortalForm = {
+    heading: string;
+    action: string;
+    fields: PaymentField[];
+    submit: {
+        label: string;
+    };
+};
+export type PortalProps = {
+    merchant: string;
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** a line at the top after a move ("Your plan will be canceled on May 1") */
+    notice?: string;
+    sections: PortalSection[];
+    forms?: PortalForm[];
+};
+export declare function Portal(props: PortalProps): import("react").JSX.Element;
+/** The portal's layout; a pack's skin sets the colours and type over it. */
+export declare const PORTAL_CSS = "\nbody { margin: 0; font: 14px/1.5 system-ui, -apple-system, \"Segoe UI\", sans-serif; }\n.portal { display: grid; grid-template-columns: 1fr 2fr; min-height: 100vh; }\n@media (max-width: 800px) { .portal { grid-template-columns: 1fr; } }\n.portal-side { padding: 48px; }\n.portal-merchant { font-weight: 600; font-size: 18px; margin-bottom: 16px; }\n.portal-back { text-decoration: none; }\n.portal-main { padding: 48px; max-width: 640px; }\n.portal-notice { padding: 12px 16px; border-radius: 6px; margin: 0 0 24px; }\n.portal-section { margin-bottom: 32px; }\n.portal-section h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid; }\n.portal-section ul { list-style: none; padding: 0; margin: 0; }\n.portal-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }\n.portal-item-text { display: flex; flex-direction: column; }\n.portal-badge { align-self: flex-start; font-size: 12px; padding: 0 6px; border-radius: 4px; margin: 2px 0; }\n.portal-detail, .portal-note { font-size: 13px; }\n.portal-actions { display: flex; gap: 8px; align-items: flex-start; }\n.portal-button { padding: 6px 12px; border-radius: 6px; border: 1px solid; font: inherit; cursor: pointer; background: transparent; }\n.portal-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }\n.portal-field { display: flex; flex-direction: column; gap: 4px; width: 100%; }\n.portal-field input, .portal-field select { padding: 8px 10px; border: 1px solid; border-radius: 6px; font: inherit; }\n";

package/dist/client/portal.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Portal(props) {
+    return (_jsxs("div", { className: "portal", children: [_jsxs("aside", { className: "portal-side", children: [_jsx("div", { className: "portal-merchant", children: props.merchant }), props.back ? _jsx("a", { className: "portal-back", href: props.back.href, children: props.back.label }) : null] }), _jsxs("main", { className: "portal-main", children: [props.notice ? _jsx("p", { className: "portal-notice", role: "status", children: props.notice }) : null, props.sections.map((s) => (_jsxs("section", { className: "portal-section", children: [_jsx("h2", { children: s.heading }), s.items.length === 0 && s.empty ? _jsx("p", { className: "portal-empty", children: s.empty }) : null, _jsx("ul", { children: s.items.map((item, i) => (_jsxs("li", { className: "portal-item", children: [_jsxs("div", { className: "portal-item-text", children: [_jsx("strong", { children: item.title }), item.badge ? _jsx("span", { className: "portal-badge", children: item.badge }) : null, item.detail ? _jsx("span", { className: "portal-detail", children: item.detail }) : null, item.note ? _jsx("span", { className: "portal-note", children: item.note }) : null] }), _jsx("div", { className: "portal-actions", children: (item.actions ?? []).map((a) => (_jsxs("form", { method: a.method ?? 'post', action: a.action, children: [Object.entries(a.fields ?? {}).map(([k, v]) => _jsx("input", { type: "hidden", name: k, value: v }, k)), _jsx("button", { type: "submit", className: `portal-button${a.tone ? ` portal-${a.tone}` : ''}`, children: a.label })] }, a.label))) })] }, `${item.title}:${i}`))) })] }, s.heading))), (props.forms ?? []).map((f) => (_jsxs("section", { className: "portal-section", children: [_jsx("h2", { children: f.heading }), _jsxs("form", { method: "post", action: f.action, className: "portal-form", children: [f.fields.map((field) => (_jsxs("label", { className: "portal-field", htmlFor: field.id, children: [_jsx("span", { children: field.label }), field.options
+                                                ? _jsx("select", { id: field.id, name: field.id, defaultValue: field.value, children: field.options.map((o) => _jsx("option", { value: o.value, children: o.label }, o.value)) })
+                                                : _jsx("input", { id: field.id, name: field.id, type: field.type ?? 'text', placeholder: field.placeholder, defaultValue: field.value })] }, field.id))), _jsx("button", { type: "submit", className: "portal-button portal-primary", children: f.submit.label })] })] }, f.heading)))] })] }));
+}
+/** The portal's layout; a pack's skin sets the colours and type over it. */
+export const PORTAL_CSS = `
+body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.portal { display: grid; grid-template-columns: 1fr 2fr; min-height: 100vh; }
+@media (max-width: 800px) { .portal { grid-template-columns: 1fr; } }
+.portal-side { padding: 48px; }
+.portal-merchant { font-weight: 600; font-size: 18px; margin-bottom: 16px; }
+.portal-back { text-decoration: none; }
+.portal-main { padding: 48px; max-width: 640px; }
+.portal-notice { padding: 12px 16px; border-radius: 6px; margin: 0 0 24px; }
+.portal-section { margin-bottom: 32px; }
+.portal-section h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid; }
+.portal-section ul { list-style: none; padding: 0; margin: 0; }
+.portal-item { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
+.portal-item-text { display: flex; flex-direction: column; }
+.portal-badge { align-self: flex-start; font-size: 12px; padding: 0 6px; border-radius: 4px; margin: 2px 0; }
+.portal-detail, .portal-note { font-size: 13px; }
+.portal-actions { display: flex; gap: 8px; align-items: flex-start; }
+.portal-button { padding: 6px 12px; border-radius: 6px; border: 1px solid; font: inherit; cursor: pointer; background: transparent; }
+.portal-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
+.portal-field { display: flex; flex-direction: column; gap: 4px; width: 100%; }
+.portal-field input, .portal-field select { padding: 8px 10px; border: 1px solid; border-radius: 6px; font: inherit; }
+`;