@drawbridge/components 0.0.53 → 0.0.56

package/dist/advertisement.js

@@ -378,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",
@@ -623,6 +623,7 @@ var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, impor
 var Product = ({
   action = null,
   addToCart = true,
+  buttonFontSize,
   disabled = false,
   errors = {},
   header,
@@ -637,7 +638,7 @@ var Product = ({
   style = {},
   variant
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const resolved = {
     ...style,
     background: {
@@ -649,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]
@@ -740,11 +742,14 @@ var Product = ({
                     {
                       ...{
                         // 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_runtime8.jsx)(
@@ -779,9 +784,10 @@ 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"
                     }
@@ -841,9 +847,9 @@ var Product = ({
                   ...{
                     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
@@ -910,7 +916,12 @@ var Product = ({
                           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_runtime8.jsx)(
@@ -930,7 +941,12 @@ var Product = ({
                           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_runtime8.jsx)(
@@ -1005,7 +1021,7 @@ 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_runtime9.jsx)(
       product_default,
@@ -1013,6 +1029,7 @@ var Advertisement = ({
         ...{
           action,
           addToCart: false,
+          buttonFontSize: "16px",
           disabled: preview || disabled,
           errors,
           header,
@@ -1040,6 +1057,7 @@ var Advertisement = ({
     }
   };
   const isVideo = (_c = file == null ? void 0 : file.mimetype) == null ? void 0 : _c.includes("video");
+  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",
     {
@@ -1055,7 +1073,10 @@ var Advertisement = ({
           "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
           }
@@ -1064,12 +1085,12 @@ var Advertisement = ({
           "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: [
@@ -1100,7 +1121,10 @@ var Advertisement = ({
                     disabled: !preview && !url,
                     onClick: preview ? () => {
                     } : onClick,
-                    style: buttonStyle(resolved),
+                    style: {
+                      ...buttonStyle(resolved),
+                      fontSize: "16px"
+                    },
                     type: "button"
                   },
                   children: button
@@ -1127,7 +1151,7 @@ var Advertisement = ({
                 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
               }
             }

package/dist/advertisement.mjs

@@ -1,11 +1,11 @@
 "use client";
 import {
   product_default
-} from "./chunk-ASHP6LV5.mjs";
+} from "./chunk-7AIAMVTM.mjs";
+import "./chunk-PT7UR6AO.mjs";
 import "./chunk-3SXAH7B7.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-XWELEL6Z.mjs";
 import "./chunk-DNK33H3K.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";
@@ -63,7 +63,7 @@ var Advertisement = ({
   variant,
   VideoComponent = DefaultVideo
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   if (product) {
     return /* @__PURE__ */ jsx(
       product_default,
@@ -71,6 +71,7 @@ var Advertisement = ({
         ...{
           action,
           addToCart: false,
+          buttonFontSize: "16px",
           disabled: preview || disabled,
           errors,
           header,
@@ -98,6 +99,7 @@ var Advertisement = ({
     }
   };
   const isVideo = (_c = file == null ? void 0 : file.mimetype) == null ? void 0 : _c.includes("video");
+  const imageRadius = ((_d = resolved == null ? void 0 : resolved.image) == null ? void 0 : _d.radius) != null ? resolved.image.radius + "px" : "12px";
   const card = (assetNode) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -113,7 +115,10 @@ var Advertisement = ({
           "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
           }
@@ -122,12 +127,12 @@ var Advertisement = ({
           "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: [
@@ -158,7 +163,10 @@ var Advertisement = ({
                     disabled: !preview && !url,
                     onClick: preview ? () => {
                     } : onClick,
-                    style: buttonStyle(resolved),
+                    style: {
+                      ...buttonStyle(resolved),
+                      fontSize: "16px"
+                    },
                     type: "button"
                   },
                   children: button
@@ -185,7 +193,7 @@ var Advertisement = ({
                 className: "w-full h-full",
                 hls: cdnSrc(file, "hls", file == null ? void 0 : file.updatedAt),
                 mp4: cdnSrc(file, "original", file == null ? void 0 : file.updatedAt),
-                poster: 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) || 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: 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) || 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
               }
             }

package/dist/{chunk-ASHP6LV5.mjs → chunk-7AIAMVTM.mjs}

@@ -1,12 +1,12 @@
+import {
+  wrapper_gradient_default
+} from "./chunk-PT7UR6AO.mjs";
 import {
   input_select_default
 } from "./chunk-3SXAH7B7.mjs";
 import {
   loader_default
 } from "./chunk-2ZYGRSSA.mjs";
-import {
-  wrapper_gradient_default
-} from "./chunk-XWELEL6Z.mjs";
 import {
   input_group_default
 } from "./chunk-DNK33H3K.mjs";
@@ -35,6 +35,7 @@ var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ jsx(
 var Product = ({
   action = null,
   addToCart = true,
+  buttonFontSize,
   disabled = false,
   errors = {},
   header,
@@ -49,7 +50,7 @@ var Product = ({
   style = {},
   variant
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const resolved = {
     ...style,
     background: {
@@ -61,6 +62,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 = useMemo(
     () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
     [product]
@@ -152,11 +154,14 @@ var Product = ({
                     {
                       ...{
                         // 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__ */ jsx(
@@ -191,9 +196,10 @@ 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"
                     }
@@ -253,9 +259,9 @@ var Product = ({
                   ...{
                     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
@@ -322,7 +328,12 @@ var Product = ({
                           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__ */ jsx(
@@ -342,7 +353,12 @@ var Product = ({
                           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__ */ jsx(

package/dist/{chunk-XWELEL6Z.mjs → chunk-PT7UR6AO.mjs}

@@ -15,9 +15,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",

package/dist/embla-fade.js

@@ -0,0 +1,41 @@
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// components/embla-fade.js
+var embla_fade_exports = {};
+__export(embla_fade_exports, {
+  default: () => import_embla_carousel_fade.default
+});
+module.exports = __toCommonJS(embla_fade_exports);
+var import_embla_carousel_fade = __toESM(require("embla-carousel-fade"));
+__reExport(embla_fade_exports, require("embla-carousel-fade"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("embla-carousel-fade")
+});

package/dist/embla-fade.mjs

@@ -0,0 +1,6 @@
+// components/embla-fade.js
+import { default as default2 } from "embla-carousel-fade";
+export * from "embla-carousel-fade";
+export {
+  default2 as default
+};

package/dist/input-phone.js

@@ -38,6 +38,32 @@ var import_react = require("react");
 var import_input = __toESM(require("react-phone-number-input/input"));
 var import_phone = require("@drawbridge/drawbridge-utils/phone");
 
+// components/icons/chevron-down.js
+var import_jsx_runtime = require("react/jsx-runtime");
+var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    ...{
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      viewBox: "0 0 24 24",
+      ...props
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        ...{
+          d: "m19.5 8.25-7.5 7.5-7.5-7.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    )
+  }
+);
+var chevron_down_default = ChevronDown;
+
 // components/styles.js
 var WHITE = "rgb( 255, 255, 255 )";
 var BLACK = "rgb( 0, 0, 0 )";
@@ -61,7 +87,7 @@ var inputStyle = (style) => {
 var inputPhoneStyle = (style) => inputStyle(style);
 
 // components/input-phone.js
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var isValidPhone = (number = "", country = "") => {
   const valid = (0, import_phone.isValid)(number, country);
   return valid;
@@ -112,7 +138,7 @@ var InputPhone = ({
     },
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ...{
@@ -120,30 +146,57 @@ var InputPhone = ({
         style: inputPhoneStyle(style)
       },
       children: [
-        (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "select",
+        (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
           {
             ...{
-              className: "px-3 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
-              onChange: ({ target }) => {
-                setCountry(target.value);
-                setNumber("");
-              },
-              style: inputPhoneStyle(style),
-              value: country
+              className: "relative"
             },
-            children: countries.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "option",
-              {
-                ...{
-                  value: item
-                },
-                children: item
-              },
-              "input-phone-country-" + item + "-" + key
-            ))
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "select",
+                {
+                  ...{
+                    className: "pl-3 pr-6 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
+                    onChange: ({ target }) => {
+                      setCountry(target.value);
+                      setNumber("");
+                    },
+                    style: inputPhoneStyle(style),
+                    value: country
+                  },
+                  children: countries.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "option",
+                    {
+                      ...{
+                        value: item
+                      },
+                      children: item
+                    },
+                    "input-phone-country-" + item + "-" + key
+                  ))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  ...{
+                    "aria-hidden": true,
+                    className: "h-full flex items-center absolute inset-y-0 right-1.5 pointer-events-none"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    chevron_down_default,
+                    {
+                      ...{
+                        className: "w-4 h-4 text-inherit"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
             ...{
@@ -153,7 +206,7 @@ var InputPhone = ({
             children: (countries == null ? void 0 : countries[0]) || ""
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
             ...{
@@ -162,7 +215,7 @@ var InputPhone = ({
                 borderLeft: "solid 1px " + ((_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.hex)
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               import_input.default,
               {
                 ...{

package/dist/input-phone.mjs

@@ -1,4 +1,7 @@
 "use client";
+import {
+  chevron_down_default
+} from "./chunk-FYA7EAMR.mjs";
 import {
   inputPhoneStyle
 } from "./chunk-FJ7PKMAC.mjs";
@@ -66,28 +69,55 @@ var InputPhone = ({
         style: inputPhoneStyle(style)
       },
       children: [
-        (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ jsx(
-          "select",
+        (countries == null ? void 0 : countries.length) > 1 ? /* @__PURE__ */ jsxs(
+          "div",
           {
             ...{
-              className: "px-3 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
-              onChange: ({ target }) => {
-                setCountry(target.value);
-                setNumber("");
-              },
-              style: inputPhoneStyle(style),
-              value: country
+              className: "relative"
             },
-            children: countries.map((item, key) => /* @__PURE__ */ jsx(
-              "option",
-              {
-                ...{
-                  value: item
-                },
-                children: item
-              },
-              "input-phone-country-" + item + "-" + key
-            ))
+            children: [
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  ...{
+                    className: "pl-3 pr-6 bg-none appearance-none border-none " + (keyboard ? "focus-visible:!border focus-visible:!border-inherit !rounded-none " : "focus-visible:!outline-0 focus-visible:!ring-0"),
+                    onChange: ({ target }) => {
+                      setCountry(target.value);
+                      setNumber("");
+                    },
+                    style: inputPhoneStyle(style),
+                    value: country
+                  },
+                  children: countries.map((item, key) => /* @__PURE__ */ jsx(
+                    "option",
+                    {
+                      ...{
+                        value: item
+                      },
+                      children: item
+                    },
+                    "input-phone-country-" + item + "-" + key
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...{
+                    "aria-hidden": true,
+                    className: "h-full flex items-center absolute inset-y-0 right-1.5 pointer-events-none"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    chevron_down_default,
+                    {
+                      ...{
+                        className: "w-4 h-4 text-inherit"
+                      }
+                    }
+                  )
+                }
+              )
+            ]
           }
         ) : /* @__PURE__ */ jsx(
           "span",

package/dist/product.js

@@ -375,9 +375,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",
@@ -620,6 +620,7 @@ var DefaultImage = ({ alt, className, src, style }) => /* @__PURE__ */ (0, impor
 var Product = ({
   action = null,
   addToCart = true,
+  buttonFontSize,
   disabled = false,
   errors = {},
   header,
@@ -634,7 +635,7 @@ var Product = ({
   style = {},
   variant
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const resolved = {
     ...style,
     background: {
@@ -646,6 +647,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]
@@ -737,11 +739,14 @@ var Product = ({
                     {
                       ...{
                         // 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_runtime8.jsx)(
@@ -776,9 +781,10 @@ 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"
                     }
@@ -838,9 +844,9 @@ var Product = ({
                   ...{
                     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
@@ -907,7 +913,12 @@ var Product = ({
                           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_runtime8.jsx)(
@@ -927,7 +938,12 @@ var Product = ({
                           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_runtime8.jsx)(

package/dist/product.mjs

@@ -1,11 +1,11 @@
 "use client";
 import {
   product_default
-} from "./chunk-ASHP6LV5.mjs";
+} from "./chunk-7AIAMVTM.mjs";
+import "./chunk-PT7UR6AO.mjs";
 import "./chunk-3SXAH7B7.mjs";
 import "./chunk-FYA7EAMR.mjs";
 import "./chunk-2ZYGRSSA.mjs";
-import "./chunk-XWELEL6Z.mjs";
 import "./chunk-DNK33H3K.mjs";
 import "./chunk-OHJMWJAQ.mjs";
 import "./chunk-Q3UIVGPQ.mjs";

package/dist/wrapper-gradient.js

@@ -40,9 +40,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",

package/dist/wrapper-gradient.mjs

@@ -2,7 +2,7 @@
 import {
   useWrapperGradient,
   wrapper_gradient_default
-} from "./chunk-XWELEL6Z.mjs";
+} from "./chunk-PT7UR6AO.mjs";
 export {
   wrapper_gradient_default as default,
   useWrapperGradient

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.0.53",
+  "version": "0.0.56",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",
@@ -10,6 +10,10 @@
       "types": "./types/embla.d.ts",
       "default": "./dist/embla.js"
     },
+    "./embla-fade": {
+      "types": "./types/embla-fade.d.ts",
+      "default": "./dist/embla-fade.js"
+    },
     "./icons/arrow-down-tray": {
       "types": "./types/icons/arrow-down-tray.d.ts",
       "default": "./dist/icons/arrow-down-tray.js"
@@ -339,7 +343,8 @@
   },
   "scripts": {
     "sync": ". \"$HOME/.nvm/nvm.sh\" && nvm use && npm prune && npm install && npx drawbridge-agents-sync",
-    "build": "tsup && npm publish"
+    "test": ". \"$HOME/.nvm/nvm.sh\" && nvm use && node --test",
+    "build": ". \"$HOME/.nvm/nvm.sh\" && nvm use && tsup && node --test && npm publish"
   },
   "peerDependencies": {
     "@drawbridge/drawbridge-utils": ">=0.0.61",
@@ -352,7 +357,8 @@
     "tsup": "8.5.1"
   },
   "dependencies": {
-    "@drawbridge/drawbridge-agents": "0.0.10",
+    "@drawbridge/drawbridge-agents": "0.0.11",
+    "embla-carousel-fade": "8.6.0",
     "embla-carousel-react": "8.6.0",
     "react-player": "2.16.0",
     "react-phone-number-input": "3.4.12"

package/types/embla-fade.d.ts

@@ -0,0 +1,2 @@
+export { default } from 'embla-carousel-fade';
+export * from 'embla-carousel-fade';