@verifiedinc-public/shared-ui-elements 9.8.1 → 9.9.0

package/dist/components/buttons/ExportToPdfButton.d.ts

@@ -1,7 +1,9 @@
-import { IconButtonProps } from '@mui/material';
 import { default as React } from 'react';
+import { IconButtonProps } from '@mui/material';
 /**
  * A button that exports the content of a target element to a PDF file.
+ * Uses html-to-image + jsPDF instead of html2canvas for CSP compliance
+ * (html2canvas clones the DOM into an iframe, which violates nonce-based CSP).
  *
  * @param {string} targetId - The ID of the target element to export. Without the # symbol.
  * @param {string} filename - The name of the file to export. Without the .pdf extension.

package/dist/components/buttons/ExportToPdfButton.mjs

@@ -1 +1 @@
-"use strict";import{PictureAsPdf as c}from"@mui/icons-material";import{IconButton as f,CircularProgress as p}from"@mui/material";import u,{useCallback as g}from"react";import{jsx as o}from"react/jsx-runtime";const h=({targetId:t,filename:s="file",resolution:e,sx:n,...i})=>{const[a,r]=u.useState(!1),l=g(()=>{r(!0),requestAnimationFrame(()=>{setTimeout(()=>{try{import("react-to-pdf").then(async m=>{const d=m.default;await d(()=>typeof t=="string"?document.getElementById(t):t,{filename:`${s}.pdf`,page:{margin:10},...e!==void 0?{resolution:e}:{}})}).finally(()=>{r(!1),console.log("updated pdf")})}catch{r(!1)}},600)})},[s,t,e]);return o("span",{children:o(f,{onClick:l,disabled:a,sx:{m:"0 !important",...n},...i,children:a?o(p,{size:24}):i.children?i.children:o(c,{})})})};export{h as ExportToPdfButton};
+"use strict";import I,{useCallback as C}from"react";import{PictureAsPdf as j}from"@mui/icons-material";import{IconButton as v,CircularProgress as R}from"@mui/material";import{jsx as n}from"react/jsx-runtime";const T=({targetId:t,filename:d="file",resolution:p,sx:P,...r})=>{const[u,a]=I.useState(!1),w=C(()=>{a(!0),requestAnimationFrame(()=>{setTimeout(()=>{(async()=>{try{const e=typeof t=="string"?document.getElementById(t):t?.current;if(!e){a(!1);return}const s=p??2,[{toPng:x},{jsPDF:y}]=await Promise.all([import("html-to-image"),import("jspdf")]),g=e.getBoundingClientRect(),l=20,h=await x(e,{pixelRatio:s,width:g.width+l*2,height:g.height+l*2,style:{margin:`${l}px`}}),i=new Image;i.src=h,await new Promise(F=>{i.onload=()=>F()});const o=10,m=i.width/s,c=i.height/s,B=m>c?"landscape":"portrait",f=new y({orientation:B,unit:"px",format:[m+o*2,c+o*2]});f.addImage(h,"PNG",o,o,m,c),f.save(`${d}.pdf`)}catch(e){console.error("Failed to generate PDF:",e)}finally{a(!1)}})()},600)})},[d,t,p]);return n("span",{children:n(v,{onClick:w,disabled:u,sx:{m:"0 !important",...P},...r,children:u?n(R,{size:24}):r.children?r.children:n(j,{})})})};export{T as ExportToPdfButton};

package/dist/components/form/DateRangeInput/index.d.ts

@@ -7,6 +7,12 @@ interface DateRangeInputProps {
     onChangeTz?: (startDate: string, endDate: string) => void;
     /** IANA time zone name (e.g. "America/New_York"). Omit for local time behavior. */
     timeZone?: string;
+    /**
+     * CSP nonce applied to the inline <style> tag. Pass this from the server
+     * (e.g. Next.js middleware/headers) so the style tag carries a nonce during
+     * SSR. Falls back to reading `<meta property="csp-nonce">` on the client.
+     */
+    nonce?: string;
 }
 export declare const DateRangeInput: FC<DateRangeInputProps>;
 export {};

package/dist/components/form/DateRangeInput/index.mjs

