react-email 6.6.9 → 6.8.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # react-email
 
+## 6.8.0
+
+### Minor Changes
+
+- 9605c04: Add a Props tab to the preview toolbar for live-editing the props a template is rendered with. Edits re-render the preview without changing the template's `PreviewProps`, invalid JSON is flagged inline, and a reset restores the template defaults.
+
+### Patch Changes
+
+- d7743bc: Ship per-module build output with `sideEffects: false` so bundlers can tree-shake unused components. Importing a component no longer pulls prismjs, marked, and tailwindcss into the bundle unless `CodeBlock`, `Markdown`, or `Tailwind` is actually used.
+- 7b32bf6: Fixed toolbar tabs not responding on statically built previews when the page was opened with a `toolbar-panel` query param in the URL.
+
+## 6.7.0
+
+### Minor Changes
+
+- b448c3b: Enable custom export extensions via --extension/-e (e.g. .blade.php).
+
+### Patch Changes
+
+- Updated dependencies [ba96cfa]
+- Updated dependencies [58d8c08]
+  - @react-email/render@2.1.0
+
 ## 6.6.9
 
 ### Patch Changes

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,23 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__toESM = __toESM;

package/dist/cli/index.mjs

@@ -6533,10 +6533,11 @@ const getTracingRootDir = async (usersProjectLocation) => {
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.6.9",
+	version: "6.8.0",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
+	sideEffects: false,
 	types: "./dist/index.d.mts",
 	scripts: {
 		"build": "tsdown",
@@ -6572,7 +6573,7 @@ var package_default = {
 	dependencies: {
 		"@babel/parser": "catalog:",
 		"@babel/traverse": "catalog:",
-		"@react-email/render": "workspace:>=2.0.10",
+		"@react-email/render": "workspace:>=2.1.0",
 		"chokidar": "^4.0.3",
 		"commander": "catalog:",
 		"conf": "^15.0.2",
@@ -6580,7 +6581,7 @@ var package_default = {
 		"debounce": "^2.0.0",
 		"esbuild": "^0.28.0",
 		"glob": "^13.0.6",
-		"jiti": "2.4.2",
+		"jiti": "2.6.1",
 		"log-symbols": "catalog:",
 		"marked": "^15.0.12",
 		"mime-types": "^3.0.0",
@@ -7541,7 +7542,7 @@ const renderWorkerSource = `
 const { unlinkSync, writeFileSync } = require('node:fs');
 const { parentPort, workerData } = require('node:worker_threads');
 
-const { templates, options } = workerData;
+const { templates, options, extension } = workerData;
 
 (async () => {
   for (const template of templates) {
@@ -7551,10 +7552,7 @@ const { templates, options } = workerData;
         emailModule.reactEmailCreateReactElement(emailModule.default, {}),
         options,
       );
-      const htmlPath = template.replace(
-        '.cjs',
-        options.plainText ? '.txt' : '.html',
-      );
+      const htmlPath = template.replace('.cjs', extension);
       writeFileSync(htmlPath, rendered);
       unlinkSync(template);
       parentPort.postMessage({ type: 'progress', template });
@@ -7616,6 +7614,7 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 	}
 	if (spinner) spinner.succeed();
 	const allBuiltTemplates = glob.sync(normalize$1(`${pathToWhereEmailMarkupShouldBeDumped}/**/*.cjs`), { absolute: true });
+	const extension = options.extension && options.extension.length > 0 ? options.extension.startsWith(".") ? options.extension : `.${options.extension}` : options.plainText ? ".txt" : ".html";
 	if (spinner && allBuiltTemplates.length > 0) {
 		spinner.setText(`rendering ${allBuiltTemplates[0]?.split("/").pop()}`);
 		spinner.start();
@@ -7630,7 +7629,8 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 					eval: true,
 					workerData: {
 						templates: batch,
-						options
+						options,
+						extension
 					}
 				});
 				worker.on("message", (msg) => {
@@ -7786,10 +7786,11 @@ else {
 	program.command("dev").description("Starts the preview email development app").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --port <port>", "Port to run dev server on", "3000").option("-c, --clients <clients>", "Comma-separated list of email clients to show compatibility warnings for (overrides COMPATIBILITY_EMAIL_CLIENTS)", parseClientsOption).action(dev);
 	program.command("build").description("Copies the preview app for onto .react-email and builds it").option("-d, --dir <path>", "Directory with your email templates", "./emails").addOption(new Option("-p, --packageManager <name>").hideHelp()).action(build$1);
 	program.command("start").description("Runs the built preview app that is inside of \".react-email\"").action(start);
-	program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-s, --silent", "To, or not to show a spinner with process information", false).action(({ outDir, pretty, plainText, silent, dir: srcDir }) => exportTemplates(outDir, srcDir, {
+	program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-e, --extension <extension>", "Set a custom file extension for rendered emails (e.g. blade.php)").option("-s, --silent", "To, or not to show a spinner with process information", false).action(({ outDir, pretty, plainText, silent, dir: srcDir, extension }) => exportTemplates(outDir, srcDir, {
 		silent,
 		plainText,
-		pretty
+		pretty,
+		extension
 	}));
 	const resend = program.command("resend");
 	resend.command("setup").description("Sets up the integration between the React Email CLI, and your Resend account through an API Key").action(resendSetup);

package/dist/components/body/body.cjs

@@ -0,0 +1,39 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+const require_margin_properties = require("./margin-properties.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/body/body.tsx
+const Body = react.forwardRef(({ children, style, ...props }, ref) => {
+	const bodyStyle = {
+		background: style?.background,
+		backgroundColor: style?.backgroundColor
+	};
+	if (style) for (const property of [...require_margin_properties.marginProperties, ...require_margin_properties.paddingProperties]) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("body", {
+		...props,
+		dir: props.dir ?? "ltr",
+		lang: props.lang ?? "en",
+		style: bodyStyle,
+		ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+			border: 0,
+			width: "100%",
+			cellPadding: "0",
+			cellSpacing: "0",
+			role: "presentation",
+			align: "center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				dir: props.dir ?? "ltr",
+				lang: props.lang ?? "en",
+				style,
+				children
+			}) }) })
+		})
+	});
+});
+Body.displayName = "Body";
+require_element_marker.markAsElement(Body);
+//#endregion
+exports.Body = Body;

package/dist/components/body/body.d.cts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/body/body.d.ts
+type BodyProps = Readonly<React$1.HtmlHTMLAttributes<HTMLBodyElement>>;
+declare const Body: React$1.ForwardRefExoticComponent<Readonly<React$1.HtmlHTMLAttributes<HTMLBodyElement>> & React$1.RefAttributes<HTMLBodyElement>>;
+//#endregion
+export { Body, BodyProps };

package/dist/components/body/body.d.mts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+
+//#region src/components/body/body.d.ts
+type BodyProps = Readonly<React$1.HtmlHTMLAttributes<HTMLBodyElement>>;
+declare const Body: React$1.ForwardRefExoticComponent<Readonly<React$1.HtmlHTMLAttributes<HTMLBodyElement>> & React$1.RefAttributes<HTMLBodyElement>>;
+//#endregion
+export { Body, BodyProps };

package/dist/components/body/body.mjs

@@ -0,0 +1,37 @@
+import { markAsElement } from "../element-marker.mjs";
+import { marginProperties, paddingProperties } from "./margin-properties.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/body/body.tsx
+const Body = React$1.forwardRef(({ children, style, ...props }, ref) => {
+	const bodyStyle = {
+		background: style?.background,
+		backgroundColor: style?.backgroundColor
+	};
+	if (style) for (const property of [...marginProperties, ...paddingProperties]) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
+	return /* @__PURE__ */ jsx("body", {
+		...props,
+		dir: props.dir ?? "ltr",
+		lang: props.lang ?? "en",
+		style: bodyStyle,
+		ref,
+		children: /* @__PURE__ */ jsx("table", {
+			border: 0,
+			width: "100%",
+			cellPadding: "0",
+			cellSpacing: "0",
+			role: "presentation",
+			align: "center",
+			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				dir: props.dir ?? "ltr",
+				lang: props.lang ?? "en",
+				style,
+				children
+			}) }) })
+		})
+	});
+});
+Body.displayName = "Body";
+markAsElement(Body);
+//#endregion
+export { Body };

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

@@ -0,0 +1 @@
+import { Body, BodyProps } from "./body.cjs";

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

@@ -0,0 +1 @@
+import { Body, BodyProps } from "./body.mjs";

package/dist/components/body/margin-properties.cjs

@@ -0,0 +1,30 @@
+//#region src/components/body/margin-properties.ts
+const marginProperties = [
+	"margin",
+	"marginTop",
+	"marginBottom",
+	"marginRight",
+	"marginLeft",
+	"marginInline",
+	"marginBlock",
+	"marginBlockStart",
+	"marginBlockEnd",
+	"marginInlineStart",
+	"marginInlineEnd"
+];
+const paddingProperties = [
+	"padding",
+	"paddingTop",
+	"paddingBottom",
+	"paddingRight",
+	"paddingLeft",
+	"paddingInline",
+	"paddingBlock",
+	"paddingBlockStart",
+	"paddingBlockEnd",
+	"paddingInlineStart",
+	"paddingInlineEnd"
+];
+//#endregion
+exports.marginProperties = marginProperties;
+exports.paddingProperties = paddingProperties;

package/dist/components/body/margin-properties.mjs

@@ -0,0 +1,29 @@
+//#region src/components/body/margin-properties.ts
+const marginProperties = [
+	"margin",
+	"marginTop",
+	"marginBottom",
+	"marginRight",
+	"marginLeft",
+	"marginInline",
+	"marginBlock",
+	"marginBlockStart",
+	"marginBlockEnd",
+	"marginInlineStart",
+	"marginInlineEnd"
+];
+const paddingProperties = [
+	"padding",
+	"paddingTop",
+	"paddingBottom",
+	"paddingRight",
+	"paddingLeft",
+	"paddingInline",
+	"paddingBlock",
+	"paddingBlockStart",
+	"paddingBlockEnd",
+	"paddingInlineStart",
+	"paddingInlineEnd"
+];
+//#endregion
+export { marginProperties, paddingProperties };

package/dist/components/button/button.cjs

@@ -0,0 +1,64 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../element-marker.cjs");
+const require_parse_padding = require("./utils/parse-padding.cjs");
+const require_px_to_pt = require("./utils/px-to-pt.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/button/button.tsx
+const maxFontWidth = 5;
+/**
+* Computes a msoFontWidth \<= 5 and a count of space characters that,
+* when applied, end up being as close to `expectedWidth` as possible.
+*/
+function computeFontWidthAndSpaceCount(expectedWidth) {
+	if (expectedWidth === 0) return [0, 0];
+	let smallestSpaceCount = 0;
+	const computeRequiredFontWidth = () => {
+		if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
+		return Number.POSITIVE_INFINITY;
+	};
+	while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
+	return [computeRequiredFontWidth(), smallestSpaceCount];
+}
+const Button = react.forwardRef(({ children, style, target = "_blank", ...props }, ref) => {
+	const { paddingTop, paddingRight, paddingBottom, paddingLeft } = require_parse_padding.parsePadding(style ?? {});
+	const textRaise = require_px_to_pt.pxToPt((paddingTop ?? 0) + (paddingBottom ?? 0));
+	const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
+	const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		...props,
+		ref,
+		style: {
+			lineHeight: "100%",
+			textDecoration: "none",
+			display: "inline-block",
+			maxWidth: "100%",
+			msoPaddingAlt: "0px",
+			...style,
+			paddingTop,
+			paddingRight,
+			paddingBottom,
+			paddingLeft
+		},
+		target,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}px" hidden>${"&#8202;".repeat(plSpaceCount)}</i><![endif]-->` } }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					maxWidth: "100%",
+					display: "inline-block",
+					lineHeight: "120%",
+					msoPaddingAlt: "0px",
+					msoTextRaise: require_px_to_pt.pxToPt(paddingBottom)
+				},
+				children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(prSpaceCount)}&#8203;</i><![endif]-->` } })
+		]
+	});
+});
+Button.displayName = "Button";
+require_element_marker.markAsElement(Button);
+//#endregion
+exports.Button = Button;

