@verifiedinc-public/shared-ui-elements 8.23.2 → 9.0.1

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

@@ -11,5 +11,6 @@ export interface ExportToPdfButtonProps extends IconButtonProps {
     targetId: string | React.RefObject<HTMLElement>;
     filename?: string;
     children?: React.ReactNode;
+    resolution?: number;
 }
 export declare const ExportToPdfButton: React.FC<ExportToPdfButtonProps>;

package/dist/components/buttons/ExportToPdfButton.mjs

@@ -1 +1 @@
-"use strict";import{PictureAsPdf as c}from"@mui/icons-material";import{IconButton as d,CircularProgress as f}from"@mui/material";import p,{useCallback as u}from"react";import{jsx as e}from"react/jsx-runtime";const g=({targetId:t,filename:n="file",sx:s,...o})=>{const[r,a]=p.useState(!1),i=u(()=>{a(!0),requestAnimationFrame(()=>{setTimeout(()=>{try{import("react-to-pdf").then(async m=>{const l=m.default;await l(()=>typeof t=="string"?document.getElementById(t):t,{filename:`${n}.pdf`,page:{margin:10}})}).finally(()=>{a(!1),console.log("updated pdf")})}catch{a(!1)}},600)})},[n,t]);return e("span",{children:e(d,{onClick:i,disabled:r,sx:{m:"0 !important",...s},...o,children:r?e(f,{size:24}):o.children?o.children:e(c,{})})})};export{g as ExportToPdfButton};
+"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};

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTable.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { BillableEventsProductTableProps } from '../BillableEventsTable/BillableEventsTable.types';
+export declare const BillableEventsProductTable: React.FC<BillableEventsProductTableProps>;

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTable.mjs

@@ -0,0 +1 @@
+"use strict";import{TableContainer as u,Paper as x,Table as C,TableHead as k,TableRow as h,TableCell as i,TableBody as B,TableSortLabel as L}from"@mui/material";import{useMemo as m}from"react";import{EmptyChartSection as S}from"../EmptyChartSection.mjs";import{LoadingChartSection as v}from"../LoadingChartSection.mjs";import{BILLABLE_PRODUCTS as D}from"../BillableEventsTable/BillableEventsTable.types.mjs";import{useBillableSort as E}from"../BillableEventsTable/useBillableSort.hook.mjs";import{white as P}from"../../../styles/colors.mjs";import{jsx as a,jsxs as l}from"react/jsx-runtime";const w=["brand","integrationType"],I=({data:r,isLoading:p,isFetching:b,product:s})=>{const{sortKey:d,sortDir:g,handleSort:T,sortedData:y}=E(r,w,"brand"),t=m(()=>D.find(e=>e.product===s),[s]),c=m(()=>t?.columns??[],[t]),n=(e,o,f="left")=>a(L,{active:d===e,direction:d===e?g:"asc",onClick:()=>T(e),sx:f==="right"?{flexDirection:"row"}:void 0,children:o});return!(r!=null&&r.length)&&p?a(v,{}):r!=null&&r.length?a(u,{component:x,sx:{opacity:b?.4:1},children:l(C,{sx:{backgroundColor:P},children:[a(k,{children:l(h,{children:[a(i,{children:n("brand","Brand")}),a(i,{children:n("integrationType","Integration Type")}),c.map(e=>a(i,{align:"right",children:n(e.key,e.label,"right")},e.key))]})}),a(B,{children:y.map(e=>l(h,{children:[a(i,{children:e.brand}),a(i,{children:e.integrationType}),c.map(o=>a(i,{align:"right",children:e.metrics[o.key]??0},o.key))]},e.brandUuid))})]})}):a(S,{})};export{I as BillableEventsProductTable};

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTableDataMapper.d.ts

@@ -0,0 +1,19 @@
+import { BillableProduct, BillableEventsTableRow } from '../BillableEventsTable/BillableEventsTable.types';
+type Brand = {
+    brandUuid: string;
+    brandName: string;
+    integrationType: string;
+};
+type ChartData = {
+    brandUuid: string;
+    brandName: string;
+    interval?: Array<Record<string, number | string>>;
+    overall: Record<string, number | string>;
+};
+type MapBillableEventsProductTableDataParams = {
+    product: BillableProduct;
+    data: ChartData[];
+    brands: Brand[];
+};
+export declare const mapBillableEventsProductTableData: ({ product, data, brands, }: MapBillableEventsProductTableDataParams) => BillableEventsTableRow[];
+export {};

package/dist/components/chart/BillableEventsProductTable/BillableEventsProductTableDataMapper.mjs

@@ -0,0 +1 @@
+"use strict";import{BILLABLE_PRODUCTS as b}from"../BillableEventsTable/BillableEventsTable.types.mjs";const f=({product:s,data:u,brands:l})=>{var d;const c=b.find(r=>r.product===s);if(!c)return[];const n=new Map;for(const r of u){const t=l.find(e=>e.brandUuid===r.brandUuid);if(!t||!r.interval)continue;const a=n.get(r.brandUuid),o=a?.metrics??{};for(const e of r.interval)for(const i of c.columns)o[i.key]=(o[i.key]??0)+(Number(e[i.metricKey])||0);a||n.set(r.brandUuid,{brandUuid:r.brandUuid,brand:t.brandName,integrationType:(d=t.integrationType)==null?void 0:d.toLocaleUpperCase(),metrics:o})}return Array.from(n.values())};export{f as mapBillableEventsProductTableData};

package/dist/components/chart/BillableEventsProductTable/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BillableEventsProductTable';
+export * from './BillableEventsProductTableDataMapper';

package/dist/components/chart/BillableEventsTable/BillableEventsTable.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { BillableEventsTableProps } from './BillableEventsTable.types';
+export declare const BillableEventsTable: React.FC<BillableEventsTableProps>;

package/dist/components/chart/BillableEventsTable/BillableEventsTable.mjs

@@ -0,0 +1 @@
+"use strict";import{TableContainer as S,Paper as x,Table as B,TableHead as C,TableRow as d,TableCell as r,TableBody as k,TableSortLabel as L}from"@mui/material";import{useEffect as v,useMemo as b}from"react";import{EmptyChartSection as w}from"../EmptyChartSection.mjs";import{LoadingChartSection as D}from"../LoadingChartSection.mjs";import{BillableProduct as E,BILLABLE_PRODUCTS as P}from"./BillableEventsTable.types.mjs";import{useBillableSort as j}from"./useBillableSort.hook.mjs";import{white as I}from"../../../styles/colors.mjs";import{jsx as a,jsxs as i}from"react/jsx-runtime";const R=["brand","integrationType"],K=({data:n,isLoading:g,isFetching:u,visibleProducts:h,onSortedDataChange:o})=>{const{sortKey:m,sortDir:f,handleSort:T,sortedData:l}=j(n,R,"brand");v(()=>{o?.(l)},[l,o]);const s=b(()=>{const e=h??Object.values(E);return P.filter(t=>e.includes(t.product))},[h]),p=b(()=>s.flatMap(e=>e.columns),[s]),c=(e,t,y="left")=>a(L,{active:m===e,direction:m===e?f:"asc",onClick:()=>T(e),sx:y==="right"?{flexDirection:"row"}:void 0,children:t});return!(n!=null&&n.length)&&g?a(D,{}):n!=null&&n.length?a(S,{component:x,sx:{opacity:u?.4:1},children:i(B,{sx:{backgroundColor:I},children:[i(C,{children:[i(d,{children:[a(r,{rowSpan:2,children:c("brand","Brand")}),a(r,{rowSpan:2,children:c("integrationType","Integration Type")}),s.map(e=>a(r,{colSpan:e.columns.length,align:"center",sx:{fontWeight:"bold",borderBottom:"none"},children:e.label},e.product))]}),a(d,{children:p.map(e=>a(r,{align:"right",children:c(e.key,e.label,"right")},e.key))})]}),a(k,{children:l.map(e=>i(d,{children:[a(r,{children:e.brand}),a(r,{children:e.integrationType}),p.map(t=>a(r,{align:"right",children:e.metrics[t.key]??0},t.key))]},e.brandUuid))})]})}):a(w,{})};export{K as BillableEventsTable};

package/dist/components/chart/BillableEventsTable/BillableEventsTable.types.d.ts

@@ -0,0 +1,36 @@
+export declare enum BillableProduct {
+    TEXT_TO_SIGNUP = "TEXT_TO_SIGNUP",
+    ONE_CLICK_VERIFY = "ONE_CLICK_VERIFY",
+    ONE_CLICK_SIGNUP = "ONE_CLICK_SIGNUP",
+    ONE_CLICK_HEALTH = "ONE_CLICK_HEALTH"
+}
+export type BillableEventColumn = {
+    key: string;
+    label: string;
+    metricKey: string;
+};
+export type BillableProductConfig = {
+    product: BillableProduct;
+    label: string;
+    columns: BillableEventColumn[];
+};
+export declare const BILLABLE_PRODUCTS: BillableProductConfig[];
+export type BillableEventsTableRow = {
+    brandUuid: string;
+    brand: string;
+    integrationType: string;
+    metrics: Record<string, number>;
+};
+export type BillableEventsTableProps = {
+    data: BillableEventsTableRow[];
+    isLoading: boolean;
+    isFetching: boolean;
+    visibleProducts?: BillableProduct[];
+    onSortedDataChange?: (sortedData: BillableEventsTableRow[]) => void;
+};
+export type BillableEventsProductTableProps = {
+    data: BillableEventsTableRow[];
+    isLoading: boolean;
+    isFetching: boolean;
+    product: BillableProduct;
+};

package/dist/components/chart/BillableEventsTable/BillableEventsTable.types.mjs

