react-email 6.6.9 → 6.8.0

package/dist/components/code-inline/code-inline.cjs

@@ -0,0 +1,43 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/code-inline/code-inline.tsx
+/**
+* If you are sending emails for users that have the Orange.fr email client,
+* beware that this component will only work when you have a head containing meta tags.
+*/
+const CodeInline = react.forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `
+        meta ~ .cino {
+          display: none !important;
+          opacity: 0 !important;
+        }
+
+        meta ~ .cio {
+          display: block !important;
+        }
+      ` }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+			...props,
+			className: `${props.className ? props.className : ""} cino`,
+			children
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			...props,
+			className: `${props.className ? props.className : ""} cio`,
+			ref,
+			style: {
+				display: "none",
+				...props.style
+			},
+			children
+		})
+	] });
+});
+CodeInline.displayName = "CodeInline";
+require_element_marker.markAsElement(CodeInline);
+//#endregion
+exports.CodeInline = CodeInline;

package/dist/components/code-inline/code-inline.d.cts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+
+//#region src/components/code-inline/code-inline.d.ts
+type RootProps = React$1.ComponentPropsWithoutRef<'code'> & React$1.ComponentPropsWithoutRef<'span'>;
+type CodeInlineProps = Readonly<RootProps>;
+/**
+ * If you are sending emails for users that have the Orange.fr email client,
+ * beware that this component will only work when you have a head containing meta tags.
+ */
+declare const CodeInline: React$1.ForwardRefExoticComponent<Readonly<RootProps> & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { CodeInline, CodeInlineProps };

package/dist/components/code-inline/code-inline.d.mts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+
+//#region src/components/code-inline/code-inline.d.ts
+type RootProps = React$1.ComponentPropsWithoutRef<'code'> & React$1.ComponentPropsWithoutRef<'span'>;
+type CodeInlineProps = Readonly<RootProps>;
+/**
+ * If you are sending emails for users that have the Orange.fr email client,
+ * beware that this component will only work when you have a head containing meta tags.
+ */
+declare const CodeInline: React$1.ForwardRefExoticComponent<Readonly<RootProps> & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { CodeInline, CodeInlineProps };

package/dist/components/code-inline/code-inline.mjs

