@duro-app/ui-email 0.37.1 → 0.38.0

package/dist/components.d.ts

@@ -26,7 +26,7 @@ export declare function Button({ href, children, align, }: {
 export declare function Hr(): import("react/jsx-runtime").JSX.Element;
 export declare function Link({ href, children, style, }: {
     href: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function Section({ children, style, }: {

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAkC5F;AAED,wBAAgB,OAAO,CAAC,EAAC,EAAS,EAAE,QAAQ,EAAC,EAAE;IAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAgB3F;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAErD,wBAAgB,IAAI,CAAC,EACnB,OAAgB,EAChB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAgBA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,KAAgB,GACjB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,2CAqBA;AAED,wBAAgB,EAAE,4CAEjB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAUA;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAEA"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAkC5F;AAED,wBAAgB,OAAO,CAAC,EAAC,EAAS,EAAE,QAAQ,EAAC,EAAE;IAAC,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,2CAgB3F;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAErD,wBAAgB,IAAI,CAAC,EACnB,OAAgB,EAChB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAgBA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,QAAQ,EACR,KAAgB,GACjB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,2CAqBA;AAED,wBAAgB,EAAE,4CAEjB;AAED,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IAGZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAUA;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,2CAEA"}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/theme.ts","../src/components.tsx"],"sourcesContent":["import {darkColors, lightColors, type RawColors} from '@duro-app/tokens/raw'\n\n// ---------------------------------------------------------------------------\n// Spacing / radius / type\n//\n// Email needs literal px values (clients reset the root font-size, so rem is\n// unsafe) and table-friendly units. These mirror @duro-app/tokens (spacing /\n// type scale) converted to px. Colours, by contrast, are imported live from\n// the tokens package below so the brand palette can never drift.\n// ---------------------------------------------------------------------------\n\nexport const space = {\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n} as const\n\nexport const radius = {\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n} as const\n\nexport const font = {\n  family:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  // rem → px (1rem = 16px): xs .75 / sm .875 / md 1 / lg 1.125 / xl 1.25 / heading 1.5\n  sizeXs: '12px',\n  sizeSm: '14px',\n  sizeMd: '16px',\n  sizeLg: '18px',\n  sizeXl: '20px',\n  sizeHeading: '24px',\n  weightNormal: 400,\n  weightMedium: 500,\n  weightSemibold: 600,\n  weightBold: 700,\n  lineHeight: 1.5,\n} as const\n\n// ---------------------------------------------------------------------------\n// Semantic colour roles, derived from the shared token palettes\n// ---------------------------------------------------------------------------\n\nexport interface EmailRoles {\n  bg: string\n  card: string\n  cardBorder: string\n  text: string\n  textMuted: string\n  heading: string\n  accent: string\n  accentText: string\n  border: string\n}\n\nconst roles = (c: RawColors): EmailRoles => ({\n  bg: c.bg,\n  card: c.bgCard,\n  cardBorder: c.border,\n  text: c.text,\n  textMuted: c.textMuted,\n  heading: c.text,\n  accent: c.accent,\n  accentText: c.accentContrast,\n  border: c.border,\n})\n\nexport const palette = {\n  light: roles(lightColors),\n  dark: roles(darkColors),\n} as const\n\n// ---------------------------------------------------------------------------\n// Dark-mode mechanism\n//\n// Stable classNames that the dark <style> block targets. Inline (light) styles\n// are the base; the @media (prefers-color-scheme: dark) rules override them.\n// NB: inline styles beat <style> rules, so every override MUST use !important.\n// Honoured by Apple Mail (iOS/macOS); Gmail/Outlook apply their own dark\n// transform regardless; every other client falls back to the light base.\n// ---------------------------------------------------------------------------\n\nexport const cls = {\n  body: 'd-body',\n  card: 'd-card',\n  text: 'd-text',\n  textMuted: 'd-text-muted',\n  heading: 'd-heading',\n  button: 'd-btn',\n  hr: 'd-hr',\n  link: 'd-link',\n} as const\n\nconst ruleLines = (prefix: string): string[] => {\n  const d = palette.dark\n  const p = prefix ? `${prefix} ` : ''\n  return [\n    `${p}.${cls.body} { background-color: ${d.bg} !important; }`,\n    `${p}.${cls.card} { background-color: ${d.card} !important; border-color: ${d.cardBorder} !important; }`,\n    `${p}.${cls.text} { color: ${d.text} !important; }`,\n    `${p}.${cls.textMuted} { color: ${d.textMuted} !important; }`,\n    `${p}.${cls.heading} { color: ${d.heading} !important; }`,\n    `${p}.${cls.button} { background-color: ${d.accent} !important; color: ${d.accentText} !important; }`,\n    `${p}.${cls.hr} { border-color: ${d.border} !important; }`,\n    `${p}.${cls.link} { color: ${d.accent} !important; }`,\n  ]\n}\n\nexport const darkModeCss = [\n  '@media (prefers-color-scheme: dark) {',\n  ...ruleLines('').map((l) => '  ' + l),\n  '}',\n  '/* Outlook.com / Outlook mobile dark mode */',\n  ...ruleLines('[data-ogsc]'),\n].join('\\n')\n","import * as React from 'react'\nimport {\n  Html,\n  Head,\n  Body,\n  Container,\n  Section as RESection,\n  Heading as REHeading,\n  Text as REText,\n  Button as REButton,\n  Hr as REHr,\n  Link as RELink,\n  Preview,\n} from '@react-email/components'\nimport {palette, space, radius, font, cls, darkModeCss} from './theme'\n\nconst L = palette.light\n\n/**\n * Root wrapper: <Html><Head> (color-scheme meta + the prefers-color-scheme\n * dark <style>) + a themed card <Body>/<Container>. Compose the rest of the\n * email inside it with the other primitives.\n */\nexport function EmailShell({preview, children}: {preview?: string; children: React.ReactNode}) {\n  return (\n    <Html lang=\"en\">\n      <Head>\n        <meta name=\"color-scheme\" content=\"light dark\" />\n        <meta name=\"supported-color-schemes\" content=\"light dark\" />\n        <style dangerouslySetInnerHTML={{__html: darkModeCss}} />\n      </Head>\n      {preview ? <Preview>{preview}</Preview> : null}\n      <Body\n        className={cls.body}\n        style={{\n          backgroundColor: L.bg,\n          fontFamily: font.family,\n          margin: 0,\n          padding: `${space.xl} 0`,\n        }}\n      >\n        <Container\n          className={cls.card}\n          style={{\n            backgroundColor: L.card,\n            border: `1px solid ${L.cardBorder}`,\n            borderRadius: radius.md,\n            margin: '0 auto',\n            maxWidth: '520px',\n            padding: space.xl,\n          }}\n        >\n          {children}\n        </Container>\n      </Body>\n    </Html>\n  )\n}\n\nexport function Heading({as = 'h1', children}: {as?: 'h1' | 'h2'; children: React.ReactNode}) {\n  const isH1 = as === 'h1'\n  return (\n    <REHeading\n      as={as}\n      className={cls.heading}\n      style={{\n        color: L.heading,\n        fontSize: isH1 ? font.sizeHeading : font.sizeMd,\n        fontWeight: isH1 ? font.weightBold : font.weightSemibold,\n        margin: isH1 ? `0 0 ${space.md}` : `0 0 ${space.sm}`,\n      }}\n    >\n      {children}\n    </REHeading>\n  )\n}\n\nexport type TextVariant = 'body' | 'small' | 'footer'\n\nexport function Text({\n  variant = 'body',\n  children,\n  style,\n}: {\n  variant?: TextVariant\n  children: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  const muted = variant !== 'body'\n  return (\n    <REText\n      className={muted ? cls.textMuted : cls.text}\n      style={{\n        color: muted ? L.textMuted : L.text,\n        fontSize: variant === 'footer' ? font.sizeXs : font.sizeSm,\n        lineHeight: font.lineHeight,\n        margin: `0 0 ${space.ms}`,\n        ...style,\n      }}\n    >\n      {children}\n    </REText>\n  )\n}\n\nexport function Button({\n  href,\n  children,\n  align = 'center',\n}: {\n  href: string\n  children: React.ReactNode\n  align?: 'left' | 'center' | 'right'\n}) {\n  return (\n    <RESection style={{textAlign: align, margin: `${space.xl} 0`}}>\n      <REButton\n        href={href}\n        className={cls.button}\n        style={{\n          backgroundColor: L.accent,\n          color: L.accentText,\n          borderRadius: radius.sm,\n          display: 'inline-block',\n          fontSize: font.sizeSm,\n          fontWeight: font.weightSemibold,\n          padding: `${space.ms} ${space.xl}`,\n          textDecoration: 'none',\n        }}\n      >\n        {children}\n      </REButton>\n    </RESection>\n  )\n}\n\nexport function Hr() {\n  return <REHr className={cls.hr} style={{borderColor: L.border, margin: `${space.lg} 0`}} />\n}\n\nexport function Link({\n  href,\n  children,\n  style,\n}: {\n  href: string\n  children: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  return (\n    <RELink\n      href={href}\n      className={cls.link}\n      style={{color: L.accent, textDecoration: 'underline', ...style}}\n    >\n      {children}\n    </RELink>\n  )\n}\n\nexport function Section({\n  children,\n  style,\n}: {\n  children: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  return <RESection style={{margin: `${space.lg} 0`, ...style}}>{children}</RESection>\n}\n"],"names":["space","radius","font","roles","c","palette","lightColors","darkColors","cls","ruleLines","prefix","d","p","darkModeCss","l","L","EmailShell","preview","children","jsxs","Html","Head","jsx","Preview","Body","Container","Heading","as","isH1","REHeading","Text","variant","style","muted","REText","Button","href","align","RESection","REButton","Hr","REHr","Link","RELink","Section"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/theme.ts","../src/components.tsx"],"sourcesContent":["import {darkColors, lightColors, type RawColors} from '@duro-app/tokens/raw'\n\n// ---------------------------------------------------------------------------\n// Spacing / radius / type\n//\n// Email needs literal px values (clients reset the root font-size, so rem is\n// unsafe) and table-friendly units. These mirror @duro-app/tokens (spacing /\n// type scale) converted to px. Colours, by contrast, are imported live from\n// the tokens package below so the brand palette can never drift.\n// ---------------------------------------------------------------------------\n\nexport const space = {\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n} as const\n\nexport const radius = {\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n} as const\n\nexport const font = {\n  family:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  // rem → px (1rem = 16px): xs .75 / sm .875 / md 1 / lg 1.125 / xl 1.25 / heading 1.5\n  sizeXs: '12px',\n  sizeSm: '14px',\n  sizeMd: '16px',\n  sizeLg: '18px',\n  sizeXl: '20px',\n  sizeHeading: '24px',\n  weightNormal: 400,\n  weightMedium: 500,\n  weightSemibold: 600,\n  weightBold: 700,\n  lineHeight: 1.5,\n} as const\n\n// ---------------------------------------------------------------------------\n// Semantic colour roles, derived from the shared token palettes\n// ---------------------------------------------------------------------------\n\nexport interface EmailRoles {\n  bg: string\n  card: string\n  cardBorder: string\n  text: string\n  textMuted: string\n  heading: string\n  accent: string\n  accentText: string\n  border: string\n}\n\nconst roles = (c: RawColors): EmailRoles => ({\n  bg: c.bg,\n  card: c.bgCard,\n  cardBorder: c.border,\n  text: c.text,\n  textMuted: c.textMuted,\n  heading: c.text,\n  accent: c.accent,\n  accentText: c.accentContrast,\n  border: c.border,\n})\n\nexport const palette = {\n  light: roles(lightColors),\n  dark: roles(darkColors),\n} as const\n\n// ---------------------------------------------------------------------------\n// Dark-mode mechanism\n//\n// Stable classNames that the dark <style> block targets. Inline (light) styles\n// are the base; the @media (prefers-color-scheme: dark) rules override them.\n// NB: inline styles beat <style> rules, so every override MUST use !important.\n// Honoured by Apple Mail (iOS/macOS); Gmail/Outlook apply their own dark\n// transform regardless; every other client falls back to the light base.\n// ---------------------------------------------------------------------------\n\nexport const cls = {\n  body: 'd-body',\n  card: 'd-card',\n  text: 'd-text',\n  textMuted: 'd-text-muted',\n  heading: 'd-heading',\n  button: 'd-btn',\n  hr: 'd-hr',\n  link: 'd-link',\n} as const\n\nconst ruleLines = (prefix: string): string[] => {\n  const d = palette.dark\n  const p = prefix ? `${prefix} ` : ''\n  return [\n    `${p}.${cls.body} { background-color: ${d.bg} !important; }`,\n    `${p}.${cls.card} { background-color: ${d.card} !important; border-color: ${d.cardBorder} !important; }`,\n    `${p}.${cls.text} { color: ${d.text} !important; }`,\n    `${p}.${cls.textMuted} { color: ${d.textMuted} !important; }`,\n    `${p}.${cls.heading} { color: ${d.heading} !important; }`,\n    `${p}.${cls.button} { background-color: ${d.accent} !important; color: ${d.accentText} !important; }`,\n    `${p}.${cls.hr} { border-color: ${d.border} !important; }`,\n    `${p}.${cls.link} { color: ${d.accent} !important; }`,\n  ]\n}\n\nexport const darkModeCss = [\n  '@media (prefers-color-scheme: dark) {',\n  ...ruleLines('').map((l) => '  ' + l),\n  '}',\n  '/* Outlook.com / Outlook mobile dark mode */',\n  ...ruleLines('[data-ogsc]'),\n].join('\\n')\n","import * as React from 'react'\nimport {\n  Html,\n  Head,\n  Body,\n  Container,\n  Section as RESection,\n  Heading as REHeading,\n  Text as REText,\n  Button as REButton,\n  Hr as REHr,\n  Link as RELink,\n  Preview,\n} from '@react-email/components'\nimport {palette, space, radius, font, cls, darkModeCss} from './theme'\n\nconst L = palette.light\n\n/**\n * Root wrapper: <Html><Head> (color-scheme meta + the prefers-color-scheme\n * dark <style>) + a themed card <Body>/<Container>. Compose the rest of the\n * email inside it with the other primitives.\n */\nexport function EmailShell({preview, children}: {preview?: string; children: React.ReactNode}) {\n  return (\n    <Html lang=\"en\">\n      <Head>\n        <meta name=\"color-scheme\" content=\"light dark\" />\n        <meta name=\"supported-color-schemes\" content=\"light dark\" />\n        <style dangerouslySetInnerHTML={{__html: darkModeCss}} />\n      </Head>\n      {preview ? <Preview>{preview}</Preview> : null}\n      <Body\n        className={cls.body}\n        style={{\n          backgroundColor: L.bg,\n          fontFamily: font.family,\n          margin: 0,\n          padding: `${space.xl} 0`,\n        }}\n      >\n        <Container\n          className={cls.card}\n          style={{\n            backgroundColor: L.card,\n            border: `1px solid ${L.cardBorder}`,\n            borderRadius: radius.md,\n            margin: '0 auto',\n            maxWidth: '520px',\n            padding: space.xl,\n          }}\n        >\n          {children}\n        </Container>\n      </Body>\n    </Html>\n  )\n}\n\nexport function Heading({as = 'h1', children}: {as?: 'h1' | 'h2'; children: React.ReactNode}) {\n  const isH1 = as === 'h1'\n  return (\n    <REHeading\n      as={as}\n      className={cls.heading}\n      style={{\n        color: L.heading,\n        fontSize: isH1 ? font.sizeHeading : font.sizeMd,\n        fontWeight: isH1 ? font.weightBold : font.weightSemibold,\n        margin: isH1 ? `0 0 ${space.md}` : `0 0 ${space.sm}`,\n      }}\n    >\n      {children}\n    </REHeading>\n  )\n}\n\nexport type TextVariant = 'body' | 'small' | 'footer'\n\nexport function Text({\n  variant = 'body',\n  children,\n  style,\n}: {\n  variant?: TextVariant\n  children: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  const muted = variant !== 'body'\n  return (\n    <REText\n      className={muted ? cls.textMuted : cls.text}\n      style={{\n        color: muted ? L.textMuted : L.text,\n        fontSize: variant === 'footer' ? font.sizeXs : font.sizeSm,\n        lineHeight: font.lineHeight,\n        margin: `0 0 ${space.ms}`,\n        ...style,\n      }}\n    >\n      {children}\n    </REText>\n  )\n}\n\nexport function Button({\n  href,\n  children,\n  align = 'center',\n}: {\n  href: string\n  children: React.ReactNode\n  align?: 'left' | 'center' | 'right'\n}) {\n  return (\n    <RESection style={{textAlign: align, margin: `${space.xl} 0`}}>\n      <REButton\n        href={href}\n        className={cls.button}\n        style={{\n          backgroundColor: L.accent,\n          color: L.accentText,\n          borderRadius: radius.sm,\n          display: 'inline-block',\n          fontSize: font.sizeSm,\n          fontWeight: font.weightSemibold,\n          padding: `${space.ms} ${space.xl}`,\n          textDecoration: 'none',\n        }}\n      >\n        {children}\n      </REButton>\n    </RESection>\n  )\n}\n\nexport function Hr() {\n  return <REHr className={cls.hr} style={{borderColor: L.border, margin: `${space.lg} 0`}} />\n}\n\nexport function Link({\n  href,\n  children,\n  style,\n}: {\n  href: string\n  // Optional: react-i18next <Trans> injects the link text via cloneElement,\n  // so the element is declared without children (components={{ a: <Link href /> }}).\n  children?: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  return (\n    <RELink\n      href={href}\n      className={cls.link}\n      style={{color: L.accent, textDecoration: 'underline', ...style}}\n    >\n      {children}\n    </RELink>\n  )\n}\n\nexport function Section({\n  children,\n  style,\n}: {\n  children: React.ReactNode\n  style?: React.CSSProperties\n}) {\n  return <RESection style={{margin: `${space.lg} 0`, ...style}}>{children}</RESection>\n}\n"],"names":["space","radius","font","roles","c","palette","lightColors","darkColors","cls","ruleLines","prefix","d","p","darkModeCss","l","L","EmailShell","preview","children","jsxs","Html","Head","jsx","Preview","Body","Container","Heading","as","isH1","REHeading","Text","variant","style","muted","REText","Button","href","align","RESection","REButton","Hr","REHr","Link","RELink","Section"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui-email",
-  "version": "0.37.1",
+  "version": "0.38.0",
   "description": "Token-driven, dark/light-aware email components for Duro (React Email).",
   "license": "MIT",
   "type": "module",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@react-email/components": "^1.0.9",
-    "@duro-app/tokens": "^0.37.1"
+    "@duro-app/tokens": "^0.38.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"