@@ -0,0 +1 @@
+"use strict";var i=(e=>(e.TEXT_TO_SIGNUP="TEXT_TO_SIGNUP",e.ONE_CLICK_VERIFY="ONE_CLICK_VERIFY",e.ONE_CLICK_SIGNUP="ONE_CLICK_SIGNUP",e.ONE_CLICK_HEALTH="ONE_CLICK_HEALTH",e))(i||{});const l=[{product:"TEXT_TO_SIGNUP",label:"Text to Signup",columns:[{key:"tts_smsKeywordsReceived",label:"SMS Keywords Received",metricKey:"ttsSent"},{key:"tts_verificationsSucceeded",label:"Verifications Succeeded",metricKey:"ttsVerified"}]},{product:"ONE_CLICK_VERIFY",label:"1-Click Verify",columns:[{key:"verify_smsSent",label:"SMS Sent",metricKey:"oneClickVerificationSending"},{key:"verify_verificationsSucceeded",label:"Verifications Succeeded",metricKey:"oneClickVerificationVerified"}]},{product:"ONE_CLICK_SIGNUP",label:"1-Click Signup",columns:[{key:"signup_autofillsSucceeded",label:"Autofills Succeeded",metricKey:"oneClickSuccess"},{key:"signup_riskSignals",label:"Risk Signals",metricKey:"riskSignal"}]},{product:"ONE_CLICK_HEALTH",label:"1-Click Health",columns:[{key:"health_autofillsStarted",label:"Autofills Started",metricKey:"oneClickHealthCreated"}]}];export{l as BILLABLE_PRODUCTS,i as BillableProduct};

package/dist/components/chart/BillableEventsTable/BillableEventsTableDataMapper.d.ts

@@ -0,0 +1,22 @@
+import { BillableProduct, BillableEventsTableRow } from './BillableEventsTable.types';
+type Brand = {
+    brandUuid: string;
+    brandName: string;
+    integrationType: string;
+};
+type ChartData = {
+    brandUuid: string;
+    brandName: string;
+    interval?: Array<Record<string, number | string>>;
+    overall: Record<string, number | string>;
+};
+type ProductData = {
+    product: BillableProduct;
+    data: ChartData[];
+};
+type MapBillableEventsTableDataParams = {
+    productDataSets: ProductData[];
+    brands: Brand[];
+};
+export declare const mapBillableEventsTableData: ({ productDataSets, brands, }: MapBillableEventsTableDataParams) => BillableEventsTableRow[];
+export {};

package/dist/components/chart/BillableEventsTable/BillableEventsTableDataMapper.mjs

@@ -0,0 +1 @@
+"use strict";import{BILLABLE_PRODUCTS as m}from"./BillableEventsTable.types.mjs";const b=({productDataSets:c,brands:l})=>{var i;const d=new Map,s=new Set;for(const{product:e,data:a}of c){const r=m.find(n=>n.product===e);if(r)for(const n of a){if(!((i=n.interval)!=null&&i.length))continue;const o=d.get(n.brandUuid)??{};for(const t of r.columns){const u=n.interval.reduce((f,p)=>f+(Number(p[t.metricKey])||0),0);o[t.key]=(o[t.key]??0)+u}r.columns.some(t=>(o[t.key]??0)>0)&&s.add(n.brandUuid),d.set(n.brandUuid,o)}}return Array.from(s).map(e=>{var a;const r=l.find(n=>n.brandUuid===e);return r?{brandUuid:e,brand:r.brandName,integrationType:(a=r.integrationType)==null?void 0:a.toLocaleUpperCase(),metrics:d.get(e)??{}}:null}).filter(e=>e!==null)};export{b as mapBillableEventsTableData};

package/dist/components/chart/BillableEventsTable/exportBillableEventsToCsv.d.ts

@@ -0,0 +1,8 @@
+import { BillableProduct, BillableEventsTableRow } from './BillableEventsTable.types';
+interface ExportBillableEventsToCsvOptions {
+    data: BillableEventsTableRow[];
+    visibleProducts?: BillableProduct[];
+    filename?: string;
+}
+export declare function exportBillableEventsToCsv({ data, visibleProducts, filename, }: ExportBillableEventsToCsvOptions): void;
+export {};

package/dist/components/chart/BillableEventsTable/exportBillableEventsToCsv.mjs

@@ -0,0 +1,3 @@
+"use strict";import{BillableProduct as v,BILLABLE_PRODUCTS as L}from"./BillableEventsTable.types.mjs";function s(c){const t=String(c);return t.includes(",")||t.includes('"')||t.includes(`
+`)?`"${t.replace(/"/g,'""')}"`:t}function g({data:c,visibleProducts:t,filename:p="billable-events"}){const d=t??Object.values(v),i=L.filter(e=>d.includes(e.product)),a=i.flatMap(e=>e.columns),n=[],l=["",""];for(const e of i){l.push(s(e.label));for(let o=1;o<e.columns.length;o++)l.push("")}n.push(l.join(","));const u=["Brand","Integration Type"];for(const e of a)u.push(s(e.label));n.push(u.join(","));for(const e of c){const o=[s(e.brand),s(e.integrationType)];for(const m of a)o.push(String(e.metrics[m.key]??0));n.push(o.join(","))}const b=n.join(`
+`),h=new Blob([b],{type:"text/csv;charset=utf-8;"}),f=URL.createObjectURL(h),r=document.createElement("a");r.href=f,r.download=`${p}.csv`,r.click(),URL.revokeObjectURL(f)}export{g as exportBillableEventsToCsv};

package/dist/components/chart/BillableEventsTable/index.d.ts

@@ -0,0 +1,4 @@
+export * from './BillableEventsTable.types';
+export * from './BillableEventsTable';
+export * from './BillableEventsTableDataMapper';
+export * from './exportBillableEventsToCsv';

package/dist/components/chart/BillableEventsTable/useBillableSort.hook.d.ts

@@ -0,0 +1,11 @@
+type SortDirection = 'asc' | 'desc';
+type WithMetrics = {
+    metrics: Record<string, number>;
+} & Record<string, unknown>;
+export declare function useBillableSort<T extends WithMetrics>(data: T[] | undefined, directKeys: string[], initialSortKey: string): {
+    sortKey: string;
+    sortDir: SortDirection;
+    handleSort: (key: string) => void;
+    sortedData: T[];
+};
+export {};

package/dist/components/chart/BillableEventsTable/useBillableSort.hook.mjs

@@ -0,0 +1 @@
+"use strict";import{useState as d,useMemo as D}from"react";function p(c,i,l){const[s,m]=d(l),[o,u]=d("asc"),S=e=>{e===s?u(r=>r==="asc"?"desc":"asc"):(m(e),u("asc"))},f=D(()=>[...c??[]].sort((e,r)=>{let t,a;i.includes(s)?(t=e[s]??"",a=r[s]??""):(t=e.metrics[s]??0,a=r.metrics[s]??0);const n=t<a?-1:t>a?1:0;return o==="asc"?n:-n}),[c,s,o,i]);return{sortKey:s,sortDir:o,handleSort:S,sortedData:f}}export{p as useBillableSort};

package/dist/components/chart/ConversionOverTimeChart/index.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { SxProps } from '@mui/material';
+import { AreaSeriesChartData } from '../AreaChart';
+import { BrandFilter } from '../../BrandFilterInput';
+export type { AreaSeriesChartData } from '../AreaChart';
+export interface BrandIntervalData {
+    brandUuid: string;
+    brandName: string;
+    interval?: Array<Record<string, number | string>>;
+}
+export interface ConversionOverTimeChartProps {
+    data?: Array<Record<string, number | string>>;
+    series?: AreaSeriesChartData[];
+    chartData?: BrandIntervalData[];
+    seriesConfig?: AreaSeriesChartData[];
+    isLoading: boolean;
+    isSuccess: boolean;
+    isFetching: boolean;
+    filter: {
+        timezone?: string;
+        brands?: BrandFilter[];
+    };
+    sx?: SxProps;
+    stackMode?: 'stack' | 'none';
+}
+export declare function ConversionOverTimeChart({ data, series, chartData, seriesConfig, stackMode: stackModeProp, isLoading, isFetching, isSuccess, filter, sx, }: Readonly<ConversionOverTimeChartProps>): React.ReactNode;

package/dist/components/chart/ConversionOverTimeChart/index.mjs

@@ -0,0 +1 @@
+"use strict";import{useState as S}from"react";import{Box as y,ToggleButtonGroup as w,ToggleButton as C}from"@mui/material";import{EmptyChartSection as E}from"../EmptyChartSection.mjs";import{LoadingChartSection as L}from"../LoadingChartSection.mjs";import{AreaChart as T}from"../AreaChart/index.mjs";import{useStyle as j}from"../styles.mjs";import{formatExtendedDate as B,formatDateMMYY as U}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as z}from"../../form/TimezoneInput/timezones.mjs";import{jsx as m,jsxs as v}from"react/jsx-runtime";function Z({brands:p,data:g,seriesConfig:i}){const u=new Map,n=p?new Set(p.map(t=>t._raw.brandUuid)):null;for(const t of g)if(!(n&&!n.has(t.brandUuid)))for(const d of t.interval??[]){const c=+new Date(d.date);let a=u.get(c);if(!a){a={date:c};for(const o of i)a[o.dataKey]=0;u.set(c,a)}for(const o of i)a[o.dataKey]=a[o.dataKey]+Number(d[o.dataKey]||0)}return{series:i,data:Array.from(u.values()).sort((t,d)=>t.date-d.date)}}function _({data:p,series:g,chartData:i,seriesConfig:u,stackMode:n="stack",isLoading:t,isFetching:d,isSuccess:c,filter:a,sx:o}){const x=j(),b=a.timezone??z,[f,N]=S("absolute"),r=i!==void 0?t?{series:[],data:[]}:Z({brands:a.brands,data:i,seriesConfig:u??[]}):{series:g??[],data:p??[]};if(!r.data.length&&t)return m(L,{});if(!r.data.length||!c)return m(E,{});const k=n==="none"&&f==="percent"?r.data.map(e=>{const l=Math.max(0,...r.series.map(s=>Number(e[s.dataKey])||0)),h={date:e.date};for(const s of r.series)h[s.dataKey]=l===0?0:(Number(e[s.dataKey])||0)/l;return h}):null,F=n==="stack"?f==="absolute"?"stack":"expand":"none",K=f==="absolute"?{tickFormatter:e=>Number(e).toLocaleString(),allowDecimals:!1}:{tickFormatter:e=>`${(e*100).toFixed(0)}%`,domain:[0,1]},M=f==="absolute"?e=>Number(e).toLocaleString():n==="stack"?(e,l,h)=>{const s=r.series.reduce((A,D)=>A+(Number(h.payload[D.dataKey])||0),0);return s===0?"0.0%":`${(Number(e)/s*100).toFixed(1)}%`}:e=>`${(Number(e)*100).toFixed(1)}%`;return v(y,{sx:{display:"flex",flexDirection:"column",gap:1,height:x.regularChartWrapper.height},children:[m(y,{sx:{display:"flex",justifyContent:"flex-end"},children:v(w,{value:f,exclusive:!0,onChange:(e,l)=>{l!==null&&N(l)},size:"small",children:[m(C,{value:"absolute",children:"Numbers"}),m(C,{value:"percent",children:"Percentages"})]})}),m(T,{data:k??r.data,series:r.series,stackMode:F,isAnimationActive:!0,xAxis:{dataKey:"date",type:"number",domain:["dataMin","dataMax"],tickFormatter:e=>U(e,{timeZone:b,hour12:!1,hour:"numeric"}),allowDuplicatedCategory:!1},yAxis:K,tooltip:{formatter:M,labelFormatter:e=>B(e,{timeZone:b,hour12:!1})},sx:{...x.regularChartWrapper,height:"unset",flex:1,minHeight:0,opacity:d?.4:1,...o}})]})}export{_ as ConversionOverTimeChart};