@@ -0,0 +1,41 @@
+import { markAsElement } from "../element-marker.mjs";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/code-inline/code-inline.tsx
+/**
+* If you are sending emails for users that have the Orange.fr email client,
+* beware that this component will only work when you have a head containing meta tags.
+*/
+const CodeInline = React$1.forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", { children: `
+        meta ~ .cino {
+          display: none !important;
+          opacity: 0 !important;
+        }
+
+        meta ~ .cio {
+          display: block !important;
+        }
+      ` }),
+		/* @__PURE__ */ jsx("code", {
+			...props,
+			className: `${props.className ? props.className : ""} cino`,
+			children
+		}),
+		/* @__PURE__ */ jsx("span", {
+			...props,
+			className: `${props.className ? props.className : ""} cio`,
+			ref,
+			style: {
+				display: "none",
+				...props.style
+			},
+			children
+		})
+	] });
+});
+CodeInline.displayName = "CodeInline";
+markAsElement(CodeInline);
+//#endregion
+export { CodeInline };

package/dist/components/code-inline/index.d.cts

@@ -0,0 +1 @@
+import { CodeInline, CodeInlineProps } from "./code-inline.cjs";

package/dist/components/code-inline/index.d.mts

@@ -0,0 +1 @@
+import { CodeInline, CodeInlineProps } from "./code-inline.mjs";

package/dist/components/column/column.cjs

@@ -0,0 +1,19 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/column/column.tsx
+const Column = react.forwardRef(({ children, style, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+		...props,
+		"data-id": "__react-email-column",
+		ref,
+		style,
+		children
+	});
+});
+Column.displayName = "Column";
+require_element_marker.markAsElement(Column);
+//#endregion
+exports.Column = Column;

package/dist/components/column/column.d.cts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/column/column.d.ts
+type ColumnProps = Readonly<React$1.ComponentPropsWithoutRef<'td'>>;
+declare const Column: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">> & React$1.RefAttributes<HTMLTableCellElement>>;
+//#endregion
+export { Column, ColumnProps };

package/dist/components/column/column.d.mts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/column/column.d.ts
+type ColumnProps = Readonly<React$1.ComponentPropsWithoutRef<'td'>>;
+declare const Column: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">> & React$1.RefAttributes<HTMLTableCellElement>>;
+//#endregion
+export { Column, ColumnProps };

package/dist/components/column/column.mjs

@@ -0,0 +1,17 @@
+import { markAsElement } from "../element-marker.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/column/column.tsx
+const Column = React$1.forwardRef(({ children, style, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("td", {
+		...props,
+		"data-id": "__react-email-column",
+		ref,
+		style,
+		children
+	});
+});
+Column.displayName = "Column";
+markAsElement(Column);
+//#endregion
+export { Column };

package/dist/components/column/index.d.cts

@@ -0,0 +1 @@
+import { Column, ColumnProps } from "./column.cjs";

package/dist/components/column/index.d.mts

@@ -0,0 +1 @@
+import { Column, ColumnProps } from "./column.mjs";

package/dist/components/container/container.cjs

@@ -0,0 +1,42 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/container/container.tsx
+const Container = react.forwardRef(({ children, style = {}, ...props }, ref) => {
+	const tdStyle = {};
+	const tableStyle = {};
+	const styleRecord = style;
+	for (const key in styleRecord) {
+		if (!Object.hasOwn(styleRecord, key)) continue;
+		const value = styleRecord[key];
+		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		else tableStyle[key] = value;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+		align: "center",
+		width: "100%",
+		...props,
+		border: 0,
+		cellPadding: "0",
+		cellSpacing: "0",
+		ref,
+		role: "presentation",
+		style: {
+			maxWidth: "37.5em",
+			...tableStyle
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
+			style: { width: "100%" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				style: tdStyle,
+				children
+			})
+		}) })
+	});
+});
+Container.displayName = "Container";
+require_element_marker.markAsElement(Container);
+//#endregion
+exports.Container = Container;

package/dist/components/container/container.d.cts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/container/container.d.ts
+type ContainerProps = Readonly<React$1.ComponentPropsWithoutRef<'table'>>;
+declare const Container: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">> & React$1.RefAttributes<HTMLTableElement>>;
+//#endregion
+export { Container, ContainerProps };

package/dist/components/container/container.d.mts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/container/container.d.ts
+type ContainerProps = Readonly<React$1.ComponentPropsWithoutRef<'table'>>;
+declare const Container: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">> & React$1.RefAttributes<HTMLTableElement>>;
+//#endregion
+export { Container, ContainerProps };

package/dist/components/container/container.mjs

@@ -0,0 +1,40 @@
+import { markAsElement } from "../element-marker.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/container/container.tsx
+const Container = React$1.forwardRef(({ children, style = {}, ...props }, ref) => {
+	const tdStyle = {};
+	const tableStyle = {};
+	const styleRecord = style;
+	for (const key in styleRecord) {
+		if (!Object.hasOwn(styleRecord, key)) continue;
+		const value = styleRecord[key];
+		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		else tableStyle[key] = value;
+	}
+	return /* @__PURE__ */ jsx("table", {
+		align: "center",
+		width: "100%",
+		...props,
+		border: 0,
+		cellPadding: "0",
+		cellSpacing: "0",
+		ref,
+		role: "presentation",
+		style: {
+			maxWidth: "37.5em",
+			...tableStyle
+		},
+		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
+			style: { width: "100%" },
+			children: /* @__PURE__ */ jsx("td", {
+				style: tdStyle,
+				children
+			})
+		}) })
+	});
+});
+Container.displayName = "Container";
+markAsElement(Container);
+//#endregion
+export { Container };

package/dist/components/container/index.d.cts

@@ -0,0 +1 @@
+import { Container, ContainerProps } from "./container.cjs";

package/dist/components/container/index.d.mts

@@ -0,0 +1 @@
+import { Container, ContainerProps } from "./container.mjs";

package/dist/components/element-marker.cjs

@@ -0,0 +1,8 @@
+//#region src/components/element-marker.ts
+const elementMarker = Symbol.for("react-email.element");
+const markAsElement = (component) => {
+	component[elementMarker] = true;
+};
+//#endregion
+exports.elementMarker = elementMarker;
+exports.markAsElement = markAsElement;

package/dist/components/element-marker.mjs

@@ -0,0 +1,7 @@
+//#region src/components/element-marker.ts
+const elementMarker = Symbol.for("react-email.element");
+const markAsElement = (component) => {
+	component[elementMarker] = true;
+};
+//#endregion
+export { elementMarker, markAsElement };

package/dist/components/font/font.cjs

@@ -0,0 +1,22 @@
+require("../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/font/font.tsx
+/** The component MUST be place inside the <head> tag */
+const Font = ({ fontFamily, fallbackFontFamily, webFont, fontStyle = "normal", fontWeight = 400 }) => {
+	const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: `
+    @font-face {
+      font-family: '${fontFamily}';
+      font-style: ${fontStyle};
+      font-weight: ${fontWeight};
+      mso-font-alt: '${Array.isArray(fallbackFontFamily) ? fallbackFontFamily[0] : fallbackFontFamily}';
+      ${src}
+    }
+
+    * {
+      font-family: '${fontFamily}', ${Array.isArray(fallbackFontFamily) ? fallbackFontFamily.join(", ") : fallbackFontFamily};
+    }
+  ` } });
+};
+//#endregion
+exports.Font = Font;

package/dist/components/font/font.d.cts

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+
+//#region src/components/font/font.d.ts
+type FallbackFont = 'Arial' | 'Helvetica' | 'Verdana' | 'Georgia' | 'Times New Roman' | 'serif' | 'sans-serif' | 'monospace' | 'cursive' | 'fantasy';
+type FontFormat = 'woff' | 'woff2' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg';
+type FontWeight = React$1.CSSProperties['fontWeight'];
+type FontStyle = React$1.CSSProperties['fontStyle'];
+interface FontProps {
+  /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
+  fontFamily: string;
+  /** An array is possible, but the order of the array is the priority order */
+  fallbackFontFamily: FallbackFont | FallbackFont[];
+  /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
+  webFont?: {
+    url: string;
+    format: FontFormat;
+  };
+  /** Default: 'normal' */
+  fontStyle?: FontStyle;
+  /** Default: 400 */
+  fontWeight?: FontWeight;
+}
+/** The component MUST be place inside the <head> tag */
+declare const Font: React$1.FC<Readonly<FontProps>>;
+//#endregion
+export { Font, FontProps };

package/dist/components/font/font.d.mts

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+
+//#region src/components/font/font.d.ts
+type FallbackFont = 'Arial' | 'Helvetica' | 'Verdana' | 'Georgia' | 'Times New Roman' | 'serif' | 'sans-serif' | 'monospace' | 'cursive' | 'fantasy';
+type FontFormat = 'woff' | 'woff2' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg';
+type FontWeight = React$1.CSSProperties['fontWeight'];
+type FontStyle = React$1.CSSProperties['fontStyle'];
+interface FontProps {
+  /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
+  fontFamily: string;
+  /** An array is possible, but the order of the array is the priority order */
+  fallbackFontFamily: FallbackFont | FallbackFont[];
+  /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
+  webFont?: {
+    url: string;
+    format: FontFormat;
+  };
+  /** Default: 'normal' */
+  fontStyle?: FontStyle;
+  /** Default: 400 */
+  fontWeight?: FontWeight;
+}
+/** The component MUST be place inside the <head> tag */
+declare const Font: React$1.FC<Readonly<FontProps>>;
+//#endregion
+export { Font, FontProps };

package/dist/components/font/font.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/font/font.tsx
+/** The component MUST be place inside the <head> tag */
+const Font = ({ fontFamily, fallbackFontFamily, webFont, fontStyle = "normal", fontWeight = 400 }) => {
+	const src = webFont ? `src: url(${webFont.url}) format('${webFont.format}');` : "";
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
+    @font-face {
+      font-family: '${fontFamily}';
+      font-style: ${fontStyle};
+      font-weight: ${fontWeight};
+      mso-font-alt: '${Array.isArray(fallbackFontFamily) ? fallbackFontFamily[0] : fallbackFontFamily}';
+      ${src}
+    }
+
+    * {
+      font-family: '${fontFamily}', ${Array.isArray(fallbackFontFamily) ? fallbackFontFamily.join(", ") : fallbackFontFamily};
+    }
+  ` } });
+};
+//#endregion
+export { Font };