package/dist/components/button/button.d.cts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+
+//#region src/components/button/button.d.ts
+type ButtonProps = Readonly<React$1.ComponentPropsWithoutRef<'a'>>;
+declare module 'react' {
+  interface CSSProperties {
+    msoPaddingAlt?: string | number | undefined;
+    msoTextRaise?: string | number | undefined;
+  }
+}
+declare const Button: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React$1.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Button, ButtonProps };

package/dist/components/button/button.d.mts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+
+//#region src/components/button/button.d.ts
+type ButtonProps = Readonly<React$1.ComponentPropsWithoutRef<'a'>>;
+declare module 'react' {
+  interface CSSProperties {
+    msoPaddingAlt?: string | number | undefined;
+    msoTextRaise?: string | number | undefined;
+  }
+}
+declare const Button: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">> & React$1.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Button, ButtonProps };

package/dist/components/button/button.mjs

@@ -0,0 +1,62 @@
+import { markAsElement } from "../element-marker.mjs";
+import { parsePadding } from "./utils/parse-padding.mjs";
+import { pxToPt } from "./utils/px-to-pt.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/button/button.tsx
+const maxFontWidth = 5;
+/**
+* Computes a msoFontWidth \<= 5 and a count of space characters that,
+* when applied, end up being as close to `expectedWidth` as possible.
+*/
+function computeFontWidthAndSpaceCount(expectedWidth) {
+	if (expectedWidth === 0) return [0, 0];
+	let smallestSpaceCount = 0;
+	const computeRequiredFontWidth = () => {
+		if (smallestSpaceCount > 0) return expectedWidth / smallestSpaceCount / 2;
+		return Number.POSITIVE_INFINITY;
+	};
+	while (computeRequiredFontWidth() > maxFontWidth) smallestSpaceCount++;
+	return [computeRequiredFontWidth(), smallestSpaceCount];
+}
+const Button = React$1.forwardRef(({ children, style, target = "_blank", ...props }, ref) => {
+	const { paddingTop, paddingRight, paddingBottom, paddingLeft } = parsePadding(style ?? {});
+	const textRaise = pxToPt((paddingTop ?? 0) + (paddingBottom ?? 0));
+	const [plFontWidth, plSpaceCount] = computeFontWidthAndSpaceCount(paddingLeft ?? 0);
+	const [prFontWidth, prSpaceCount] = computeFontWidthAndSpaceCount(paddingRight ?? 0);
+	return /* @__PURE__ */ jsxs("a", {
+		...props,
+		ref,
+		style: {
+			lineHeight: "100%",
+			textDecoration: "none",
+			display: "inline-block",
+			maxWidth: "100%",
+			msoPaddingAlt: "0px",
+			...style,
+			paddingTop,
+			paddingRight,
+			paddingBottom,
+			paddingLeft
+		},
+		target,
+		children: [
+			/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${plFontWidth * 100}%;mso-text-raise:${textRaise}px" hidden>${"&#8202;".repeat(plSpaceCount)}</i><![endif]-->` } }),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					maxWidth: "100%",
+					display: "inline-block",
+					lineHeight: "120%",
+					msoPaddingAlt: "0px",
+					msoTextRaise: pxToPt(paddingBottom)
+				},
+				children
+			}),
+			/* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: `<!--[if mso]><i style="mso-font-width:${prFontWidth * 100}%" hidden>${"&#8202;".repeat(prSpaceCount)}&#8203;</i><![endif]-->` } })
+		]
+	});
+});
+Button.displayName = "Button";
+markAsElement(Button);
+//#endregion
+export { Button };

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

@@ -0,0 +1 @@
+import { Button, ButtonProps } from "./button.cjs";

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

@@ -0,0 +1 @@
+import { Button, ButtonProps } from "./button.mjs";

package/dist/components/button/utils/parse-padding.cjs

@@ -0,0 +1,90 @@
+//#region src/components/button/utils/parse-padding.ts
+/**
+* converts padding value to `px` equivalent.
+* @example "1em" =\> 16
+*/
+function convertToPx(value) {
+	let px = 0;
+	if (!value) return px;
+	if (typeof value === "number") return value;
+	const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+	if (matches && matches.length === 3) {
+		const numValue = Number.parseFloat(matches[1]);
+		switch (matches[2]) {
+			case "px": return numValue;
+			case "em":
+			case "rem":
+				px = numValue * 16;
+				return px;
+			case "%":
+				px = numValue / 100 * 600;
+				return px;
+			default: return numValue;
+		}
+	}
+	return 0;
+}
+function parsePaddingValue(value) {
+	if (typeof value === "number") return {
+		paddingTop: value,
+		paddingBottom: value,
+		paddingLeft: value,
+		paddingRight: value
+	};
+	if (typeof value === "string") {
+		const values = value.toString().trim().split(/\s+/);
+		if (values.length === 1) return {
+			paddingTop: values[0],
+			paddingBottom: values[0],
+			paddingLeft: values[0],
+			paddingRight: values[0]
+		};
+		if (values.length === 2) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[0],
+			paddingLeft: values[1]
+		};
+		if (values.length === 3) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[1]
+		};
+		if (values.length === 4) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[3]
+		};
+	}
+	return {
+		paddingTop: void 0,
+		paddingBottom: void 0,
+		paddingLeft: void 0,
+		paddingRight: void 0
+	};
+}
+/**
+* Parses all the values out of a padding string to get the value for all padding props in `px`
+* @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
+*/
+function parsePadding(properties) {
+	let paddingTop;
+	let paddingRight;
+	let paddingBottom;
+	let paddingLeft;
+	for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
+	else if (key === "paddingTop") paddingTop = value;
+	else if (key === "paddingRight") paddingRight = value;
+	else if (key === "paddingBottom") paddingBottom = value;
+	else if (key === "paddingLeft") paddingLeft = value;
+	return {
+		paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
+		paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
+		paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
+		paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
+	};
+}
+//#endregion
+exports.parsePadding = parsePadding;

