@verifiedinc-public/shared-ui-elements 12.28.3-rc.156 → 12.29.0

package/dist/components/animation/DiffusiveText/DiffusiveText.d.ts

@@ -9,12 +9,18 @@ export type DiffusiveTextProps = {
     template: string;
     value: string | undefined;
     /**
-     * Verified Morph's CSS family: `verifiedMorphFontFamily` once the app imports
-     * `@verifiedinc-public/shared-ui-elements/fonts/verified-morph.css`, or the family a framework
-     * font loader (`next/font/local`) gives it.
+     * Verified Morph's CSS family for the loading scramble's monospace look: `verifiedMorphFontFamily`
+     * once the app imports `@verifiedinc-public/shared-ui-elements/fonts/verified-morph.css`, or the
+     * family a framework font loader (`next/font/local`) gives it. Without it the text inherits its
+     * font, which is enough for a known value with a `delay`; a loading scramble then isn't monospaced.
      */
-    fontFamily: string;
+    fontFamily?: string;
     /** Overrides part of `defaultDiffusiveTextTiming`. Read when the scramble starts. */
     timing?: Partial<DiffusiveTextTiming>;
+    /**
+     * Ms the scramble keeps going once the value is there, before the letters lock in. With it, a
+     * value present at mount scrambles in its own width instead of just showing.
+     */
+    delay?: number;
 };
-export declare function DiffusiveText({ template, value, fontFamily, timing, }: Readonly<DiffusiveTextProps>): React.ReactElement;
+export declare function DiffusiveText({ template, value, fontFamily, timing, delay, }: Readonly<DiffusiveTextProps>): React.ReactElement;

package/dist/components/animation/DiffusiveText/DiffusiveText.mjs

@@ -1 +1 @@
-"use strict";import{useRef as M,useState as y,useEffect as F}from"react";import{Box as $}from"@mui/material";import{useReducedMotion as E}from"framer-motion";import{createMorph as S}from"./morph.mjs";import{jsx as V}from"react/jsx-runtime";const w={swapMs:40,lockMs:600,monoEaseMs:2e3},d=new Map;function k(s,e){const n=`${s}|${e}`,f=d.get(n);if(f)return f;const o=`${e} 100px ${s}`,t=document.createElement("canvas").getContext("2d"),r=new Map,i=u=>{if(!t)return 1;const m=r.get(u)??t.measureText(u).width;return r.set(u,m),m};return t&&(t.font=o),d.set(n,i),document.fonts&&!document.fonts.check(o)&&document.fonts.load(o).then(()=>{d.get(n)===i&&d.delete(n)}).catch(()=>{}),i}const j='"Verified Morph"';function q({template:s,value:e,fontFamily:n,timing:f}){const o=M(null),t=M(null),r=E(),[i,u]=y(e!==void 0),[m,A]=y(0);i&&e===void 0&&(u(!1),A(a=>a+1)),F(()=>{var a;if(i||r)return;((a=t.current)==null?void 0:a.run)!==m&&(t.current={run:m,morph:S(s,performance.now(),{...w,...f})});const C=o.current?getComputedStyle(o.current).fontWeight:"400";let p=0;const h=T=>{var g;const c=o.current,x=(g=t.current)==null?void 0:g.morph;if(!c||!x)return;const v=x.frame(T,k(n,C));c.firstChild&&(c.firstChild.nodeValue=v.text),c.style.setProperty("--mono",v.mono.toFixed(4)),v.done?(c.style.setProperty("--mono","0"),u(!0)):p=requestAnimationFrame(h)};return p=requestAnimationFrame(h),()=>cancelAnimationFrame(p)},[i,r,s,n,m]),F(()=>{var a;e!==void 0&&((a=t.current)==null||a.morph.arrive(e,performance.now()))},[e]);const l=i||r===!0&&e!==void 0;return V($,{component:"span",ref:o,"aria-hidden":l?void 0:!0,sx:{fontFamily:n,fontVariationSettings:'"MONO" var(--mono, 0)',fontVariantLigatures:"none",verticalAlign:"top","--mono":l||r===!0?0:1,opacity:!l&&r?.3:void 0},children:l?e:s.replaceAll("#","0")})}export{q as DiffusiveText,w as defaultDiffusiveTextTiming,j as verifiedMorphFontFamily};
+"use strict";import{useRef as C,useState as T,useEffect as V}from"react";import{Box as x}from"@mui/material";import{useReducedMotion as D}from"framer-motion";import{createMorph as O}from"./morph.mjs";import{jsx as $,jsxs as P}from"react/jsx-runtime";const E={swapMs:40,lockMs:600,monoEaseMs:2e3},p=new Map;function N(c,e){const r=`${c}|${e}`,u=p.get(r);if(u)return u;const n=`${e} 100px ${c}`,o=document.createElement("canvas").getContext("2d"),a=new Map,t=i=>{if(!o)return 1;const l=a.get(i)??o.measureText(i).width;return a.set(i,l),l};return o&&(o.font=n),p.set(r,t),document.fonts&&!document.fonts.check(n)&&document.fonts.load(n).then(()=>{p.get(r)===t&&p.delete(r)}).catch(()=>{}),t}const R='"Verified Morph"';function b({template:c,value:e,fontFamily:r,timing:u,delay:n=0}){const o=C(null),a=C(null),t=D(),[i,l]=T(e!==void 0&&!n),[v,S]=T(0);i&&e===void 0&&(l(!1),S(s=>s+1)),V(()=>{var s;if(i||t)return;((s=a.current)==null?void 0:s.run)!==v&&(a.current={run:v,morph:O(c,performance.now(),{...E,...u})});const f=o.current?getComputedStyle(o.current):null,j=f?.fontWeight??"400",k=r??f?.fontFamily??"sans-serif";let h=0;const F=q=>{var A;const d=o.current,w=(A=a.current)==null?void 0:A.morph;if(!d||!w)return;const g=w.frame(q,N(k,j));d.firstChild&&(d.firstChild.nodeValue=g.text),d.style.setProperty("--mono",g.mono.toFixed(4)),g.done?(d.style.setProperty("--mono","0"),l(!0)):h=requestAnimationFrame(F)};return h=requestAnimationFrame(F),()=>cancelAnimationFrame(h)},[i,t,c,r,v]),V(()=>{var s;e!==void 0&&((s=a.current)==null||s.morph.arrive(e,performance.now()+n))},[e,n]);const m=i||t===!0&&e!==void 0,y={fontFamily:r,fontVariantLigatures:"none",fontKerning:"none"},M=$(x,{component:"span",ref:o,"aria-hidden":m?void 0:!0,sx:{...y,fontVariationSettings:'"MONO" var(--mono, 0)',verticalAlign:"top","--mono":m||t===!0||e!==void 0?0:1,opacity:!m&&t?.3:void 0,gridArea:n&&e!==void 0?"1 / 1":void 0},children:m?e:e??c.replaceAll("#","0")});return!n||e===void 0?M:P(x,{component:"span",sx:{display:"inline-grid",verticalAlign:"top"},children:[$(x,{component:"span","aria-hidden":!0,sx:{...y,gridArea:"1 / 1",visibility:"hidden"},children:e}),M]})}export{b as DiffusiveText,E as defaultDiffusiveTextTiming,R as verifiedMorphFontFamily};