@@ -1 +1 @@
-"use strict";import{useState as p,useRef as T,forwardRef as Y}from"react";import{Box as M,TextField as R}from"@mui/material";import y from"../../../node_modules/react-datepicker/dist/es/index.mjs";import{reactDatepickerCss as C}from"../../../styles/lib/react-datepicker.mjs";import{useOnClickOutside as I}from"../../../hooks/useOnClickOutside.mjs";import{ISO_TZ_FORMAT as l}from"../../../constants/date.mjs";import{useStyle as b}from"./style.mjs";import{jsxs as v,jsx as n}from"react/jsx-runtime";import{fromZonedTime as d}from"../../../node_modules/date-fns-tz/dist/esm/fromZonedTime/index.mjs";import{formatInTimeZone as u}from"../../../node_modules/date-fns-tz/dist/esm/formatInTimeZone/index.mjs";import{toZonedTime as F}from"../../../node_modules/date-fns-tz/dist/esm/toZonedTime/index.mjs";const H=Y(function(e,r){return n(R,{inputRef:r,...e,label:"Range",fullWidth:!0,sx:{flex:1,"& input":{boxShadow:"none!important",border:"none!important"}}})}),O=e=>{const r=b(),f=()=>{const{startDate:o,endDate:t}=e;return!o||!t?[null,null]:[new Date(o),new Date(t)]},[D,w]=p(f()),[c,h]=D,a=T(null),[x,s]=p(!1);return I(a,()=>{s(!1)}),v(M,{ref:a,sx:r.wrapper,children:[n("style",{children:C}),n(y,{open:x,onFocus:()=>{s(!0)},placeholderText:"MM/DD/YYYY - MM/DD/YYYY",showPopperArrow:!1,swapRange:!0,selectsRange:!0,showYearDropdown:!0,showMonthDropdown:!0,scrollableYearDropdown:!1,dateFormat:"MM/dd/yyyy HH:mm:ss",startDate:c??void 0,endDate:h??void 0,minDate:new Date(2023,0,1),maxDate:e.timeZone?F(new Date,e.timeZone):new Date,onChange:([o,t],m)=>{var i;if(w([o,t]),!(!o||!t)&&(((i=m?.target)==null?void 0:i.tagName)!=="INPUT"&&(o.setHours(0,0,0,0),t.setHours(23,59,59,999)),e.onChange(+o,+t),e.timeZone&&e.onChangeTz)){const Z=d(o,e.timeZone),g=d(t,e.timeZone);e.onChangeTz(u(Z,e.timeZone,l),u(g,e.timeZone,l))}},customInput:n(H,{})})]})};export{O as DateRangeInput};
+"use strict";import{useMemo as Y,useState as p,useRef as y,forwardRef as M}from"react";import{Box as R,TextField as v}from"@mui/material";import C from"../../../node_modules/react-datepicker/dist/es/index.mjs";import{reactDatepickerCss as b}from"../../../styles/lib/react-datepicker.mjs";import{useOnClickOutside as I}from"../../../hooks/useOnClickOutside.mjs";import{ISO_TZ_FORMAT as u}from"../../../constants/date.mjs";import{useStyle as S}from"./style.mjs";import{jsxs as F,jsx as n}from"react/jsx-runtime";import{fromZonedTime as l}from"../../../node_modules/date-fns-tz/dist/esm/fromZonedTime/index.mjs";import{formatInTimeZone as d}from"../../../node_modules/date-fns-tz/dist/esm/formatInTimeZone/index.mjs";import{toZonedTime as H}from"../../../node_modules/date-fns-tz/dist/esm/toZonedTime/index.mjs";const O=M(function(e,r){return n(v,{inputRef:r,...e,label:"Range",fullWidth:!0,sx:{flex:1,"& input":{boxShadow:"none!important",border:"none!important"}}})}),k=e=>{const r=S(),c=Y(()=>{var o;if(e.nonce)return e.nonce;if(!(typeof document>"u"))return((o=document.querySelector('meta[property="csp-nonce"]'))==null?void 0:o.getAttribute("content"))??void 0},[e.nonce]),f=()=>{const{startDate:o,endDate:t}=e;return!o||!t?[null,null]:[new Date(o),new Date(t)]},[D,w]=p(f()),[h,g]=D,a=y(null),[x,s]=p(!1);return I(a,()=>{s(!1)}),F(R,{ref:a,sx:r.wrapper,children:[n("style",{nonce:c,children:b}),n(C,{open:x,onFocus:()=>{s(!0)},placeholderText:"MM/DD/YYYY - MM/DD/YYYY",showPopperArrow:!1,swapRange:!0,selectsRange:!0,showYearDropdown:!0,showMonthDropdown:!0,scrollableYearDropdown:!1,dateFormat:"MM/dd/yyyy HH:mm:ss",startDate:h??void 0,endDate:g??void 0,minDate:new Date(2023,0,1),maxDate:e.timeZone?H(new Date,e.timeZone):new Date,onChange:([o,t],m)=>{var i;if(w([o,t]),!(!o||!t)&&(((i=m?.target)==null?void 0:i.tagName)!=="INPUT"&&(o.setHours(0,0,0,0),t.setHours(23,59,59,999)),e.onChange(+o,+t),e.timeZone&&e.onChangeTz)){const Z=l(o,e.timeZone),T=l(t,e.timeZone);e.onChangeTz(d(Z,e.timeZone,u),d(T,e.timeZone,u))}},customInput:n(O,{})})]})};export{k as DateRangeInput};

package/dist/components/logs/LogsTable/LogDetailPanel.mjs