package/dist/components/chart/OneClickHealthOverTimeChart/OneClickHealthOverTimeChart.mjs

@@ -1 +1 @@
-"use strict";import{EmptyChartSection as c}from"../EmptyChartSection.mjs";import{LoadingChartSection as h}from"../LoadingChartSection.mjs";import{SeriesChart as l}from"../SeriesChart/index.mjs";import{jsx as e}from"react/jsx-runtime";const m={chartWrapper:{justifyContent:"center",alignItems:"center",width:"100%",height:500}};function p({label:r,data:t,isLoading:a,isFetching:i,isSuccess:n,filter:o,sx:s}){return!t.length&&a?e(h,{}):!t.length||!n?e(c,{}):e(l,{label:r??"OneClick Health Over Time",data:t,filter:o,showUuid:!0,sx:{...m.chartWrapper,opacity:i?.4:1,...s}})}export{p as OneClickHealthOverTimeChart};
+"use strict";import{EmptyChartSection as h}from"../EmptyChartSection.mjs";import{LoadingChartSection as c}from"../LoadingChartSection.mjs";import{SeriesChart as l}from"../SeriesChart/index.mjs";import{jsx as e}from"react/jsx-runtime";const m={chartWrapper:{justifyContent:"center",alignItems:"center",width:"100%",height:500}};function p({label:r,data:t,isLoading:a,isFetching:i,isSuccess:n,filter:o,sx:s}){return!t.length&&a?e(c,{}):!t.length||!n?e(h,{}):e(l,{label:r??"OneClick Health",data:t,filter:o,showUuid:!0,sx:{...m.chartWrapper,opacity:i?.4:1,...s}})}export{p as OneClickHealthOverTimeChart};

package/dist/components/chart/OverviewBigNumbers/OverviewBigNumbers.d.ts

@@ -1,7 +1,14 @@
-import { OverviewMetrics } from './OverviewBigNumbers.types';
+import { BrandIntervalData } from '../ConversionOverTimeChart';
+import { OverviewMetrics, BigNumberCardOverride, OverviewBigNumbersMetricsConfig } from './OverviewBigNumbers.types';
 export interface OverviewBigNumbersProps {
-    metrics: OverviewMetrics;
     isLoading?: boolean;
     hideTotalCost?: boolean;
+    metrics?: OverviewMetrics;
+    chartData?: BrandIntervalData[];
+    metricsConfig?: OverviewBigNumbersMetricsConfig;
+    startedCard?: BigNumberCardOverride;
+    succeededCard?: BigNumberCardOverride;
+    costCard?: BigNumberCardOverride;
+    rateCard?: BigNumberCardOverride;
 }
-export declare function OverviewBigNumbers({ metrics, isLoading, hideTotalCost, }: Readonly<OverviewBigNumbersProps>): import("react").JSX.Element;
+export declare function OverviewBigNumbers({ metrics, chartData, metricsConfig, isLoading, hideTotalCost, startedCard, succeededCard, costCard, rateCard, }: Readonly<OverviewBigNumbersProps>): import("react").JSX.Element;

package/dist/components/chart/OverviewBigNumbers/OverviewBigNumbers.map.d.ts

@@ -0,0 +1,3 @@
+import { BrandIntervalData } from '../ConversionOverTimeChart';
+import { OverviewMetrics, OverviewBigNumbersMetricsConfig } from './OverviewBigNumbers.types';
+export declare function mapOverviewMetrics(chartData: BrandIntervalData[], config: OverviewBigNumbersMetricsConfig): OverviewMetrics;

package/dist/components/chart/OverviewBigNumbers/OverviewBigNumbers.map.mjs

@@ -0,0 +1 @@
+"use strict";import{defaultOverviewMetrics as u}from"./OverviewBigNumbers.types.mjs";function f(r,s){if(!(r!=null&&r.length))return u;let e=0,t=0;for(const n of r)for(const c of n.interval??[])e+=Number(c[s.startedKey])||0,t+=Number(c[s.succeededKey])||0;const o=e>0?t/e:0;return{started:e,succeeded:t,successRate:o}}export{f as mapOverviewMetrics};

package/dist/components/chart/OverviewBigNumbers/OverviewBigNumbers.mjs

@@ -1 +1 @@
-"use strict";import{Stack as l}from"@mui/material";import{BigNumber as a}from"../BigNumber/index.mjs";import{formatNumberRounded as s,formatCurrency as c,formatPercentage as u}from"../../../utils/number/formatters.mjs";import{defaultOverviewMetrics as m}from"./OverviewBigNumbers.types.mjs";import{jsxs as d,jsx as t}from"react/jsx-runtime";function n({metrics:r,isLoading:i=!0,hideTotalCost:o=!1}){const e=i?m:r;return d(l,{direction:"row",spacing:3,children:[t(a,{label:"Started",value:e.started,initialValue:e.started,map:s}),t(a,{label:"Succeeded",value:e.succeeded,initialValue:e.succeeded,map:s}),!o&&t(a,{label:"Total Cost",value:e.totalCost??0,initialValue:e.totalCost??0,map:c}),t(a,{label:"Success Rate",value:e.successRate,initialValue:e.successRate,map:u})]})}export{n as OverviewBigNumbers};
+"use strict";import{Stack as b}from"@mui/material";import{BigNumber as r}from"../BigNumber/index.mjs";import{green as f}from"../../../styles/colors.mjs";import{formatNumberRounded as c,formatCurrency as x,formatPercentage as C}from"../../../utils/number/formatters.mjs";import{defaultOverviewMetrics as n}from"./OverviewBigNumbers.types.mjs";import{mapOverviewMetrics as g}from"./OverviewBigNumbers.map.mjs";import{jsxs as w,jsx as i}from"react/jsx-runtime";const o={color:f};function R({metrics:m,chartData:u,metricsConfig:d,isLoading:v=!0,hideTotalCost:p=!1,startedCard:e,succeededCard:l,costCard:t,rateCard:s}){const a=v?n:u&&d?g(u,d):m??n;return w(b,{direction:"row",spacing:3,children:[i(r,{label:e?.label??"Started",value:a.started,initialValue:a.started,map:c,sx:e?.sx??o}),i(r,{label:l?.label??"Succeeded",value:a.succeeded,initialValue:a.succeeded,map:c,sx:l?.sx??o}),!p&&i(r,{label:t?.label??"Total Cost",value:a.totalCost??0,initialValue:a.totalCost??0,map:x,sx:t?.sx??o}),i(r,{label:s?.label??"Success Rate",value:a.successRate,initialValue:a.successRate,map:C,sx:s?.sx??o})]})}export{R as OverviewBigNumbers};

package/dist/components/chart/OverviewBigNumbers/OverviewBigNumbers.types.d.ts