package/dist/components/animation/DiffusiveText/morph.mjs

@@ -1 +1 @@
-"use strict";const C={U:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",L:"abcdefghijklmnopqrstuvwxyz",D:"0123456789"},D={X:"U",x:"L","#":"D"};function E(t){return/\d/.test(t)?"D":t.toLowerCase()!==t.toUpperCase()?t===t.toUpperCase()?"U":"L":null}const F=new WeakMap,q={waiting:.06,arrived:.02};function y(t,r,n,a){const o=t+r+a,l=q[a];let s=F.get(n);s||(s=new Map,F.set(n,s));const f=s.get(o);if(f)return f;const i=n(t),g=[...C[r]].sort((u,k)=>Math.abs(n(u)-i)-Math.abs(n(k)-i)),h=g.filter(u=>Math.abs(n(u)-i)<=i*l);let c=h;return a==="waiting"&&h.length<3?c=g.slice(0,3):h.length===0&&(c=[t]),s.set(o,c),c}const O=(t,r)=>t[Math.floor(r()*t.length)];function W(t,r){return[...t].map(n=>{const a=D[n];return a?O(C[a],r):n})}function N(t,r,n,a){for(let o=0;o<a;o+=4){const l=Math.min(4,a-o)/1e3;t.v+=(n*n*(r-t.x)-2*n*t.v)*l,t.x+=t.v*l}}function R(t,r,n,a=Math.random){const o=W(t,a),l=[...t].map(e=>D[e]??null),s=[...o],{swapMs:f,lockMs:i,monoEaseMs:g}=n,h=4400/g,c=o.map(()=>r+a()*f),u={x:1,v:0};let k=r,w=null;const L=(e,m,p,x,U)=>((s[e]===void 0||x>=c[e])&&(s[e]=O(y(m,p,U,w?"arrived":"waiting"),a),c[e]=x+f*(.7+.6*a())),s[e]);return{arrive(e,m){const p=[...e];s.length=0,c.length=0,w={at:m,real:p,lock:p.map(()=>a()**2*i)}},frame(e,m){if(!w)return N(u,.1,h,Math.min(50,Math.max(0,e-k))),k=e,{text:o.map((M,d)=>{const v=l[d];return v?L(d,M,v,e,m):M}).join(""),mono:u.x,done:!1};const{at:p,real:x,lock:U}=w,X=e-p;let j=!1;const b=x.map((M,d)=>{const v=E(M);return!v||X>=U[d]?M:(j=!0,L(d,M,v,e,m))});return j?{text:b.join(""),mono:0,done:!1}:{text:x.join(""),mono:0,done:!0}}}}export{E as classOf,R as createMorph,W as fakeFrom};
+"use strict";const C={U:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",L:"abcdefghijklmnopqrstuvwxyz",D:"0123456789"},D={X:"U",x:"L","#":"D"};function E(t){return/\d/.test(t)?"D":t.toLowerCase()!==t.toUpperCase()?t===t.toUpperCase()?"U":"L":null}const F=new WeakMap,q={waiting:.06,arrived:.04};function y(t,o,n,a){const r=t+o+a,m=q[a];let s=F.get(n);s||(s=new Map,F.set(n,s));const M=s.get(r);if(M)return M;const c=n(t),g=[...C[o]].sort((i,k)=>Math.abs(n(i)-c)-Math.abs(n(k)-c)),h=g.filter(i=>a==="arrived"?n(i)<=c&&n(i)>=c*(1-m):Math.abs(n(i)-c)<=c*m);let l=h;return a==="waiting"&&h.length<3?l=g.slice(0,3):h.length===0&&(l=[t]),s.set(r,l),l}const O=(t,o)=>t[Math.floor(o()*t.length)];function W(t,o){return[...t].map(n=>{const a=D[n];return a?O(C[a],o):n})}function z(t,o,n,a){for(let r=0;r<a;r+=4){const m=Math.min(4,a-r)/1e3;t.v+=(n*n*(o-t.x)-2*n*t.v)*m,t.x+=t.v*m}}function N(t,o,n,a=Math.random){const r=W(t,a),m=[...t].map(e=>D[e]??null),s=[...r],{swapMs:M,lockMs:c,monoEaseMs:g}=n,h=4400/g,l=r.map(()=>o+a()*M),i={x:1,v:0};let k=o,w=null;const L=(e,p,u,x,U)=>((s[e]===void 0||x>=l[e])&&(s[e]=O(y(p,u,U,w?"arrived":"waiting"),a),l[e]=x+M*(.7+.6*a())),s[e]);return{arrive(e,p){const u=[...e];s.length=0,l.length=0,w={at:p,real:u,lock:u.map(()=>a()**2*c)}},frame(e,p){if(!w)return z(i,.1,h,Math.min(50,Math.max(0,e-k))),k=e,{text:r.map((f,d)=>{const v=m[d];return v?L(d,f,v,e,p):f}).join(""),mono:i.x,done:!1};const{at:u,real:x,lock:U}=w,X=e-u;let j=!1;const b=x.map((f,d)=>{const v=E(f);return!v||X>=U[d]?f:(j=!0,L(d,f,v,e,p))});return j?{text:b.join(""),mono:0,done:!1}:{text:x.join(""),mono:0,done:!0}}}}export{E as classOf,N as createMorph,W as fakeFrom};

package/dist/components/form/NewOneClickForm/react/ui/fields/readonly/driversLicense.field.mjs

@@ -1 +1 @@
-"use strict";import{MenuItem as h,Typography as o,Stack as c}from"@mui/material";import{useFormField as y}from"../../../core/field.hook.mjs";import{FieldLabelBase as b}from"../style.mjs";import{VariantSelectField as k}from"./variantSelect.field.mjs";import{jsx as i,jsxs as v}from"react/jsx-runtime";const x={maxWidth:"100%",whiteSpace:"pre-wrap"},S=[{key:"documentNumber",label:"Number"},{key:"issuanceState",label:"State"},{key:"issuanceDate",label:"Issued"},{key:"expirationDate",label:"Expires"},{key:"address",label:"Address"}];function g({fieldChildren:l}){return i(c,{spacing:1.5,py:1,children:S.map(({key:e,label:r})=>{const a=l?.[e];return a?v(c,{direction:"row",children:[i(b,{label:r}),i(o,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:a.displayValue})]},e):null})})}function w({fieldKey:l}){const{field:e}=y({key:l});if(!e||!e.hasVariants)return null;const r=e.variants??[];return i(k,{fieldKey:l,testId:`data-drivers-license-select-${l}`,renderValue:()=>i(g,{fieldChildren:e.children}),children:r.map(a=>{var n,t,s,d;const u=(t=(n=a.children)==null?void 0:n.documentNumber)==null?void 0:t.displayValue,m=(d=(s=a.children)==null?void 0:s.issuanceState)==null?void 0:d.displayValue,p=[u,m].filter(Boolean).join(" \u2014 ")||"-";return i(h,{value:a.id,onClick:f=>f.stopPropagation(),sx:x,children:i(o,{variant:"body1",fontWeight:500,children:p})},a.id)})})}export{w as DriversLicenseField};
+"use strict";import{MenuItem as y,Typography as o,Stack as u}from"@mui/material";import{useFormField as h}from"../../../core/field.hook.mjs";import{FieldLabelBase as b,DiffusedValue as v}from"../style.mjs";import{VariantSelectField as k}from"./variantSelect.field.mjs";import{jsx as a,jsxs as x}from"react/jsx-runtime";const V={maxWidth:"100%",whiteSpace:"pre-wrap"},S=[{key:"documentNumber",label:"Number"},{key:"issuanceState",label:"State"},{key:"issuanceDate",label:"Issued"},{key:"expirationDate",label:"Expires"},{key:"address",label:"Address"}];function g({fieldChildren:i}){return a(u,{spacing:1.5,py:1,children:S.map(({key:l,label:r})=>{const e=i?.[l];return e?x(u,{direction:"row",children:[a(b,{label:r}),a(o,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:e.displayValue&&a(v,{value:e.displayValue})})]},l):null})})}function w({fieldKey:i}){const{field:l}=h({key:i});if(!l||!l.hasVariants)return null;const r=l.variants??[];return a(k,{fieldKey:i,testId:`data-drivers-license-select-${i}`,renderValue:()=>a(g,{fieldChildren:l.children}),children:r.map(e=>{var n,s,t,d;const c=(s=(n=e.children)==null?void 0:n.documentNumber)==null?void 0:s.displayValue,p=(d=(t=e.children)==null?void 0:t.issuanceState)==null?void 0:d.displayValue,m=[c,p].filter(Boolean).join(" \u2014 ")||"-";return a(y,{value:e.id,onClick:f=>f.stopPropagation(),sx:V,children:a(o,{variant:"body1",fontWeight:500,children:m})},e.id)})})}export{w as DriversLicenseField};