@@ -1 +1 @@
-"use strict";import{Box as l,Stack as s,Typography as t,Paper as c}from"@mui/material";import{jsx as r,jsxs as o,Fragment as u}from"react/jsx-runtime";function e({label:a,value:n,color:i}){return n?o(l,{sx:{mb:.75},children:[o(t,{variant:"body2",component:"span",color:"text.secondary",children:[a,":"," "]}),r(t,{variant:"body2",component:"span",fontWeight:600,fontFamily:"monospace",color:i??"text.primary",children:n})]}):null}function d({log:a}){return r(l,{sx:{p:2},children:o(s,{direction:"row",spacing:4,children:[o(l,{sx:{width:480,flexShrink:0},children:[r(t,{variant:"subtitle2",fontWeight:700,color:"text.primary",sx:{mb:1},children:"DETAILS"}),r(e,{label:"1-Click UUID",value:a.uuid}),a.sessionUuid&&r(e,{label:"Session UUID",value:a.sessionUuid}),r(e,{label:"Source",value:a.source}),r(e,{label:"Event Type",value:a.errorCode?"response_error":"request"}),r(e,{label:"Method",value:a.source==="api"?`${a.method} /${a.path}`:a.path}),a.source==="api"&&o(u,{children:[r(e,{label:"HTTP Status",value:String(a.statusCode)}),r(e,{label:"Latency",value:a.latencyMs?`${a.latencyMs}ms`:null})]}),r(e,{label:"Phone",value:a.phone}),r(e,{label:"Error Code",value:a.errorCode,color:"error.main"}),r(e,{label:"Error",value:a.errorMessage,color:"error.main"})]}),o(l,{sx:{flex:1},children:[r(t,{variant:"subtitle2",fontWeight:700,color:"text.primary",sx:{mb:1},children:"METADATA"}),r(c,{variant:"outlined",sx:{p:2,bgcolor:"grey.100",fontFamily:"monospace",fontSize:13,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:300,overflow:"auto"},children:a.metadata?JSON.stringify(a.metadata,null,2):"No metadata available"})]})]})})}export{d as LogDetailPanel};
+"use strict";import{Box as l,Stack as s,Typography as t,Paper as c}from"@mui/material";import{PRODUCT_LABELS as u}from"../constants.mjs";import{jsx as r,jsxs as o,Fragment as d}from"react/jsx-runtime";function e({label:a,value:n,color:i}){return n?o(l,{sx:{mb:.75},children:[o(t,{variant:"body2",component:"span",color:"text.secondary",children:[a,":"," "]}),r(t,{variant:"body2",component:"span",fontWeight:600,fontFamily:"monospace",color:i??"text.primary",children:n})]}):null}function p({log:a}){return r(l,{sx:{p:2},children:o(s,{direction:"row",spacing:4,children:[o(l,{sx:{width:480,flexShrink:0},children:[r(t,{variant:"subtitle2",fontWeight:700,color:"text.primary",sx:{mb:1},children:"DETAILS"}),r(e,{label:"1-Click UUID",value:a.uuid}),a.sessionUuid&&r(e,{label:"Session UUID",value:a.sessionUuid}),r(e,{label:"Source",value:a.source}),r(e,{label:"Product",value:u[a.product]}),r(e,{label:"Event Type",value:a.errorCode?"response_error":"request"}),r(e,{label:"Method",value:a.source==="api"?`${a.method} /${a.path}`:a.path}),a.source==="api"&&o(d,{children:[r(e,{label:"HTTP Status",value:String(a.statusCode)}),r(e,{label:"Latency",value:a.latencyMs?`${a.latencyMs}ms`:null})]}),r(e,{label:"Phone",value:a.phone}),r(e,{label:"Error Code",value:a.errorCode,color:"error.main"}),r(e,{label:"Error",value:a.errorMessage,color:"error.main"})]}),o(l,{sx:{flex:1},children:[r(t,{variant:"subtitle2",fontWeight:700,color:"text.primary",sx:{mb:1},children:"METADATA"}),r(c,{variant:"outlined",sx:{p:2,bgcolor:"grey.100",fontFamily:"monospace",fontSize:13,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:300,overflow:"auto"},children:a.metadata?JSON.stringify(a.metadata,null,2):"No metadata available"})]})]})})}export{p as LogDetailPanel};

package/dist/components/logs/LogsTable/LogsTable.mjs