package/dist/components/font/index.d.cts

@@ -0,0 +1 @@
+import { Font, FontProps } from "./font.cjs";

package/dist/components/font/index.d.mts

@@ -0,0 +1 @@
+import { Font, FontProps } from "./font.mjs";

package/dist/components/head/head.cjs

@@ -0,0 +1,20 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/head/head.tsx
+const Head = react.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("head", {
+	...props,
+	ref,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", {
+			content: "text/html; charset=UTF-8",
+			httpEquiv: "Content-Type"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("meta", { name: "x-apple-disable-message-reformatting" }),
+		children
+	]
+}));
+Head.displayName = "Head";
+//#endregion
+exports.Head = Head;

package/dist/components/head/head.d.cts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/head/head.d.ts
+type HeadProps = Readonly<React$1.ComponentPropsWithoutRef<'head'>>;
+declare const Head: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>, "ref">> & React$1.RefAttributes<HTMLHeadElement>>;
+//#endregion
+export { Head, HeadProps };

package/dist/components/head/head.d.mts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/head/head.d.ts
+type HeadProps = Readonly<React$1.ComponentPropsWithoutRef<'head'>>;
+declare const Head: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadElement>, HTMLHeadElement>, "ref">> & React$1.RefAttributes<HTMLHeadElement>>;
+//#endregion
+export { Head, HeadProps };