package/dist/components/form/NewOneClickForm/react/ui/fields/readonly/employer.field.mjs

@@ -1 +1 @@
-"use strict";import{Stack as d,MenuItem as F,Typography as m,Avatar as k}from"@mui/material";import{useFormField as w}from"../../../core/field.hook.mjs";import{useOneClickForm as U}from"../../form.context.mjs";import{toFieldValueAttribute as f}from"../shared.mjs";import{FieldSectionTitle as V,FieldSectionContent as I,FieldLabelBase as S}from"../style.mjs";import{VariantSelectField as A}from"./variantSelect.field.mjs";import{jsxs as s,jsx as r}from"react/jsx-runtime";import{addressFormat as v}from"../../../../core/formats/address.format.mjs";const g=48;function y({name:l,logoUrl:i,size:a}){var t;return r(k,{draggable:!1,alt:l,src:i??void 0,sx:{bgcolor:"primary.main",width:a,height:a,borderRadius:a>=g?2:1,flexShrink:0},slotProps:{img:{onLoad:e=>{e.currentTarget.style.display=""},onError:e=>{e.currentTarget.style.display="none"}}},children:(t=l[0])==null?void 0:t.toUpperCase()})}function h({label:l,value:i,testId:a,fieldValue:t}){return s(d,{direction:"row","data-testid":a,"data-verified-sdk-field-value":t,children:[r(S,{label:l}),r(m,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:i})]})}function b({item:l}){var i;const{options:a}=U(),t=a.features.enableUserPrivacy,e=(i=l.address)!=null&&i.line1?v(l.address):null,n=s(d,{spacing:1.25,children:[r(h,{label:"Name",value:l.name,testId:"data-field-atomic-employer.name",fieldValue:f(l.name,t)}),e&&r(h,{label:"Address",value:e,testId:"data-field-composite-employer.address",fieldValue:f(e,t)})]});return l.logoUrl?s(d,{direction:"row",spacing:1.5,py:1,children:[r(y,{name:l.name,logoUrl:l.logoUrl,size:g}),n]}):n}function z({fieldKey:l}){var i;const{field:a}=w({key:l});if(!a)return null;if(!a.hasVariants){const e=(i=a.value)==null?void 0:i.employer;return e?s(d,{spacing:1.25,children:[r(V,{fieldKey:l}),r(I,{spacing:1.25,children:r(b,{item:e})})]}):null}const t=a.variants??[];return r(A,{fieldKey:l,testId:`data-employer-select-${l}`,renderValue:()=>{var e;const n=(e=a.value)==null?void 0:e.employer;return n?r(b,{item:n}):null},children:t.map(e=>{var n,c;const o=(n=e.value)==null?void 0:n.employer,u=o?.name??e.displayValue??"-",p=(c=o?.address)!=null&&c.line1?v(o.address):null;return r(F,{value:e.id,onClick:x=>x.stopPropagation(),sx:{maxWidth:"100%",whiteSpace:"pre-wrap"},children:s(d,{direction:"row",spacing:1.5,alignItems:"center",children:[r(y,{name:u,logoUrl:o?.logoUrl,size:32}),s(d,{sx:{alignItems:"flex-start",textAlign:"left"},children:[r(m,{variant:"body1",fontWeight:500,children:u}),p&&r(m,{variant:"body2",color:"text.primary",children:p})]})]})},e.id)})})}export{z as EmployerField};
+"use strict";import{Stack as d,MenuItem as F,Typography as m,Avatar as k}from"@mui/material";import{useFormField as V}from"../../../core/field.hook.mjs";import{useOneClickForm as w}from"../../form.context.mjs";import{toFieldValueAttribute as f}from"../shared.mjs";import{FieldSectionTitle as U,FieldSectionContent as I,FieldLabelBase as S,DiffusedValue as A}from"../style.mjs";import{VariantSelectField as z}from"./variantSelect.field.mjs";import{jsxs as s,jsx as r}from"react/jsx-runtime";import{addressFormat as v}from"../../../../core/formats/address.format.mjs";const g=48;function y({name:l,logoUrl:i,size:a}){var t;return r(k,{draggable:!1,alt:l,src:i??void 0,sx:{bgcolor:"primary.main",width:a,height:a,borderRadius:a>=g?2:1,flexShrink:0},slotProps:{img:{onLoad:e=>{e.currentTarget.style.display=""},onError:e=>{e.currentTarget.style.display="none"}}},children:(t=l[0])==null?void 0:t.toUpperCase()})}function h({label:l,value:i,testId:a,fieldValue:t}){return s(d,{direction:"row","data-testid":a,"data-verified-sdk-field-value":t,children:[r(S,{label:l}),r(m,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:r(A,{value:i})})]})}function b({item:l}){var i;const{options:a}=w(),t=a.features.enableUserPrivacy,e=(i=l.address)!=null&&i.line1?v(l.address):null,n=s(d,{spacing:1.25,children:[r(h,{label:"Name",value:l.name,testId:"data-field-atomic-employer.name",fieldValue:f(l.name,t)}),e&&r(h,{label:"Address",value:e,testId:"data-field-composite-employer.address",fieldValue:f(e,t)})]});return l.logoUrl?s(d,{direction:"row",spacing:1.5,py:1,children:[r(y,{name:l.name,logoUrl:l.logoUrl,size:g}),n]}):n}function C({fieldKey:l}){var i;const{field:a}=V({key:l});if(!a)return null;if(!a.hasVariants){const e=(i=a.value)==null?void 0:i.employer;return e?s(d,{spacing:1.25,children:[r(U,{fieldKey:l}),r(I,{spacing:1.25,children:r(b,{item:e})})]}):null}const t=a.variants??[];return r(z,{fieldKey:l,testId:`data-employer-select-${l}`,renderValue:()=>{var e;const n=(e=a.value)==null?void 0:e.employer;return n?r(b,{item:n}):null},children:t.map(e=>{var n,u;const o=(n=e.value)==null?void 0:n.employer,c=o?.name??e.displayValue??"-",p=(u=o?.address)!=null&&u.line1?v(o.address):null;return r(F,{value:e.id,onClick:x=>x.stopPropagation(),sx:{maxWidth:"100%",whiteSpace:"pre-wrap"},children:s(d,{direction:"row",spacing:1.5,alignItems:"center",children:[r(y,{name:c,logoUrl:o?.logoUrl,size:32}),s(d,{sx:{alignItems:"flex-start",textAlign:"left"},children:[r(m,{variant:"body1",fontWeight:500,children:c}),p&&r(m,{variant:"body2",color:"text.primary",children:p})]})]})},e.id)})})}export{C as EmployerField};

