4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T37d8,import { Mjml, MjmlBody, MjmlButton, MjmlColumn, MjmlFont, MjmlHead, MjmlPreview, MjmlSection, MjmlSpacer, MjmlText, MjmlWrapper, } from "@faire/mjml-react"; import { Fragment } from "react"; import type { ReactNode } from "react"; import type { EmailTheme } from "@/components/email/email-theme"; import { defaultTheme } from "@/components/email/theme-default"; type ProgressBarContentVariant = | "minimal" | "with-title" | "with-text" | "text-top"; type ProgressBarPaddedVariant = | ProgressBarContentVariant | "minimal-padded" | "with-title-padded" | "with-text-padded" | "text-top-padded"; type ProgressBarColumnsVariant = Exclude< ProgressBarPaddedVariant, "minimal" | "minimal-padded" >; interface ProgressBarItem { color?: string; description?: string; title: string; value: number; } const colors = { canvas: "#f1f5f9", dark: "#030712", label: "#4b5563", muted: "#6b7280", surface: "#fffffe", track: "#f3f4f6", } as const; const fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const clamp = (value: number) => Math.min(100, Math.max(0, value)); const getContentVariant = ( variant: ProgressBarPaddedVariant ): ProgressBarContentVariant => variant.replace("-padded", "") as ProgressBarContentVariant; const isPaddedVariant = (variant: ProgressBarPaddedVariant) => variant.endsWith("-padded"); const Heading = ({ children, color = colors.dark, size = 14, }: { children: ReactNode; color?: string; size?: 14 | 18; }) => ( {children} ); const Description = ({ children }: { children: ReactNode }) => ( {children} ); const ProgressTrack = ({ color = "#2dd4bf", value, }: Pick) => { const progress = clamp(value); return ( <> {progress}% ‍ ); }; const ItemContent = ({ item, variant, }: { item: ProgressBarItem; variant: Exclude; }) => ( <> {item.title} {variant === "text-top" && item.description ? ( <> {item.description} ) : null} {variant === "with-text" && item.description ? ( <> {item.description} ) : null} ); const FullWidthProgressContent = ({ description, title, value, variant, }: { description: string; title: string; value: number; variant: ProgressBarContentVariant; }) => ( {variant === "minimal" ? ( ) : ( )} ); const ProgressBarColumnsContent = ({ items, variant, }: { items: readonly [ProgressBarItem, ProgressBarItem]; variant: ProgressBarColumnsVariant; }) => { const contentVariant = getContentVariant(variant) as Exclude< ProgressBarContentVariant, "minimal" >; return ( {items.map((item, index) => ( ))} ); }; const ProgressBarGroupContent = ({ description, items, title, variant, }: { description: string; items: readonly ProgressBarItem[]; title: string; variant: ProgressBarPaddedVariant; }) => { const contentVariant = getContentVariant(variant); return ( <> {contentVariant === "minimal" ? null : ( {title} )} {contentVariant === "text-top" ? ( {description} ) : null} {items.map((item, index) => ( {item.title} {index < items.length - 1 ? ( ) : null} ))} {contentVariant === "with-text" ? ( {description} ) : null} ); }; const ProgressEmailShell = ({ children, horizontalPadding, preview, theme, topSpacer, }: { children: ReactNode; horizontalPadding: 24 | 64; preview: string; theme: EmailTheme; topSpacer: 30 | 44; }) => ( {preview} {children} ); interface ProgressFull_FullWidthProgressBarProps { description?: string; theme?: EmailTheme; title?: string; value?: number; variant?: ProgressBarContentVariant; } const ProgressFull_defaultDescription = "Automate your workflows across tools with no code required. From CRM syncs to AI-powered triggers, FlowSync keeps your operations moving seamlessly."; const ProgressFull_FullWidthProgressBarSection = ({ description = ProgressFull_defaultDescription, title = "FlowSync", value, variant = "text-top", }: Omit) => ( ); const ProgressFull_FullWidthProgressBar = ({ description = ProgressFull_defaultDescription, theme = defaultTheme, title = "FlowSync", value, variant = "text-top", }: ProgressFull_FullWidthProgressBarProps) => ( ); ProgressFull_FullWidthProgressBar.PreviewProps = { description: ProgressFull_defaultDescription, theme: defaultTheme, title: "FlowSync", variant: "text-top", } satisfies ProgressFull_FullWidthProgressBarProps; const __ProgressFull = ProgressFull_FullWidthProgressBar; interface ProgressGroup_ProgressBarGroupProps { description?: string; items?: readonly ProgressBarItem[]; theme?: EmailTheme; title?: string; variant?: ProgressBarPaddedVariant; } const ProgressGroup_defaultDescription = "Automate your workflows across tools with no code required. From CRM syncs to AI-powered triggers, FlowSync keeps your operations moving seamlessly."; const ProgressGroup_defaultItems = [ { color: "#2dd4bf", title: "Ease of use", value: 75 }, { color: "#fda4af", title: "Cost", value: 50 }, { color: "#818cf8", title: "Integrations", value: 80 }, ] as const satisfies readonly ProgressBarItem[]; const ProgressGroup_ProgressBarGroupSection = ({ description = ProgressGroup_defaultDescription, items = ProgressGroup_defaultItems, title = "FlowSync", variant = "text-top", }: Omit) => ( ); const ProgressGroup_ProgressBarGroup = ({ description = ProgressGroup_defaultDescription, items = ProgressGroup_defaultItems, theme = defaultTheme, title = "FlowSync", variant = "text-top", }: ProgressGroup_ProgressBarGroupProps) => ( ); ProgressGroup_ProgressBarGroup.PreviewProps = { description: ProgressGroup_defaultDescription, items: ProgressGroup_defaultItems, theme: defaultTheme, title: "FlowSync", variant: "text-top", } satisfies ProgressGroup_ProgressBarGroupProps; const __ProgressGroup = ProgressGroup_ProgressBarGroup; interface ProgressColumns_ProgressBarColumnsProps { items?: readonly [ProgressBarItem, ProgressBarItem]; theme?: EmailTheme; variant?: ProgressBarColumnsVariant; } const ProgressColumns_flowSyncDescription = "Automate your workflows across tools with no code required. From CRM syncs to AI-powered triggers, FlowSync keeps your operations moving seamlessly."; const ProgressColumns_insightDescription = "Turn raw data into instant clarity. InsightIQ combines analytics, AI summaries, and interactive reporting to help teams make better decisions faster."; const ProgressColumns_getDefaultItems = ( variant: ProgressBarColumnsVariant ): readonly [ProgressBarItem, ProgressBarItem] => { const textTop = getContentVariant(variant) === "text-top"; return [ { color: "#2dd4bf", description: ProgressColumns_flowSyncDescription, title: "FlowSync", value: 33, }, { color: "#818cf8", description: textTop ? ProgressColumns_flowSyncDescription : ProgressColumns_insightDescription, title: "InsightIQ", value: 50, }, ]; }; const ProgressColumns_ProgressBarColumnsSection = ({ items, variant = "with-text", }: Omit) => ( ); const ProgressColumns_ProgressBarColumns = ({ items, theme = defaultTheme, variant = "with-text", }: ProgressColumns_ProgressBarColumnsProps) => ( ); ProgressColumns_ProgressBarColumns.PreviewProps = { theme: defaultTheme, variant: "with-text", } satisfies ProgressColumns_ProgressBarColumnsProps; const __ProgressColumns = ProgressColumns_ProgressBarColumns; export interface ProgressItem { title?: string; description?: string; value: number; color?: string; } export interface ProgressProps { theme?: Parameters[0]["theme"]; items?: ProgressItem[]; layout?: "single" | "group" | "columns"; padding?: "none" | "padded"; content?: "minimal" | "title" | "description" | "text-top"; } const progressVariant = ({ content, padding, }: Required>) => { const base = { description: "with-text", minimal: "minimal", "text-top": "text-top", title: "with-title", }[content]; return `${base}${padding === "padded" ? "-padded" : ""}`; }; export const Progress = ({ theme, items, layout = "single", padding = "none", content = "minimal", }: ProgressProps) => { const variant = progressVariant({ content, padding }); if (layout === "columns") { return ( <__ProgressColumns items={ items && items.length >= 2 ? [ { ...items[0], title: items[0].title ?? "" }, { ...items[1], title: items[1].title ?? "" }, ] : undefined } theme={theme} variant={variant as Parameters[0]["variant"]} /> ); } if (layout === "group") { return ( <__ProgressGroup items={items?.map((item) => ({ ...item, title: item.title ?? "", }))} theme={theme} variant={variant as Parameters[0]["variant"]} /> ); } const [item] = items ?? []; return ( <__ProgressFull description={item?.description} theme={theme} title={item?.title} value={item?.value} variant={ (variant.replace("-padded", "") || "minimal") as Parameters< typeof __ProgressFull >[0]["variant"] } /> ); }; Progress.PreviewProps = { content: "minimal", layout: "single", padding: "none", } satisfies ProgressProps; 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@faire/mjml-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40faire%2Fmjml-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@faire/mjml-react"}]]}]}],["$","li","mjml",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/mjml","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"mjml"}]]}]}]]}],["$","$L4b",null,{"namespace":"@emailcn","registryDependencies":["https://emailcn.run/r/mjml-react/theme-default.json"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/bases/mjml-react/components/ui-elements/progress-bars/progress.tsx","content":"$4d","type":"registry:component","target":"components/email/progress.tsx"}],"className":"h-[70svh] min-h-80"}]]}]