4a: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"] 4b: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"] 4c:T1395,import { Section, Body, Head as EmailHead, Html, Preview } from "jsx-email"; import { Fragment } from "react"; import type { CSSProperties } from "react"; import { DefaultFonts } from "@/components/email/font-default"; import { EmailTailwind } from "@/components/email/email-theme"; import type { EmailTheme } from "@/components/email/email-theme"; import { defaultTheme } from "@/components/email/theme-default"; type PillStatusVariant = | "brand" | "danger" | "default" | "error" | "info" | "success" | "warning"; interface InternalPillItem { label: string; variant: PillStatusVariant; } type EmailCssProperties = CSSProperties & { msoPaddingAlt?: string; msoTextRaise?: string; }; const fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const pillStyles: Record< PillStatusVariant, { backgroundColor: string; borderColor: string; color: string; } > = { brand: { backgroundColor: "#eef2ff", borderColor: "#a5b4fc", color: "#6366f1", }, danger: { backgroundColor: "#fef2f2", borderColor: "#fca5a5", color: "#ef4444", }, default: { backgroundColor: "#f9fafb", borderColor: "#d1d5db", color: "#4b5563", }, error: { backgroundColor: "#fef2f2", borderColor: "#fca5a5", color: "#ef4444", }, info: { backgroundColor: "#f0f9ff", borderColor: "#7dd3fc", color: "#0ea5e9", }, success: { backgroundColor: "#ecfdf5", borderColor: "#6ee7b7", color: "#10b981", }, warning: { backgroundColor: "#fffbeb", borderColor: "#fcd34d", color: "#f59e0b", }, }; const defaultPills: InternalPillItem[] = [ { label: "Label", variant: "default" }, { label: "Success", variant: "success" }, { label: "Error", variant: "error" }, { label: "Warning", variant: "warning" }, { label: "Info", variant: "info" }, { label: "Brand", variant: "brand" }, ]; const Pill = ({ label, variant }: InternalPillItem) => { const colors = pillStyles[variant]; const style: EmailCssProperties = { backgroundColor: colors.backgroundColor, border: `1px solid ${colors.borderColor}`, borderRadius: "9999px", color: colors.color, display: "inline-block", fontFamily, fontSize: "12px", fontWeight: 500, lineHeight: "16px", msoPaddingAlt: "0", msoTextRaise: "2px", padding: "2px 8px", }; return ( {" "} {label} ); }; const BasicPillsStatusColorsSection = ({ mjmlCompensation = false, pills = defaultPills, }: { mjmlCompensation?: boolean; pills?: InternalPillItem[]; }) => ( <>

{mjmlCompensation ?

: null} {pills.map((pill, index) => ( {(() => { if (index < pills.length - 1) { return (

‍

); } return null; })()} ))}

); interface Pills_BasicPillsStatusColorsProps { pills?: InternalPillItem[]; theme?: EmailTheme; } const Pills_BasicPillsStatusColors = ({ pills = defaultPills, theme = defaultTheme, }: Pills_BasicPillsStatusColorsProps) => ( Basic pills with status colors ); Pills_BasicPillsStatusColors.PreviewProps = { pills: defaultPills, theme: defaultTheme, } satisfies Pills_BasicPillsStatusColorsProps; const __Pills = Pills_BasicPillsStatusColors; export interface PillItem { label: string; status?: | "brand" | "danger" | "default" | "error" | "info" | "success" | "warning"; } export interface PillsProps { theme?: Parameters[0]["theme"]; pills?: PillItem[]; } export const Pills = ({ theme, pills }: PillsProps) => ( <__Pills pills={pills?.map(({ label, status = "default" }) => ({ label, variant: status, }))} theme={theme} /> ); Pills.PreviewProps = {} satisfies PillsProps; 49:["$","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","jsx-email",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/jsx-email","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":"jsx-email"}]]}]}]]}],["$","$L4a",null,{"namespace":"@emailcn","registryDependencies":["https://emailcn.run/r/jsx-email/default-fonts.json","https://emailcn.run/r/jsx-email/theme-default.json"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"registry/bases/jsx-email/components/ui-elements/pills/pills.tsx","content":"$4c","type":"registry:component","target":"components/email/pills.tsx"}],"className":"h-[70svh] min-h-80"}]]}]