package/dist/components/form/NewOneClickForm/react/ui/fields/readonly/field.mjs

@@ -1 +1 @@
-"use strict";import{Stack as p}from"@mui/material";import{credentialKeys as r}from"../../../../core/fields/index.mjs";import{useFormField as y}from"../../../core/field.hook.mjs";import{useOneClickForm as h}from"../../form.context.mjs";import{FieldRowContainer as n,FieldRow as c,FieldSectionTitle as u,FieldSectionContent as K}from"../style.mjs";import{getDisplayFieldKeys as v}from"../field-order.mjs";import{MultiField as f}from"./multi.field.mjs";import{SingleField as F}from"./single.field.mjs";import{HealthInsuranceField as k}from"./healthInsurance.field.mjs";import{DriversLicenseField as g}from"./driversLicense.field.mjs";import{EmployerField as x}from"./employer.field.mjs";import{jsx as l,jsxs as C}from"react/jsx-runtime";import{fieldInputTypes as w}from"../../../../core/fields/constants.mjs";function m({fieldKey:e}){var d,o,a;const{field:i}=y({key:e});return((d=i?.schema)==null?void 0:d.key)===r.driversLicense&&i.hasVariants?l(n,{fieldKey:e,spacing:1.25,children:l(g,{fieldKey:e})}):((o=i?.schema)==null?void 0:o.key)===r.healthInsurance&&!i.isEmpty?l(n,{fieldKey:e,spacing:1.25,children:l(k,{fieldKey:e})}):((a=i?.schema)==null?void 0:a.key)===r.employer&&!i.isEmpty?l(n,{fieldKey:e,spacing:1.25,children:l(x,{fieldKey:e})}):i?.schema.characteristics.inputType===w.composite&&i.children?i.schema.key===r.address?l(c,{fieldKey:e,children:l(f,{fieldKey:e})}):i.schema.key===r.fullName?l(n,{fieldKey:e,spacing:1.25,children:Object.keys(i.children).map(s=>l(m,{fieldKey:`${e}.${s}`},s))}):C(n,{fieldKey:e,spacing:1.25,children:[l(u,{fieldKey:e}),l(K,{spacing:1.25,children:Object.keys(i.children).map(s=>l(m,{fieldKey:`${e}.${s}`},s))})]}):l(c,{fieldKey:e,children:i!=null&&i.hasVariants?l(f,{fieldKey:e}):l(F,{fieldKey:e})})}function E(){var e,d;const o=h(),{fields:a}=o.formContext.state.form,i=v(a,{showPhone:(d=(e=o.options.features.field)==null?void 0:e.phone)==null?void 0:d.show});return l(p,{spacing:1.25,sx:{width:"100%"},onClick:()=>{var s,t;(((s=o.options.features.editMode)==null?void 0:s.hide)??((t=o.formContext.state.form)==null?void 0:t.isDisabled))||(o.setEditMode(!0),o.setUserInitiatedEdit(!0))},children:i.map(s=>l(m,{fieldKey:s},s))})}export{E as ReadonlyFields};
+"use strict";import{useEffect as p}from"react";import{Stack as y}from"@mui/material";import{credentialKeys as n}from"../../../../core/fields/index.mjs";import{useFormField as h}from"../../../core/field.hook.mjs";import{useOneClickForm as u}from"../../form.context.mjs";import{FieldRowContainer as t,FieldRow as c,FieldSectionTitle as K,FieldSectionContent as v}from"../style.mjs";import{getDisplayFieldKeys as F}from"../field-order.mjs";import{MultiField as m}from"./multi.field.mjs";import{SingleField as k}from"./single.field.mjs";import{HealthInsuranceField as g}from"./healthInsurance.field.mjs";import{DriversLicenseField as x}from"./driversLicense.field.mjs";import{EmployerField as C}from"./employer.field.mjs";import{jsx as l,jsxs as E}from"react/jsx-runtime";import{fieldInputTypes as w}from"../../../../core/fields/constants.mjs";function r({fieldKey:e}){var d,s,a;const{field:i}=h({key:e});return((d=i?.schema)==null?void 0:d.key)===n.driversLicense&&i.hasVariants?l(t,{fieldKey:e,spacing:1.25,children:l(x,{fieldKey:e})}):((s=i?.schema)==null?void 0:s.key)===n.healthInsurance&&!i.isEmpty?l(t,{fieldKey:e,spacing:1.25,children:l(g,{fieldKey:e})}):((a=i?.schema)==null?void 0:a.key)===n.employer&&!i.isEmpty?l(t,{fieldKey:e,spacing:1.25,children:l(C,{fieldKey:e})}):i?.schema.characteristics.inputType===w.composite&&i.children?i.schema.key===n.address?l(c,{fieldKey:e,children:l(m,{fieldKey:e})}):i.schema.key===n.fullName?l(t,{fieldKey:e,spacing:1.25,children:Object.keys(i.children).map(o=>l(r,{fieldKey:`${e}.${o}`},o))}):E(t,{fieldKey:e,spacing:1.25,children:[l(K,{fieldKey:e}),l(v,{spacing:1.25,children:Object.keys(i.children).map(o=>l(r,{fieldKey:`${e}.${o}`},o))})]}):l(c,{fieldKey:e,children:i!=null&&i.hasVariants?l(m,{fieldKey:e}):l(k,{fieldKey:e})})}function j(){var e,d;const s=u(),{fields:a}=s.formContext.state.form;p(()=>{s.diffusionPlayed.current=!0},[s.diffusionPlayed]);const i=F(a,{showPhone:(d=(e=s.options.features.field)==null?void 0:e.phone)==null?void 0:d.show});return l(y,{spacing:1.25,sx:{width:"100%"},onClick:()=>{var o,f;(((o=s.options.features.editMode)==null?void 0:o.hide)??((f=s.formContext.state.form)==null?void 0:f.isDisabled))||(s.setEditMode(!0),s.setUserInitiatedEdit(!0))},children:i.map(o=>l(r,{fieldKey:o},o))})}export{j as ReadonlyFields};