@@ -1,3 +1,4 @@
+import { SxProps } from '@mui/material';
 /**
  * Normalized metrics for product overview BigNumber cards.
  * Used by OverviewBigNumbers and all product-specific BigNumber wrappers.
@@ -11,3 +12,11 @@ export interface OverviewMetrics {
     successRate: number;
 }
 export declare const defaultOverviewMetrics: OverviewMetrics;
+export interface OverviewBigNumbersMetricsConfig {
+    startedKey: string;
+    succeededKey: string;
+}
+export interface BigNumberCardOverride {
+    label?: string;
+    sx?: SxProps;
+}

package/dist/components/chart/SeriesPercentageChartLegend/index.d.ts

@@ -6,6 +6,7 @@ type CustomPayload = {
     color: string;
     dataKey: string;
     integrationType?: string;
+    brandName?: string;
 };
 interface SeriesPercentageChartLegendProps extends Omit<LegendProps, 'payload'> {
     showUuid?: boolean;

package/dist/components/chart/SeriesPercentageChartLegend/index.mjs

@@ -1 +1 @@
-"use strict";import{Box as s,Stack as p,Typography as t}from"@mui/material";import a from"@mui/material/Unstable_Grid2";import{AnimatePresence as d}from"framer-motion";import{useCopyToClipboard as u}from"../../../hooks/useCopyToClipboard.mjs";import{MotionStack as l}from"../../animation/motions.mjs";import{useSnackbar as m}from"../../Snackbar/index.mjs";import{jsx as r,jsxs as n}from"react/jsx-runtime";function h({entry:i,showUuid:o=!0}){const e=u({type:"text/plain"}),c=m();return n(l,{component:"li",direction:"row",spacing:1,sx:{color:i.color},layout:"position",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},children:[r(s,{sx:{width:"3px",height:"100%",backgroundColor:i.color,borderRadius:3}}),n(p,{children:[r(t,{variant:"body1",children:i.value}),i.integrationType&&r(t,{variant:"body2",children:i.integrationType}),o&&i.uuid&&n(t,{variant:"body2",sx:{cursor:"pointer","&:hover":{textDecoration:"underline"}},onClick:()=>{i.uuid&&(e.copy(i.uuid).catch(()=>{}),c.enqueueSnackbar("UUID copied to clipboard","success"))},children:[i.uuid.slice(0,5),"..."]})]})]})}function y(i){const{payload:o}=i;return r(a,{container:!0,direction:"row",component:"ul",gap:2,sx:{mt:2,justifyContent:"flex-start",alignItem:"center",flexWrap:"wrap"},children:r(d,{children:o?.map(e=>r(a,{children:r(h,{entry:e,showUuid:i.showUuid})},`item-${e.uuid}-${e.value}`))})})}export{y as SeriesPercentageChartLegend};
+"use strict";import{Box as d,Stack as s,Typography as n}from"@mui/material";import a from"@mui/material/Unstable_Grid2";import{AnimatePresence as p}from"framer-motion";import{useCopyToClipboard as u}from"../../../hooks/useCopyToClipboard.mjs";import{MotionStack as l}from"../../animation/motions.mjs";import{useSnackbar as m}from"../../Snackbar/index.mjs";import{jsx as r,jsxs as o}from"react/jsx-runtime";function h({entry:i,showUuid:t=!0}){const e=u({type:"text/plain"}),c=m();return o(l,{component:"li",direction:"row",spacing:1,sx:{color:i.color},layout:"position",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},children:[r(d,{sx:{width:"3px",height:"100%",backgroundColor:i.color,borderRadius:3}}),o(s,{children:[r(n,{variant:"body1",children:i.value}),i.brandName&&r(n,{variant:"body2",children:i.brandName}),i.integrationType&&r(n,{variant:"body2",children:i.integrationType}),t&&i.uuid&&o(n,{variant:"body2",sx:{cursor:"pointer","&:hover":{textDecoration:"underline"}},onClick:()=>{i.uuid&&(e.copy(i.uuid).catch(()=>{}),c.enqueueSnackbar("UUID copied to clipboard","success"))},children:[i.uuid.slice(0,5),"..."]})]})]})}function y(i){const{payload:t}=i;return r(a,{container:!0,direction:"row",component:"ul",gap:2,sx:{mt:2,justifyContent:"flex-start",alignItem:"center",flexWrap:"wrap"},children:r(p,{children:t?.map(e=>r(a,{children:r(h,{entry:e,showUuid:i.showUuid})},`item-${e.uuid}-${e.value}`))})})}export{y as SeriesPercentageChartLegend};

package/dist/components/chart/SynchronizedMetricsChart/SynchronizedMetricsChart.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { SynchronizedMetricsChartProps } from './SynchronizedMetricsChart.types';
-export declare function SynchronizedMetricsChart({ subCharts, syncId, isLoading, isSuccess, isFetching, filter, sx, }: Readonly<SynchronizedMetricsChartProps>): React.ReactNode;
+export declare function SynchronizedMetricsChart({ subCharts, chartData, subChartConfig, colorMap, syncId, isLoading, isSuccess, isFetching, filter, sx, }: Readonly<SynchronizedMetricsChartProps>): React.ReactNode;

package/dist/components/chart/SynchronizedMetricsChart/SynchronizedMetricsChart.map.d.ts

@@ -0,0 +1,13 @@
+import { BrandFilter } from '../../../components/BrandFilterInput';
+import { BrandIntervalData } from '../ConversionOverTimeChart';
+import { SubChartConfig, SynchronizedSubChartConfig } from './SynchronizedMetricsChart.types';
+export declare function mapSynchronizedSubCharts({ chartData, subChartConfig, brands, colorMap, isLoading, }: {
+    chartData: BrandIntervalData[];
+    subChartConfig: readonly [
+        SynchronizedSubChartConfig,
+        ...SynchronizedSubChartConfig[]
+    ];
+    brands: BrandFilter[];
+    colorMap: Map<string, string>;
+    isLoading: boolean;
+}): [SubChartConfig, ...SubChartConfig[]];

package/dist/components/chart/SynchronizedMetricsChart/SynchronizedMetricsChart.map.mjs

@@ -0,0 +1 @@
+"use strict";import{mapSeriesTimeSeriesData as m}from"../SeriesChart/SeriesChart.map.mjs";function y({chartData:r,subChartConfig:e,brands:l,colorMap:s,isLoading:p}){if(p)return[{title:e[0].title,data:[]}];const i={brands:l,colorMap:s,data:r};return e.map(t=>{if(t.dataKey!=null)return{title:t.title,data:m({...i,keyValue:t.dataKey}),tooltipFormatter:t.tooltipFormatter,yAxisTickFormatter:t.yAxisTickFormatter,yAxisDomain:t.yAxisDomain};const{numerator:u,denominator:o}=t.percentageOf,c=r.map(n=>({...n,interval:(n.interval??[]).map(a=>({...a,percentage:Number(a[o])>0?Math.min(Number(a[u])/Number(a[o])*100,100):0}))}));return{title:t.title,data:m({...i,data:c,keyValue:"percentage"}),tooltipFormatter:t.tooltipFormatter,yAxisTickFormatter:t.yAxisTickFormatter,yAxisDomain:t.yAxisDomain}})}export{y as mapSynchronizedSubCharts};

package/dist/components/chart/SynchronizedMetricsChart/SynchronizedMetricsChart.mjs

@@ -1 +1 @@
-"use strict";import{useMemo as h}from"react";import{Stack as u,useTheme as x,Typography as g}from"@mui/material";import{ResponsiveContainer as A,AreaChart as D,CartesianGrid as F,XAxis as k,YAxis as v,Tooltip as S,Area as T}from"recharts";import{formatDateMMYY as b,formatExtendedDate as C}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as L}from"../../form/TimezoneInput/timezones.mjs";import{EmptyChartSection as M}from"../EmptyChartSection.mjs";import{LoadingChartSection as z}from"../LoadingChartSection.mjs";import{SeriesPercentageChartLegend as E}from"../SeriesPercentageChartLegend/index.mjs";import{chartDefaultProps as I,xAxisDefaultProps as w,yAxisDefaultProps as N}from"../shared.mjs";import{jsx as r,jsxs as p}from"react/jsx-runtime";const P="synchronized-metrics",K=200;function Y(o){const n=new Map;for(const i of o)for(const e of i.chartData){let s=n.get(e.date);s||(s={date:e.date},n.set(e.date,s)),s[i.uuid]=e.value}return Array.from(n.values()).sort((i,e)=>i.date-e.date)}function Z({title:o,mergedData:n,brands:i,timezone:e,syncId:s,tooltipFormatter:c,yAxisTickFormatter:d,yAxisDomain:l}){const m=x();return p(u,{children:[r(g,{variant:"subtitle2",sx:{mb:.5},children:o}),r(A,{width:"100%",height:K,children:p(D,{data:n,syncId:s,margin:I.margin,children:[r(F,{vertical:!1}),r(k,{dataKey:"date",tickFormatter:t=>b(t,{timeZone:e,hour12:!1,hour:"numeric"}),...w}),r(v,{tickFormatter:d??(t=>Number(t).toLocaleString()),allowDecimals:!1,domain:l,...N}),r(S,{cursor:{stroke:m.palette.neutral.main,strokeWidth:1},formatter:c??(t=>Number(t).toLocaleString()),labelFormatter:t=>C(t,{timeZone:e,hour12:!1}),itemSorter:t=>-Number(t?.value??0)}),i.map(t=>r(T,{dataKey:t.uuid,name:t.name,stroke:t.color,fill:t.color,fillOpacity:.1,type:"monotone",strokeWidth:2,isAnimationActive:!1},t.uuid))]})})]})}function j({subCharts:o,syncId:n=P,isLoading:i,isSuccess:e,isFetching:s,filter:c,sx:d}){const l=c.timezone??L,m=o.every(a=>a.data.length===0),t=h(()=>o.map(a=>Y(a.data)),[o]),f=h(()=>o[0].data.map(a=>({uuid:a.uuid,value:a.name,color:a.color,dataKey:a.uuid,integrationType:a.description})),[o]);return m&&i?r(z,{}):m||!e?r(M,{}):r(u,{sx:{width:"100%",...d},children:p(u,{sx:{opacity:s?.4:1,gap:2},children:[o.map((a,y)=>r(Z,{title:a.title,mergedData:t[y],brands:a.data,timezone:l,syncId:n,tooltipFormatter:a.tooltipFormatter,yAxisTickFormatter:a.yAxisTickFormatter,yAxisDomain:a.yAxisDomain},a.title)),r(E,{payload:f})]})})}export{j as SynchronizedMetricsChart};
+"use strict";import{useMemo as y}from"react";import{Stack as p,useTheme as A,Typography as C}from"@mui/material";import{ResponsiveContainer as S,LineChart as v,CartesianGrid as F,XAxis as k,YAxis as L,Tooltip as T,Line as M}from"recharts";import{formatDateMMYY as z,formatExtendedDate as N}from"../../../utils/date.mjs";import{DEFAULT_TIMEZONE as E}from"../../form/TimezoneInput/timezones.mjs";import{EmptyChartSection as I}from"../EmptyChartSection.mjs";import{LoadingChartSection as w}from"../LoadingChartSection.mjs";import{SeriesPercentageChartLegend as P}from"../SeriesPercentageChartLegend/index.mjs";import{chartDefaultProps as K,xAxisDefaultProps as Y,yAxisDefaultProps as Z}from"../shared.mjs";import{mapSynchronizedSubCharts as j}from"./SynchronizedMetricsChart.map.mjs";import{jsx as r,jsxs as h}from"react/jsx-runtime";const G="synchronized-metrics",R=200;function U(m){const e=new Map;for(const i of m)for(const o of i.chartData){let s=e.get(o.date);s||(s={date:o.date},e.set(o.date,s)),s[i.uuid]=o.value}return Array.from(e.values()).sort((i,o)=>i.date-o.date)}function W({title:m,mergedData:e,brands:i,timezone:o,syncId:s,tooltipFormatter:d,yAxisTickFormatter:u,yAxisDomain:l}){const c=A();return h(p,{children:[r(C,{variant:"h5",sx:{mb:.5,fontSize:"1.15rem"},children:m}),r(S,{width:"100%",height:R,children:h(v,{data:e,syncId:s,margin:K.margin,children:[r(F,{vertical:!1}),r(k,{dataKey:"date",tickFormatter:a=>z(a,{timeZone:o,hour12:!1,hour:"numeric"}),...Y}),r(L,{tickFormatter:u??(a=>Number(a).toLocaleString()),allowDecimals:!1,domain:l,...Z}),r(T,{cursor:{stroke:c.palette.neutral.main,strokeWidth:1},formatter:d??(a=>Number(a).toLocaleString()),labelFormatter:a=>N(a,{timeZone:o,hour12:!1}),itemSorter:a=>-Number(a?.value??0)}),i.map(a=>r(M,{dataKey:a.uuid,name:a.name,stroke:a.color,type:"monotone",strokeWidth:2,isAnimationActive:!1,dot:!1},a.uuid))]})})]})}function _({subCharts:m,chartData:e,subChartConfig:i,colorMap:o,syncId:s=G,isLoading:d,isSuccess:u,isFetching:l,filter:c,sx:a}){const g=c.timezone??E,n=e?j({chartData:e,subChartConfig:i,brands:c.brands,colorMap:o,isLoading:d}):m,f=n.every(t=>t.data.length===0),x=y(()=>n.map(t=>U(t.data)),[n]),b=y(()=>n[0].data.map(t=>({uuid:t.brandUuid??t.uuid,value:t.name,color:t.color,dataKey:t.uuid,integrationType:t.description??void 0,brandName:t.brandName})),[n]);return f&&d?r(w,{}):f||!u?r(I,{}):r(p,{sx:{width:"100%",...a},children:h(p,{sx:{opacity:l?.4:1,gap:2},children:[n.map((t,D)=>r(W,{title:t.title,mergedData:x[D],brands:t.data,timezone:g,syncId:s,tooltipFormatter:t.tooltipFormatter,yAxisTickFormatter:t.yAxisTickFormatter,yAxisDomain:t.yAxisDomain},t.title)),r(P,{payload:b})]})})}export{_ as SynchronizedMetricsChart};

package/dist/components/chart/SynchronizedMetricsChart/SynchronizedMetricsChart.types.d.ts

@@ -1,6 +1,7 @@
 import { SxProps } from '@mui/material';
 import { SeriesChartData } from '../SeriesChart';
 import { BrandFilter } from '../../../components/BrandFilterInput';
+import { BrandIntervalData } from '../ConversionOverTimeChart';
 export interface SubChartConfig {
     title: string;
     data: SeriesChartData[];
@@ -8,13 +9,25 @@ export interface SubChartConfig {
     yAxisTickFormatter?: (value: number) => string;
     yAxisDomain?: [number | string, number | string];
 }
-export interface SynchronizedMappedData {
-    started: SeriesChartData[];
-    succeeded: SeriesChartData[];
-    percentage: SeriesChartData[];
-}
-export interface SynchronizedMetricsChartProps {
-    subCharts: [SubChartConfig, ...SubChartConfig[]];
+export type SynchronizedSubChartConfig = {
+    title: string;
+    dataKey: string;
+    percentageOf?: never;
+    tooltipFormatter?: (value: number | string) => string;
+    yAxisTickFormatter?: (value: number) => string;
+    yAxisDomain?: [number | string, number | string];
+} | {
+    title: string;
+    percentageOf: {
+        numerator: string;
+        denominator: string;
+    };
+    dataKey?: never;
+    tooltipFormatter?: (value: number | string) => string;
+    yAxisTickFormatter?: (value: number) => string;
+    yAxisDomain?: [number | string, number | string];
+};
+type SynchronizedMetricsChartBaseProps = {
     syncId?: string;
     isLoading: boolean;
     isSuccess: boolean;
@@ -24,4 +37,19 @@ export interface SynchronizedMetricsChartProps {
         brands: BrandFilter[];
     };
     sx?: SxProps;
-}
+};
+export type SynchronizedMetricsChartProps = SynchronizedMetricsChartBaseProps & ({
+    subCharts: readonly [SubChartConfig, ...SubChartConfig[]];
+    chartData?: never;
+    subChartConfig?: never;
+    colorMap?: never;
+} | {
+    subCharts?: never;
+    chartData: BrandIntervalData[];
+    subChartConfig: readonly [
+        SynchronizedSubChartConfig,
+        ...SynchronizedSubChartConfig[]
+    ];
+    colorMap: Map<string, string>;
+});
+export {};

package/dist/components/chart/TTSOverTimeChart/TTSOverTimeChart.mjs

@@ -1 +1 @@
-"use strict";import{EmptyChartSection as c}from"../EmptyChartSection.mjs";import{LoadingChartSection as m}from"../LoadingChartSection.mjs";import{SeriesChart as p}from"../SeriesChart/index.mjs";import{jsx as e}from"react/jsx-runtime";const f={chartWrapper:{justifyContent:"center",alignItems:"center",width:"100%",height:500}};function g({label:r,data:t,isLoading:a,isFetching:i,isSuccess:s,filter:o,sx:n,showLegend:h}){return!t.length&&a?e(m,{}):!t.length||!s?e(c,{}):e(p,{label:r??"TTS Over Time",data:t,filter:o,showUuid:!0,showLegend:h,sx:{...f.chartWrapper,opacity:i?.4:1,...n}})}export{g as TTSOverTimeChart};
+"use strict";import{EmptyChartSection as c}from"../EmptyChartSection.mjs";import{LoadingChartSection as p}from"../LoadingChartSection.mjs";import{SeriesChart as m}from"../SeriesChart/index.mjs";import{jsx as e}from"react/jsx-runtime";const g={chartWrapper:{justifyContent:"center",alignItems:"center",width:"100%",height:500}};function f({label:r,data:t,isLoading:a,isFetching:i,isSuccess:o,filter:s,sx:n,showLegend:h}){return!t.length&&a?e(p,{}):!t.length||!o?e(c,{}):e(m,{label:r??"Text to Signup",data:t,filter:s,showUuid:!0,showLegend:h,sx:{...g.chartWrapper,opacity:i?.4:1,...n}})}export{f as TTSOverTimeChart};

package/dist/components/chart/index.d.ts

@@ -13,30 +13,19 @@ export * from './SimpleLegend';
 export * from './OneClickPercentageChart';
 export * from './OneClickOverTimeChart';
 export * from './MonthlySignupsOverviewTable';
+export * from './BillableEventsTable';
+export * from './BillableEventsProductTable';
 export * from './LoadingChartSection';
 export * from './EmptyChartSection';
 export * from './MetricLastUpdated';
 export * from './OverviewBigNumbers';
-export * from './SignupBigNumbers';
 export * from './TTSOverTimeChart';
-export * from './TTSBigNumbers';
 export * from './OneClickHealthOverTimeChart';
-export * from './OneClickHealthBigNumbers';
 export * from './OneClickHealthPercentageChart';
-export * from './OneClickVerificationBigNumbers';
 export * from './OneClickVerificationEventsOverTimeChart';
 export * from './OneClickVerificationSuccessOverTimeChart';
 export * from './FunnelChart';
 export * from './OneClickVerificationFunnelChart';
-export * from './OutcomeOverTimeChart';
-export * from './OneClickVerificationOutcomeOverTimeChart';
-export * from './OneClickVerificationDeliveryChart';
-export * from './OneClickVerificationConversionChart';
-export * from './OneClickHealthConversionChart';
-export * from './OneClickSignupConversionChart';
+export * from './ConversionOverTimeChart';
 export * from './oneClickVerification.types';
 export * from './SynchronizedMetricsChart';
-export * from './OneClickSignupSynchronizedMetricsChart';
-export * from './OneClickHealthSynchronizedMetricsChart';
-export * from './OneClickVerificationConversionSynchronizedMetricsChart';
-export * from './OneClickVerificationDeliverySynchronizedMetricsChart';

package/dist/components/chart/index.mjs

@@ -1 +1 @@
-"use strict";import{SeriesChart as e}from"./SeriesChart/index.mjs";import{SeriesChartLegend as a}from"./SeriesChartLegend/index.mjs";import{SeriesPercentageChart as i}from"./SeriesPercentageChart/index.mjs";import{BigNumber as r}from"./BigNumber/index.mjs";import{SimpleBarChart as t}from"./SimpleBarChart/index.mjs";import{AreaChart as o}from"./AreaChart/index.mjs";import{ErrorCodesChart as n}from"./ErrorCodesChart/index.mjs";import{ReasonCodesChart as s}from"./ReasonCodesChart/index.mjs";import{PieChart as m}from"./PieChart/index.mjs";import{RiskScorePieChart as c}from"./RiskScorePieChart/index.mjs";import{RiskScoreBarChart as C}from"./RiskScoreBarChart/index.mjs";import{SimpleLegend as h}from"./SimpleLegend/index.mjs";import{LoadingChartSection as l}from"./LoadingChartSection.mjs";import{EmptyChartSection as p}from"./EmptyChartSection.mjs";import{MetricLastUpdated as f}from"./MetricLastUpdated.mjs";import{FunnelChart as O}from"./FunnelChart/index.mjs";import{mapSeriesTimeSeriesData as S}from"./SeriesChart/SeriesChart.map.mjs";import{OneClickPercentageChart as k}from"./OneClickPercentageChart/OneClickPercentageChart.mjs";import{OneClickOverTimeChart as v}from"./OneClickOverTimeChart/OneClickOverTimeChart.mjs";import{mapOneClickTimeSeriesData as u}from"./OneClickOverTimeChart/OneClickOverTimeChart.map.mjs";import{mapMonthlySignupsOverviewTableData as D}from"./MonthlySignupsOverviewTable/MonthlySignupsOverviewTableDataMapper.mjs";import{MonthlySignupsOverviewTable as T}from"./MonthlySignupsOverviewTable/MonthlySignupsOverviewTable.mjs";import{OverviewBigNumbers as g}from"./OverviewBigNumbers/OverviewBigNumbers.mjs";import{defaultOverviewMetrics as d}from"./OverviewBigNumbers/OverviewBigNumbers.types.mjs";import{SignupBigNumbers as V}from"./SignupBigNumbers/SignupBigNumbers.mjs";import{TTSOverTimeChart as y}from"./TTSOverTimeChart/TTSOverTimeChart.mjs";import{mapTTSTimeSeriesData as M}from"./TTSOverTimeChart/TTSOverTimeChart.map.mjs";import{TTSBigNumbers as z}from"./TTSBigNumbers/TTSBigNumbers.mjs";import{OneClickHealthOverTimeChart as H}from"./OneClickHealthOverTimeChart/OneClickHealthOverTimeChart.mjs";import{mapOneClickHealthTimeSeriesData as b}from"./OneClickHealthOverTimeChart/OneClickHealthOverTimeChart.map.mjs";import{OneClickHealthBigNumbers as B}from"./OneClickHealthBigNumbers/OneClickHealthBigNumbers.mjs";import{calculateOneClickHealthMetrics as N,defaultMetrics as P}from"./OneClickHealthBigNumbers/OneClickHealthBigNumbersMapper.mjs";import{OneClickHealthPercentageChart as w}from"./OneClickHealthPercentageChart/OneClickHealthPercentageChart.mjs";import{OneClickVerificationBigNumbers as L}from"./OneClickVerificationBigNumbers/OneClickVerificationBigNumbers.mjs";import{OneClickVerificationEventsOverTimeChart as E}from"./OneClickVerificationEventsOverTimeChart/OneClickVerificationEventsOverTimeChart.mjs";import{mapOneClickVerificationAreaSeriesData as F}from"./OneClickVerificationEventsOverTimeChart/OneClickVerificationEventsOverTimeChart.map.mjs";import{OneClickVerificationSuccessOverTimeChart as R}from"./OneClickVerificationSuccessOverTimeChart/OneClickVerificationSuccessOverTimeChart.mjs";import{mapOneClickVerificationSuccessOverTimeChartData as A}from"./OneClickVerificationSuccessOverTimeChart/OneClickVerificationSuccessOverTimeChart.map.mjs";import{OneClickVerificationFunnelChart as U}from"./OneClickVerificationFunnelChart/OneClickVerificationFunnelChart.mjs";import{mapOneClickVerificationFunnelChartData as x}from"./OneClickVerificationFunnelChart/OneClickVerificationFunnelChart.map.mjs";import{OutcomeOverTimeChart as j}from"./OutcomeOverTimeChart/OutcomeOverTimeChart.mjs";import{OneClickVerificationOutcomeOverTimeChart as q}from"./OneClickVerificationOutcomeOverTimeChart/OneClickVerificationOutcomeOverTimeChart.mjs";import{mapOneClickVerificationOutcomeOverTimeChartData as G}from"./OneClickVerificationOutcomeOverTimeChart/OneClickVerificationOutcomeOverTimeChart.map.mjs";import{OneClickVerificationDeliveryChart as I}from"./OneClickVerificationDeliveryChart/OneClickVerificationDeliveryChart.mjs";import{mapOneClickVerificationDeliveryChartData as J}from"./OneClickVerificationDeliveryChart/OneClickVerificationDeliveryChart.map.mjs";import{OneClickVerificationConversionChart as K}from"./OneClickVerificationConversionChart/OneClickVerificationConversionChart.mjs";import{mapOneClickVerificationConversionChartData as Q}from"./OneClickVerificationConversionChart/OneClickVerificationConversionChart.map.mjs";import{OneClickHealthConversionChart as W}from"./OneClickHealthConversionChart/OneClickHealthConversionChart.mjs";import{mapOneClickHealthConversionChartData as X}from"./OneClickHealthConversionChart/OneClickHealthConversionChart.map.mjs";import{OneClickSignupConversionChart as Y}from"./OneClickSignupConversionChart/OneClickSignupConversionChart.mjs";import{mapOneClickSignupConversionChartData as Z}from"./OneClickSignupConversionChart/OneClickSignupConversionChart.map.mjs";import{SynchronizedMetricsChart as _}from"./SynchronizedMetricsChart/SynchronizedMetricsChart.mjs";import{OneClickSignupSynchronizedMetricsChart as $}from"./OneClickSignupSynchronizedMetricsChart/OneClickSignupSynchronizedMetricsChart.mjs";import{mapOneClickSignupSynchronizedData as ee}from"./OneClickSignupSynchronizedMetricsChart/OneClickSignupSynchronizedMetricsChart.map.mjs";import{OneClickHealthSynchronizedMetricsChart as ae}from"./OneClickHealthSynchronizedMetricsChart/OneClickHealthSynchronizedMetricsChart.mjs";import{mapOneClickHealthSynchronizedData as ie}from"./OneClickHealthSynchronizedMetricsChart/OneClickHealthSynchronizedMetricsChart.map.mjs";import{OneClickVerificationConversionSynchronizedMetricsChart as re}from"./OneClickVerificationConversionSynchronizedMetricsChart/OneClickVerificationConversionSynchronizedMetricsChart.mjs";import{mapOneClickVerificationConversionSynchronizedData as te}from"./OneClickVerificationConversionSynchronizedMetricsChart/OneClickVerificationConversionSynchronizedMetricsChart.map.mjs";import{OneClickVerificationDeliverySynchronizedMetricsChart as oe}from"./OneClickVerificationDeliverySynchronizedMetricsChart/OneClickVerificationDeliverySynchronizedMetricsChart.mjs";import{mapOneClickVerificationDeliverySynchronizedData as ne}from"./OneClickVerificationDeliverySynchronizedMetricsChart/OneClickVerificationDeliverySynchronizedMetricsChart.map.mjs";export{o as AreaChart,r as BigNumber,p as EmptyChartSection,n as ErrorCodesChart,O as FunnelChart,l as LoadingChartSection,f as MetricLastUpdated,T as MonthlySignupsOverviewTable,B as OneClickHealthBigNumbers,W as OneClickHealthConversionChart,H as OneClickHealthOverTimeChart,w as OneClickHealthPercentageChart,ae as OneClickHealthSynchronizedMetricsChart,v as OneClickOverTimeChart,k as OneClickPercentageChart,Y as OneClickSignupConversionChart,$ as OneClickSignupSynchronizedMetricsChart,L as OneClickVerificationBigNumbers,K as OneClickVerificationConversionChart,re as OneClickVerificationConversionSynchronizedMetricsChart,I as OneClickVerificationDeliveryChart,oe as OneClickVerificationDeliverySynchronizedMetricsChart,E as OneClickVerificationEventsOverTimeChart,U as OneClickVerificationFunnelChart,q as OneClickVerificationOutcomeOverTimeChart,R as OneClickVerificationSuccessOverTimeChart,j as OutcomeOverTimeChart,g as OverviewBigNumbers,m as PieChart,s as ReasonCodesChart,C as RiskScoreBarChart,c as RiskScorePieChart,e as SeriesChart,a as SeriesChartLegend,i as SeriesPercentageChart,V as SignupBigNumbers,t as SimpleBarChart,h as SimpleLegend,_ as SynchronizedMetricsChart,z as TTSBigNumbers,y as TTSOverTimeChart,N as calculateOneClickHealthMetrics,P as defaultMetrics,d as defaultOverviewMetrics,D as mapMonthlySignupsOverviewTableData,X as mapOneClickHealthConversionChartData,ie as mapOneClickHealthSynchronizedData,b as mapOneClickHealthTimeSeriesData,Z as mapOneClickSignupConversionChartData,ee as mapOneClickSignupSynchronizedData,u as mapOneClickTimeSeriesData,F as mapOneClickVerificationAreaSeriesData,Q as mapOneClickVerificationConversionChartData,te as mapOneClickVerificationConversionSynchronizedData,J as mapOneClickVerificationDeliveryChartData,ne as mapOneClickVerificationDeliverySynchronizedData,x as mapOneClickVerificationFunnelChartData,G as mapOneClickVerificationOutcomeOverTimeChartData,A as mapOneClickVerificationSuccessOverTimeChartData,S as mapSeriesTimeSeriesData,M as mapTTSTimeSeriesData};
+"use strict";import{SeriesChart as e}from"./SeriesChart/index.mjs";import{SeriesChartLegend as a}from"./SeriesChartLegend/index.mjs";import{SeriesPercentageChart as r}from"./SeriesPercentageChart/index.mjs";import{BigNumber as i}from"./BigNumber/index.mjs";import{SimpleBarChart as t}from"./SimpleBarChart/index.mjs";import{AreaChart as s}from"./AreaChart/index.mjs";import{ErrorCodesChart as m}from"./ErrorCodesChart/index.mjs";import{ReasonCodesChart as o}from"./ReasonCodesChart/index.mjs";import{PieChart as l}from"./PieChart/index.mjs";import{RiskScorePieChart as n}from"./RiskScorePieChart/index.mjs";import{RiskScoreBarChart as C}from"./RiskScoreBarChart/index.mjs";import{SimpleLegend as p}from"./SimpleLegend/index.mjs";import{LoadingChartSection as c}from"./LoadingChartSection.mjs";import{EmptyChartSection as h}from"./EmptyChartSection.mjs";import{MetricLastUpdated as f}from"./MetricLastUpdated.mjs";import{FunnelChart as O}from"./FunnelChart/index.mjs";import{ConversionOverTimeChart as v}from"./ConversionOverTimeChart/index.mjs";import{mapSeriesTimeSeriesData as S}from"./SeriesChart/SeriesChart.map.mjs";import{OneClickPercentageChart as T}from"./OneClickPercentageChart/OneClickPercentageChart.mjs";import{OneClickOverTimeChart as b}from"./OneClickOverTimeChart/OneClickOverTimeChart.mjs";import{mapOneClickTimeSeriesData as k}from"./OneClickOverTimeChart/OneClickOverTimeChart.map.mjs";import{mapMonthlySignupsOverviewTableData as u}from"./MonthlySignupsOverviewTable/MonthlySignupsOverviewTableDataMapper.mjs";import{MonthlySignupsOverviewTable as d}from"./MonthlySignupsOverviewTable/MonthlySignupsOverviewTable.mjs";import{BILLABLE_PRODUCTS as B,BillableProduct as D}from"./BillableEventsTable/BillableEventsTable.types.mjs";import{BillableEventsTable as g}from"./BillableEventsTable/BillableEventsTable.mjs";import{mapBillableEventsTableData as E}from"./BillableEventsTable/BillableEventsTableDataMapper.mjs";import{exportBillableEventsToCsv as P}from"./BillableEventsTable/exportBillableEventsToCsv.mjs";import{BillableEventsProductTable as L}from"./BillableEventsProductTable/BillableEventsProductTable.mjs";import{mapBillableEventsProductTableData as V}from"./BillableEventsProductTable/BillableEventsProductTableDataMapper.mjs";import{OverviewBigNumbers as M}from"./OverviewBigNumbers/OverviewBigNumbers.mjs";import{defaultOverviewMetrics as w}from"./OverviewBigNumbers/OverviewBigNumbers.types.mjs";import{TTSOverTimeChart as y}from"./TTSOverTimeChart/TTSOverTimeChart.mjs";import{mapTTSTimeSeriesData as R}from"./TTSOverTimeChart/TTSOverTimeChart.map.mjs";import{OneClickHealthOverTimeChart as F}from"./OneClickHealthOverTimeChart/OneClickHealthOverTimeChart.mjs";import{mapOneClickHealthTimeSeriesData as A}from"./OneClickHealthOverTimeChart/OneClickHealthOverTimeChart.map.mjs";import{OneClickHealthPercentageChart as H}from"./OneClickHealthPercentageChart/OneClickHealthPercentageChart.mjs";import{OneClickVerificationEventsOverTimeChart as N}from"./OneClickVerificationEventsOverTimeChart/OneClickVerificationEventsOverTimeChart.mjs";import{mapOneClickVerificationAreaSeriesData as x}from"./OneClickVerificationEventsOverTimeChart/OneClickVerificationEventsOverTimeChart.map.mjs";import{OneClickVerificationSuccessOverTimeChart as U}from"./OneClickVerificationSuccessOverTimeChart/OneClickVerificationSuccessOverTimeChart.mjs";import{mapOneClickVerificationSuccessOverTimeChartData as z}from"./OneClickVerificationSuccessOverTimeChart/OneClickVerificationSuccessOverTimeChart.map.mjs";import{OneClickVerificationFunnelChart as _}from"./OneClickVerificationFunnelChart/OneClickVerificationFunnelChart.mjs";import{mapOneClickVerificationFunnelChartData as I}from"./OneClickVerificationFunnelChart/OneClickVerificationFunnelChart.map.mjs";import{SynchronizedMetricsChart as q}from"./SynchronizedMetricsChart/SynchronizedMetricsChart.mjs";export{s as AreaChart,B as BILLABLE_PRODUCTS,i as BigNumber,L as BillableEventsProductTable,g as BillableEventsTable,D as BillableProduct,v as ConversionOverTimeChart,h as EmptyChartSection,m as ErrorCodesChart,O as FunnelChart,c as LoadingChartSection,f as MetricLastUpdated,d as MonthlySignupsOverviewTable,F as OneClickHealthOverTimeChart,H as OneClickHealthPercentageChart,b as OneClickOverTimeChart,T as OneClickPercentageChart,N as OneClickVerificationEventsOverTimeChart,_ as OneClickVerificationFunnelChart,U as OneClickVerificationSuccessOverTimeChart,M as OverviewBigNumbers,l as PieChart,o as ReasonCodesChart,C as RiskScoreBarChart,n as RiskScorePieChart,e as SeriesChart,a as SeriesChartLegend,r as SeriesPercentageChart,t as SimpleBarChart,p as SimpleLegend,q as SynchronizedMetricsChart,y as TTSOverTimeChart,w as defaultOverviewMetrics,P as exportBillableEventsToCsv,V as mapBillableEventsProductTableData,E as mapBillableEventsTableData,u as mapMonthlySignupsOverviewTableData,A as mapOneClickHealthTimeSeriesData,k as mapOneClickTimeSeriesData,x as mapOneClickVerificationAreaSeriesData,I as mapOneClickVerificationFunnelChartData,z as mapOneClickVerificationSuccessOverTimeChartData,S as mapSeriesTimeSeriesData,R as mapTTSTimeSeriesData};

package/dist/components/form/OTPInput.d.ts

@@ -14,6 +14,11 @@ interface OTPInputProps {
      * ID of the element that labels this component (for accessibility)
      */
     ariaLabelledBy?: string;