@@ -1 +1 @@
-"use strict";import M,{useMemo as I,useState as E,useRef as $,useEffect as N}from"react";import{useVirtualizer as R}from"@tanstack/react-virtual";import{useTheme as K,useMediaQuery as V,Stack as m,TableContainer as q,Paper as G,Table as Q,TableHead as Z,TableRow as u,TableCell as o,Typography as i,TableBody as J,CircularProgress as W,Chip as X,Box as Y,IconButton as _,Tooltip as ee}from"@mui/material";import{ContentCopy as re}from"@mui/icons-material";import{EmptyChartSection as te}from"../../chart/EmptyChartSection.mjs";import{useCopyToClipboard as ne}from"../../../hooks/useCopyToClipboard.mjs";import{useSnackbar as oe}from"../../Snackbar/index.mjs";import{formatLogTimestamp as ie}from"../../../utils/date.mjs";import{LogDetailPanel as ae}from"./LogDetailPanel.mjs";import{useBidirectionalScroll as le}from"../../../hooks/useBidirectionalScroll.mjs";import{jsx as e,jsxs as s}from"react/jsx-runtime";function se({statusCode:t,errorCode:a}){let l="grey.400";return a??t>=400?l="error.main":t>=200&&t<300&&(l="success.main"),e(Y,{sx:{width:8,height:8,borderRadius:"50%",bgcolor:l,flexShrink:0}})}function A({value:t,label:a,onCopy:l}){return e(_,{className:"copy-btn",size:"small",onClick:x=>{x.stopPropagation(),l(a,t)},sx:{p:.25,ml:.5},children:e(re,{sx:{fontSize:13}})})}function ce(t){return t?t.length<=12?t:`${t.slice(0,4)}\u2026${t.slice(-4)}`:"\u2014"}function de(t){return t.source==="sdk"?t.path:`${t.method} /${t.path}`}function he({text:t}){const a=$(null),[l,x]=E(!1);return N(()=>{const p=a.current;p&&x(p.scrollWidth>p.clientWidth)},[t]),e(ee,{title:l?t:"",placement:"top",children:e(i,{ref:a,variant:"body2",noWrap:!0,sx:{fontSize:"0.8em",color:"text.primary",fontFamily:"monospace"},children:t})})}const pe=48,me={fontFamily:"monospace"};function ue({data:t,isLoading:a,hasOlder:l,hasNewer:x,isLoadingOlder:p,isLoadingNewer:C,onLoadNewer:B,onLoadOlder:O,filterKey:P,timeZone:j}){const F=K(),v=V(F.breakpoints.down("xl")),d={...me,fontSize:"0.8em"},H=I(()=>[{label:"Timestamp",width:230},{label:"Phone",width:150},{label:"1-Click UUID",width:130},{label:"Source",width:90},{label:"Event",width:v?125:200},{label:"HTTP",align:"right",width:75},{label:"Latency",align:"right",width:100},{label:"Error",width:140}],[v]),[g,w]=E(null),b=$(null),{copy:U}=ne({type:"text/plain"}),{enqueueSnackbar:D}=oe(),T=async(n,r)=>{await U(r),D(`${n} copied to clipboard`,"success")},h=I(()=>t?.data??[],[t?.data]),y=R({count:h.length,getScrollElement:()=>b.current,estimateSize:()=>pe,overscan:5});le({scrollContainerRef:b,virtualizer:y,rowCount:h.length,hasNewer:x,hasOlder:l,isLoadingNewer:C,isLoadingOlder:p,onLoadNewer:B,onLoadOlder:O,resetKey:P});const c=y.getVirtualItems(),k=(n,r)=>`${n.eventTimestamp}-${r}`;N(()=>{g&&(c.some(n=>{const r=h[n.index];return k(r,n.index)===g})||w(null))},[c,g,h]);const S=c.length>0?c[0].start:0,L=c.length>0?y.getTotalSize()-c[c.length-1].end:0;return!a&&h.length===0?e(te,{}):e(m,{sx:{width:"100%",flex:1,minHeight:0},children:e(q,{component:G,ref:b,sx:{flex:1,scrollbarGutter:"stable",minHeight:500},children:s(Q,{size:"small",stickyHeader:!0,sx:{minWidth:1230,tableLayout:"fixed"},children:[e(Z,{children:s(u,{children:[e(o,{sx:{width:32,bgcolor:"background.paper"}}),H.map(n=>e(o,{sx:{textAlign:n.align,width:n.width},children:e(i,{sx:{textTransform:"uppercase"},variant:"subtitle2",children:n.label})},n.label))]})}),s(J,{children:[a&&h.length===0&&e(u,{children:e(o,{colSpan:9,sx:{textAlign:"center",py:2},children:e(i,{color:"text.secondary",children:"Loading..."})})}),C&&e(u,{sx:{position:"sticky",top:37,zIndex:1,pointerEvents:"none"},children:e(o,{colSpan:9,sx:{textAlign:"center",py:.75,bgcolor:"grey.100",borderBottom:"1px solid",borderColor:"divider"},children:s(m,{direction:"row",alignItems:"center",justifyContent:"center",spacing:1,children:[e(W,{size:12}),e(i,{variant:"caption",color:"text.secondary",children:"Loading newer logs"})]})})}),S>0&&e("tr",{children:e("td",{style:{height:S,padding:0,border:"none"}})}),c.map(n=>{const r=h[n.index],z=k(r,n.index),f=g===z;return s(M.Fragment,{children:[s(u,{"data-index":n.index,ref:y.measureElement,onClick:()=>w(f?null:z),hover:!0,sx:{cursor:"pointer","& > td":{borderBottom:f?"none":void 0}},children:[e(o,{sx:{width:32,px:1},children:e(m,{alignItems:"center",justifyContent:"center",height:"100%",children:e(se,{statusCode:r.statusCode,errorCode:r.errorCode})})}),e(o,{sx:{whiteSpace:"nowrap"},children:e(i,{variant:"body2",color:"text.secondary",sx:d,children:ie(r.eventTimestamp,j)})}),e(o,{sx:{"& .copy-btn":{opacity:0},"&:hover .copy-btn":{opacity:1}},children:s(m,{direction:"row",alignItems:"center",children:[e(i,{variant:"body2",color:"text.secondary",sx:d,children:r.phone??"\u2014"}),r.phone&&e(A,{value:r.phone,label:"Phone",onCopy:T})]})}),e(o,{sx:{"& .copy-btn":{opacity:0},"&:hover .copy-btn":{opacity:1}},children:s(m,{direction:"row",alignItems:"center",overflow:"hidden",children:[e(i,{variant:"body2",color:"text.secondary",noWrap:!0,sx:d,children:ce(r.uuid)}),r.uuid&&e(A,{value:r.uuid,label:"1-Click UUID",onCopy:T})]})}),e(o,{children:e(X,{label:r.source.toUpperCase(),size:"small",variant:"filled",sx:{fontWeight:600,fontSize:12,minWidth:40,bgcolor:r.source==="sdk"?"#4FC3F7":"primary.main",color:"white"}})}),e(o,{children:e(he,{text:de(r)})}),e(o,{sx:{textAlign:"right"},children:e(i,{variant:"body2",sx:{...d,color:r.source==="sdk"?"text.secondary":r.statusCode>=400?"error.main":"success.main"},children:r.source==="sdk"?"\u2014":r.statusCode})}),e(o,{sx:{textAlign:"right"},children:e(i,{variant:"body2",color:"text.secondary",sx:d,children:r.source==="sdk"||!r.latencyMs?"\u2014":`${r.latencyMs}ms`})}),e(o,{children:r.errorCode?e(i,{variant:"body2",sx:{...d,color:"error.main"},children:r.errorCode}):e(i,{variant:"body2",color:"text.secondary",sx:d,children:"\u2014"})})]}),f&&e(u,{children:e(o,{colSpan:9,sx:{py:0,px:1,borderTop:"none",bgcolor:"grey.50"},children:e(ae,{log:r})})})]},n.key)}),L>0&&e("tr",{children:e("td",{style:{height:L,padding:0,border:"none"}})}),p&&e(u,{sx:{position:"sticky",bottom:0,zIndex:1,pointerEvents:"none"},children:e(o,{colSpan:9,sx:{textAlign:"center",py:.75,bgcolor:"grey.100",borderTop:"1px solid",borderColor:"divider"},children:s(m,{direction:"row",alignItems:"center",justifyContent:"center",spacing:1,children:[e(W,{size:12}),e(i,{variant:"caption",color:"text.secondary",children:"Loading older logs"})]})})})]})]})})})}export{ue as LogsTable};
+"use strict";import q,{useMemo as O,useState as v,useRef as S,useEffect as T}from"react";import{useVirtualizer as K}from"@tanstack/react-virtual";import{useTheme as V,useMediaQuery as G,Stack as m,TableContainer as Q,Paper as Z,Table as _,TableHead as J,TableRow as x,TableCell as t,Typography as a,TableBody as X,CircularProgress as $,Chip as A,Box as Y,IconButton as ee,Tooltip as B}from"@mui/material";import{ContentCopy as re}from"@mui/icons-material";import{EmptyChartSection as oe}from"../../chart/EmptyChartSection.mjs";import{useCopyToClipboard as ne}from"../../../hooks/useCopyToClipboard.mjs";import{useSnackbar as te}from"../../Snackbar/index.mjs";import{formatLogTimestamp as ie}from"../../../utils/date.mjs";import{PRODUCT_LABELS as le}from"../constants.mjs";import{LogDetailPanel as ae}from"./LogDetailPanel.mjs";import{useBidirectionalScroll as se}from"../../../hooks/useBidirectionalScroll.mjs";import{jsx as e,jsxs as s}from"react/jsx-runtime";function de({statusCode:o,errorCode:i}){let l="grey.400";return i??o>=400?l="error.main":o>=200&&o<300&&(l="success.main"),e(Y,{sx:{width:8,height:8,borderRadius:"50%",bgcolor:l,flexShrink:0}})}function N({value:o,label:i,onCopy:l}){return e(ee,{className:"copy-btn",size:"small",onClick:h=>{h.stopPropagation(),l(i,o)},sx:{p:.25,ml:.5},children:e(re,{sx:{fontSize:13}})})}function ce(o){return o?o.length<=12?o:`${o.slice(0,4)}\u2026${o.slice(-4)}`:"\u2014"}function he(o){return o.source==="sdk"?o.path:`${o.method} /${o.path}`}function pe({text:o}){const i=S(null),[l,h]=v(!1);return T(()=>{const d=i.current;d&&h(d.scrollWidth>d.clientWidth)},[o]),e(B,{title:l?o:"",placement:"top",children:e(a,{ref:i,variant:"body2",noWrap:!0,sx:{fontSize:"0.8em",color:"text.primary",fontFamily:"monospace"},children:o})})}function ue({label:o,...i}){const l=S(null),[h,d]=v(!1);return T(()=>{var g;const y=(g=l.current)==null?void 0:g.querySelector(".MuiChip-label");y&&d(y.scrollWidth>y.clientWidth)},[o]),e(B,{title:h?o:"",placement:"top",children:e(A,{ref:l,label:o,...i,sx:{...i.sx,maxWidth:"100%","& .MuiChip-label":{overflow:"hidden",textOverflow:"ellipsis"}}})})}const me=48,xe={fontFamily:"monospace"};function ge({data:o,isLoading:i,hasOlder:l,hasNewer:h,isLoadingOlder:d,isLoadingNewer:g,onLoadNewer:y,onLoadOlder:M,filterKey:j,timeZone:F}){const U=V(),k=G(U.breakpoints.down("xl")),p={...xe,fontSize:"0.8em"},D=O(()=>[{label:"Timestamp",width:230},{label:"Phone",width:150},{label:"1-Click UUID",width:130},{label:"Source",width:90},{label:"Product",width:140},{label:"Event",width:k?125:200},{label:"HTTP",align:"right",width:75},{label:"Latency",align:"right",width:100},{label:"Error",width:140}],[k]),[b,L]=v(null),C=S(null),{copy:H}=ne({type:"text/plain"}),{enqueueSnackbar:R}=te(),z=async(n,r)=>{await H(r),R(`${n} copied to clipboard`,"success")},u=O(()=>o?.data??[],[o?.data]),f=K({count:u.length,getScrollElement:()=>C.current,estimateSize:()=>me,overscan:5});se({scrollContainerRef:C,virtualizer:f,rowCount:u.length,hasNewer:h,hasOlder:l,isLoadingNewer:g,isLoadingOlder:d,onLoadNewer:y,onLoadOlder:M,resetKey:j});const c=f.getVirtualItems(),I=(n,r)=>`${n.eventTimestamp}-${r}`;T(()=>{b&&(c.some(n=>{const r=u[n.index];return I(r,n.index)===b})||L(null))},[c,b,u]);const W=c.length>0?c[0].start:0,E=c.length>0?f.getTotalSize()-c[c.length-1].end:0;return!i&&u.length===0?e(oe,{}):e(m,{sx:{width:"100%",flex:1,minHeight:0},children:e(Q,{component:Z,ref:C,sx:{flex:1,scrollbarGutter:"stable",minHeight:500},children:s(_,{size:"small",stickyHeader:!0,sx:{minWidth:1230,tableLayout:"fixed"},children:[e(J,{children:s(x,{children:[e(t,{sx:{width:32,bgcolor:"background.paper"}}),D.map(n=>e(t,{sx:{textAlign:n.align,width:n.width},children:e(a,{sx:{textTransform:"uppercase"},variant:"subtitle2",children:n.label})},n.label))]})}),s(X,{children:[i&&u.length===0&&e(x,{children:e(t,{colSpan:10,sx:{textAlign:"center",py:2},children:e(a,{color:"text.secondary",children:"Loading..."})})}),g&&e(x,{sx:{position:"sticky",top:37,zIndex:1,pointerEvents:"none"},children:e(t,{colSpan:10,sx:{textAlign:"center",py:.75,bgcolor:"grey.100",borderBottom:"1px solid",borderColor:"divider"},children:s(m,{direction:"row",alignItems:"center",justifyContent:"center",spacing:1,children:[e($,{size:12}),e(a,{variant:"caption",color:"text.secondary",children:"Loading newer logs"})]})})}),W>0&&e("tr",{children:e("td",{style:{height:W,padding:0,border:"none"}})}),c.map(n=>{const r=u[n.index],P=I(r,n.index),w=b===P;return s(q.Fragment,{children:[s(x,{"data-index":n.index,ref:f.measureElement,onClick:()=>L(w?null:P),hover:!0,sx:{cursor:"pointer","& > td":{borderBottom:w?"none":void 0}},children:[e(t,{sx:{width:32,px:1},children:e(m,{alignItems:"center",justifyContent:"center",height:"100%",children:e(de,{statusCode:r.statusCode,errorCode:r.errorCode})})}),e(t,{sx:{whiteSpace:"nowrap"},children:e(a,{variant:"body2",color:"text.secondary",sx:p,children:ie(r.eventTimestamp,F)})}),e(t,{sx:{"& .copy-btn":{opacity:0},"&:hover .copy-btn":{opacity:1}},children:s(m,{direction:"row",alignItems:"center",children:[e(a,{variant:"body2",color:"text.secondary",sx:p,children:r.phone??"\u2014"}),r.phone&&e(N,{value:r.phone,label:"Phone",onCopy:z})]})}),e(t,{sx:{"& .copy-btn":{opacity:0},"&:hover .copy-btn":{opacity:1}},children:s(m,{direction:"row",alignItems:"center",overflow:"hidden",children:[e(a,{variant:"body2",color:"text.secondary",noWrap:!0,sx:p,children:ce(r.uuid)}),r.uuid&&e(N,{value:r.uuid,label:"1-Click UUID",onCopy:z})]})}),e(t,{children:e(A,{label:r.source.toUpperCase(),size:"small",variant:"filled",sx:{fontWeight:600,fontSize:12,minWidth:40,bgcolor:r.source==="sdk"?"#4FC3F7":"primary.main",color:"white"}})}),e(t,{children:e(ue,{label:le[r.product],variant:"outlined",sx:{fontSize:13,fontWeight:600,minWidth:110}})}),e(t,{children:e(pe,{text:he(r)})}),e(t,{sx:{textAlign:"right"},children:e(a,{variant:"body2",sx:{...p,color:r.source==="sdk"?"text.secondary":r.statusCode>=400?"error.main":"success.main"},children:r.source==="sdk"?"\u2014":r.statusCode})}),e(t,{sx:{textAlign:"right"},children:e(a,{variant:"body2",color:"text.secondary",sx:p,children:r.source==="sdk"||!r.latencyMs?"\u2014":`${r.latencyMs}ms`})}),e(t,{children:r.errorCode?e(a,{variant:"body2",sx:{...p,color:"error.main"},children:r.errorCode}):e(a,{variant:"body2",color:"text.secondary",sx:p,children:"\u2014"})})]}),w&&e(x,{children:e(t,{colSpan:10,sx:{py:0,px:1,borderTop:"none",bgcolor:"grey.50"},children:e(ae,{log:r})})})]},n.key)}),E>0&&e("tr",{children:e("td",{style:{height:E,padding:0,border:"none"}})}),d&&e(x,{sx:{position:"sticky",bottom:0,zIndex:1,pointerEvents:"none"},children:e(t,{colSpan:10,sx:{textAlign:"center",py:.75,bgcolor:"grey.100",borderTop:"1px solid",borderColor:"divider"},children:s(m,{direction:"row",alignItems:"center",justifyContent:"center",spacing:1,children:[e($,{size:12}),e(a,{variant:"caption",color:"text.secondary",children:"Loading older logs"})]})})})]})]})})})}export{ge as LogsTable};