package/dist/components/head/head.mjs

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/head/head.tsx
+const Head = React$1.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxs("head", {
+	...props,
+	ref,
+	children: [
+		/* @__PURE__ */ jsx("meta", {
+			content: "text/html; charset=UTF-8",
+			httpEquiv: "Content-Type"
+		}),
+		/* @__PURE__ */ jsx("meta", { name: "x-apple-disable-message-reformatting" }),
+		children
+	]
+}));
+Head.displayName = "Head";
+//#endregion
+export { Head };

package/dist/components/head/index.d.cts

@@ -0,0 +1 @@
+import { Head, HeadProps } from "./head.cjs";

package/dist/components/head/index.d.mts

@@ -0,0 +1 @@
+import { Head, HeadProps } from "./head.mjs";

package/dist/components/heading/heading.cjs

@@ -0,0 +1,30 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+const require_spaces = require("./utils/spaces.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/heading/heading.tsx
+const Heading = react.forwardRef(({ as: Tag = "h1", children, style, m, mx, my, mt, mr, mb, ml, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+		...props,
+		ref,
+		style: {
+			...require_spaces.withMargin({
+				m,
+				mx,
+				my,
+				mt,
+				mr,
+				mb,
+				ml
+			}),
+			...style
+		},
+		children
+	});
+});
+Heading.displayName = "Heading";
+require_element_marker.markAsElement(Heading);
+//#endregion
+exports.Heading = Heading;

package/dist/components/heading/heading.d.cts

