@pelcro/react-pelcro-js 4.0.0-alpha.81 → 4.0.0-alpha.82

package/dist/index.cjs.js

@@ -26858,7 +26858,7 @@ function PaymentMethodView({
   showApplePayButton,
   order
 }) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3;
 
   const {
     t
@@ -26872,15 +26872,7 @@ function PaymentMethodView({
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 plc-px-8 md:plc-px-0 pelcro-payment-block"
-  }, order && /*#__PURE__*/React__default['default'].createElement("div", {
-    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"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "plc-tracking-wider plc-uppercase"
-  }, 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", {
+  }, 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"
   }, /*#__PURE__*/React__default['default'].createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -33054,21 +33046,109 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default['default'].cre
   className: "pelcro-order-create-container"
 }, props));
 
+const OrderCreateSummary = ({
+  order
+}) => {
+  var _calcAndFormatItemsTo, _order$;
+
+  const items = (order === null || order === void 0 ? void 0 : order.length) > 1 ? order : [order];
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-px-8 md:plc-px-0"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mx-auto plc-w-full"
+  }, /*#__PURE__*/React__default['default'].createElement("h2", {
+    className: "plc-font-semibold"
+  }, "Order summary"), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flow-root plc-mt-4"
+  }, /*#__PURE__*/React__default['default'].createElement("ul", {
+    role: "list",
+    className: "plc-divide-y plc-divide-gray-200 plc-overflow-y-auto plc-max-h-checkout"
+  }, items.map(item => {
+    return /*#__PURE__*/React__default['default'].createElement("li", {
+      key: item === null || item === void 0 ? void 0 : item.id,
+      className: "plc-flex plc-space-x-6 plc-py-6"
+    }, /*#__PURE__*/React__default['default'].createElement("img", {
+      alt: "order item image",
+      src: item === null || item === void 0 ? void 0 : item.image,
+      className: "plc-h-24 plc-w-24 plc-flex-none plc-rounded-md plc-bg-gray-100 plc-object-cover plc-object-center"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex-auto"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-space-y-1 sm:plc-flex sm:plc-items-start sm:plc-justify-between sm:plc-space-x-6"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex-auto plc-space-y-1 plc-text-sm plc-font-medium"
+    }, /*#__PURE__*/React__default['default'].createElement("h3", {
+      className: "plc-text-gray-900"
+    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "plc-hidden plc-text-gray-500 sm:plc-block"
+    }, "quantity: ", item === null || item === void 0 ? void 0 : item.quantity)), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex plc-flex-none plc-space-x-4"
+    }, /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "plc-text-gray-900"
+    }, item && calcAndFormatItemsTotal([item], item === null || item === void 0 ? void 0 : item.currency))))));
+  })))), /*#__PURE__*/React__default['default'].createElement("dl", {
+    className: "plc-mt-6 plc-space-y-6 plc-text-sm plc-font-medium plc-text-gray-500"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-justify-between plc-border-t plc-border-gray-200 plc-pt-6 plc-text-gray-900"
+  }, /*#__PURE__*/React__default['default'].createElement("dt", {
+    className: "plc-text-base"
+  }, "Total"), /*#__PURE__*/React__default['default'].createElement("dd", {
+    className: "plc-text-base"
+  }, order && ((_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()))))));
+};
+
 const OrderCreateView = props => {
-  var _window$Pelcro, _window$Pelcro$uiSett;
+  var _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro$user$r2, _window2, _window2$Pelcro, _window2$Pelcro$user, _addresses$find, _addresses$find2;
 
-  useTranslation("payment");
   const {
-    order
+    t
+  } = useTranslation("checkoutForm");
+  const {
+    order,
+    selectedAddressId
   } = usePelcro();
   const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
   const showOrderButton = skipPayment && ((order === null || order === void 0 ? void 0 : order.price) === 0 || (order === null || order === void 0 ? void 0 : order.length) > 0 && order.every(item => (item === null || item === void 0 ? void 0 : item.price) === 0));
+  const {
+    addresses
+  } = (_window$Pelcro$user$r = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro2 = _window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.read()) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  const user = (_window$Pelcro$user$r2 = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : _window2$Pelcro$user.read()) !== null && _window$Pelcro$user$r2 !== void 0 ? _window$Pelcro$user$r2 : [];
+  const address = selectedAddressId ? (_addresses$find = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.id == selectedAddressId)) !== null && _addresses$find !== void 0 ? _addresses$find : null : (_addresses$find2 = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.type == "shipping" && address.is_default)) !== null && _addresses$find2 !== void 0 ? _addresses$find2 : null;
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    id: "pelcro-order-create-view"
-  }, /*#__PURE__*/React__default['default'].createElement("form", {
+    id: "pelcro-order-create-view",
+    className: "plc-grid plc-grid-cols-1 md:plc-grid-cols-2 plc-gap-20"
+  }, /*#__PURE__*/React__default['default'].createElement(OrderCreateSummary, {
+    order: order
+  }), /*#__PURE__*/React__default['default'].createElement("form", {
     action: "javascript:void(0);",
     className: "plc-mt-2 pelcro-form"
-  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-flex-row plc-justify-between plc-px-8 md:plc-px-0"
+  }, address && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "pelcro-select-address-radio plc-order-2",
+    id: `pelcro-address-select-${address === null || address === void 0 ? void 0 : address.id}`,
+    name: "address"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-name plc-font-semibold"
+  }, t("labels.shippingAddress")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-company"
+  }, address === null || address === void 0 ? void 0 : address.company), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-name plc-text-sm plc-mt-1"
+  }, address === null || address === void 0 ? void 0 : address.first_name, " ", address === null || address === void 0 ? void 0 : address.last_name), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.line1), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-country plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.city, ", ", address === null || address === void 0 ? void 0 : address.state, " ", address === null || address === void 0 ? void 0 : address.postal_code, ", ", address === null || address === void 0 ? void 0 : address.country))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "pelcro-select-address-radio plc-order-2",
+    id: `pelcro-address-select-${address === null || address === void 0 ? void 0 : address.id}`,
+    name: "address"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-name plc-font-semibold"
+  }, t("labels.contactDetails")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-name plc-text-sm plc-mt-1"
+  }, user.email), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.phone))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
     showExternalPaymentMethods: false,
