@pelcro/react-pelcro-js 4.0.0-alpha.77 → 4.0.0-alpha.79

package/dist/index.cjs.js

@@ -3479,6 +3479,8 @@ var labels$11 = {
 	lastName: "Last name",
 	phone: "Phone",
 	freeItems: "Free Items",
+	order: "Order",
+	amount: "Amount",
 	isDefault: "Set as default",
 	shippingAddress: "Shipping Address",
 	contactDetails: "Contact Details"
@@ -4394,6 +4396,8 @@ var labels$M = {
 	lastName: "Nom de famille",
 	phone: "Téléphoner",
 	freeItems: "Articles gratuits",
+	order: "Commande",
+	amount: "Montant",
 	isDefault: "Défini comme valeur par défaut"
 };
 var checkoutForm_fr = {
@@ -5347,6 +5351,8 @@ var labels$v = {
 	lastName: "성",
 	phone: "핸드폰",
 	freeItems: "무료 아이템",
+	order: "주문",
+	amount: "금액",
 	isDefault: "기본값으로 설정"
 };
 var checkoutForm_ko = {
@@ -6349,6 +6355,8 @@ var labels$e = {
 	lastName: "Apellido",
 	phone: "Teléfono",
 	freeItems: "Artículos gratis",
+	order: "Pida",
+	amount: "Importe",
 	isDefault: "Fijar por defecto"
 };
 var checkoutForm_es = {
@@ -26850,11 +26858,9 @@ function PaymentMethodView({
     className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
   }, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-gray-600"
-  }, !Array.isArray(order) ? /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "plc-tracking-wider plc-uppercase"
-  }, order === null || order === void 0 ? void 0 : order.name) : /*#__PURE__*/React__default['default'].createElement("span", {
+  }, /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-tracking-wider plc-uppercase"
-  }, t("labels.freeItems")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+  }, t("labels.amount")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-text-xl plc-font-semibold plc-text-primary-600"
   }, (_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50 pelcro-stripe-compliance"
@@ -28596,7 +28602,7 @@ function SubscriptionCreateModal({
   }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
     onClick: goBack,
-    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
   }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, (_product$paywall$subs = product === null || product === void 0 ? void 0 : (_product$paywall = product.paywall) === null || _product$paywall === void 0 ? void 0 : _product$paywall.subscribe_title) !== null && _product$paywall$subs !== void 0 ? _product$paywall$subs : (_window$Pelcro$paywal = window.Pelcro.paywall.read()) === null || _window$Pelcro$paywal === void 0 ? void 0 : _window$Pelcro$paywal.subscribe_title), " ", /*#__PURE__*/React__default['default'].createElement("p", {
@@ -30667,7 +30673,7 @@ const AddressCreateModal = ({
   }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
     onClick: goBack,
-    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
   }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, giftRecipient ? t("titleGifting") : t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressCreateView, Object.assign({}, otherProps, {
@@ -30699,6 +30705,35 @@ const BillingAddressCreateModal = ({
 
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, newAddressId);
 
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
+  const userHasBillingAddress = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const billingAddresses = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.addresses.filter(address => address.type == "billing")) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return billingAddresses.length > 0;
+  };
+
+  const isUserHasBillingAddress = userHasBillingAddress();
+
+  const goBack = () => {
+    if (isUserHasBillingAddress) {
+      return switchView("billing-address-select");
+    }
+
     switch (flow) {
       case "createPaymentSource":
         switchView("payment-method-create");
@@ -30729,7 +30764,11 @@ const BillingAddressCreateModal = ({
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("titleBilling")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressCreateView, Object.assign({}, otherProps, {
     type: "billing",
@@ -34111,7 +34150,7 @@ const AddressSelectModal = ({
   }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
     onClick: goBack,
-    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
   }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("selectAddressTitle")), /*#__PURE__*/React__default['default'].createElement("p", {
@@ -34162,6 +34201,22 @@ const BillingAddressSelectModal = ({
     }
   };
 
+  const goBack = () => {
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
   const onAddNewAddress = () => {
     switchView("billing-address-create");
   }; // const onGiftRedemptionSuccess = () => {
@@ -34181,7 +34236,11 @@ const BillingAddressSelectModal = ({
     id: "pelcro-address-select-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("selectAddressTitle")), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-sm"
@@ -34496,7 +34555,7 @@ const PaymentMethodSelectModal = ({
   }, showBackButton && /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
     onClick: goBack,
-    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
   }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("select.title")), /*#__PURE__*/React__default['default'].createElement("p", {

package/dist/index.esm.js

@@ -3449,6 +3449,8 @@ var labels$11 = {
 	lastName: "Last name",
 	phone: "Phone",
 	freeItems: "Free Items",
+	order: "Order",
+	amount: "Amount",
 	isDefault: "Set as default",
 	shippingAddress: "Shipping Address",
 	contactDetails: "Contact Details"
@@ -4364,6 +4366,8 @@ var labels$M = {
 	lastName: "Nom de famille",
 	phone: "Téléphoner",
 	freeItems: "Articles gratuits",
+	order: "Commande",
+	amount: "Montant",
 	isDefault: "Défini comme valeur par défaut"
 };
 var checkoutForm_fr = {
@@ -5317,6 +5321,8 @@ var labels$v = {
 	lastName: "성",
 	phone: "핸드폰",
 	freeItems: "무료 아이템",
+	order: "주문",
+	amount: "금액",
 	isDefault: "기본값으로 설정"
 };
 var checkoutForm_ko = {
@@ -6319,6 +6325,8 @@ var labels$e = {
 	lastName: "Apellido",
 	phone: "Teléfono",
 	freeItems: "Artículos gratis",
+	order: "Pida",
+	amount: "Importe",
 	isDefault: "Fijar por defecto"
 };
 var checkoutForm_es = {
@@ -26820,11 +26828,9 @@ function PaymentMethodView({
     className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-gray-600"
-  }, !Array.isArray(order) ? /*#__PURE__*/React__default.createElement("span", {
-    className: "plc-tracking-wider plc-uppercase"
-  }, order === null || order === void 0 ? void 0 : order.name) : /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "plc-tracking-wider plc-uppercase"
-  }, t("labels.freeItems")), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+  }, t("labels.amount")), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
     className: "plc-text-xl plc-font-semibold plc-text-primary-600"
   }, (_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50 pelcro-stripe-compliance"
@@ -28566,7 +28572,7 @@ function SubscriptionCreateModal({
   }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: goBack,
-    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
   }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, (_product$paywall$subs = product === null || product === void 0 ? void 0 : (_product$paywall = product.paywall) === null || _product$paywall === void 0 ? void 0 : _product$paywall.subscribe_title) !== null && _product$paywall$subs !== void 0 ? _product$paywall$subs : (_window$Pelcro$paywal = window.Pelcro.paywall.read()) === null || _window$Pelcro$paywal === void 0 ? void 0 : _window$Pelcro$paywal.subscribe_title), " ", /*#__PURE__*/React__default.createElement("p", {
@@ -30637,7 +30643,7 @@ const AddressCreateModal = ({
   }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: goBack,
-    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
   }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, giftRecipient ? t("titleGifting") : t("title")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(AddressCreateView, Object.assign({}, otherProps, {
@@ -30669,6 +30675,35 @@ const BillingAddressCreateModal = ({
 
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, newAddressId);
 
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
+  const userHasBillingAddress = () => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const billingAddresses = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.addresses.filter(address => address.type == "billing")) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+    return billingAddresses.length > 0;
+  };
+
+  const isUserHasBillingAddress = userHasBillingAddress();
+
+  const goBack = () => {
+    if (isUserHasBillingAddress) {
+      return switchView("billing-address-select");
+    }
+
     switch (flow) {
       case "createPaymentSource":
         switchView("payment-method-create");
@@ -30699,7 +30734,11 @@ const BillingAddressCreateModal = ({
     onClose: onClose
   }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default.createElement("h4", {
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("titleBilling")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(AddressCreateView, Object.assign({}, otherProps, {
     type: "billing",
@@ -34081,7 +34120,7 @@ const AddressSelectModal = ({
   }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: goBack,
-    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
   }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("selectAddressTitle")), /*#__PURE__*/React__default.createElement("p", {
@@ -34132,6 +34171,22 @@ const BillingAddressSelectModal = ({
     }
   };
 
+  const goBack = () => {
+    switch (flow) {
+      case "createPaymentSource":
+        switchView("payment-method-create");
+        break;
+
+      case "deletePaymentSource":
+        switchView("payment-method-delete");
+        break;
+
+      default:
+        switchToCheckoutForm();
+        break;
+    }
+  };
+
   const onAddNewAddress = () => {
     switchView("billing-address-create");
   }; // const onGiftRedemptionSuccess = () => {
@@ -34151,7 +34206,11 @@ const BillingAddressSelectModal = ({
     id: "pelcro-address-select-modal"
   }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-text-left plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
-  }, /*#__PURE__*/React__default.createElement("h4", {
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    onClick: goBack,
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+  }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("selectAddressTitle")), /*#__PURE__*/React__default.createElement("p", {
     className: "plc-text-sm"
@@ -34466,7 +34525,7 @@ const PaymentMethodSelectModal = ({
   }, showBackButton && /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: goBack,
-    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-2 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
+    className: "plc-absolute plc-w-6 plc-text-gray-500 focus:plc-text-black plc-z-max plc-top-1/2 plc-left-6 plc-transform plc--translate-y-1/2 plc-border-0 hover:plc-text-black hover:plc-shadow-none plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent"
   }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold"
   }, t("select.title")), /*#__PURE__*/React__default.createElement("p", {

package/dist/pelcro.css

@@ -744,7 +744,7 @@ Add the correct display in Chrome and Safari.
 .pelcro-root .pelcro-modal{
   position: absolute;
   display: flex;
-  max-width: 32rem;
+  max-width: 36rem;
   flex-direction: column;
   align-items: center;
   border-radius: 0.5rem;
@@ -768,8 +768,8 @@ Add the correct display in Chrome and Safari.
   border-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) + 10%));
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   border-bottom-width: 1.5px;
@@ -832,8 +832,8 @@ Add the correct display in Chrome and Safari.
 
 @media (min-width: 768px){
   .pelcro-root .pelcro-modal-body{
-    padding-left: 2.5rem;
-    padding-right: 2.5rem;
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
   }
 }
 
@@ -2116,10 +2116,6 @@ apple-pay-button {
   left: 0px;
 }
 
-.pelcro-root .plc-left-2{
-  left: 0.5rem;
-}
-
 .pelcro-root .plc-left-4{
   left: 1rem;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.77",
+  "version": "4.0.0-alpha.79",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",