@@ -0,0 +1,22 @@
+import { As } from "./utils/as.cjs";
+import { Margin } from "./utils/spaces.cjs";
+import * as React$1 from "react";
+
+//#region src/components/heading/heading.d.ts
+type HeadingAs = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'>;
+type HeadingProps = HeadingAs & Margin;
+declare const Heading: React$1.ForwardRefExoticComponent<(Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as?: "h1" | undefined;
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h2";
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h3";
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h4";
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h5";
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h6";
+} & Margin>, "ref">) & React$1.RefAttributes<HTMLHeadingElement>>;
+//#endregion
+export { Heading, HeadingAs, HeadingProps };

package/dist/components/heading/heading.d.mts

@@ -0,0 +1,22 @@
+import { As } from "./utils/as.mjs";
+import { Margin } from "./utils/spaces.mjs";
+import * as React$1 from "react";
+
+//#region src/components/heading/heading.d.ts
+type HeadingAs = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'>;
+type HeadingProps = HeadingAs & Margin;
+declare const Heading: React$1.ForwardRefExoticComponent<(Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as?: "h1" | undefined;
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h2";
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h3";
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h4";
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h5";
+} & Margin>, "ref"> | Omit<Readonly<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
+  as: "h6";
+} & Margin>, "ref">) & React$1.RefAttributes<HTMLHeadingElement>>;
+//#endregion
+export { Heading, HeadingAs, HeadingProps };

package/dist/components/heading/heading.mjs

@@ -0,0 +1,28 @@
+import { markAsElement } from "../element-marker.mjs";
+import { withMargin } from "./utils/spaces.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/heading/heading.tsx
+const Heading = React$1.forwardRef(({ as: Tag = "h1", children, style, m, mx, my, mt, mr, mb, ml, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Tag, {
+		...props,
+		ref,
+		style: {
+			...withMargin({
+				m,
+				mx,
+				my,
+				mt,
+				mr,
+				mb,
+				ml
+			}),
+			...style
+		},
+		children
+	});
+});
+Heading.displayName = "Heading";
+markAsElement(Heading);
+//#endregion
+export { Heading };

package/dist/components/heading/index.d.cts

@@ -0,0 +1 @@
+import { Heading, HeadingAs, HeadingProps } from "./heading.cjs";

package/dist/components/heading/index.d.mts

@@ -0,0 +1 @@
+import { Heading, HeadingAs, HeadingProps } from "./heading.mjs";

package/dist/components/heading/utils/as.d.cts

@@ -0,0 +1,16 @@
+//#region src/components/heading/utils/as.d.ts
+type As<DefaultTag extends React.ElementType, T1 extends React.ElementType, T2 extends React.ElementType = T1, T3 extends React.ElementType = T1, T4 extends React.ElementType = T1, T5 extends React.ElementType = T1> = (React.ComponentPropsWithRef<DefaultTag> & {
+  as?: DefaultTag;
+}) | (React.ComponentPropsWithRef<T1> & {
+  as: T1;
+}) | (React.ComponentPropsWithRef<T2> & {
+  as: T2;
+}) | (React.ComponentPropsWithRef<T3> & {
+  as: T3;
+}) | (React.ComponentPropsWithRef<T4> & {
+  as: T4;
+}) | (React.ComponentPropsWithRef<T5> & {
+  as: T5;
+});
+//#endregion
+export { As };

package/dist/components/heading/utils/as.d.mts

@@ -0,0 +1,16 @@
+//#region src/components/heading/utils/as.d.ts
+type As<DefaultTag extends React.ElementType, T1 extends React.ElementType, T2 extends React.ElementType = T1, T3 extends React.ElementType = T1, T4 extends React.ElementType = T1, T5 extends React.ElementType = T1> = (React.ComponentPropsWithRef<DefaultTag> & {
+  as?: DefaultTag;
+}) | (React.ComponentPropsWithRef<T1> & {
+  as: T1;
+}) | (React.ComponentPropsWithRef<T2> & {
+  as: T2;
+}) | (React.ComponentPropsWithRef<T3> & {
+  as: T3;
+}) | (React.ComponentPropsWithRef<T4> & {
+  as: T4;
+}) | (React.ComponentPropsWithRef<T5> & {
+  as: T5;
+});
+//#endregion
+export { As };