@@ -33099,6 +33179,7 @@ const OrderCreateModal = ({
 
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-order-create-modal",
+    className: "plc-max-w-7xl",
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {

package/dist/index.esm.js

@@ -26828,7 +26828,7 @@ function PaymentMethodView({
   showApplePayButton,
   order
 }) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3;
 
   const {
     t
@@ -26842,15 +26842,7 @@ function PaymentMethodView({
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 plc-px-8 md:plc-px-0 pelcro-payment-block"
-  }, order && /*#__PURE__*/React__default.createElement("div", {
-    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"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "plc-tracking-wider plc-uppercase"
-  }, 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", {
+  }, 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"
   }, /*#__PURE__*/React__default.createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -33024,21 +33016,109 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default.createElement(
   className: "pelcro-order-create-container"
 }, props));
 
+const OrderCreateSummary = ({
+  order
+}) => {
+  var _calcAndFormatItemsTo, _order$;
+
+  const items = (order === null || order === void 0 ? void 0 : order.length) > 1 ? order : [order];
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-px-8 md:plc-px-0"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mx-auto plc-w-full"
+  }, /*#__PURE__*/React__default.createElement("h2", {
+    className: "plc-font-semibold"
+  }, "Order summary"), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flow-root plc-mt-4"
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    role: "list",
+    className: "plc-divide-y plc-divide-gray-200 plc-overflow-y-auto plc-max-h-checkout"
+  }, items.map(item => {
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: item === null || item === void 0 ? void 0 : item.id,
+      className: "plc-flex plc-space-x-6 plc-py-6"
+    }, /*#__PURE__*/React__default.createElement("img", {
+      alt: "order item image",
+      src: item === null || item === void 0 ? void 0 : item.image,
+      className: "plc-h-24 plc-w-24 plc-flex-none plc-rounded-md plc-bg-gray-100 plc-object-cover plc-object-center"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex-auto"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-space-y-1 sm:plc-flex sm:plc-items-start sm:plc-justify-between sm:plc-space-x-6"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex-auto plc-space-y-1 plc-text-sm plc-font-medium"
+    }, /*#__PURE__*/React__default.createElement("h3", {
+      className: "plc-text-gray-900"
+    }, item === null || item === void 0 ? void 0 : item.name), /*#__PURE__*/React__default.createElement("p", {
+      className: "plc-hidden plc-text-gray-500 sm:plc-block"
+    }, "quantity: ", item === null || item === void 0 ? void 0 : item.quantity)), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex plc-flex-none plc-space-x-4"
+    }, /*#__PURE__*/React__default.createElement("p", {
+      className: "plc-text-gray-900"
+    }, item && calcAndFormatItemsTotal([item], item === null || item === void 0 ? void 0 : item.currency))))));
+  })))), /*#__PURE__*/React__default.createElement("dl", {
+    className: "plc-mt-6 plc-space-y-6 plc-text-sm plc-font-medium plc-text-gray-500"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-justify-between plc-border-t plc-border-gray-200 plc-pt-6 plc-text-gray-900"
+  }, /*#__PURE__*/React__default.createElement("dt", {
+    className: "plc-text-base"
+  }, "Total"), /*#__PURE__*/React__default.createElement("dd", {
+    className: "plc-text-base"
+  }, order && ((_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()))))));
+};
+
 const OrderCreateView = props => {
-  var _window$Pelcro, _window$Pelcro$uiSett;
+  var _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro$user$r2, _window2, _window2$Pelcro, _window2$Pelcro$user, _addresses$find, _addresses$find2;
 
-  useTranslation("payment");
   const {
-    order
+    t
+  } = useTranslation("checkoutForm");
+  const {
+    order,
+    selectedAddressId
   } = usePelcro();
   const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
   const showOrderButton = skipPayment && ((order === null || order === void 0 ? void 0 : order.price) === 0 || (order === null || order === void 0 ? void 0 : order.length) > 0 && order.every(item => (item === null || item === void 0 ? void 0 : item.price) === 0));
+  const {
+    addresses
+  } = (_window$Pelcro$user$r = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro2 = _window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.read()) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  const user = (_window$Pelcro$user$r2 = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : _window2$Pelcro$user.read()) !== null && _window$Pelcro$user$r2 !== void 0 ? _window$Pelcro$user$r2 : [];
+  const address = selectedAddressId ? (_addresses$find = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.id == selectedAddressId)) !== null && _addresses$find !== void 0 ? _addresses$find : null : (_addresses$find2 = addresses === null || addresses === void 0 ? void 0 : addresses.find(address => address.type == "shipping" && address.is_default)) !== null && _addresses$find2 !== void 0 ? _addresses$find2 : null;
   return /*#__PURE__*/React__default.createElement("div", {
-    id: "pelcro-order-create-view"
-  }, /*#__PURE__*/React__default.createElement("form", {
+    id: "pelcro-order-create-view",
+    className: "plc-grid plc-grid-cols-1 md:plc-grid-cols-2 plc-gap-20"
+  }, /*#__PURE__*/React__default.createElement(OrderCreateSummary, {
+    order: order
+  }), /*#__PURE__*/React__default.createElement("form", {
     action: "javascript:void(0);",
     className: "plc-mt-2 pelcro-form"
-  }, /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-row plc-justify-between plc-px-8 md:plc-px-0"
+  }, address && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "pelcro-select-address-radio plc-order-2",
+    id: `pelcro-address-select-${address === null || address === void 0 ? void 0 : address.id}`,
+    name: "address"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-name plc-font-semibold"
+  }, t("labels.shippingAddress")), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-company"
+  }, address === null || address === void 0 ? void 0 : address.company), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-name plc-text-sm plc-mt-1"
+  }, address === null || address === void 0 ? void 0 : address.first_name, " ", address === null || address === void 0 ? void 0 : address.last_name), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.line1), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-country plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.city, ", ", address === null || address === void 0 ? void 0 : address.state, " ", address === null || address === void 0 ? void 0 : address.postal_code, ", ", address === null || address === void 0 ? void 0 : address.country))), /*#__PURE__*/React__default.createElement("div", {
+    className: "pelcro-select-address-radio plc-order-2",
+    id: `pelcro-address-select-${address === null || address === void 0 ? void 0 : address.id}`,
+    name: "address"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-name plc-font-semibold"
+  }, t("labels.contactDetails")), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-name plc-text-sm plc-mt-1"
+  }, user.email), /*#__PURE__*/React__default.createElement("p", {
+    className: "pelcro-address-line1 plc-text-sm"
+  }, address === null || address === void 0 ? void 0 : address.phone))), /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
     showExternalPaymentMethods: false,