package/dist/components/form/NewOneClickForm/react/ui/fields/readonly/healthInsurance.field.mjs

@@ -1 +1 @@
-"use strict";import{Stack as i,MenuItem as k,Avatar as g,Typography as m}from"@mui/material";import{useFormField as I}from"../../../core/field.hook.mjs";import{FieldSectionTitle as S,FieldSectionContent as F,FieldLabelBase as f,FieldDescriptionBase as A}from"../style.mjs";import{VariantSelectField as B}from"./variantSelect.field.mjs";import{jsxs as a,jsx as e}from"react/jsx-runtime";import{maskMemberId as v}from"../../../../core/formats/healthInsurance.format.mjs";const y=48;function x({item:n}){var t,s,r,o,d;return e(i,{py:1,children:a(i,{direction:"row",sx:{flex:1},spacing:1.5,children:[e(g,{draggable:!1,src:((t=n.payer)==null?void 0:t.logoUrl)??"",sx:{bgcolor:"primary.main",width:y,height:y,borderRadius:2,flexShrink:0},slotProps:{img:{onError:c=>{c.currentTarget.style.display="none"}}},children:(o=(r=(s=n.payer)==null?void 0:s.name)==null?void 0:r[0])==null?void 0:o.toUpperCase()}),a(i,{direction:"column",spacing:1.5,children:[e(i,{direction:"row",spacing:1.5,children:a(i,{direction:"row",sx:{flex:1},children:[e(f,{label:"Insurer"}),e(m,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:(d=n.payer)==null?void 0:d.name})]})}),a(i,{direction:"row",children:[e(f,{label:"Member ID"}),a(i,{children:[e(m,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:v(n.memberId)}),e(A,{description:"Hidden for privacy"})]})]})]})]})})}function C({fieldKey:n}){const{field:t}=I({key:n});if(!t)return null;if(!t.hasVariants){const r=t.value;return r?a(i,{spacing:1.25,children:[e(S,{fieldKey:n}),e(F,{spacing:1.25,children:e(x,{item:r})})]}):null}const s=t.variants??[];return e(B,{fieldKey:n,testId:`data-health-insurance-select-${n}`,renderValue:()=>{const r=t.value;return r?e(x,{item:r}):null},children:s.map(r=>{var o,d,c,u,h;const l=r.value,b=((o=l?.payer)==null?void 0:o.name)??"-",w=l!=null&&l.memberId?v(l.memberId):"-";return e(k,{value:r.id,onClick:p=>p.stopPropagation(),sx:{maxWidth:"100%",whiteSpace:"pre-wrap"},children:a(i,{direction:"row",spacing:1.5,alignItems:"center",children:[e(g,{draggable:!1,src:((d=l?.payer)==null?void 0:d.logoUrl)??"",sx:{bgcolor:"primary.main",width:32,height:32,borderRadius:1,flexShrink:0},slotProps:{img:{onError:p=>{p.currentTarget.style.display="none"}}},children:(h=(u=(c=l?.payer)==null?void 0:c.name)==null?void 0:u[0])==null?void 0:h.toUpperCase()}),a(i,{sx:{alignItems:"flex-start",textAlign:"left"},children:[e(m,{variant:"body1",fontWeight:500,children:b}),e(m,{variant:"body2",color:"text.primary",children:w})]})]})},r.id)})})}export{C as HealthInsuranceField};
+"use strict";import{Stack as n,MenuItem as I,Avatar as f,Typography as m}from"@mui/material";import{useFormField as S}from"../../../core/field.hook.mjs";import{FieldSectionTitle as F,FieldSectionContent as A,FieldLabelBase as g,DiffusedValue as v,FieldDescriptionBase as B}from"../style.mjs";import{VariantSelectField as C}from"./variantSelect.field.mjs";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{maskMemberId as y}from"../../../../core/formats/healthInsurance.format.mjs";const x=48;function b({item:i}){var a,s,r,o,d;return e(n,{py:1,children:t(n,{direction:"row",sx:{flex:1},spacing:1.5,children:[e(f,{draggable:!1,src:((a=i.payer)==null?void 0:a.logoUrl)??"",sx:{bgcolor:"primary.main",width:x,height:x,borderRadius:2,flexShrink:0},slotProps:{img:{onError:c=>{c.currentTarget.style.display="none"}}},children:(o=(r=(s=i.payer)==null?void 0:s.name)==null?void 0:r[0])==null?void 0:o.toUpperCase()}),t(n,{direction:"column",spacing:1.5,children:[e(n,{direction:"row",spacing:1.5,children:t(n,{direction:"row",sx:{flex:1},children:[e(g,{label:"Insurer"}),e(m,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:((d=i.payer)==null?void 0:d.name)&&e(v,{value:i.payer.name})})]})}),t(n,{direction:"row",children:[e(g,{label:"Member ID"}),t(n,{children:[e(m,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:e(v,{value:y(i.memberId)})}),e(B,{description:"Hidden for privacy"})]})]})]})]})})}function M({fieldKey:i}){const{field:a}=S({key:i});if(!a)return null;if(!a.hasVariants){const r=a.value;return r?t(n,{spacing:1.25,children:[e(F,{fieldKey:i}),e(A,{spacing:1.25,children:e(b,{item:r})})]}):null}const s=a.variants??[];return e(C,{fieldKey:i,testId:`data-health-insurance-select-${i}`,renderValue:()=>{const r=a.value;return r?e(b,{item:r}):null},children:s.map(r=>{var o,d,c,p,h;const l=r.value,w=((o=l?.payer)==null?void 0:o.name)??"-",k=l!=null&&l.memberId?y(l.memberId):"-";return e(I,{value:r.id,onClick:u=>u.stopPropagation(),sx:{maxWidth:"100%",whiteSpace:"pre-wrap"},children:t(n,{direction:"row",spacing:1.5,alignItems:"center",children:[e(f,{draggable:!1,src:((d=l?.payer)==null?void 0:d.logoUrl)??"",sx:{bgcolor:"primary.main",width:32,height:32,borderRadius:1,flexShrink:0},slotProps:{img:{onError:u=>{u.currentTarget.style.display="none"}}},children:(h=(p=(c=l?.payer)==null?void 0:c.name)==null?void 0:p[0])==null?void 0:h.toUpperCase()}),t(n,{sx:{alignItems:"flex-start",textAlign:"left"},children:[e(m,{variant:"body1",fontWeight:500,children:w}),e(m,{variant:"body2",color:"text.primary",children:k})]})]})},r.id)})})}export{M as HealthInsuranceField};

