chore: import upstream snapshot with attribution

apps/sim/components/emails/billing/usage-threshold-email.tsx

@@ -0,0 +1,67 @@
+import { Link, Section, Text } from '@react-email/components'
+import { baseStyles } from '@/components/emails/_styles'
+import { EmailLayout } from '@/components/emails/components'
+import { dollarsToCredits } from '@/lib/billing/credits/conversion'
+import { getBrandConfig } from '@/ee/whitelabeling'
+
+interface UsageThresholdEmailProps {
+  userName?: string
+  planName: string
+  percentUsed: number
+  currentUsage: number
+  limit: number
+  ctaLink: string
+}
+
+export function UsageThresholdEmail({
+  userName,
+  planName,
+  percentUsed,
+  currentUsage,
+  limit,
+  ctaLink,
+}: UsageThresholdEmailProps) {
+  const brand = getBrandConfig()
+
+  const previewText = `${brand.name}: You're at ${percentUsed}% of your ${planName} monthly budget`
+
+  return (
+    <EmailLayout preview={previewText} showUnsubscribe={true}>
+      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
+        {userName ? `Hi ${userName},` : 'Hi,'}
+      </Text>
+
+      <Text style={baseStyles.paragraph}>
+        You're approaching your monthly budget on the {planName} plan.
+      </Text>
+
+      <Section style={baseStyles.infoBox}>
+        <Text style={baseStyles.infoBoxTitle}>Usage</Text>
+        <Text style={baseStyles.infoBoxList}>
+          {dollarsToCredits(currentUsage).toLocaleString()} of{' '}
+          {dollarsToCredits(limit).toLocaleString()} credits used ({percentUsed}%)
+        </Text>
+      </Section>
+
+      {/* Divider */}
+      <div style={baseStyles.divider} />
+
+      <Text style={baseStyles.paragraph}>
+        To avoid interruptions, consider increasing your monthly limit.
+      </Text>
+
+      <Link href={ctaLink} style={{ textDecoration: 'none' }}>
+        <Text style={baseStyles.button}>Review Limits</Text>
+      </Link>
+
+      {/* Divider */}
+      <div style={baseStyles.divider} />
+
+      <Text style={{ ...baseStyles.footerText, textAlign: 'left' }}>
+        One-time notification at 80% usage.
+      </Text>
+    </EmailLayout>
+  )
+}
+
+export default UsageThresholdEmail