@@ -33069,6 +33149,7 @@ const OrderCreateModal = ({
 
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-order-create-modal",
+    className: "plc-max-w-7xl",
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__default.createElement("div", {

package/dist/pelcro.css

@@ -2326,6 +2326,10 @@ apple-pay-button {
   display: inline-flex;
 }
 
+.pelcro-root .plc-flow-root{
+  display: flow-root;
+}
+
 .pelcro-root .plc-grid{
   display: grid;
 }
@@ -2382,6 +2386,10 @@ apple-pay-button {
   height: 5rem;
 }
 
+.pelcro-root .plc-h-24{
+  height: 6rem;
+}
+
 .pelcro-root .plc-h-28{
   height: 7rem;
 }
@@ -2422,6 +2430,10 @@ apple-pay-button {
   max-height: 20rem;
 }
 
+.pelcro-root .plc-max-h-checkout{
+  max-height: 35rem;
+}
+
 .pelcro-root .plc-max-h-full{
   max-height: 100%;
 }
@@ -2578,6 +2590,10 @@ apple-pay-button {
   max-width: 48rem;
 }
 
+.pelcro-root .plc-max-w-7xl{
+  max-width: 80rem;
+}
+
 .pelcro-root .plc-max-w-50\%{
   max-width: 50%;
 }
@@ -2590,6 +2606,14 @@ apple-pay-button {
   flex: 1 1 0%;
 }
 
+.pelcro-root .plc-flex-auto{
+  flex: 1 1 auto;
+}
+
+.pelcro-root .plc-flex-none{
+  flex: none;
+}
+
 .pelcro-root .plc-flex-shrink-0{
   flex-shrink: 0;
 }
@@ -2805,6 +2829,10 @@ apple-pay-button {
   gap: 1rem;
 }
 
+.pelcro-root .plc-gap-20{
+  gap: 5rem;
+}
+
 .pelcro-root .plc-gap-x-3{
   column-gap: 0.75rem;
 }
@@ -2835,6 +2863,24 @@ apple-pay-button {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.pelcro-root .plc-space-x-4 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.pelcro-root .plc-space-x-6 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.pelcro-root .plc-space-y-1 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
 .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2853,6 +2899,23 @@ apple-pay-button {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.pelcro-root .plc-space-y-6 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.pelcro-root .plc-divide-y > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.pelcro-root .plc-divide-gray-200 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
+}
+
 .pelcro-root .plc-overflow-auto{
   overflow: auto;
 }
@@ -3200,6 +3263,10 @@ apple-pay-button {
   object-fit: contain;
 }
 
+.pelcro-root .plc-object-cover{
+  object-fit: cover;
+}
+
 .pelcro-root .plc-object-center{
   object-position: center;
 }
@@ -3305,6 +3372,10 @@ apple-pay-button {
   padding-top: 1.25rem;
 }
 
+.pelcro-root .plc-pt-6{
+  padding-top: 1.5rem;
+}
+
 .pelcro-root .plc-pr-1{
   padding-right: 0.25rem;
 }
@@ -3792,6 +3863,10 @@ apple-pay-button {
     margin-left: 2rem;
   }
 
+  .pelcro-root .sm\:plc-block{
+    display: block;
+  }
+
   .pelcro-root .sm\:plc-flex{
     display: flex;
   }
@@ -3824,12 +3899,26 @@ apple-pay-button {
     flex-direction: row;
   }
 
+  .pelcro-root .sm\:plc-items-start{
+    align-items: flex-start;
+  }
+
+  .pelcro-root .sm\:plc-justify-between{
+    justify-content: space-between;
+  }
+
   .pelcro-root .sm\:plc-space-x-2 > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .pelcro-root .sm\:plc-space-x-6 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .pelcro-root .sm\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
     margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -3918,6 +4007,10 @@ apple-pay-button {
     max-width: 80%;
   }
 
+  .pelcro-root .md\:plc-grid-cols-2{
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .pelcro-root .md\:plc-flex-row{
     flex-direction: row;
   }

package/package.json

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