@drawbridge/components 0.0.52 → 0.0.55

package/dist/advertisement.js

@@ -41,7 +41,7 @@ var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
 var import_cdn = require("@drawbridge/shopify/cdn");
 var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
 
-// components/input-group.js
+// components/input-group-error.js
 var import_react = require("react");
 
 // components/icons/warning.js
@@ -70,8 +70,86 @@ var Warning = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
 );
 var warning_default = Warning;
 
-// components/input-group.js
+// components/input-group-error.js
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var InputGroupError = ({
+  className,
+  error,
+  label,
+  message,
+  style = {}
+}) => {
+  var _a, _b, _c, _d;
+  if (!(error || message)) {
+    return null;
+  }
+  const classes = [
+    "flex items-center justify-start space-x-2 py-1 rounded text-sm"
+  ];
+  if (error) {
+    classes.push("px-1.5");
+  }
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "p",
+    {
+      ...{
+        className: classes.join(" "),
+        ...error && {
+          style: {
+            backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
+            color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
+          }
+        }
+      },
+      children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            warning_default,
+            {
+              ...{
+                className: "w-4 h-4",
+                "aria-hidden": true
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "span",
+            {
+              ...{
+                className: "text-[0px] opacity-0 w-0 h-0 absolute"
+              },
+              children: [
+                label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+                  label,
+                  ": "
+                ] }) : null,
+                error
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "span",
+          {
+            ...{
+              ...error && {
+                "aria-hidden": true
+              }
+            },
+            children: error || message
+          }
+        )
+      ]
+    }
+  );
+};
+var input_group_error_default = InputGroupError;
+
+// components/input-group.js
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputGroup = ({
   className,
   error,
@@ -81,7 +159,6 @@ var InputGroup = ({
   style = {},
   ...rest
 }) => {
-  var _a, _b, _c, _d;
   const classes = [
     "input-group"
   ];
@@ -91,7 +168,7 @@ var InputGroup = ({
   if (error) {
     classes.push("error");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       ...{
@@ -102,14 +179,14 @@ var InputGroup = ({
         }
       },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
           {
             ...{
               className: "space-y-2"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "span",
                 {
                   ...{
@@ -122,55 +199,15 @@ var InputGroup = ({
             ]
           }
         ) : input,
-        (error || message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "p",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          input_group_error_default,
           {
             ...{
-              className: "flex items-center justify-start space-x-2 py-1 rounded text-sm " + (error && "px-1.5"),
-              ...error && {
-                style: {
-                  backgroundColor: (((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) || "rgb( 0, 0, 0 )").replace(")", ",.1)"),
-                  color: ((_d = (_c = style == null ? void 0 : style.text) == null ? void 0 : _c.color) == null ? void 0 : _d.rgb) || "rgb( 0, 0, 0 )"
-                }
-              }
-            },
-            children: [
-              error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  warning_default,
-                  {
-                    ...{
-                      className: "w-4 h-4",
-                      "aria-hidden": true
-                    }
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                  "span",
-                  {
-                    ...{
-                      className: "text-[0px] opacity-0 w-0 h-0 absolute"
-                    },
-                    children: [
-                      label,
-                      ": ",
-                      error
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "span",
-                {
-                  ...{
-                    ...error && {
-                      "aria-hidden": true
-                    }
-                  },
-                  children: error || message
-                }
-              )
-            ]
+              error,
+              label,
+              message,
+              style
+            }
           }
         )
       ]
@@ -183,8 +220,8 @@ var input_group_default = InputGroup;
 var import_react2 = require("react");
 
 // components/icons/chevron-down.js
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "svg",
   {
     ...{
@@ -194,7 +231,7 @@ var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       viewBox: "0 0 24 24",
       ...props
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "path",
       {
         ...{
@@ -239,7 +276,7 @@ var inputStyle = (style) => {
 };
 
 // components/input-select.js
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var InputSelect = ({
   onChange,
   options = [],
@@ -260,14 +297,14 @@ var InputSelect = ({
       window.removeEventListener("mousedown", click);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       ...{
         className: "relative"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "select",
           {
             ...{
@@ -278,7 +315,7 @@ var InputSelect = ({
               value
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "option",
                 {
                   ...{
@@ -289,7 +326,7 @@ var InputSelect = ({
                   children: "Select"
                 }
               ),
-              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              options.map(({ label, option, value: optValue }, key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "option",
                 {
                   ...{
@@ -302,14 +339,14 @@ var InputSelect = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             ...{
               "aria-hidden": true,
               className: "h-full flex items-center absolute inset-y-0 right-0 pointer-events-none px-2.5"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               chevron_down_default,
               {
                 ...{
@@ -327,7 +364,7 @@ var input_select_default = InputSelect;
 
 // components/wrapper-gradient.js
 var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var WrapperGradientContext = (0, import_react3.createContext)(null);
 var WrapperGradient = ({
   children,
@@ -341,9 +378,9 @@ var WrapperGradient = ({
   const showX = horizontal === true || horizontal === "both";
   const showY = horizontal === false || horizontal === "both";
   const overflowClass = horizontal === "both" ? "overflow-scroll" : horizontal ? "overflow-x-scroll overflow-y-visible" : "overflow-y-scroll overflow-x-visible";
-  const overscrollClass = horizontal === "both" ? "overscroll-none" : horizontal ? "overscroll-x-none overscroll-y-auto" : "overscroll-y-none overscroll-x-auto";
+  const overscrollClass = horizontal ? "overscroll-x-none" : "";
   const themed = Boolean(color);
-  const gradientDefaults = "absolute z-[2] " + (themed ? "pointer-events-none " : "") + "transition-all duration-[100ms] ";
+  const gradientDefaults = "absolute z-[2] pointer-events-none transition-all duration-[100ms] ";
   const classes = {
     container: [
       themed ? "relative" : "w-full relative",
@@ -450,14 +487,14 @@ var WrapperGradient = ({
     }),
     [scroll.atBottom, scroll.atRight]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ...{
         className: classes.container.join(" ")
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(WrapperGradientContext.Provider, { value: contextValue, children: [
-        showY && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(WrapperGradientContext.Provider, { value: contextValue, children: [
+        showY && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ...{
@@ -473,7 +510,7 @@ var WrapperGradient = ({
             }
           }
         ),
-        showX && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        showX && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ...{
@@ -486,7 +523,7 @@ var WrapperGradient = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ...{
@@ -496,7 +533,7 @@ var WrapperGradient = ({
             children
           }
         ),
-        showY && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        showY && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ...{
@@ -509,7 +546,7 @@ var WrapperGradient = ({
             }
           }
         ),
-        showX && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        showX && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ...{
@@ -529,8 +566,8 @@ var WrapperGradient = ({
 var wrapper_gradient_default = WrapperGradient;
 
 // components/icons/loader.js
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
   "svg",
   {
     ...{
@@ -542,7 +579,7 @@ var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime
       ...props
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "circle",
         {
           ...{
@@ -555,7 +592,7 @@ var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "path",
         {
           ...{
@@ -571,8 +608,8 @@ var Loader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime
 var loader_default = Loader;
 
 // components/product.js
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
   "img",
   {
     ...{
@@ -586,6 +623,7 @@ var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, impor
 var Product = ({
   action = null,
   addToCart = true,
+  buttonFontSize,
   disabled = false,
   errors = {},
   header,
@@ -600,7 +638,7 @@ var Product = ({
   style = {},
   variant
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const resolved = {
     ...style,
     background: {
@@ -612,6 +650,7 @@ var Product = ({
       color: ((_b = style == null ? void 0 : style.text) == null ? void 0 : _b.color) || { hex: "#000000", rgb: "rgb( 0, 0, 0 )" }
     }
   };
+  const imageRadius = ((_c = resolved == null ? void 0 : resolved.image) == null ? void 0 : _c.radius) != null ? resolved.image.radius + "px" : "12px";
   const available = (0, import_react4.useMemo)(
     () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
     [product]
@@ -669,7 +708,7 @@ var Product = ({
     }
     ;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       ...{
@@ -681,7 +720,7 @@ var Product = ({
       },
       children: [
         header,
-        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             ...{
@@ -691,26 +730,29 @@ var Product = ({
               }
             },
             children: [
-              images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 wrapper_gradient_default,
                 {
                   ...{
                     classNameScroll: "flex flex-col w-12 h-48 space-y-3",
                     color: resolved.background.color.rgb
                   },
-                  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "button",
                     {
                       ...{
                         // Active state is conveyed purely by a dimmed image (no border).
-                        className: "relative w-12 h-12 overflow-hidden rounded-xl shrink-0",
+                        className: "relative w-12 h-12 overflow-hidden shrink-0",
                         onClick: () => {
                           setActiveImage(key);
                           emblaApi == null ? void 0 : emblaApi.scrollTo(key);
                         },
+                        style: {
+                          borderRadius: imageRadius
+                        },
                         type: "button"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         ImageComponent,
                         {
                           ...{
@@ -734,7 +776,7 @@ var Product = ({
                   ))
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   ...{
@@ -742,14 +784,15 @@ var Product = ({
                     // those sizes live only in this package's dist, and a consuming
                     // app's Tailwind scan of node_modules can lag and drop them,
                     // silently collapsing the carousel. Inline styles are immune.
-                    className: "overflow-hidden rounded-3xl m-auto",
+                    className: "overflow-hidden m-auto",
                     ref: emblaRef,
                     style: {
+                      borderRadius: imageRadius,
                       width: "12rem",
                       height: "12rem"
                     }
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "div",
                     {
                       ...{
@@ -758,7 +801,7 @@ var Product = ({
                           height: "100%"
                         }
                       },
-                      children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      children: images.map(({ src }, key) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "div",
                         {
                           ...{
@@ -768,7 +811,7 @@ var Product = ({
                               height: "100%"
                             }
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                             ImageComponent,
                             {
                               ...{
@@ -791,51 +834,51 @@ var Product = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             ...{
               className: "text-center space-y-2"
             },
             children: [
-              (product == null ? void 0 : product.title) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              (product == null ? void 0 : product.title) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "h2",
                 {
                   ...{
                     className: "max-w-80 mx-auto",
                     style: {
-                      fontFamily: ((_c = style == null ? void 0 : style.heading) == null ? void 0 : _c.family) || (style == null ? void 0 : style.fontFamily) || "Roboto Flex",
-                      fontWeight: ((_d = style == null ? void 0 : style.heading) == null ? void 0 : _d.weight) || (style == null ? void 0 : style.fontWeight),
-                      textTransform: ((_e = style == null ? void 0 : style.heading) == null ? void 0 : _e.transform) || (style == null ? void 0 : style.textTransform)
+                      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)
                     }
                   },
                   children: product == null ? void 0 : product.title
                 }
               ),
-              !available.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Unavailable" }) : (selectedVariant == null ? void 0 : selectedVariant.price) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: (0, import_drawbridge_utils.formatCurrency)({
+              !available.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Unavailable" }) : (selectedVariant == null ? void 0 : selectedVariant.price) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: (0, import_drawbridge_utils.formatCurrency)({
                 code: selectedVariant.currency,
                 display: "parts",
                 value: selectedVariant.price
               }) }),
-              (product == null ? void 0 : product.description) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              (product == null ? void 0 : product.description) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 wrapper_gradient_default,
                 {
                   ...{
                     classNameScroll: "max-h-[4.5em]",
                     color: resolved.background.color.rgb
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: product.description })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: product.description })
                 }
               )
             ]
           }
         ),
-        available.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        available.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           input_group_default,
           {
             ...{
               error: errors == null ? void 0 : errors.variant,
-              input: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              input: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 input_select_default,
                 {
                   ...{
@@ -854,29 +897,34 @@ var Product = ({
             }
           }
         ),
-        available.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        available.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           input_group_default,
           {
             ...{
               error: errors == null ? void 0 : errors.root,
-              input: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              input: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "div",
                 {
                   ...{
                     className: addToCart ? "grid grid-cols-2 gap-5" : ""
                   },
                   children: [
-                    addToCart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    addToCart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "button",
                       {
                         ...{
                           className: "button justify-center border py-3 px-4 rounded",
                           disabled: disabled || Boolean(action),
                           onClick: onAdd,
-                          style: inputStyle(resolved),
+                          style: {
+                            ...inputStyle(resolved),
+                            ...buttonFontSize && {
+                              fontSize: buttonFontSize
+                            }
+                          },
                           type: "button"
                         },
-                        children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        children: action === "add" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           loader_default,
                           {
                             ...{
@@ -886,17 +934,22 @@ var Product = ({
                         ) : "Add to cart"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "button",
                       {
                         ...{
                           className: "button justify-center py-3 px-4 rounded" + (addToCart ? "" : " w-full"),
                           disabled: disabled || Boolean(action),
                           onClick: onBuy,
-                          style: buttonStyle(resolved),
+                          style: {
+                            ...buttonStyle(resolved),
+                            ...buttonFontSize && {
+                              fontSize: buttonFontSize
+                            }
+                          },
                           type: "button"
                         },
-                        children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        children: action === "buy" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           loader_default,
                           {
                             ...{
@@ -920,8 +973,8 @@ var Product = ({
 var product_default = Product;
 
 // components/advertisement.js
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var DefaultImage2 = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DefaultImage2 = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "img",
   {
     ...{
@@ -931,7 +984,7 @@ var DefaultImage2 = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_
     }
   }
 );
-var DefaultVideo = ({ className, hls, mp4, poster }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var DefaultVideo = ({ className, hls, mp4, poster }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   "video",
   {
     ...{
@@ -968,14 +1021,15 @@ var Advertisement = ({
   variant,
   VideoComponent = DefaultVideo
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   if (product) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       product_default,
       {
         ...{
           action,
           addToCart: false,
+          buttonFontSize: "16px",
           disabled: preview || disabled,
           errors,
           header,
@@ -1003,7 +1057,8 @@ var Advertisement = ({
     }
   };
   const isVideo = (_c = file == null ? void 0 : file.mimetype) == null ? void 0 : _c.includes("video");
-  const card = (assetNode) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  const imageRadius = ((_d = resolved == null ? void 0 : resolved.image) == null ? void 0 : _d.radius) != null ? resolved.image.radius + "px" : "12px";
+  const card = (assetNode) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ...{
@@ -1014,35 +1069,38 @@ var Advertisement = ({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             ...{
-              className: "block relative aspect-square rounded overflow-hidden" + ((file == null ? void 0 : file.sizes) ? "" : " bg-gray-light")
+              className: "block relative aspect-square overflow-hidden" + ((file == null ? void 0 : file.sizes) ? "" : " bg-gray-light"),
+              style: {
+                borderRadius: imageRadius
+              }
             },
             children: assetNode
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "span",
           {
             ...{
-              className: "flex flex-col items-center justify-between gap-x-4 text-center text-sm rounded",
+              className: "flex flex-col items-center justify-between gap-x-6 text-center text-sm rounded",
               style: {
                 ...fonts == null ? void 0 : fonts.body,
                 color: resolved.text.color.hex,
-                gap: "10px",
-                marginTop: "10px"
+                gap: "15px",
+                marginTop: "15px"
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   ...{
                     className: "flex-1 min-w-0 space-y-2"
                   },
-                  children: title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  children: title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "p",
                     {
                       ...{
@@ -1055,7 +1113,7 @@ var Advertisement = ({
                   )
                 }
               ),
-              button && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              button && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   ...{
@@ -1063,7 +1121,10 @@ var Advertisement = ({
                     disabled: !preview && !url,
                     onClick: preview ? () => {
                     } : onClick,
-                    style: buttonStyle(resolved),
+                    style: {
+                      ...buttonStyle(resolved),
+                      fontSize: "16px"
+                    },
                     type: "button"
                   },
                   children: button
@@ -1077,20 +1138,20 @@ var Advertisement = ({
   );
   if (isVideo) {
     return card(
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           ...{
             className: "relative h-full w-full aspect-[9/16]"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             VideoComponent,
             {
               ...{
                 className: "w-full h-full",
                 hls: (0, import_cdn2.cdnSrc)(file, "hls", file == null ? void 0 : file.updatedAt),
                 mp4: (0, import_cdn2.cdnSrc)(file, "original", file == null ? void 0 : file.updatedAt),
-                poster: (0, import_cdn2.cdnSrc)((_d = file == null ? void 0 : file.frames) == null ? void 0 : _d[file == null ? void 0 : file.poster], "500x500", file == null ? void 0 : file.updatedAt) || (0, import_cdn2.cdnSrc)((_e = file == null ? void 0 : file.frames) == null ? void 0 : _e[file == null ? void 0 : file.poster], "1080x1920", file == null ? void 0 : file.updatedAt),
+                poster: (0, import_cdn2.cdnSrc)((_e = file == null ? void 0 : file.frames) == null ? void 0 : _e[file == null ? void 0 : file.poster], "500x500", file == null ? void 0 : file.updatedAt) || (0, import_cdn2.cdnSrc)((_f = file == null ? void 0 : file.frames) == null ? void 0 : _f[file == null ? void 0 : file.poster], "1080x1920", file == null ? void 0 : file.updatedAt),
                 style: resolved
               }
             }
@@ -1100,7 +1161,7 @@ var Advertisement = ({
     );
   }
   return card(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ImageComponent,
       {
         ...{