@drawbridge/components 0.0.68 → 0.0.70

package/dist/advertisement.js

@@ -264,6 +264,17 @@ var textColor = (style) => {
   var _a, _b;
   return ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || BLACK;
 };
+var DEFAULT_FAMILY = "Roboto Flex";
+var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
+var toFontWeight = (variant) => {
+  var _a;
+  if (!variant) return void 0;
+  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (variant.includes("regular")) return "normal";
+  return variant;
+};
+var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
 var buttonStyle = (style) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   return {
@@ -273,6 +284,15 @@ var buttonStyle = (style) => {
     color: ((_j = (_i = (_h = style == null ? void 0 : style.button) == null ? void 0 : _h.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb) || bgColor(style)
   };
 };
+var headerStyle = (style) => {
+  var _a, _b, _c, _d;
+  return {
+    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
+    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
+    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
+    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
+  };
+};
 var inputStyle = (style) => {
   var _a;
   return {
@@ -646,7 +666,7 @@ var Product = ({
   style = {},
   variant
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c;
   const resolved = {
     ...style,
     background: {
@@ -854,11 +874,7 @@ var Product = ({
                 {
                   ...{
                     className: "max-w-80 mx-auto",
-                    style: {
-                      fontFamily: ((_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.family) || (style == null ? void 0 : style.fontFamily) || "Roboto Flex",
-                      fontWeight: ((_e = style == null ? void 0 : style.heading) == null ? void 0 : _e.weight) || (style == null ? void 0 : style.fontWeight),
-                      textTransform: ((_f = style == null ? void 0 : style.heading) == null ? void 0 : _f.transform) || (style == null ? void 0 : style.textTransform)
-                    }
+                    style: headerStyle(style)
                   },
                   children: product == null ? void 0 : product.title
                 }

package/dist/advertisement.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   product_default
-} from "./chunk-MG35TMY2.mjs";
+} from "./chunk-QY27O35B.mjs";
 import "./chunk-PT7UR6AO.mjs";
-import "./chunk-3SXAH7B7.mjs";
+import "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
 import "./chunk-IIP5OKPN.mjs";
@@ -11,7 +11,7 @@ import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
 import {
   buttonStyle
-} from "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-6F23WKP2.mjs";
 
 // components/advertisement.js
 import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";

package/dist/{chunk-FJ7PKMAC.mjs → chunk-6F23WKP2.mjs}

@@ -9,6 +9,17 @@ var textColor = (style) => {
   var _a, _b;
   return ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || BLACK;
 };
+var DEFAULT_FAMILY = "Roboto Flex";
+var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
+var toFontWeight = (variant) => {
+  var _a;
+  if (!variant) return void 0;
+  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (variant.includes("regular")) return "normal";
+  return variant;
+};
+var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
 var backgroundStyle = (style) => ({
   backgroundColor: bgColor(style),
   color: textColor(style)
@@ -30,11 +41,12 @@ var closeStyle = (style) => ({
   color: bgColor(style)
 });
 var headerStyle = (style) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   return {
-    fontFamily: (_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family,
-    fontWeight: (_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight,
-    textTransform: (_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.transform
+    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
+    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
+    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
+    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
   };
 };
 var inputStyle = (style) => {
@@ -73,6 +85,10 @@ var textStyle = (style) => ({
 });
 
 export {
+  FONT_FALLBACK,
+  toFontFamily,
+  toFontWeight,
+  toFontStyle,
   backgroundStyle,
   borderStyle,
   buttonStyle,

package/dist/{chunk-3SXAH7B7.mjs → chunk-7GRIGQDC.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-FYA7EAMR.mjs";
 import {
   inputStyle
-} from "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-6F23WKP2.mjs";
 
 // components/input-select.js
 import { useEffect, useState } from "react";

package/dist/{chunk-MG35TMY2.mjs → chunk-QY27O35B.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-PT7UR6AO.mjs";
 import {
   input_select_default
-} from "./chunk-3SXAH7B7.mjs";
+} from "./chunk-7GRIGQDC.mjs";
 import {
   loader_default
 } from "./chunk-2ZYGRSSA.mjs";
@@ -12,8 +12,9 @@ import {
 } from "./chunk-IIP5OKPN.mjs";
 import {
   buttonStyle,
+  headerStyle,
   inputStyle
-} from "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-6F23WKP2.mjs";
 
 // components/product.js
 import { useEffect, useMemo, useState } from "react";
@@ -50,7 +51,7 @@ var Product = ({
   style = {},
   variant
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c;
   const resolved = {
     ...style,
     background: {
@@ -258,11 +259,7 @@ var Product = ({
                 {
                   ...{
                     className: "max-w-80 mx-auto",
-                    style: {
-                      fontFamily: ((_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.family) || (style == null ? void 0 : style.fontFamily) || "Roboto Flex",
-                      fontWeight: ((_e = style == null ? void 0 : style.heading) == null ? void 0 : _e.weight) || (style == null ? void 0 : style.fontWeight),
-                      textTransform: ((_f = style == null ? void 0 : style.heading) == null ? void 0 : _f.transform) || (style == null ? void 0 : style.textTransform)
-                    }
+                    style: headerStyle(style)
                   },
                   children: product == null ? void 0 : product.title
                 }

package/dist/{chunk-B6Y2SNRW.mjs → chunk-Y466XTIK.mjs}

@@ -1,6 +1,6 @@
 import {
   inputStyle
-} from "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-6F23WKP2.mjs";
 
 // components/input-text.js
 import { jsx } from "react/jsx-runtime";

package/dist/input-checkbox.mjs

@@ -3,7 +3,7 @@ import {
 } from "./chunk-GFDZ7ER6.mjs";
 import {
   inputCheckboxStyle
-} from "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-6F23WKP2.mjs";
 
 // components/input-checkbox.js
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/input-name.mjs

@@ -1,12 +1,12 @@
 import {
   input_text_default
-} from "./chunk-B6Y2SNRW.mjs";
+} from "./chunk-Y466XTIK.mjs";
 import {
   input_group_default
 } from "./chunk-IIP5OKPN.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
-import "./chunk-FJ7PKMAC.mjs";
+import "./chunk-6F23WKP2.mjs";
 
 // components/input-name.js
 import { jsx } from "react/jsx-runtime";

package/dist/input-number.js

@@ -19,7 +19,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // components/input-number.js
 var input_number_exports = {};
 __export(input_number_exports, {
-  default: () => input_number_default
+  accepts: () => accepts,
+  default: () => input_number_default,
+  emit: () => emit
 });
 module.exports = __toCommonJS(input_number_exports);
 
@@ -99,6 +101,12 @@ var inputStyle = (style) => {
 // components/input-number.js
 var import_react = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var accepts = (raw, decimal) => (decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/).test(raw);
+var emit = (raw) => {
+  if (raw === "") return null;
+  const numeric = Number(raw);
+  return Number.isNaN(numeric) ? void 0 : numeric;
+};
 var InputNumber = ({
   className,
   inline = false,
@@ -131,11 +139,10 @@ var InputNumber = ({
   );
   const handleChange = (0, import_react.useCallback)(
     ({ target }) => {
-      const pattern = decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
-      if (!pattern.test(target.value)) return;
+      if (!accepts(target.value, decimal)) return;
       setDraft(target.value);
-      const numeric = target.value === "" ? 0 : Number(target.value);
-      if (!Number.isNaN(numeric)) onChange(numeric);
+      const emitted = emit(target.value);
+      if (emitted !== void 0) onChange(emitted);
     },
     [decimal, onChange]
   );
@@ -277,3 +284,8 @@ var InputNumber = ({
   );
 };
 var input_number_default = InputNumber;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  accepts,
+  emit
+});

package/dist/input-number.mjs

@@ -6,11 +6,17 @@ import {
 } from "./chunk-T5QQBFM3.mjs";
 import {
   inputStyle
-} from "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-6F23WKP2.mjs";
 
 // components/input-number.js
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var accepts = (raw, decimal) => (decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/).test(raw);
+var emit = (raw) => {
+  if (raw === "") return null;
+  const numeric = Number(raw);
+  return Number.isNaN(numeric) ? void 0 : numeric;
+};
 var InputNumber = ({
   className,
   inline = false,
@@ -43,11 +49,10 @@ var InputNumber = ({
   );
   const handleChange = useCallback(
     ({ target }) => {
-      const pattern = decimal ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
-      if (!pattern.test(target.value)) return;
+      if (!accepts(target.value, decimal)) return;
       setDraft(target.value);
-      const numeric = target.value === "" ? 0 : Number(target.value);
-      if (!Number.isNaN(numeric)) onChange(numeric);
+      const emitted = emit(target.value);
+      if (emitted !== void 0) onChange(emitted);
     },
     [decimal, onChange]
   );
@@ -190,5 +195,7 @@ var InputNumber = ({
 };
 var input_number_default = InputNumber;
 export {
-  input_number_default as default
+  accepts,
+  input_number_default as default,
+  emit
 };

package/dist/input-phone.mjs

@@ -4,7 +4,7 @@ import {
 } from "./chunk-FYA7EAMR.mjs";
 import {
   inputPhoneStyle
-} from "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-6F23WKP2.mjs";
 
 // components/input-phone.js
 import { useEffect, useState } from "react";

package/dist/input-select.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   input_select_default
-} from "./chunk-3SXAH7B7.mjs";
+} from "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
-import "./chunk-FJ7PKMAC.mjs";
+import "./chunk-6F23WKP2.mjs";
 export {
   input_select_default as default
 };

package/dist/input-text.mjs

@@ -1,7 +1,7 @@
 import {
   input_text_default
-} from "./chunk-B6Y2SNRW.mjs";
-import "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-Y466XTIK.mjs";
+import "./chunk-6F23WKP2.mjs";
 export {
   input_text_default as default
 };

package/dist/input-textarea.mjs

@@ -1,6 +1,6 @@
 import {
   inputStyle
-} from "./chunk-FJ7PKMAC.mjs";
+} from "./chunk-6F23WKP2.mjs";
 
 // components/input-textarea.js
 import { jsx } from "react/jsx-runtime";

package/dist/product.js

@@ -261,6 +261,17 @@ var textColor = (style) => {
   var _a, _b;
   return ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || BLACK;
 };
+var DEFAULT_FAMILY = "Roboto Flex";
+var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
+var toFontWeight = (variant) => {
+  var _a;
+  if (!variant) return void 0;
+  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (variant.includes("regular")) return "normal";
+  return variant;
+};
+var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
 var buttonStyle = (style) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   return {
@@ -270,6 +281,15 @@ var buttonStyle = (style) => {
     color: ((_j = (_i = (_h = style == null ? void 0 : style.button) == null ? void 0 : _h.text) == null ? void 0 : _i.color) == null ? void 0 : _j.rgb) || bgColor(style)
   };
 };
+var headerStyle = (style) => {
+  var _a, _b, _c, _d;
+  return {
+    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
+    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
+    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
+    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
+  };
+};
 var inputStyle = (style) => {
   var _a;
   return {
@@ -643,7 +663,7 @@ var Product = ({
   style = {},
   variant
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c;
   const resolved = {
     ...style,
     background: {
@@ -851,11 +871,7 @@ var Product = ({
                 {
                   ...{
                     className: "max-w-80 mx-auto",
-                    style: {
-                      fontFamily: ((_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.family) || (style == null ? void 0 : style.fontFamily) || "Roboto Flex",
-                      fontWeight: ((_e = style == null ? void 0 : style.heading) == null ? void 0 : _e.weight) || (style == null ? void 0 : style.fontWeight),
-                      textTransform: ((_f = style == null ? void 0 : style.heading) == null ? void 0 : _f.transform) || (style == null ? void 0 : style.textTransform)
-                    }
+                    style: headerStyle(style)
                   },
                   children: product == null ? void 0 : product.title
                 }

package/dist/product.mjs

@@ -1,15 +1,15 @@
 "use client";
 import {
   product_default
-} from "./chunk-MG35TMY2.mjs";
+} from "./chunk-QY27O35B.mjs";
 import "./chunk-PT7UR6AO.mjs";
-import "./chunk-3SXAH7B7.mjs";
+import "./chunk-7GRIGQDC.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
 import "./chunk-IIP5OKPN.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
-import "./chunk-FJ7PKMAC.mjs";
+import "./chunk-6F23WKP2.mjs";
 export {
   product_default as default
 };

package/dist/provider-font.js

@@ -23,19 +23,26 @@ __export(provider_font_exports, {
 });
 module.exports = __toCommonJS(provider_font_exports);
 var import_react = require("react");
+
+// components/styles.js
+var DEFAULT_FAMILY = "Roboto Flex";
+var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
+var toFontWeight = (variant) => {
+  var _a;
+  if (!variant) return void 0;
+  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (variant.includes("regular")) return "normal";
+  return variant;
+};
+var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
+
+// components/provider-font.js
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaults = {
   family: "Roboto Flex",
   transform: "none"
 };
-var FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var toWeight = (value) => {
-  var _a;
-  if (value.includes("italic")) return (_a = value.match(/^\d+/)) == null ? void 0 : _a[0];
-  if (value.includes("regular")) return "normal";
-  return value;
-};
-var toStyle = (value) => value.includes("italic") ? "italic" : void 0;
 var ProviderFont = (0, import_react.memo)(({
   body,
   children,
@@ -52,26 +59,26 @@ var ProviderFont = (0, import_react.memo)(({
       ];
       const fonts2 = {
         body: {
-          fontFamily: '"' + bodyFamily + '", ' + FALLBACK,
+          fontFamily: toFontFamily(bodyFamily),
           textTransform: (body == null ? void 0 : body.transform) || defaults.transform
         },
         heading: {
-          fontFamily: '"' + headingFamily + '", ' + FALLBACK,
+          fontFamily: toFontFamily(headingFamily),
           textTransform: (heading == null ? void 0 : heading.transform) || defaults.transform
         }
       };
       if (body == null ? void 0 : body.weight) {
         url2.push(":" + body.weight);
-        fonts2.body.fontWeight = toWeight(body.weight);
-        fonts2.body.fontStyle = toStyle(body.weight);
+        fonts2.body.fontWeight = toFontWeight(body.weight);
+        fonts2.body.fontStyle = toFontStyle(body.weight);
       }
       if (!same) {
         url2.push("%7C" + headingFamily.replace(/ /g, "+"));
       }
       if (heading == null ? void 0 : heading.weight) {
         url2.push((same ? "," : ":") + heading.weight);
-        fonts2.heading.fontWeight = toWeight(heading.weight);
-        fonts2.heading.fontStyle = toStyle(heading.weight);
+        fonts2.heading.fontWeight = toFontWeight(heading.weight);
+        fonts2.heading.fontStyle = toFontStyle(heading.weight);
       }
       url2.push("&display=swap");
       return { url: url2, fonts: fonts2 };

package/dist/provider-font.mjs

@@ -1,3 +1,9 @@
+import {
+  toFontFamily,
+  toFontStyle,
+  toFontWeight
+} from "./chunk-6F23WKP2.mjs";
+
 // components/provider-font.js
 import { Fragment, memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -5,14 +11,6 @@ var defaults = {
   family: "Roboto Flex",
   transform: "none"
 };
-var FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-var toWeight = (value) => {
-  var _a;
-  if (value.includes("italic")) return (_a = value.match(/^\d+/)) == null ? void 0 : _a[0];
-  if (value.includes("regular")) return "normal";
-  return value;
-};
-var toStyle = (value) => value.includes("italic") ? "italic" : void 0;
 var ProviderFont = memo(({
   body,
   children,
@@ -29,26 +27,26 @@ var ProviderFont = memo(({
       ];
       const fonts2 = {
         body: {
-          fontFamily: '"' + bodyFamily + '", ' + FALLBACK,
+          fontFamily: toFontFamily(bodyFamily),
           textTransform: (body == null ? void 0 : body.transform) || defaults.transform
         },
         heading: {
-          fontFamily: '"' + headingFamily + '", ' + FALLBACK,
+          fontFamily: toFontFamily(headingFamily),
           textTransform: (heading == null ? void 0 : heading.transform) || defaults.transform
         }
       };
       if (body == null ? void 0 : body.weight) {
         url2.push(":" + body.weight);
-        fonts2.body.fontWeight = toWeight(body.weight);
-        fonts2.body.fontStyle = toStyle(body.weight);
+        fonts2.body.fontWeight = toFontWeight(body.weight);
+        fonts2.body.fontStyle = toFontStyle(body.weight);
       }
       if (!same) {
         url2.push("%7C" + headingFamily.replace(/ /g, "+"));
       }
       if (heading == null ? void 0 : heading.weight) {
         url2.push((same ? "," : ":") + heading.weight);
-        fonts2.heading.fontWeight = toWeight(heading.weight);
-        fonts2.heading.fontStyle = toStyle(heading.weight);
+        fonts2.heading.fontWeight = toFontWeight(heading.weight);
+        fonts2.heading.fontStyle = toFontStyle(heading.weight);
       }
       url2.push("&display=swap");
       return { url: url2, fonts: fonts2 };

package/dist/styles.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // components/styles.js
 var styles_exports = {};
 __export(styles_exports, {
+  FONT_FALLBACK: () => FONT_FALLBACK,
   backgroundStyle: () => backgroundStyle,
   borderStyle: () => borderStyle,
   buttonStyle: () => buttonStyle,
@@ -30,7 +31,10 @@ __export(styles_exports, {
   inputStyle: () => inputStyle,
   menuStyle: () => menuStyle,
   selectStyle: () => selectStyle,
-  textStyle: () => textStyle
+  textStyle: () => textStyle,
+  toFontFamily: () => toFontFamily,
+  toFontStyle: () => toFontStyle,
+  toFontWeight: () => toFontWeight
 });
 module.exports = __toCommonJS(styles_exports);
 var WHITE = "rgb( 255, 255, 255 )";
@@ -43,6 +47,17 @@ var textColor = (style) => {
   var _a, _b;
   return ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || BLACK;
 };
+var DEFAULT_FAMILY = "Roboto Flex";
+var FONT_FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var toFontFamily = (family) => '"' + (family || DEFAULT_FAMILY) + '", ' + FONT_FALLBACK;
+var toFontWeight = (variant) => {
+  var _a;
+  if (!variant) return void 0;
+  if (variant.includes("italic")) return (_a = variant.match(/^\d+/)) == null ? void 0 : _a[0];
+  if (variant.includes("regular")) return "normal";
+  return variant;
+};
+var toFontStyle = (variant) => (variant == null ? void 0 : variant.includes("italic")) ? "italic" : void 0;
 var backgroundStyle = (style) => ({
   backgroundColor: bgColor(style),
   color: textColor(style)
@@ -64,11 +79,12 @@ var closeStyle = (style) => ({
   color: bgColor(style)
 });
 var headerStyle = (style) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   return {
-    fontFamily: (_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family,
-    fontWeight: (_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight,
-    textTransform: (_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.transform
+    fontFamily: toFontFamily((_a = style == null ? void 0 : style.heading) == null ? void 0 : _a.family),
+    fontWeight: toFontWeight((_b = style == null ? void 0 : style.heading) == null ? void 0 : _b.weight),
+    fontStyle: toFontStyle((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.weight),
+    textTransform: (_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.transform
   };
 };
 var inputStyle = (style) => {
@@ -107,6 +123,7 @@ var textStyle = (style) => ({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FONT_FALLBACK,
   backgroundStyle,
   borderStyle,
   buttonStyle,
@@ -118,5 +135,8 @@ var textStyle = (style) => ({
   inputStyle,
   menuStyle,
   selectStyle,
-  textStyle
+  textStyle,
+  toFontFamily,
+  toFontStyle,
+  toFontWeight
 });

package/dist/styles.mjs

@@ -1,4 +1,5 @@
 import {
+  FONT_FALLBACK,
   backgroundStyle,
   borderStyle,
   buttonStyle,
@@ -10,9 +11,13 @@ import {
   inputStyle,
   menuStyle,
   selectStyle,
-  textStyle
-} from "./chunk-FJ7PKMAC.mjs";
+  textStyle,
+  toFontFamily,
+  toFontStyle,
+  toFontWeight
+} from "./chunk-6F23WKP2.mjs";
 export {
+  FONT_FALLBACK,
   backgroundStyle,
   borderStyle,
   buttonStyle,
@@ -24,5 +29,8 @@ export {
   inputStyle,
   menuStyle,
   selectStyle,
-  textStyle
+  textStyle,
+  toFontFamily,
+  toFontStyle,
+  toFontWeight
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@drawbridge/components",
-	"version": "0.0.68",
+	"version": "0.0.70",
 	"exports": {
 		"./advertisement": {
 			"types": "./types/advertisement.d.ts",