+    /**
+     * When true, adds data attributes to prevent password managers and autofill apps from interacting with the inputs.
+     * @default false
+     */
+    disableAutoFillApps?: boolean;
 }
 export type OTPInputInstance = Readonly<{
     focus: () => void;

package/dist/components/form/OTPInput.mjs

@@ -1 +1 @@
-"use strict";import{forwardRef as q,useRef as b,useState as R,useImperativeHandle as H,useMemo as L,useCallback as m}from"react";import{useTheme as O,FormControl as U,InputBase as G,Box as J,TextField as N,Stack as Q,Typography as V}from"@mui/material";import{v4 as X}from"uuid";import{jsx as g,jsxs as $}from"react/jsx-runtime";function Y(t,A){const l=O(),w=b(Array.from({length:6},()=>X())),[f,h]=R([]),c=b(null),o=b([]),x=b(null),[P,k]=R(!1);H(A,()=>({get value(){return f.join("")},set value(e){var n;h(e.split("")),(n=t.onChange)==null||n.call(t,{target:{value:e}})},focus(){var e,n;(e=o.current[0])==null||e.click(),(n=o.current[0])==null||n.focus()},blur(){o.current.forEach(e=>e?.blur())},clear(){h([])}}),[t,f]);const B={borderColor:t.error?l.palette.error.main:l.palette.action.disabled},F={borderColor:t.error?l.palette.error.main:l.palette.text.primary},M={borderColor:t.error?l.palette.error.main:l.palette.primary.main,boxShadow:`inset 0 0 0 1px ${t.error?l.palette.error.main:l.palette.primary.main}`},K={boxSizing:"content-box",direction:"row",alignItems:"center",spacing:1.25,sx:{"& input":{textAlign:"center",fontWeight:500,height:30,[l.breakpoints.down("xs")]:{height:16,fontSize:16,pt:1,pb:1,px:1},[l.breakpoints.up("xs")]:{fontSize:28,px:1},fontSize:32,py:1.75,borderRadius:1,borderStyle:"solid",borderWidth:1,...B},...!t.disabled&&{"&:hover input":{...F}},...P&&{"& input, &:hover input":{...M}}}},y=L(()=>({inputProps:{inputMode:"numeric",pattern:"[0-9]*",autoCorrect:"off",autoCapitalize:"off"}}),[]),S=m(e=>{var n;const r=e.target.value.replace(/[^0-9]/g,"");if(r.length===6&&/^\d{6}$/.test(r)){const p=r.split("");c.current&&(c.current.value=r),(n=t.onChange)==null||n.call(t,{target:{value:r}}),o.current.forEach(v=>v?.blur()),h(p);return}const u=e.currentTarget.ownerDocument,a=o.current.findIndex(p=>p===u.activeElement),i=r.charAt(r.length-1);!i||!/^[0-9]$/.test(i)||h(p=>{var v,D;const d=[...p];if(a!==-1)d[a]=i;else{const s=d.findIndex(W=>!W);s!==-1?d[s]=i:d.length<6&&d.push(i)}const C=d.join("");if(c.current&&(c.current.value=C),C.length===6)o.current.forEach(s=>s?.blur()),(v=t.onChange)==null||v.call(t,{target:{value:C}});else{const s=a!==-1?a+1:0;s<6&&((D=o.current[s])==null||D.focus())}return d})},[t]),E=m(e=>{e.key==="Backspace"&&h(n=>{var r;const u=[...n.slice(0,-1)];c.current&&(c.current.value=u.join(""));const a=u.length;return a>=0&&a<6&&((r=o.current[a])==null||r.focus()),u})},[]),I=m(e=>{var n,r;const u=e.currentTarget.ownerDocument,a=o.current.findIndex(p=>p===u.activeElement);if(a===-1)return;let i=a;switch(e.key){case"ArrowLeft":i=Math.max(0,a-1);break;case"ArrowRight":i=Math.min(5,a+1);break;default:return}i!==a&&(e.preventDefault(),(n=o.current[i])==null||n.focus(),(r=o.current[i])==null||r.select())},[]),T=m(()=>{k(!0)},[]),j=m(()=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{var e;const n=(e=o.current[0])==null?void 0:e.ownerDocument;o.current.some(r=>r&&r===n?.activeElement)||k(!1)},0)},[]),z=m(e=>new Array(3).fill(void 0).map((n,r)=>g(U,{children:g(G,{inputRef:u=>o.current[r+e]=u,id:w.current[r+e],name:`otp-input-${r+e}`,autoComplete:r+e===0?t.autoComplete??"one-time-code":void 0,autoFocus:r+e===0,value:f[r+e]||"",disabled:t.disabled,onChange:S,onKeyUp:E,onKeyDown:I,onFocus:T,onBlur:j,tabIndex:r+e+1,...y,"data-testid":`otp-input-${r+e}`,inputProps:{...y.inputProps,"aria-required":"true","aria-invalid":t.error?"true":"false","aria-label":`Digit ${r+e+1} of 6`}})},w.current[r+e])),[S,T,E,I,j,f,y,t.autoComplete,t.disabled]);return $(J,{width:"100%",sx:t.sx,children:[g("div",{style:{display:"none!important",pointerEvents:"none"},children:g(N,{inputRef:c,name:t.name,type:"text",value:f.join("")||"",sx:{pointerEvents:"none",display:"none"},inputProps:{hidden:!0}})}),$(Q,{"data-testid":"otp-input-container",...K,children:[z(0),g(V,{sx:{fontWeight:"700",fontSize:32},children:"-"}),z(3)]})]})}const _=q(Y);export{_ as OTPInput};
+"use strict";import{forwardRef as q,useRef as b,useState as F,useImperativeHandle as H,useMemo as L,useCallback as m}from"react";import{useTheme as O,FormControl as U,InputBase as G,Box as J,TextField as N,Stack as Q,Typography as V}from"@mui/material";import{v4 as X}from"uuid";import{jsx as g,jsxs as R}from"react/jsx-runtime";function Y(t,$){const i=O(),C=b(Array.from({length:6},()=>X())),[f,h]=F([]),c=b(null),a=b([]),x=b(null),[z,k]=F(!1);H($,()=>({get value(){return f.join("")},set value(e){var n;h(e.split("")),(n=t.onChange)==null||n.call(t,{target:{value:e}})},focus(){var e,n;(e=a.current[0])==null||e.click(),(n=a.current[0])==null||n.focus()},blur(){a.current.forEach(e=>e?.blur())},clear(){h([])}}),[t,f]);const P={borderColor:t.error?i.palette.error.main:i.palette.action.disabled},B={borderColor:t.error?i.palette.error.main:i.palette.text.primary},M={borderColor:t.error?i.palette.error.main:i.palette.primary.main,boxShadow:`inset 0 0 0 1px ${t.error?i.palette.error.main:i.palette.primary.main}`},K={boxSizing:"content-box",direction:"row",alignItems:"center",spacing:1.25,sx:{"& input":{textAlign:"center",fontWeight:500,height:30,[i.breakpoints.down("xs")]:{height:16,fontSize:16,pt:1,pb:1,px:1},[i.breakpoints.up("xs")]:{fontSize:28,px:1},fontSize:32,py:1.75,borderRadius:1,borderStyle:"solid",borderWidth:1,...P},...!t.disabled&&{"&:hover input":{...B}},...z&&{"& input, &:hover input":{...M}}}},y=L(()=>({inputProps:{inputMode:"numeric",pattern:"[0-9]*",autoCorrect:"off",autoCapitalize:"off",...t.disableAutoFillApps&&{"data-op-ignore":!0,"data-lpignore":!0,"data-form-type":"other","data-bwignore":!0,"data-protonpass-ignore":!0}}}),[t.disableAutoFillApps]),A=m(e=>{var n;const r=e.target.value.replace(/[^0-9]/g,"");if(r.length===6&&/^\d{6}$/.test(r)){const p=r.split("");c.current&&(c.current.value=r),(n=t.onChange)==null||n.call(t,{target:{value:r}}),a.current.forEach(v=>v?.blur()),h(p);return}const u=e.currentTarget.ownerDocument,o=a.current.findIndex(p=>p===u.activeElement),l=r.charAt(r.length-1);!l||!/^[0-9]$/.test(l)||h(p=>{var v,D;const d=[...p];if(o!==-1)d[o]=l;else{const s=d.findIndex(W=>!W);s!==-1?d[s]=l:d.length<6&&d.push(l)}const w=d.join("");if(c.current&&(c.current.value=w),w.length===6)a.current.forEach(s=>s?.blur()),(v=t.onChange)==null||v.call(t,{target:{value:w}});else{const s=o!==-1?o+1:0;s<6&&((D=a.current[s])==null||D.focus())}return d})},[t]),S=m(e=>{e.key==="Backspace"&&h(n=>{var r;const u=[...n.slice(0,-1)];c.current&&(c.current.value=u.join(""));const o=u.length;return o>=0&&o<6&&((r=a.current[o])==null||r.focus()),u})},[]),E=m(e=>{var n,r;const u=e.currentTarget.ownerDocument,o=a.current.findIndex(p=>p===u.activeElement);if(o===-1)return;let l=o;switch(e.key){case"ArrowLeft":l=Math.max(0,o-1);break;case"ArrowRight":l=Math.min(5,o+1);break;default:return}l!==o&&(e.preventDefault(),(n=a.current[l])==null||n.focus(),(r=a.current[l])==null||r.select())},[]),I=m(()=>{k(!0)},[]),T=m(()=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{var e;const n=(e=a.current[0])==null?void 0:e.ownerDocument;a.current.some(r=>r&&r===n?.activeElement)||k(!1)},0)},[]),j=m(e=>new Array(3).fill(void 0).map((n,r)=>g(U,{children:g(G,{inputRef:u=>a.current[r+e]=u,id:C.current[r+e],name:`otp-input-${r+e}`,autoComplete:r+e===0?t.autoComplete??"one-time-code":void 0,autoFocus:r+e===0,value:f[r+e]||"",disabled:t.disabled,onChange:A,onKeyUp:S,onKeyDown:E,onFocus:I,onBlur:T,tabIndex:r+e+1,...y,"data-testid":`otp-input-${r+e}`,inputProps:{...y.inputProps,"aria-required":"true","aria-invalid":t.error?"true":"false","aria-label":`Digit ${r+e+1} of 6`}})},C.current[r+e])),[A,I,S,E,T,f,y,t.autoComplete,t.disabled]);return R(J,{width:"100%",sx:t.sx,children:[g("div",{style:{display:"none!important",pointerEvents:"none"},children:g(N,{inputRef:c,name:t.name,type:"text",value:f.join("")||"",sx:{pointerEvents:"none",display:"none"},inputProps:{hidden:!0}})}),R(Q,{"data-testid":"otp-input-container",...K,children:[j(0),g(V,{sx:{fontWeight:"700",fontSize:32},children:"-"}),j(3)]})]})}const _=q(Y);export{_ as OTPInput};

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