package/dist/components/button/utils/parse-padding.mjs

@@ -0,0 +1,90 @@
+//#region src/components/button/utils/parse-padding.ts
+/**
+* converts padding value to `px` equivalent.
+* @example "1em" =\> 16
+*/
+function convertToPx(value) {
+	let px = 0;
+	if (!value) return px;
+	if (typeof value === "number") return value;
+	const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+	if (matches && matches.length === 3) {
+		const numValue = Number.parseFloat(matches[1]);
+		switch (matches[2]) {
+			case "px": return numValue;
+			case "em":
+			case "rem":
+				px = numValue * 16;
+				return px;
+			case "%":
+				px = numValue / 100 * 600;
+				return px;
+			default: return numValue;
+		}
+	}
+	return 0;
+}
+function parsePaddingValue(value) {
+	if (typeof value === "number") return {
+		paddingTop: value,
+		paddingBottom: value,
+		paddingLeft: value,
+		paddingRight: value
+	};
+	if (typeof value === "string") {
+		const values = value.toString().trim().split(/\s+/);
+		if (values.length === 1) return {
+			paddingTop: values[0],
+			paddingBottom: values[0],
+			paddingLeft: values[0],
+			paddingRight: values[0]
+		};
+		if (values.length === 2) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[0],
+			paddingLeft: values[1]
+		};
+		if (values.length === 3) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[1]
+		};
+		if (values.length === 4) return {
+			paddingTop: values[0],
+			paddingRight: values[1],
+			paddingBottom: values[2],
+			paddingLeft: values[3]
+		};
+	}
+	return {
+		paddingTop: void 0,
+		paddingBottom: void 0,
+		paddingLeft: void 0,
+		paddingRight: void 0
+	};
+}
+/**
+* Parses all the values out of a padding string to get the value for all padding props in `px`
+* @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
+*/
+function parsePadding(properties) {
+	let paddingTop;
+	let paddingRight;
+	let paddingBottom;
+	let paddingLeft;
+	for (const [key, value] of Object.entries(properties)) if (key === "padding") ({paddingTop, paddingBottom, paddingLeft, paddingRight} = parsePaddingValue(value));
+	else if (key === "paddingTop") paddingTop = value;
+	else if (key === "paddingRight") paddingRight = value;
+	else if (key === "paddingBottom") paddingBottom = value;
+	else if (key === "paddingLeft") paddingLeft = value;
+	return {
+		paddingTop: paddingTop ? convertToPx(paddingTop) : void 0,
+		paddingRight: paddingRight ? convertToPx(paddingRight) : void 0,
+		paddingBottom: paddingBottom ? convertToPx(paddingBottom) : void 0,
+		paddingLeft: paddingLeft ? convertToPx(paddingLeft) : void 0
+	};
+}
+//#endregion
+export { parsePadding };

package/dist/components/button/utils/px-to-pt.cjs

@@ -0,0 +1,4 @@
+//#region src/components/button/utils/px-to-pt.ts
+const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
+//#endregion
+exports.pxToPt = pxToPt;

package/dist/components/button/utils/px-to-pt.mjs

@@ -0,0 +1,4 @@
+//#region src/components/button/utils/px-to-pt.ts
+const pxToPt = (px) => typeof px === "number" && !Number.isNaN(Number(px)) ? px * 3 / 4 : void 0;
+//#endregion
+export { pxToPt };