package/dist/components/form/NewOneClickForm/react/ui/fields/readonly/multi.field.mjs

@@ -1 +1 @@
-"use strict";import{useRef as S,useState as M,useEffect as g}from"react";import{Box as I,TextField as w,MenuItem as k}from"@mui/material";import{useFormField as F}from"../../../core/field.hook.mjs";import{useForm as P}from"../../../core/form.context.mjs";import{SingleField as O}from"./single.field.mjs";import{jsx as o}from"react/jsx-runtime";const R=()=>({menuStyle:{maxWidth:"100%",whiteSpace:"pre-wrap",flexWrap:"wrap","& *":{display:"inline-flex"},"& div":{width:"fit-content",height:"fit-content"},"& img.MuiBox-root, & .image-encoded-skeleton-container, & .MuiSkeleton-root":{display:"inline-flex",width:"100px",height:"100px"}},fieldInputEnabledStyle:{"& .MuiInputBase-root::before, & .MuiInputBase-root::after":{display:"none !important"},"& .MuiSelect-icon":{display:"none"}},fieldInputDisabledStyle:{pointerEvents:"auto"},blockStyle:{display:"inline-flex"},fieldInputReadonlyStyle:{"& .MuiInputBase-readOnly":{p:0,userSelect:"auto",cursor:"text",lineHeight:1.5},"& fieldset.MuiOutlinedInput-notchedOutline":{border:"none!important"},"& svg.MuiSvgIcon-root":{display:"none"}}});function $({fieldKey:n}){var r,d,s,u;const{field:i,fieldProps:m}=F({key:n}),{replaceFieldWithVariant:f}=P(),a=R(),p=i?.variants??[i].filter(e=>e!==void 0),l=p.length>1,c=S(void 0),[h,v]=M(void 0),y={ref:e=>{e&&(c.current=e)},select:!0,variant:"outlined",size:"small","aria-label":l?`Select ${(u=(s=i?.schema)==null?void 0:s.characteristics)==null?void 0:u.label}`:`Current ${(d=(r=i?.schema)==null?void 0:r.characteristics)==null?void 0:d.label}`,value:i?.id,helperText:i?.description,onChange:e=>{if(i!=null&&i.isDisabled)return;e.stopPropagation(),e.preventDefault();const t=e.target.value;t&&t!==i?.id&&f(n,t)},InputProps:{tabIndex:l?0:-1,readOnly:!l||m.disabled},SelectProps:{"data-mask-me":!0,"data-testid":`data-multifield-select-${n}`,size:"small",onClose:e=>{e.stopPropagation(),e.preventDefault()},MenuProps:{"data-mask-me":!0,slotProps:{paper:{sx:{width:h}}}}},sx:{width:"100%",...a.fieldInputDisabledStyle,...!l&&a.fieldInputReadonlyStyle,'& div[role="combobox"]':{width:"100%",height:"auto",overflow:"hidden",whiteSpace:"break-spaces!important"},"& .MuiSelect-select":{display:"block",alignItems:"center",whiteSpace:"break-spaces!important"},"& .Mui-disabled .MuiOutlinedInput-notchedOutline":{border:"none"},"& .Mui-disabled.MuiSelect-icon":{display:"none"},"& .Mui-disabled":{color:e=>`${e.palette.text.primary}`,WebkitTextFillColor:e=>`${e.palette.text.primary}`},"& .MuiFormHelperText-root":{ml:l?void 0:0}}};return g(()=>{const e=c.current;if(!e)return;const t=new ResizeObserver(b=>{for(const x of b)v(`${x.contentRect.width}px`)});return t.observe(e),()=>{t.disconnect()}},[]),i!=null&&i.id?o(I,{width:"100%",children:o(w,{...y,children:p.map(e=>o(k,{value:e.id,onClick:t=>{t.stopPropagation()},sx:a.menuStyle,children:e.displayValue??(e.isRequired?"-":null)},e.id))})}):o(O,{fieldKey:n})}export{$ as MultiField};
+"use strict";import{useRef as g,useState as I,useEffect as w}from"react";import{Box as k,TextField as F,MenuItem as O}from"@mui/material";import{useFormField as P}from"../../../core/field.hook.mjs";import{useForm as R}from"../../../core/form.context.mjs";import{useOneClickForm as V}from"../../form.context.mjs";import{DiffusedValue as C}from"../style.mjs";import{SingleField as D}from"./single.field.mjs";import{jsx as n}from"react/jsx-runtime";const $=()=>({menuStyle:{maxWidth:"100%",whiteSpace:"pre-wrap",flexWrap:"wrap","& *":{display:"inline-flex"},"& div":{width:"fit-content",height:"fit-content"},"& img.MuiBox-root, & .image-encoded-skeleton-container, & .MuiSkeleton-root":{display:"inline-flex",width:"100px",height:"100px"}},fieldInputEnabledStyle:{"& .MuiInputBase-root::before, & .MuiInputBase-root::after":{display:"none !important"},"& .MuiSelect-icon":{display:"none"}},fieldInputDisabledStyle:{pointerEvents:"auto"},blockStyle:{display:"inline-flex"},fieldInputReadonlyStyle:{"& .MuiInputBase-readOnly":{p:0,userSelect:"auto",cursor:"text",lineHeight:1.5},"& fieldset.MuiOutlinedInput-notchedOutline":{border:"none!important"},"& svg.MuiSvgIcon-root":{display:"none"}}});function B({fieldKey:o}){var s,u,p,c,f;const{field:i,fieldProps:v}=P({key:o}),{replaceFieldWithVariant:h}=R(),{options:y}=V(),a=$(),r=i?.variants??[i].filter(e=>e!==void 0),t=r.length>1,m=g(void 0),[b,x]=I(void 0),S={ref:e=>{e&&(m.current=e)},select:!0,variant:"outlined",size:"small","aria-label":t?`Select ${(c=(p=i?.schema)==null?void 0:p.characteristics)==null?void 0:c.label}`:`Current ${(u=(s=i?.schema)==null?void 0:s.characteristics)==null?void 0:u.label}`,value:i?.id,helperText:i?.description,onChange:e=>{if(i!=null&&i.isDisabled)return;e.stopPropagation(),e.preventDefault();const l=e.target.value;l&&l!==i?.id&&h(o,l)},InputProps:{tabIndex:t?0:-1,readOnly:!t||v.disabled},SelectProps:{"data-mask-me":!0,"data-testid":`data-multifield-select-${o}`,size:"small",onClose:e=>{e.stopPropagation(),e.preventDefault()},...((f=y.features.diffusion)==null?void 0:f.enabled)&&{renderValue:e=>{const l=r.find(d=>d.id===e);return l!=null&&l.displayValue?n(C,{value:l.displayValue}):l?.displayValue??(l!=null&&l.isRequired?"-":null)}},MenuProps:{"data-mask-me":!0,slotProps:{paper:{sx:{width:b}}}}},sx:{width:"100%",...a.fieldInputDisabledStyle,...!t&&a.fieldInputReadonlyStyle,'& div[role="combobox"]':{width:"100%",height:"auto",overflow:"hidden",whiteSpace:"break-spaces!important"},"& .MuiSelect-select":{display:"block",alignItems:"center",whiteSpace:"break-spaces!important"},"& .Mui-disabled .MuiOutlinedInput-notchedOutline":{border:"none"},"& .Mui-disabled.MuiSelect-icon":{display:"none"},"& .Mui-disabled":{color:e=>`${e.palette.text.primary}`,WebkitTextFillColor:e=>`${e.palette.text.primary}`},"& .MuiFormHelperText-root":{ml:t?void 0:0}}};return w(()=>{const e=m.current;if(!e)return;const l=new ResizeObserver(d=>{for(const M of d)x(`${M.contentRect.width}px`)});return l.observe(e),()=>{l.disconnect()}},[]),i!=null&&i.id?n(k,{width:"100%",children:n(F,{...S,children:r.map(e=>n(O,{value:e.id,onClick:l=>{l.stopPropagation()},sx:a.menuStyle,children:e.displayValue??(e.isRequired?"-":null)},e.id))})}):n(D,{fieldKey:o})}export{B as MultiField};