package/dist/components/logs/constants.d.ts

@@ -0,0 +1,2 @@
+import { LogEntry } from './types';
+export declare const PRODUCT_LABELS: Record<LogEntry['product'], string>;

package/dist/components/logs/constants.mjs

@@ -0,0 +1 @@
+"use strict";const i={signup:"1-Click Signup",verify:"1-Click Verify",health:"1-Click Health","text-to-signup":"Text to Signup"};export{i as PRODUCT_LABELS};

package/dist/components/logs/types.d.ts

@@ -2,7 +2,7 @@ export interface LogEntry {
     brandUuid: string;
     phone: string | null;
     uuid: string | null;
-    product: 'signup' | 'verify';
+    product: 'signup' | 'verify' | 'health' | 'text-to-signup';
     sessionUuid: string | null;
     method: string;
     path: string;

package/dist/components/text-to-signup/magic-button.mjs

@@ -1 +1 @@
-"use strict";import{forwardRef as z,useRef as G,useState as p,useImperativeHandle as N,useEffect as v}from"react";import{Stack as y,Box as F,Button as W}from"@mui/material";import{AutoAwesome as $}from"@mui/icons-material";import*as u from"html-to-image";import{wrapPromise as j}from"../../utils/wrapPromise/index.mjs";import{useGoogleFont as A}from"../../hooks/useGoogleFont.mjs";import{jsxs as L,jsx as i}from"react/jsx-runtime";import{PoweredByVerified as H}from"../verified/powered-by-verified/index.mjs";function V({magicLink:g,magicText:c,buttonProps:l,renderAsImage:n,enablePoweredByVerified:b,poweredByVerifiedProps:d,fontFamily:s,enableGoogleFontLoad:h},R){const o=G(null),[C,S]=p(null),[P,E]=p(null),[m,x]=p(0),[k,T]=p(0),r=A(s,h),B=async e=>{if(!o.current)return;const a={png:u.toPng,svg:u.toSvg};let t=null;try{r.cssContent&&(t=document.createElement("style"),t.id="temp-font-style-for-download",t.textContent=r.cssContent,document.head.appendChild(t));const[f,I]=await j(a[e](o.current,{pixelRatio:4}));if(t&&(document.head.removeChild(t),t=null),I){console.error("Failed to generate magic button:",I);return}if(!f)return;const w=document.createElement("a");w.href=f,w.download=`magic-button-${c.replace(/\s+/g,"-")}.${e}`,w.click()}catch(f){t&&document.head.removeChild(t),console.error("Failed to generate magic button:",f)}};return N(R,()=>({download:B}),[B]),v(()=>{if(!n){x(0);return}if(!o.current||m>10)return;x(a=>a+1);const e=setInterval(()=>{x(a=>a+1)},m+1*500);return()=>clearInterval(e)},[m,n,r.isLoaded]),v(()=>{let e=null;return r.cssContent&&(e=document.createElement("style"),e.id="temp-font-style-for-image",e.textContent=r.cssContent,document.head.appendChild(e)),()=>{e&&document.head.removeChild(e)}},[r.cssContent]),v(()=>{!n||s&&h&&r.isLoading||(async()=>{if(o.current&&!(h&&!r.isLoaded))try{const e=await u.toPng(o.current,{pixelRatio:.5});if(e===P){k===0&&T(t=>t+1);return}if(E(e),!o.current)return;const a=await u.toPng(o.current,{pixelRatio:4});S(a)}catch(e){console.error("Failed to generate PNG:",e)}})()},[k,m,g,c,l,b,d,n,s,r.isLoaded,P]),L(y,{children:[i(F,{className:"button-preview-container",sx:{...n&&{position:"fixed",top:-9999,left:-9999,maxWidth:9999,overflow:"hidden",zIndex:-1}},children:L(y,{ref:o,className:"canvas-copiable",spacing:1,sx:{display:"inline-flex",minWidth:"fit-content",justifyContent:"center",alignItems:"center",alignSelf:"center",...n&&{pt:"3px",pb:"6px",px:"4px"}},children:[i(W,{href:g,target:"_blank",variant:"contained",size:"large",color:"primary",startIcon:i($,{}),...l,sx:{fontFamily:s?`"${s}" !important`:void 0,textTransform:"none",fontSize:16,p:1.5,m:1,"&, & > span":{wordBreak:"break-word",lineHeight:n?0:1.75},"& > span":{whiteSpace:n?"nowrap":void 0},...l?.sx},children:i("span",{children:c})}),b&&i(H,{...d,containerProps:{pt:.5,maxWidth:143,...d?.containerProps}})]})}),C&&n&&i(y,{component:"a",href:g,target:"_blank",rel:"noopener noreferrer",flex:1,sx:{overflow:"visible"},children:i(F,{component:"img",src:C,alt:c,draggable:!1,sx:{width:"100%",height:"auto"}})})]})}const _=z(V);export{_ as TTSMagicButton};
+"use strict";import{forwardRef as z,useRef as G,useState as f,useImperativeHandle as N,useEffect as b}from"react";import{Stack as y,Box as F,Button as W}from"@mui/material";import{AutoAwesome as $}from"@mui/icons-material";import*as g from"html-to-image";import{wrapPromise as q}from"../../utils/wrapPromise/index.mjs";import{useGoogleFont as H}from"../../hooks/useGoogleFont.mjs";import{jsxs as L,jsx as i}from"react/jsx-runtime";import{PoweredByVerified as V}from"../verified/powered-by-verified/index.mjs";function _({magicLink:h,magicText:l,buttonProps:d,renderAsImage:r,enablePoweredByVerified:C,poweredByVerifiedProps:m,fontFamily:s,enableGoogleFontLoad:x},R){const a=G(null),[P,E]=f(null),[S,T]=f(null),[p,v]=f(0),[k,j]=f(0),o=H(s,x),A=async t=>{var e;if(!a.current)return;const c={png:g.toPng,svg:g.toSvg};let n=null;try{if(o.cssContent){n=document.createElement("style"),n.id="temp-font-style-for-download";const B=(e=document.querySelector('meta[property="csp-nonce"]'))==null?void 0:e.getAttribute("content");B&&n.setAttribute("nonce",B),n.textContent=o.cssContent,document.head.appendChild(n)}const[u,I]=await q(c[t](a.current,{pixelRatio:4}));if(n&&(document.head.removeChild(n),n=null),I){console.error("Failed to generate magic button:",I);return}if(!u)return;const w=document.createElement("a");w.href=u,w.download=`magic-button-${l.replace(/\s+/g,"-")}.${t}`,w.click()}catch(u){n&&document.head.removeChild(n),console.error("Failed to generate magic button:",u)}};return N(R,()=>({download:A}),[A]),b(()=>{if(!r){v(0);return}if(!a.current||p>10)return;v(e=>e+1);const t=setInterval(()=>{v(e=>e+1)},p+1*500);return()=>clearInterval(t)},[p,r,o.isLoaded]),b(()=>{var t;let e=null;if(o.cssContent){e=document.createElement("style"),e.id="temp-font-style-for-image";const c=(t=document.querySelector('meta[property="csp-nonce"]'))==null?void 0:t.getAttribute("content");c&&e.setAttribute("nonce",c),e.textContent=o.cssContent,document.head.appendChild(e)}return()=>{e&&document.head.removeChild(e)}},[o.cssContent]),b(()=>{!r||s&&x&&o.isLoading||(async()=>{if(a.current&&!(x&&!o.isLoaded))try{const t=await g.toPng(a.current,{pixelRatio:.5});if(t===S){k===0&&j(c=>c+1);return}if(T(t),!a.current)return;const e=await g.toPng(a.current,{pixelRatio:4});E(e)}catch(t){console.error("Failed to generate PNG:",t)}})()},[k,p,h,l,d,C,m,r,s,o.isLoaded,S]),L(y,{children:[i(F,{className:"button-preview-container",sx:{...r&&{position:"fixed",top:-9999,left:-9999,maxWidth:9999,overflow:"hidden",zIndex:-1}},children:L(y,{ref:a,className:"canvas-copiable",spacing:1,sx:{display:"inline-flex",minWidth:"fit-content",justifyContent:"center",alignItems:"center",alignSelf:"center",...r&&{pt:"3px",pb:"6px",px:"4px"}},children:[i(W,{href:h,target:"_blank",variant:"contained",size:"large",color:"primary",startIcon:i($,{}),...d,sx:{fontFamily:s?`"${s}" !important`:void 0,textTransform:"none",fontSize:16,p:1.5,m:1,"&, & > span":{wordBreak:"break-word",lineHeight:r?0:1.75},"& > span":{whiteSpace:r?"nowrap":void 0},...d?.sx},children:i("span",{children:l})}),C&&i(V,{...m,containerProps:{pt:.5,maxWidth:143,...m?.containerProps}})]})}),P&&r&&i(y,{component:"a",href:h,target:"_blank",rel:"noopener noreferrer",flex:1,sx:{overflow:"visible"},children:i(F,{component:"img",src:P,alt:l,draggable:!1,sx:{width:"100%",height:"auto"}})})]})}const D=z(_);export{D as TTSMagicButton};

package/dist/hooks/useGoogleFont.mjs

@@ -1 +1 @@
-"use strict";import{useState as i,useEffect as g}from"react";import{makeGoogleFontUrl as f}from"../utils/makeGoogleFont.mjs";function h(r,u){const[d,o]=i("idle"),[m,a]=i(null);return g(()=>{if(!r||!u){o("idle"),a(null);return}const s=`google-font-${r.replace(/\s+/g,"-").toLowerCase()}`,l=document.getElementById(s);if(l){const e=l.getAttribute("data-status"),t=l.getAttribute("data-css-content");e==="loaded"&&t?(o("loaded"),a(t)):e==="error"?(o("error"),a(null)):o("loading");return}return o("loading"),a(null),(async()=>{try{const e=f(r),t=await fetch(e);if(!t.ok)throw new Error(`Failed to fetch font CSS: ${t.statusText}`);const c=await t.text(),n=document.createElement("style");n.id=s,n.textContent=c,n.setAttribute("data-status","loaded"),n.setAttribute("data-css-content",c),document.head.appendChild(n),o("loaded"),a(c)}catch(e){console.error(`Failed to load Google Font ${r}:`,e);const t=document.createElement("style");t.id=s,t.setAttribute("data-status","error"),document.head.appendChild(t),o("error"),a(null)}})(),()=>{const e=document.getElementById(s);e&&document.head.removeChild(e)}},[r,u]),{status:d,isLoading:d==="loading",isLoaded:d==="loaded",hasError:d==="error",cssContent:m}}export{h as useGoogleFont};
+"use strict";import{useState as p,useEffect as h}from"react";import{makeGoogleFontUrl as y}from"../utils/makeGoogleFont.mjs";function b(d,m){const[l,o]=p("idle"),[f,n]=p(null);return h(()=>{if(!d||!m){o("idle"),n(null);return}const u=`google-font-${d.replace(/\s+/g,"-").toLowerCase()}`,c=document.getElementById(u);if(c){const t=c.getAttribute("data-status"),s=c.getAttribute("data-css-content");t==="loaded"&&s?(o("loaded"),n(s)):t==="error"?(o("error"),n(null)):o("loading");return}return o("loading"),n(null),(async()=>{var t,s;try{const i=y(d),e=await fetch(i);if(!e.ok)throw new Error(`Failed to fetch font CSS: ${e.statusText}`);const r=await e.text(),a=document.createElement("style");a.id=u;const g=(t=document.querySelector('meta[property="csp-nonce"]'))==null?void 0:t.getAttribute("content");g&&a.setAttribute("nonce",g),a.textContent=r,a.setAttribute("data-status","loaded"),a.setAttribute("data-css-content",r),document.head.appendChild(a),o("loaded"),n(r)}catch(i){console.error(`Failed to load Google Font ${d}:`,i);const e=document.createElement("style");e.id=u;const r=(s=document.querySelector('meta[property="csp-nonce"]'))==null?void 0:s.getAttribute("content");r&&e.setAttribute("nonce",r),e.setAttribute("data-status","error"),document.head.appendChild(e),o("error"),n(null)}})(),()=>{const t=document.getElementById(u);t&&document.head.removeChild(t)}},[d,m]),{status:l,isLoading:l==="loading",isLoaded:l==="loaded",hasError:l==="error",cssContent:f}}export{b as useGoogleFont};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verifiedinc-public/shared-ui-elements",
-  "version": "9.8.1",
+  "version": "9.9.0",
   "description": "A set of UI components, utilities that is shareable with the core apps.",
   "private": false,
   "sideEffects": false,
@@ -137,6 +137,7 @@
     "framer-motion": ">=11.11.1",
     "html-to-image": ">=1.11.13 <2",
     "immer": ">=10",
+    "jspdf": ">=4.2.1 <5",
     "libphonenumber-js": ">=1.11.11",
     "lodash": ">=4.17.21",
     "notistack": ">=3.0.1",
@@ -148,7 +149,6 @@
     "react-dom": ">=18 <19",
     "react-hook-form": ">=7.52.1 <=7.53.2",
     "react-imask": ">=7.6.1",
-    "react-to-pdf": ">=3.0.0",
     "recharts": ">=2.15.0 <3",
     "tinycolor2": ">=1.6.0 <2",
     "uuid": ">=9.0.1",