@drawbridge/components 0.0.71 → 0.0.73

package/dist/advertisement.js

@@ -1098,7 +1098,7 @@ var Advertisement = ({
           "span",
           {
             ...{
-              className: "block relative aspect-square overflow-hidden" + ((file == null ? void 0 : file.sizes) ? "" : " bg-gray-light"),
+              className: "block relative aspect-square overflow-hidden" + (assetNode ? "" : " bg-gray-light"),
               style: {
                 borderRadius: imageRadius
               }
@@ -1185,8 +1185,9 @@ var Advertisement = ({
       )
     );
   }
+  const src = (0, import_cdn2.cdnSrc)(file, "400x400", file == null ? void 0 : file.updatedAt);
   return card(
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    src ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ImageComponent,
       {
         ...{
@@ -1195,11 +1196,11 @@ var Advertisement = ({
           fill: true,
           priority: false,
           sizes: "100%",
-          src: (0, import_cdn2.cdnSrc)(file, "400x400", file == null ? void 0 : file.updatedAt)
+          src
         }
       },
       file == null ? void 0 : file.id
-    )
+    ) : null
   );
 };
 var advertisement_default = Advertisement;

package/dist/advertisement.mjs

@@ -115,7 +115,7 @@ var Advertisement = ({
           "span",
           {
             ...{
-              className: "block relative aspect-square overflow-hidden" + ((file == null ? void 0 : file.sizes) ? "" : " bg-gray-light"),
+              className: "block relative aspect-square overflow-hidden" + (assetNode ? "" : " bg-gray-light"),
               style: {
                 borderRadius: imageRadius
               }
@@ -202,8 +202,9 @@ var Advertisement = ({
       )
     );
   }
+  const src = cdnSrc(file, "400x400", file == null ? void 0 : file.updatedAt);
   return card(
-    /* @__PURE__ */ jsx(
+    src ? /* @__PURE__ */ jsx(
       ImageComponent,
       {
         ...{
@@ -212,11 +213,11 @@ var Advertisement = ({
           fill: true,
           priority: false,
           sizes: "100%",
-          src: cdnSrc(file, "400x400", file == null ? void 0 : file.updatedAt)
+          src
         }
       },
       file == null ? void 0 : file.id
-    )
+    ) : null
   );
 };
 var advertisement_default = Advertisement;

package/dist/input-phone.js

@@ -104,12 +104,18 @@ var InputPhone = ({
   (0, import_react.useEffect)(
     () => {
       if (value == null ? void 0 : value.country) return;
+      const detected = (0, import_phone.detectCountry)(value == null ? void 0 : value.number);
+      if (detected && countries.includes(detected)) {
+        setCountry(detected);
+        return;
+      }
+      ;
       const tags = [navigator.language, ...navigator.languages || []];
-      const detected = tags.map((tag) => {
+      const locale = tags.map((tag) => {
         var _a2, _b2;
         return (_b2 = (_a2 = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.toUpperCase();
       }).find((code) => code && countries.includes(code));
-      if (detected) setCountry(detected);
+      if (locale) setCountry(locale);
     },
     []
   );
@@ -221,9 +227,19 @@ var InputPhone = ({
                 ...{
                   "aria-label": "Phone Number",
                   className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
-                  onChange: (val) => setNumber(val),
+                  onChange: (val) => {
+                    setNumber(val);
+                    const detected = (0, import_phone.detectCountry)(val);
+                    if (detected && countries.includes(detected)) setCountry(detected);
+                  },
                   style: inputPhoneStyle(style),
                   value: number,
+                  // country-mode pins the input to the selected calling code, so
+                  // detection can only follow countries SHARING that code (US/CA
+                  // on +1) — any other '+xx' the visitor types is discarded by the
+                  // library before it reaches onChange. Reaching every country
+                  // needs defaultCountry mode instead, which unpins the prefix but
+                  // changes the field to national-format display.
                   ...country && {
                     country,
                     international: true,

package/dist/input-phone.mjs

@@ -9,7 +9,7 @@ import {
 // components/input-phone.js
 import { useEffect, useState } from "react";
 import Input from "react-phone-number-input/input";
-import { isValid } from "@drawbridge/drawbridge-utils/phone";
+import { detectCountry, isValid } from "@drawbridge/drawbridge-utils/phone";
 import { jsx, jsxs } from "react/jsx-runtime";
 var isValidPhone = (number = "", country = "") => {
   const valid = isValid(number, country);
@@ -27,12 +27,18 @@ var InputPhone = ({
   useEffect(
     () => {
       if (value == null ? void 0 : value.country) return;
+      const detected = detectCountry(value == null ? void 0 : value.number);
+      if (detected && countries.includes(detected)) {
+        setCountry(detected);
+        return;
+      }
+      ;
       const tags = [navigator.language, ...navigator.languages || []];
-      const detected = tags.map((tag) => {
+      const locale = tags.map((tag) => {
         var _a2, _b2;
         return (_b2 = (_a2 = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.toUpperCase();
       }).find((code) => code && countries.includes(code));
-      if (detected) setCountry(detected);
+      if (locale) setCountry(locale);
     },
     []
   );
@@ -144,9 +150,19 @@ var InputPhone = ({
                 ...{
                   "aria-label": "Phone Number",
                   className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
-                  onChange: (val) => setNumber(val),
+                  onChange: (val) => {
+                    setNumber(val);
+                    const detected = detectCountry(val);
+                    if (detected && countries.includes(detected)) setCountry(detected);
+                  },
                   style: inputPhoneStyle(style),
                   value: number,
+                  // country-mode pins the input to the selected calling code, so
+                  // detection can only follow countries SHARING that code (US/CA
+                  // on +1) — any other '+xx' the visitor types is discarded by the
+                  // library before it reaches onChange. Reaching every country
+                  // needs defaultCountry mode instead, which unpins the prefix but
+                  // changes the field to national-format display.
                   ...country && {
                     country,
                     international: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",
@@ -407,7 +407,7 @@
     "build": ". \"$HOME/.nvm/nvm.sh\" && nvm use && tsup && node --test && npm publish"
   },
   "peerDependencies": {
-    "@drawbridge/drawbridge-utils": ">=0.0.61",
+    "@drawbridge/drawbridge-utils": ">=0.0.118",
     "@drawbridge/shopify": ">=0.0.8",
     "next": ">=14",
     "react": ">=18"
@@ -415,7 +415,7 @@
   "devDependencies": {
     "@types/react": "18.0.0",
     "tsup": "8.5.1",
-    "@drawbridge/drawbridge-agents": "0.1.33"
+    "@drawbridge/drawbridge-agents": "0.1.40"
   },
   "dependencies": {
     "embla-carousel-fade": "8.6.0",