package/dist/components/form/NewOneClickForm/react/ui/fields/style.d.ts

@@ -8,6 +8,9 @@ export declare function FieldLabel({ fieldKey, label: labelOverride, sx, }: {
     label?: string;
     sx?: SxProps;
 }): import('react').JSX.Element;
+export declare function DiffusedValue({ value }: Readonly<{
+    value: string;
+}>): import('react').JSX.Element;
 export declare function FieldValue({ fieldKey }: {
     fieldKey: string;
 }): import('react').JSX.Element | null;

package/dist/components/form/NewOneClickForm/react/ui/fields/style.mjs

@@ -1 +1 @@
-"use strict";import{Stack as l,Typography as a}from"@mui/material";import{useFormField as o}from"../../core/field.hook.mjs";import{makeAttributes as x,getFieldDisplayValue as b}from"./shared.mjs";import{useOneClickForm as c}from"../form.context.mjs";import{jsx as t,jsxs as f}from"react/jsx-runtime";function p({label:e,sx:i}){return t(l,{sx:{flexShrink:0,alignItems:"flex-start",justifyContent:"flex-start",width:100,mt:.7,...i},children:t(a,{component:"span",variant:"subtitle2",textTransform:"uppercase",color:"text.primary",sx:{position:"relative",fontSize:12,fontWeight:700,textAlign:"left",alignSelf:"flex-start",letterSpacing:1},children:e})})}function d({fieldKey:e,label:i,sx:n}){const{fieldProps:r}=o({key:e}),s=i??r.label;return t(p,{label:s,sx:n})}function g({fieldKey:e}){const{field:i}=o({key:e}),{options:n}=c();if(!i)return null;const r=b(i,n);return t(a,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:r||(i!=null&&i.isRequired?null:"-")})}function u({description:e}){return t(a,{variant:"body1",color:"text.secondary",sx:{fontSize:12,fontWeight:400,wordBreak:"break-word",mt:.5,mr:1.75,textAlign:"left"},children:e})}function y({fieldKey:e,description:i}){const{fieldProps:n}=o({key:e}),r=i??n.description;return r?t(u,{description:r}):null}function m({fieldKey:e,children:i,spacing:n}){const r=c(),{field:s}=o({key:e}),h=x({userPrivacyEnabled:r.options.features.enableUserPrivacy,field:s,fieldKey:e,options:r.options});return t(l,{component:"section",...h,spacing:n,style:{width:"100%"},children:i})}function k({fieldKey:e,children:i}){return t(m,{fieldKey:e,children:f(l,{direction:"row",width:"100%",children:[t(d,{fieldKey:e}),t(l,{direction:"column",children:i})]})})}function F({fieldKey:e,description:i}){return f(l,{children:[t(d,{fieldKey:e,sx:{width:"100%",mt:0}}),t(y,{fieldKey:e,description:i})]})}function w({children:e,spacing:i,sx:n}){return t(l,{spacing:i,sx:{pl:2,borderLeftWidth:1,borderLeftColor:"neutral.main",borderLeftStyle:"solid",...n},children:e})}export{y as FieldDescription,u as FieldDescriptionBase,d as FieldLabel,p as FieldLabelBase,k as FieldRow,m as FieldRowContainer,w as FieldSectionContent,F as FieldSectionTitle,g as FieldValue};
+"use strict";import{useState as u}from"react";import{Stack as o,Typography as d}from"@mui/material";import{useFormField as a}from"../../core/field.hook.mjs";import{makeAttributes as F,getFieldDisplayValue as k}from"./shared.mjs";import{useOneClickForm as f}from"../form.context.mjs";import{jsx as t,jsxs as p,Fragment as w}from"react/jsx-runtime";import{DiffusiveText as S}from"../../../../../animation/DiffusiveText/DiffusiveText.mjs";function m({label:e,sx:i}){return t(o,{sx:{flexShrink:0,alignItems:"flex-start",justifyContent:"flex-start",width:100,mt:.7,...i},children:t(d,{component:"span",variant:"subtitle2",textTransform:"uppercase",color:"text.primary",sx:{position:"relative",fontSize:12,fontWeight:700,textAlign:"left",alignSelf:"flex-start",letterSpacing:1},children:e})})}function c({fieldKey:e,label:i,sx:r}){const{fieldProps:n}=a({key:e}),l=i??n.label;return t(m,{label:l,sx:r})}function y({value:e}){const{options:i,diffusionPlayed:r}=f(),n=i.features.diffusion,[l]=u(e),[s,g]=u(()=>!!(n!=null&&n.enabled)&&!r.current);return s&&e!==l&&g(!1),!n||!s||e!==l?t(w,{children:e}):t(S,{template:e,value:e,delay:n.delay,timing:n.timing})}function v({fieldKey:e}){const{field:i}=a({key:e}),{options:r}=f();if(!i)return null;const n=k(i,r);return t(d,{"data-mask-me":!0,variant:"body1",sx:{fontSize:20,fontWeight:300,wordBreak:"break-word",textAlign:"left"},children:n?t(y,{value:n}):!(i!=null&&i.isRequired)&&"-"})}function h({description:e}){return t(d,{variant:"body1",color:"text.secondary",sx:{fontSize:12,fontWeight:400,wordBreak:"break-word",mt:.5,mr:1.75,textAlign:"left"},children:e})}function x({fieldKey:e,description:i}){const{fieldProps:r}=a({key:e}),n=i??r.description;return n?t(h,{description:n}):null}function b({fieldKey:e,children:i,spacing:r}){const n=f(),{field:l}=a({key:e}),s=F({userPrivacyEnabled:n.options.features.enableUserPrivacy,field:l,fieldKey:e,options:n.options});return t(o,{component:"section",...s,spacing:r,style:{width:"100%"},children:i})}function K({fieldKey:e,children:i}){return t(b,{fieldKey:e,children:p(o,{direction:"row",width:"100%",children:[t(c,{fieldKey:e}),t(o,{direction:"column",children:i})]})})}function C({fieldKey:e,description:i}){return p(o,{children:[t(c,{fieldKey:e,sx:{width:"100%",mt:0}}),t(x,{fieldKey:e,description:i})]})}function D({children:e,spacing:i,sx:r}){return t(o,{spacing:i,sx:{pl:2,borderLeftWidth:1,borderLeftColor:"neutral.main",borderLeftStyle:"solid",...r},children:e})}export{y as DiffusedValue,x as FieldDescription,h as FieldDescriptionBase,c as FieldLabel,m as FieldLabelBase,K as FieldRow,b as FieldRowContainer,D as FieldSectionContent,C as FieldSectionTitle,v as FieldValue};

