@miden-npm/react 2.1.3 → 2.1.4

package/dist/index.cjs

@@ -1700,7 +1700,7 @@ function BaseCard({
   onClose,
   caller = "buzapay"
 }) {
-  return caller === "buzapay" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-1/2", children: [
+  return caller === "buzapay" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2", children: [
     showBackButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseBack, { back: () => onBack?.() }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex gap-2 w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-8 w-full", children: [
@@ -1714,12 +1714,12 @@ function BaseCard({
         "div",
         {
           onClick: onClose,
-          className: "close-icon flex flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500",
+          className: "hidden sm:flex close-icon flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500",
           children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-white", children: "x" })
         }
       )
     ] })
-  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-1/2", children: [
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2", children: [
     showBackButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseBack, { back: () => onBack?.() }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-8 w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "bg-white rounded-xl", children }),
@@ -3323,7 +3323,7 @@ function PayByCard({
           validationError: billingErrors.address2 ?? ""
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseSelect,
         {
           label: "Select Country",
@@ -3348,8 +3348,8 @@ function PayByCard({
           },
           validationError: billingErrors.country ?? ""
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseSelect,
         {
           label: "Select State",
@@ -3365,8 +3365,8 @@ function PayByCard({
           },
           validationError: billingErrors.state ?? ""
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
           label: "City",
@@ -3380,8 +3380,8 @@ function PayByCard({
           },
           validationError: billingErrors.city ?? ""
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
           label: "Postal Code",
@@ -3395,7 +3395,7 @@ function PayByCard({
           },
           validationError: billingErrors.postalCode ?? ""
         }
-      ),
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
@@ -4433,7 +4433,7 @@ function BzpCheckoutCard({
         {
           className: checkoutState === "SUCCESS" || checkoutState === "USED" && paymentType === "BANK_TRANSFER" ? "col-span-3" : "col-span-2",
           children: [
-            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between px-12 py-8", children: [
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-6 sm:flex-row sm:items-center justify-between p-6 sm:px-10 sm:py-8", children: [
               paymentObject.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 BaseImage,
                 {
@@ -4452,15 +4452,15 @@ function BzpCheckoutCard({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: paymentObject.merchantName }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy sm:text-right", children: paymentObject.merchantName }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy sm:text-right", children: [
                   "Pay:",
                   " ",
                   /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-orange-500 font-extrabold", children: formatAmount(paymentObject.amount, paymentObject.currency) })
                 ] })
               ] })
             ] }),
-            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "max-h-[32rem] overflow-y-scroll px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "max-h-[32rem] overflow-y-scroll px-6 sm:px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               PayByCard,
               {
                 secretKey,
@@ -4795,7 +4795,7 @@ function MidenCheckoutCard({
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconMidenLogo, {}),
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconClose, { color: "black", className: "cursor-pointer" })
             ] }),
-            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "px-14 pt-4 pb-8 flex flex-col gap-6 max-h-[32rem] overflow-y-scroll", children: [
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "px-6 md:px-10 lg:px-14 pt-4 pb-8 flex flex-col gap-6 max-h-[32rem] overflow-y-scroll", children: [
               /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between py-3 px-4 bg-[#F8FDFF] border border-[#DAE4E8] rounded-lg", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   BaseLabelInfo,