@asteby/storefront-react 0.11.0 → 0.11.1

package/dist/payments.css

@@ -45,6 +45,14 @@
   display: inline-block;
   vertical-align: middle;
 }
+/* The mark of a provider row (Mercado Pago…) is as wide as its logo: in line between the radio and the text, never over them. */
+[data-sf-pay-method] [data-sf-pay-icon='mark'] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  width: auto;
+  height: auto;
+}
 /* The open cash row already lists every point with its mark: the preview would repeat them. */
 [data-sf-pay-method] [data-sf-pay-choice]:has(input[name='payment_choice']:checked) [data-sf-pay-brands='cash'] {
   display: none;

package/dist/payments.js

@@ -1,5 +1,5 @@
 import { isSafeCssValue } from './chunk-672OTUM2.js';
-import { BrandMark, findBrand } from './chunk-3ZJTDFHE.js';
+import { findBrand, BrandMark } from './chunk-ODIQR6TG.js';
 export { buildPayChoices, cashProviderData, checkoutToAttempt, choiceValue, parseChoice, payErrorResponse, paymentCsp, paymentCspHeaderName, paymentCspHeaders, paymentCspMode, paymentNonce, paymentNonceFromHeaders, voucherRows } from './chunk-ISEOCKIR.js';
 import { useModalDialog } from './chunk-ZBH7JYU4.js';
 import { useResolvedLocale } from './chunk-T52H5HL3.js';
@@ -838,6 +838,7 @@ function PaymentMethodSection(props) {
       const slot = choice.option ?? "plain";
       const icon = icons?.[slot] ?? (brandMarks ? defaultIcon(choice) : null);
       const marks = brandMarks ? rowMarks(choice, cardBrands) : [];
+      const brandMarkIcon = !icons?.[slot] && brandMarks && choice.option !== "card" && choice.option !== "cash" && !!findBrand(choice.methodKey);
       return /* @__PURE__ */ jsxs("div", { className: cx.choice, "data-sf-pay-choice": true, children: [
         /* @__PURE__ */ jsxs("label", { className: cx.radioLabel, children: [
           /* @__PURE__ */ jsx(
@@ -855,7 +856,11 @@ function PaymentMethodSection(props) {
               ...tid("method")
             }
           ),
-          icon ? /* @__PURE__ */ jsx("span", { className: cx.icon, "aria-hidden": "true", children: icon }) : null,
+          icon ? (
+            // The default mark of a provider row is as wide as its logo: it does not take the shop's `icon` box (a fixed
+            // square would let the logo spill over the radio and the text).
+            /* @__PURE__ */ jsx("span", { className: brandMarkIcon ? void 0 : cx.icon, "data-sf-pay-icon": brandMarkIcon ? "mark" : void 0, "aria-hidden": "true", children: icon })
+          ) : null,
           /* @__PURE__ */ jsxs("span", { className: cx.labelText, children: [
             rowLabel,
             hint ? /* @__PURE__ */ jsxs("span", { className: cx.hint, children: [