package/dist/components/form/NewOneClickForm/react/ui/form.context.d.ts

@@ -1,10 +1,17 @@
-import { ReactNode } from 'react';
+import { MutableRefObject, ReactNode } from 'react';
 import { QueryClient } from '@tanstack/react-query';
+import { DiffusiveTextTiming } from '../../../../animation/DiffusiveText';
 import { FormContextValue } from '../core/form.context';
 type OneClickOptionFeatures = {
     /** Element that the date picker should be detached from when clicking outside of it. */
     datePickerClickOutsideBoundaryElement?: HTMLElement | null;
     enableUserPrivacy?: boolean;
+    /** Read-only values scramble in `DiffusiveText`, in their own font, for `delay` milliseconds, then resolve, once per form. */
+    diffusion?: {
+        enabled: boolean;
+        delay: number;
+        timing?: Partial<DiffusiveTextTiming>;
+    };
     editMode?: {
         hide?: boolean;
     };
@@ -45,6 +52,7 @@ export type OneClickFormContext = {
     setEditMode: (editMode: boolean) => void;
     userInitiatedEdit: boolean;
     setUserInitiatedEdit: (value: boolean) => void;
+    diffusionPlayed: MutableRefObject<boolean>;
 };
 type OneClickFormProviderProps = {
     options: OneClickFormOptions;

package/dist/components/form/NewOneClickForm/react/ui/form.context.mjs

@@ -1 +1 @@
-"use strict";import{useState as r,useMemo as l,createContext as f,useContext as C}from"react";import{QueryClient as p,QueryClientProvider as O}from"@tanstack/react-query";import{useForm as h}from"../core/form.context.mjs";import{jsx as u}from"react/jsx-runtime";const a=f(null);function y({options:e,children:c}){const t=h(),[o,i]=r(!t.state.form.isValid),[n,s]=r(!1),[d]=r(()=>e.queryClient??new p({defaultOptions:{queries:{retry:1/0,retryDelay:3e3,refetchOnReconnect:!1,refetchOnMount:!1,refetchOnWindowFocus:!1}}})),m=l(()=>({formContext:t,options:e,editMode:o,setEditMode:i,userInitiatedEdit:n,setUserInitiatedEdit:s}),[t,e,o,i,n,s]);return u(O,{client:d,children:u(a.Provider,{value:m,children:c})})}function x(){const e=C(a);if(!e)throw new Error("useOneClickForm must be used within a OneClickFormProvider");return e}export{y as OneClickFormProvider,x as useOneClickForm};
+"use strict";import{useState as r,useRef as f,useMemo as C,createContext as h,useContext as p}from"react";import{QueryClient as O,QueryClientProvider as y}from"@tanstack/react-query";import{useForm as F}from"../core/form.context.mjs";import{jsx as u}from"react/jsx-runtime";const a=h(null);function x({options:e,children:d}){const t=F(),[o,i]=r(!t.state.form.isValid),[n,s]=r(!1),c=f(!1),[l]=r(()=>e.queryClient??new O({defaultOptions:{queries:{retry:1/0,retryDelay:3e3,refetchOnReconnect:!1,refetchOnMount:!1,refetchOnWindowFocus:!1}}})),m=C(()=>({formContext:t,options:e,editMode:o,setEditMode:i,userInitiatedEdit:n,setUserInitiatedEdit:s,diffusionPlayed:c}),[t,e,o,i,n,s]);return u(y,{client:l,children:u(a.Provider,{value:m,children:d})})}function v(){const e=p(a);if(!e)throw new Error("useOneClickForm must be used within a OneClickFormProvider");return e}export{x as OneClickFormProvider,v as useOneClickForm};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "12.28.3-rc.156",
+  "version": "12.29.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": [