@@ -1,19 +1,12 @@
 import { ReactElement } from 'react';
-/**
- * Props for the TimezoneInput component.
- */
-interface TimezoneInputProps {
-    /**
-     * The currently selected timezone code.
-     * This should be a valid IANA timezone identifier (e.g., 'America/New_York', 'Europe/London').
-     * The value must match one of the timezone codes from the timezones.json file.
-     */
+type TimezoneInputProps = {
     value: string;
-    /**
-     * Callback fired when the timezone selection changes.
-     * @param value - The new timezone code selected by the user
-     */
     onChange: (value: string) => void;
-}
-export declare function TimezoneInput({ value, onChange, }: TimezoneInputProps): ReactElement;
+    disabled?: false;
+} | {
+    value: string;
+    onChange?: never;
+    disabled: true;
+};
+export declare function TimezoneInput({ value, onChange, disabled, }: TimezoneInputProps): ReactElement;
 export {};

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

@@ -1 +1 @@
-"use strict";import{useMemo as u}from"react";import{FormControl as d,Autocomplete as m,TextField as c,Popper as h}from"@mui/material";import{timezones as b}from"./timezones.mjs";import{jsx as t}from"react/jsx-runtime";const f=function(l){return t(h,{...l,style:{width:"fit-content"},placement:"bottom-end"})};function C({value:l,onChange:p}){const a=u(()=>b.map(e=>({tzCode:e.name,label:`${e.name} (GMT${e.utc_offset.includes("-")?"":"+"}${e.utc_offset.replace(/(.*)(:00)$/,"$1")})`})),[]),s=(e=>a.find(o=>o.tzCode===e))(l);return t(d,{fullWidth:!0,children:t(m,{disablePortal:!0,disableClearable:!0,value:s,options:a,getOptionLabel:e=>e.label.replace(/_/gm," "),getOptionKey:e=>e.tzCode,renderInput:e=>{var o,r,n,i;return t(c,{...e,inputProps:{...e.inputProps,value:((i=(n=(r=(o=e.inputProps)==null?void 0:o.value)==null?void 0:r.toString())==null?void 0:n.match(/.*\((.*)\)/))==null?void 0:i[1])??""},label:"Timezone"})},isOptionEqualToValue:(e,o)=>e.tzCode===o.tzCode,onChange:(e,o)=>{o&&p(o.tzCode)},sx:{width:166,"& *":{whiteSpace:"pre",wordBreak:"break-all"},"& .MuiAutocomplete-option":{scrollbarWidth:"thin",opacity:0}},PopperComponent:f,slotProps:{popper:{sx:{whiteSpace:"pre",wordBreak:"break-all","& *":{scrollbarWidth:"thin",whiteSpace:"pre",wordBreak:"break-all"}}}}})})}export{C as TimezoneInput};
+"use strict";import{useMemo as u}from"react";import{FormControl as m,Autocomplete as c,TextField as b,Popper as h}from"@mui/material";import{timezones as f}from"./timezones.mjs";import{jsx as t}from"react/jsx-runtime";const C=function(l){return t(h,{...l,style:{width:"fit-content"},placement:"bottom-end"})};function z({value:l,onChange:a,disabled:s}){const r=u(()=>f.map(e=>({tzCode:e.name,label:`${e.name} (GMT${e.utc_offset.includes("-")?"":"+"}${e.utc_offset.replace(/(.*)(:00)$/,"$1")})`})),[]),d=(e=>r.find(o=>o.tzCode===e))(l);return t(m,{fullWidth:!0,children:t(c,{disablePortal:!0,disableClearable:!0,disabled:s,value:d,options:r,getOptionLabel:e=>e.label.replace(/_/gm," "),getOptionKey:e=>e.tzCode,renderInput:e=>{var o,n,i,p;return t(b,{...e,inputProps:{...e.inputProps,value:((p=(i=(n=(o=e.inputProps)==null?void 0:o.value)==null?void 0:n.toString())==null?void 0:i.match(/.*\((.*)\)/))==null?void 0:p[1])??""},label:"Timezone"})},isOptionEqualToValue:(e,o)=>e.tzCode===o.tzCode,onChange:(e,o)=>{o&&a?.(o.tzCode)},sx:{width:166,"& *":{whiteSpace:"pre",wordBreak:"break-all"},"& .MuiAutocomplete-option":{scrollbarWidth:"thin",opacity:0}},PopperComponent:C,slotProps:{popper:{sx:{whiteSpace:"pre",wordBreak:"break-all","& *":{scrollbarWidth:"thin",whiteSpace:"pre",wordBreak:"break-all"}}}}})})}export{z as TimezoneInput};