@pelcro/react-pelcro-js 4.0.0-alpha.44 → 4.0.0-alpha.45

package/dist/index.cjs.js

@@ -3997,7 +3997,8 @@ var labels$T = {
 };
 var buttons$g = {
 	next: "Next",
-	select: "View Plans",
+	view: "View Plans",
+	select: "Select",
 	back: "Back",
 	gift: "Gift"
 };
@@ -4944,7 +4945,8 @@ var labels$y = {
 };
 var buttons$b = {
 	next: "Prochain",
-	select: "Voir les forfaits",
+	view: "Voir les plans",
+	select: "Sélectionner",
 	back: "Retour",
 	gift: "cadeau"
 };
@@ -5946,6 +5948,7 @@ var labels$j = {
 };
 var buttons$6 = {
 	next: "다음",
+	view: "요금제 보기",
 	select: "플랜 보기",
 	back: "뒤로",
 	gift: "선물"
@@ -6769,8 +6772,9 @@ var labels$4 = {
 };
 var buttons$1 = {
 	next: "Siguiente",
+	view: "Ver planes",
 	select: "Seleccionar",
-	back: "Ver planes",
+	back: "Volver",
 	gift: "regalo"
 };
 var select_es = {
@@ -9799,7 +9803,7 @@ const userHasPaymentMethod = () => {
 const getEntitlementsFromElem = elem => {
   return elem.dataset.pelcroEntitlements.split(",").map(entitlement => entitlement.trim()).filter(entitlement => entitlement);
 };
-const getPaymentCardIcon$1 = name => {
+const getPaymentCardIcon = name => {
   var _icons$name$toLowerCa;
 
   const icons = {
@@ -13187,18 +13191,19 @@ function Input({
 }) {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label ${labelClassName}`
-  }, required ? /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "plc-text-primary-800 plc-inline-flex plc-mr-1"
-  }, "*") : "", `${label}`), /*#__PURE__*/React__default['default'].createElement("input", Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("input", Object.assign({
     type: "text",
     id: id,
     className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
+    placeholder: "placeholder",
     "aria-describedby": errorId,
     "aria-invalid": Boolean(error)
-  }, otherProps)), error && /*#__PURE__*/React__default['default'].createElement("p", {
+  }, otherProps)), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label ${labelClassName}`
+  }, `${label}`, required ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-text-gray-400 plc-inline-flex plc-ml-1"
+  }, "*") : ""), error && /*#__PURE__*/React__default['default'].createElement("p", {
     id: errorId,
     "aria-live": "assertive",
     className: `pelcro-input-error ${errorClassName}`
@@ -14376,9 +14381,9 @@ const Authorship = () => {
     href: `https://www.pelcro.com/?utm_source=${window.location.hostname}&utm_medium=direct&utm_campaign=powered_by_pelcro`,
     rel: "noopener noreferrer nofollow",
     target: "_blank",
-    className: "plc-inline-flex plc-flex-col plc-items-center"
+    className: "plc-inline-flex plc-flex-row plc-items-center plc-mt-6"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "plc-inline-flex plc-mb-2 pelcro-authorship"
+    className: "plc-inline-flex plc-mr-2 pelcro-authorship"
   }, "Powered by"), /*#__PURE__*/React__default['default'].createElement(SvgPelcroAuthorship, {
     className: "pelcro-authorship"
   }));
@@ -14424,6 +14429,7 @@ function Modal({
 const ModalHeader = ({
   id,
   onDisplay,
+  className = "",
   hideCloseButton,
   children,
   ...props
@@ -14440,7 +14446,7 @@ const ModalHeader = ({
   };
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "pelcro-modal-header"
+    className: `pelcro-modal-header ${className}`
   }, !hideCloseButton && /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
     className: "pelcro-modal-close",
@@ -14449,25 +14455,27 @@ const ModalHeader = ({
   }, /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
     className: "plc-fill-current"
   })), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-items-center plc-justify-center plc-w-full"
+    className: "plc-flex plc-w-full"
   }, /*#__PURE__*/React__default['default'].createElement("img", {
     alt: "business logo",
-    className: `plc-max-h-14 plc-mt-2 pelcro-modal-logo ${(_window$Pelcro = window.Pelcro) !== null && _window$Pelcro !== void 0 && _window$Pelcro._showModalHeader ? "" : "plc-hidden"}`,
+    className: `plc-max-h-14 plc-my-2 pelcro-modal-logo ${(_window$Pelcro = window.Pelcro) !== null && _window$Pelcro !== void 0 && _window$Pelcro._showModalHeader ? "" : "plc-hidden"}`,
     src: (_window$Pelcro$site$r = window.Pelcro.site.read().logo) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.url
   })), children);
 };
 const ModalBody = ({
+  className = "",
   children
 }) => {
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "pelcro-modal-body"
+    className: `pelcro-modal-body ${className}`
   }, children);
 };
 const ModalFooter = ({
+  className = "",
   children
 }) => {
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "pelcro-modal-footer"
+    className: `pelcro-modal-footer ${className}`
   }, children, /*#__PURE__*/React__default['default'].createElement(Authorship, null));
 };
 
@@ -14544,9 +14552,9 @@ function LoginModal({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("messages.loginTo")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(LoginView, Object.assign({
     onForgotPassword: onForgotPassword
   }, props, {
@@ -14982,10 +14990,12 @@ function RegisterModal(props) {
     onDisplay: props === null || props === void 0 ? void 0 : props.onDisplay,
     onClose: props === null || props === void 0 ? void 0 : props.onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, title), /*#__PURE__*/React__default['default'].createElement("p", null, subtitle))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(RegisterView, Object.assign({}, props, {
+    className: "plc-text-xl plc-font-bold"
+  }, title), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, subtitle))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(RegisterView, Object.assign({}, props, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-mb-4"
@@ -14997,45 +15007,6 @@ function RegisterModal(props) {
 }
 RegisterModal.viewId = "register";
 
-function Checkbox({
-  className = "",
-  labelClassName = "",
-  id,
-  children,
-  ...otherProps
-}) {
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-items-center"
-  }, /*#__PURE__*/React__default['default'].createElement("input", Object.assign({
-    type: "checkbox",
-    id: id,
-    className: `pelcro-checkbox ${className}`
-  }, otherProps)), /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-checkbox-label ${labelClassName}`
-  }, children));
-}
-
-function Radio({
-  wrapperClassName = "",
-  className = "",
-  labelClassName = "",
-  id,
-  children,
-  ...otherProps
-}) {
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `plc-flex plc-items-center ${wrapperClassName}`
-  }, /*#__PURE__*/React__default['default'].createElement("input", Object.assign({
-    type: "radio",
-    id: id,
-    className: `pelcro-radio ${className}`
-  }, otherProps)), /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-radio-label ${labelClassName}`
-  }, children));
-}
-
 var initialState_1 = createCommonjsModule(function (module, exports) {
 
 Object.defineProperty(exports, "__esModule", {
@@ -20019,37 +19990,68 @@ class SelectModal extends React.Component {
     });
 
     _defineProperty$3(this, "renderOneProduct", (product, index, options) => {
+      var _product$description, _product$description2;
+
       const isPlanMode = Boolean(this.state.mode === "plan");
-      const productButtonLabel = this.locale("buttons.select");
+      const productButtonLabel = this.locale("buttons.view");
       const productButtonCallback = this.selectProduct;
+      const {
+        productsDescriptionsExpanded
+      } = this.state;
+      const productObject = {
+        id: product.id,
+        index: index,
+        expanded: false
+      };
+
+      if (!this.state.productsDescriptionsExpanded[index]) {
+        productsDescriptionsExpanded.push(productObject);
+      }
+
+      const toggleProductDescriptionExpanded = () => {
+        this.setState({
+          productsDescriptionsExpanded: this.state.productsDescriptionsExpanded.map(obj => obj.index === index ? Object.assign(obj, {
+            expanded: !obj.expanded
+          }) : obj)
+        });
+      };
+
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: product.id,
-        className: `pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-flex plc-flex-col plc-items-start plc-p-4 plc-text-gray-900 plc-border-solid plc-rounded plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
+        className: `pelcro-product plc-relative plc-overflow-hidden plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-center plc-justify-center plc-pt-5 plc-text-gray-900 plc-border-solid plc-rounded-sm plc-border-gray-200 plc-bg-white pelcro-select-product-wrapper ${options !== null && options !== void 0 && options.emphasize ? "plc-border-2" : "plc-border"}`
       }, product.image && /*#__PURE__*/React__default['default'].createElement("figure", {
         className: "plc-w-full plc-mb-4 plc-h-28 plc-relative plc-overflow-hidden plc-flex plc-items-stretch"
       }, /*#__PURE__*/React__default['default'].createElement("img", {
         alt: `image of ${product.name}`,
         src: product.image,
-        className: "plc-object-contain plc-max-w-50% plc-object-left plc-max-h-full pelcro-select-product-image"
+        className: "plc-object-contain plc-max-w-50% plc-object-center plc-mx-auto plc-max-h-full pelcro-select-product-image plc-rounded-sm"
       })), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "plc-flex plc-flex-col plc-flex-wrap plc-w-full plc-flex-1"
+        className: "plc-flex plc-flex-col plc-flex-wrap plc-w-full plc-flex-1 plc-text-center"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-w-full pelcro-select-product-header"
       }, /*#__PURE__*/React__default['default'].createElement("h4", {
-        className: "plc-font-medium plc-text-2xl pelcro-select-product-title"
-      }, product.name), /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "plc-text-sm plc-mt-1 pelcro-select-product-description"
-      }, product.description))), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "plc-mt-auto plc-w-full"
+        className: "plc-font-medium plc-text-base pelcro-select-product-title"
+      }, product.name), (product === null || product === void 0 ? void 0 : (_product$description = product.description) === null || _product$description === void 0 ? void 0 : _product$description.length) <= 105 && /*#__PURE__*/React__default['default'].createElement("p", {
+        className: "plc-text-sm plc-mt-1 pelcro-select-product-description plc-px-8"
+      }, product.description), (product === null || product === void 0 ? void 0 : (_product$description2 = product.description) === null || _product$description2 === void 0 ? void 0 : _product$description2.length) > 105 && /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-text-sm plc-mt-1 pelcro-select-product-description plc-px-8"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: `plc-overflow-x-hidden ${productsDescriptionsExpanded[index].expanded ? "md:plc-whitespace-normal plc-whitespace-normal" : "plc-whitespace-normal"}`
+      }, productsDescriptionsExpanded[index].expanded ? /*#__PURE__*/React__default['default'].createElement("span", null, product.description, " ", /*#__PURE__*/React__default['default'].createElement("button", {
+        onClick: toggleProductDescriptionExpanded,
+        className: "plc-text-primary plc-underline plc-cursor-pointer plc-outline-none focus:plc-outline-none hover:plc-no-underline"
+      }, "Read less")) : /*#__PURE__*/React__default['default'].createElement("span", null, product.description.slice(0, 105), " ... ", /*#__PURE__*/React__default['default'].createElement("button", {
+        onClick: toggleProductDescriptionExpanded,
+        className: "plc-text-primary plc-underline plc-cursor-pointer plc-outline-none focus:plc-outline-none hover:plc-no-underline"
+      }, "Read more")))))), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-mt-auto plc-w-full plc-text-center"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-mt-3 plc-mb-6"
-      }, product.plans && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "plc-mb-2 plc-text-sm plc-text-gray-600 plc-font-bold"
-      }, this.locale("labels.startingAt")), this.countStartPrice(product.plans))), isPlanMode || /*#__PURE__*/React__default['default'].createElement(Button, {
+      }, product.plans && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, this.countStartPrice(product.plans))), isPlanMode || /*#__PURE__*/React__default['default'].createElement(Button, {
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
-        className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+        className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary plc-rounded-none plc-rounded-b-sm hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
       }, productButtonLabel)));
     });
 
@@ -20124,16 +20126,11 @@ class SelectModal extends React.Component {
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-flex plc-flex-col"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center plc-max-w-3xl plc-mx-auto"
+        className: "selectedProduct plc-flex plc-flex-col plc-max-w-3xl plc-ml-11"
       }, /*#__PURE__*/React__default['default'].createElement("h3", {
-        className: "plc-text-2xl plc-mb-3"
-      }, name), image && /*#__PURE__*/React__default['default'].createElement("figure", {
-        className: "plc-mb-2"
-      }, /*#__PURE__*/React__default['default'].createElement("img", {
-        src: image,
-        alt: "Product Image"
-      })), description && /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "plc-max-w-xl plc-text-center"
+        className: "plc-text-2xl plc-font-extrabold plc-mb-3"
+      }, name), description && /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-text-left plc-text-sm"
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: `plc-overflow-x-hidden ${prodDescExpanded ? "md:plc-whitespace-normal plc-whitespace-normal" : "md:plc-whitespace-nowrap plc-whitespace-normal"}`
       }, prodDescExpanded ? /*#__PURE__*/React__default['default'].createElement("span", null, description, " ", /*#__PURE__*/React__default['default'].createElement("button", {
@@ -20179,19 +20176,21 @@ class SelectModal extends React.Component {
         this.state.plan.id === plan.id ? true : false;
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: plan.id,
-          className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-md plc-bg-white pelcro-select-plan-wrapper`
+          className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-min-h-card plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-sm plc-bg-white pelcro-select-plan-wrapper`
         }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-w-full plc-flex plc-flex-col plc-h-full",
+          className: "plc-w-full plc-flex plc-flex-col plc-flex-1 plc-h-full plc-justify-between",
           id: `pelcro-select-plan-${plan.id}`
         }, /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-p-4 plc-text-center plc-flex plc-flex-col plc-justify-center plc-items-center plc-w-full"
+          className: "plc-py-4 plc-text-center plc-flex plc-justify-center plc-items-center plc-w-full plc-border-b plc-border-gray-300"
         }, /*#__PURE__*/React__default['default'].createElement("h4", {
           className: "pelcro-select-plan-title plc-font-medium plc-text-xl plc-break-all"
-        }, plan.nickname), /*#__PURE__*/React__default['default'].createElement("p", {
+        }, plan.nickname)), /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "plc-flex plc-flex-col plc-flex-1 plc-justify-between"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "plc-px-8 plc-py-6 plc-text-center plc-w-full"
+        }, /*#__PURE__*/React__default['default'].createElement("p", {
           className: "plc-text-sm plc-mt-1 pelcro-select-plan-description plc-text-gray-400"
         }, plan.description)), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-mt-auto plc-px-4 plc-mb-4 plc-border-t plc-border-gray-300"
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "plc-pt-4 plc-mb-4 plc-font-semibold pelcro-select-plan-price plc-px-4 plc-text-center plc-flex plc-items-end plc-justify-center"
         }, /*#__PURE__*/React__default['default'].createElement("p", {
           className: "plc-font-bold plc-text-3xl"
@@ -20202,13 +20201,13 @@ class SelectModal extends React.Component {
         }, plan.currency), /*#__PURE__*/React__default['default'].createElement("span", {
           className: "plc-capitalize"
         }, "/ ", plan.interval))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: `plc-grid ${disableGifting ? "plc-grid-cols-1" : "plc-grid-cols-2 plc-gap-2"}`
+          className: `plc-grid plc-bg-primary ${disableGifting ? "plc-grid-cols-1" : "plc-grid-cols-2"}`
         }, /*#__PURE__*/React__default['default'].createElement("button", {
-          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all`,
+          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-sm plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-primary-600 hover:plc-border-primary-600 plc-transition-all`,
           "data-key": plan.id,
           onClick: e => this.selectPlan(e, false)
         }, this.locale("buttons.select")), !disableGifting && /*#__PURE__*/React__default['default'].createElement("button", {
-          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-primary plc-bg-white hover:plc-border-primary-600 hover:plc-text-primary-600 hover:plc-shadow-sm plc-transition-all`,
+          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-sm plc-border-primary focus:plc-outline-none plc-text-primary plc-bg-white hover:plc-border-primary-600 hover:plc-text-primary-600 hover:plc-shadow-sm plc-transition-all`,
           "data-key": plan.id,
           onClick: e => this.selectPlan(e, true)
         }, this.locale("buttons.gift"))))));
@@ -20307,6 +20306,7 @@ class SelectModal extends React.Component {
       initialTabSlide: 0,
       scrollToTab: true,
       prodDescExpanded: false,
+      productsDescriptionsExpanded: [],
       productList: props.matchingEntitlements ? window.Pelcro.product.getByEntitlements(props.matchingEntitlements) : window.Pelcro.product.list()
     };
     this.product = this.props.product || window.Pelcro.paywall.getProduct();
@@ -20341,17 +20341,20 @@ class SelectModal extends React.Component {
       hideCloseButton: !this.closeButton,
       onClose: this.props.onClose,
       id: "pelcro-selection-modal"
-    }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, {
+      className: "plc-pl-20"
+    }, /*#__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"
     }, this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement("button", {
       type: "button",
       onClick: this.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 sm:plc-left-5 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-2xl plc-font-semibold"
-    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_title)), /*#__PURE__*/React__default['default'].createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc3 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc3 === void 0 ? void 0 : _window$Pelcro$produc3.paywall.select_subtitle)))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement("div", {
-      id: "pelcro-selection-view",
-      className: "plc-pt-4"
+      className: "plc-text-xl plc-font-bold"
+    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_title)), /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "plc-text-sm"
+    }, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc3 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc3 === void 0 ? void 0 : _window$Pelcro$produc3.paywall.select_subtitle)))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "pelcro-selection-view"
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "pelcro-select-products-wrapper"
     }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement("div", {
@@ -24242,42 +24245,51 @@ const PaymentMethodContainer = props => {
 };
 
 const StripeInputStyle = {
-  base: "plc-w-full plc-p-3 plc-border plc-border-gray-300 plc-appearance-none plc-outline-none plc-rounded-sm plc-bg-gray-50 pelcro-input-input",
+  base: "plc-w-full plc-p-3 plc-border plc-border-gray-300 plc-appearance-none plc-outline-none plc-rounded plc-bg-white pelcro-input-input",
   focus: "plc-ring-2 plc-ring-primary-400",
-  invalid: "plc-ring-2 plc-ring-red-400 pelcro-input-invalid"
+  invalid: "plc-ring-2 plc-ring-red-300 pelcro-input-invalid"
 };
 const PelcroCardNumber = props => {
   const {
     t
   } = useTranslation("checkoutForm");
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: "pelcro-input-card-number"
-  }, t("labels.card"), " *"), /*#__PURE__*/React__default['default'].createElement(es_9, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-relative"
+  }, /*#__PURE__*/React__default['default'].createElement(es_9, Object.assign({
     id: "pelcro-input-card-number",
     classes: StripeInputStyle
-  }, props)));
+  }, props)), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "pelcro-input-card-number",
+    className: "pelcro-input-card-number-label"
+  }, t("labels.card"), " *"));
 };
 const PelcroCardCVC = props => {
   const {
     t
   } = useTranslation("checkoutForm");
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: "pelcro-input-cvc-number"
-  }, t("labels.CVC"), " *"), /*#__PURE__*/React__default['default'].createElement(es_6, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-relative"
+  }, /*#__PURE__*/React__default['default'].createElement(es_6, Object.assign({
     id: "pelcro-input-cvc-number",
     classes: StripeInputStyle
-  }, props)));
+  }, props)), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "pelcro-input-cvc-number",
+    className: "pelcro-input-cvc-number-label"
+  }, t("labels.CVC"), " *"));
 };
 const PelcroCardExpiry = props => {
   const {
     t
   } = useTranslation("checkoutForm");
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: "pelcro-input-expiry-date"
-  }, t("labels.date"), " *"), /*#__PURE__*/React__default['default'].createElement(es_8, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-relative"
+  }, /*#__PURE__*/React__default['default'].createElement(es_8, Object.assign({
     id: "pelcro-input-expiry-date",
     classes: StripeInputStyle
-  }, props)));
+  }, props)), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: "pelcro-input-expiry-date",
+    className: "pelcro-input-expiry-date-label"
+  }, t("labels.date"), " *"));
 };
 const PelcroPaymentRequestButton = props => {
   const {
@@ -24338,18 +24350,55 @@ const CheckoutForm = () => {
   }
 
   if (cardProcessor === "stripe") {
-    return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-mt-4"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-relative"
+    }, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
       autoFocus: true
-    }), /*#__PURE__*/React__default['default'].createElement("img", {
-      alt: "credit_cards",
-      className: "plc-w-auto plc-h-4 plc-mt-2",
-      src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
     }), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+      // alt="credit_cards"
+      className: "plc-w-auto plc-h-8 plc-absolute plc-right-2 plc-top-1 plc-flex" // src="https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
+
+    }, /*#__PURE__*/React__default['default'].createElement("svg", {
+      className: "plc-w-8",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#1565C0",
+      d: "M15.186 19l-2.626 7.832c0 0-.667-3.313-.733-3.729-1.495-3.411-3.701-3.221-3.701-3.221L10.726 30v-.002h3.161L18.258 19H15.186zM17.689 30L20.56 30 22.296 19 19.389 19zM38.008 19h-3.021l-4.71 11h2.852l.588-1.571h3.596L37.619 30h2.613L38.008 19zM34.513 26.328l1.563-4.157.818 4.157H34.513zM26.369 22.206c0-.606.498-1.057 1.926-1.057.928 0 1.991.674 1.991.674l.466-2.309c0 0-1.358-.515-2.691-.515-3.019 0-4.576 1.444-4.576 3.272 0 3.306 3.979 2.853 3.979 4.551 0 .291-.231.964-1.888.964-1.662 0-2.759-.609-2.759-.609l-.495 2.216c0 0 1.063.606 3.117.606 2.059 0 4.915-1.54 4.915-3.752C30.354 23.586 26.369 23.394 26.369 22.206z"
+    }), /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#FFC107",
+      d: "M12.212,24.945l-0.966-4.748c0,0-0.437-1.029-1.573-1.029c-1.136,0-4.44,0-4.44,0S10.894,20.84,12.212,24.945z"
+    })), /*#__PURE__*/React__default['default'].createElement("svg", {
+      className: "plc-w-8",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#ff9800",
+      d: "M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z"
+    }), /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#d50000",
+      d: "M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z"
+    }), /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#ff3d00",
+      d: "M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"
+    })), /*#__PURE__*/React__default['default'].createElement("svg", {
+      className: "plc-w-8",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48"
+    }, /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#1976D2",
+      d: "M45,35c0,2.209-1.791,4-4,4H7c-2.209,0-4-1.791-4-4V13c0-2.209,1.791-4,4-4h34c2.209,0,4,1.791,4,4V35z"
+    }), /*#__PURE__*/React__default['default'].createElement("path", {
+      fill: "#FFF",
+      d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
+    })))), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex plc-items-end plc-justify-between plc-my-4"
     }, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-w-6/12 plc-pr-4"
+      className: "plc-w-6/12 plc-pr-1"
     }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-w-6/12 plc-pl-4"
+      className: "plc-w-6/12 plc-pl-1"
     }, /*#__PURE__*/React__default['default'].createElement(PelcroCardCVC, null))));
   }
 
@@ -24564,7 +24613,7 @@ const CouponCode = ({
     }),
     onClick: showCouponField
   }, otherProps), !enableCouponField ? t("labels.addCode") : t("labels.hideCode")), enableCouponField && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-w-full plc-mt-2 pelcro-apply-coupon-wrapper"
+    className: "plc-flex plc-w-full plc-mt-2 plc-mb-8 pelcro-apply-coupon-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement(CouponCodeField, null), /*#__PURE__*/React__default['default'].createElement(ApplyCouponButton, null)));
 };
 
@@ -24949,7 +24998,7 @@ const SelectedPaymentMethod = () => {
     className: "plc-flex plc-items-center plc-justify-between plc-w-full"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-space-x-2"
-  }, getPaymentCardIcon$1((_paymentMethod$proper = paymentMethod.properties) === null || _paymentMethod$proper === void 0 ? void 0 : _paymentMethod$proper.brand), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, getPaymentCardIcon((_paymentMethod$proper = paymentMethod.properties) === null || _paymentMethod$proper === void 0 ? void 0 : _paymentMethod$proper.brand), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
   }, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-font-semibold"
@@ -25136,13 +25185,13 @@ function PaymentMethodView({
   const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
   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 sm:plc-px-8 pelcro-payment-block"
+    className: "plc-flex plc-flex-col plc-items-center 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"
+    className: "plc-w-full plc-font-semibold plc-text-left plc-text-gray-900 plc-mb-6"
   }, /*#__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"
+    className: "plc-font-bold"
   }, order === null || order === void 0 ? void 0 : order.name) : /*#__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", {
@@ -25222,8 +25271,8 @@ const SubscriptionRenewView = ({
     return /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-text-gray-600"
     }, /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-tracking-wider plc-uppercase"
-    }, plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-bold"
+    }, product.name, " - ", plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-text-xl plc-font-semibold plc-text-primary-600"
     }, plan.amount_formatted, " "), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-font-thin"
@@ -25233,9 +25282,9 @@ const SubscriptionRenewView = ({
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-subscription-renew-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+    className: "plc-flex plc-flex-col plc-items-center plc-mb-6 plc-text-left plc-text-gray-900 pelcro-title-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-full plc-p-2 plc-mt-2 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
+    className: "plc-w-full plc-font-semibold plc-text-left plc-text-gray-900"
   }, plan && getPricingText(plan))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
     type: "createPayment",
     showCoupon: true,
@@ -25294,10 +25343,12 @@ function SubscriptionRenewModal({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold "
-  }, (_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", null, (_product$paywall$subs2 = product === null || product === void 0 ? void 0 : (_product$paywall2 = product.paywall) === null || _product$paywall2 === void 0 ? void 0 : _product$paywall2.subscribe_subtitle) !== null && _product$paywall$subs2 !== void 0 ? _product$paywall$subs2 : (_window$Pelcro$paywal2 = window.Pelcro.paywall.read()) === null || _window$Pelcro$paywal2 === void 0 ? void 0 : _window$Pelcro$paywal2.subscribe_subtitle))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionRenewView, Object.assign({}, otherProps, {
+    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", {
+    className: "plc-text-sm"
+  }, (_product$paywall$subs2 = product === null || product === void 0 ? void 0 : (_product$paywall2 = product.paywall) === null || _product$paywall2 === void 0 ? void 0 : _product$paywall2.subscribe_subtitle) !== null && _product$paywall$subs2 !== void 0 ? _product$paywall$subs2 : (_window$Pelcro$paywal2 = window.Pelcro.paywall.read()) === null || _window$Pelcro$paywal2 === void 0 ? void 0 : _window$Pelcro$paywal2.subscribe_subtitle))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionRenewView, Object.assign({}, otherProps, {
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -25377,7 +25428,7 @@ const Tooltip = ({
   className
 }) => {
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `plc-flex pelcro-tooltip-container plc-text-gray-600 ${className}`
+    className: `plc-flex pelcro-tooltip-container plc-text-gray-400 ${className}`
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "pelcro-tooltip-icon"
   }, /*#__PURE__*/React__default['default'].createElement(SvgInfoCircle, null)), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -25404,19 +25455,20 @@ function TextArea({
 }) {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
-  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    value: tooltipText,
-    className: "plc-ml-1"
-  })), /*#__PURE__*/React__default['default'].createElement("textarea", Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("textarea", Object.assign({
     type: "text",
     id: id,
     className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
+    placeholder: "placeholder",
     "aria-describedby": errorId,
     "aria-invalid": Boolean(error)
-  }, otherProps)), error && /*#__PURE__*/React__default['default'].createElement("p", {
+  }, otherProps)), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
+  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+    value: tooltipText,
+    className: "plc-ml-1"
+  })), error && /*#__PURE__*/React__default['default'].createElement("p", {
     id: errorId,
     "aria-live": "assertive",
     className: `pelcro-input-error ${errorClassName}`
@@ -25656,9 +25708,9 @@ const SubscriptionCancelModal = ({
     onClose: onClose,
     id: "pelcro-subscription-cancel-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("labels.title"), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-text-gray-400 plc-text-base plc-block"
   }, "(", subscriptionToCancel.plan.nickname, ")")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -25731,19 +25783,20 @@ function DatePicker({
 }) {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
-  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    value: tooltipText,
-    className: "plc-ml-1"
-  })), /*#__PURE__*/React__default['default'].createElement("input", Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("input", Object.assign({
     type: "date",
     id: id,
     className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
+    placeholder: "placeholder",
     "aria-describedby": errorId,
     "aria-invalid": Boolean(error)
-  }, otherProps)), error && /*#__PURE__*/React__default['default'].createElement("p", {
+  }, otherProps)), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
+  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+    value: tooltipText,
+    className: "plc-ml-1"
+  })), error && /*#__PURE__*/React__default['default'].createElement("p", {
     id: errorId,
     "aria-live": "assertive",
     className: `pelcro-input-error ${errorClassName}`
@@ -25898,9 +25951,9 @@ function SubscriptionSuspendModal({
     onClose: onClose,
     id: "pelcro-subscription-suspend-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("labels.title"), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-text-gray-400 plc-text-base plc-block"
   }, "(", subscriptionToSuspend.plan.nickname, ")")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionSuspendView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -26207,10 +26260,12 @@ class DefaultNewsLetter extends React.Component {
       onClose: this.props.onClose,
       id: "pelcro-newsletter-modal"
     }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+      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", {
-      className: "plc-text-2xl plc-font-semibold"
-    }, this.title), /*#__PURE__*/React__default['default'].createElement("p", null, this.subtitle))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-text-xl plc-font-bold"
+    }, this.title), /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "plc-text-sm"
+    }, this.subtitle))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement("div", {
       id: "pelcro-newsletter-view"
     }, /*#__PURE__*/React__default['default'].createElement("form", {
       action: "javascript:void(0);",
@@ -26489,6 +26544,25 @@ const NewsletterUpdateButton = ({
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
 
+function Checkbox({
+  className = "",
+  labelClassName = "",
+  id,
+  children,
+  ...otherProps
+}) {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-center"
+  }, /*#__PURE__*/React__default['default'].createElement("input", Object.assign({
+    type: "checkbox",
+    id: id,
+    className: `pelcro-checkbox ${className}`
+  }, otherProps)), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-checkbox-label ${labelClassName}`
+  }, children));
+}
+
 const NewsletterUpdateList = () => {
   const handleSelectNewsletter = event => {
     dispatch({
@@ -26557,9 +26631,9 @@ const NewsletterUpdateModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("updateTitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 };
 NewsletterUpdateModal.viewId = "newsletter-update";
@@ -26654,8 +26728,8 @@ const SubscriptionCreateView = ({
     return /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-text-gray-600"
     }, /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-tracking-wider plc-uppercase"
-    }, plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-bold"
+    }, product.name, " - ", plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-text-xl plc-font-semibold plc-text-primary-600"
     }, priceFormatted, " "), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-font-thin"
@@ -26665,9 +26739,9 @@ const SubscriptionCreateView = ({
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-subscription-create-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-flex-col plc-items-center plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper sm:plc-px-8"
+    className: "plc-flex plc-flex-col plc-items-center plc-mb-6 plc-text-left plc-text-gray-900 pelcro-title-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-full plc-p-2 plc-mt-2 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
+    className: "plc-w-full plc-font-semibold plc-text-left plc-text-gray-900"
   }, plan && getPricingText(plan))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
     type: "createPayment",
     showCoupon: true,
@@ -26707,10 +26781,12 @@ function SubscriptionCreateModal({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold "
-  }, (_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", null, (_product$paywall$subs2 = product === null || product === void 0 ? void 0 : (_product$paywall2 = product.paywall) === null || _product$paywall2 === void 0 ? void 0 : _product$paywall2.subscribe_subtitle) !== null && _product$paywall$subs2 !== void 0 ? _product$paywall$subs2 : (_window$Pelcro$paywal2 = window.Pelcro.paywall.read()) === null || _window$Pelcro$paywal2 === void 0 ? void 0 : _window$Pelcro$paywal2.subscribe_subtitle))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateView, Object.assign({}, otherProps, {
+    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", {
+    className: "plc-text-sm"
+  }, (_product$paywall$subs2 = product === null || product === void 0 ? void 0 : (_product$paywall2 = product.paywall) === null || _product$paywall2 === void 0 ? void 0 : _product$paywall2.subscribe_subtitle) !== null && _product$paywall$subs2 !== void 0 ? _product$paywall$subs2 : (_window$Pelcro$paywal2 = window.Pelcro.paywall.read()) === null || _window$Pelcro$paywal2 === void 0 ? void 0 : _window$Pelcro$paywal2.subscribe_subtitle))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateView, Object.assign({}, otherProps, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 }
@@ -27198,10 +27274,12 @@ function SubscriptionManageMembersModal({
     onClose: onClose,
     className: "plc-max-w-xl"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("labels.inviteMembers")), /*#__PURE__*/React__default['default'].createElement("p", null, "Comma-separated list e.g. 'john@example.com,jane@example.com'"))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionManageMembersView, Object.assign({}, props, {
+    className: "plc-text-xl plc-font-bold"
+  }, t("labels.inviteMembers")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, "Comma-separated list e.g. 'john@example.com,jane@example.com'"))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionManageMembersView, Object.assign({}, props, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 }
@@ -27470,7 +27548,7 @@ const UserUpdateEmail = props => {
     enableEmailEdit: enableEmailEdit
   }, props)), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "icon",
-    className: "plc-absolute  plc-rounded-none plc-text-gray-500 plc-w-12 plc-h-12 plc-top-7 plc-right-0 hover:plc-text-gray-900 hover:plc-bg-transparent focus:plc-ring-0 focus:plc-shadow-none",
+    className: "plc-absolute plc-rounded-none plc-text-gray-500 plc-w-12 plc-h-12 plc--top-1 plc-right-0 hover:plc-text-gray-900 hover:plc-bg-transparent focus:plc-ring-0 focus:plc-shadow-none",
     icon: enableEmailEdit ? /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
       className: "plc-w-6"
     }) : /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
@@ -27795,10 +27873,12 @@ function UserUpdateModal({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("labels.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("labels.subtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(UserUpdateView, Object.assign({
+    className: "plc-text-xl plc-font-bold"
+  }, t("labels.title")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, t("labels.subtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(UserUpdateView, Object.assign({
     onPictureClick: onPictureClick
   }, otherProps))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 }
@@ -28355,17 +28435,18 @@ function Select({
 }) {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label ${labelClassName}`
-  }, required ? /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "plc-text-primary-800 plc-inline-flex plc-mr-1"
-  }, "*") : "", `${label}`), /*#__PURE__*/React__default['default'].createElement("select", Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement("select", Object.assign({
     id: id,
     className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
+    placeholder: "placeholder",
     "aria-describedby": errorId,
     "aria-invalid": Boolean(error)
-  }, otherProps), children), error && /*#__PURE__*/React__default['default'].createElement("p", {
+  }, otherProps), children), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label ${labelClassName}`
+  }, `${label}`, required ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-text-gray-400 plc-inline-flex plc-ml-1"
+  }, "*") : ""), error && /*#__PURE__*/React__default['default'].createElement("p", {
     id: errorId,
     "aria-live": "assertive",
     className: `pelcro-input-error ${errorClassName}`
@@ -28656,9 +28737,9 @@ const AddressCreateModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    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, {
     onSuccess: onSuccess,
     onGiftRedemptionSuccess: onGiftRedemptionSuccess,
@@ -29317,9 +29398,9 @@ const AddressUpdateModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressUpdateView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 };
 AddressUpdateModal.viewId = "address-edit";
@@ -29401,10 +29482,12 @@ const PaymentMethodUpdateModal = props => {
     onDisplay: props.onDisplay,
     onClose: props.onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold "
-  }, t("update.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("update.subtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodUpdateView, Object.assign({}, props, {
+    className: "plc-text-xl plc-font-bold"
+  }, t("update.title")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, t("update.subtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodUpdateView, Object.assign({}, props, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 };
@@ -29647,10 +29730,12 @@ const PasswordResetModal = ({
     onClose: onClose,
     id: "pelcro-password-reset-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("subtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PasswordResetView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
+    className: "plc-text-xl plc-font-bold"
+  }, t("title")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, t("subtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PasswordResetView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 };
 PasswordResetModal.viewId = "password-reset";
 
@@ -29835,9 +29920,9 @@ const PasswordForgotModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PasswordForgotView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-mb-9"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
@@ -30027,9 +30112,9 @@ const PasswordlessRequestModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PasswordlessRequestView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 };
 PasswordlessRequestModal.viewId = "passwordless-request";
@@ -30399,9 +30484,9 @@ const PasswordChangeModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PasswordChangeView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 };
 PasswordChangeModal.viewId = "password-change";
@@ -30699,9 +30784,9 @@ const CartModal = ({
     onClose: onClose,
     hideCloseButton: false
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold "
+    className: "plc-text-xl plc-font-bold "
   }, t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(CartView, Object.assign({}, otherProps, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -30845,9 +30930,9 @@ const OrderCreateModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold "
+    className: "plc-text-xl plc-font-bold "
   }, t("labels.checkout.title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(OrderCreateView, Object.assign({}, otherProps, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -31264,9 +31349,9 @@ const GiftCreateModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("gift.titles.firstTitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(GiftCreateView, Object.assign({}, otherProps, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement("p", {
@@ -31538,10 +31623,12 @@ const GiftRedeemModal = ({
     onClose: onClose,
     onDisplay: onDisplay
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("redeem.titles.firstTitle")), /*#__PURE__*/React__default['default'].createElement("p", null, t("redeem.titles.secondTitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(GiftRedeemView, Object.assign({}, otherProps, {
+    className: "plc-text-xl plc-font-bold"
+  }, t("redeem.titles.firstTitle")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, t("redeem.titles.secondTitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(GiftRedeemView, Object.assign({}, otherProps, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, isAuthenticated() && /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-mb-9"
@@ -31741,6 +31828,26 @@ const AddressSelectContainer = ({
   })));
 };
 
+function Radio({
+  wrapperClassName = "",
+  className = "",
+  labelClassName = "",
+  id,
+  children,
+  ...otherProps
+}) {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: `plc-flex plc-items-center ${wrapperClassName}`
+  }, /*#__PURE__*/React__default['default'].createElement("input", Object.assign({
+    type: "radio",
+    id: id,
+    className: `pelcro-radio ${className}`
+  }, otherProps)), /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-radio-label ${labelClassName}`
+  }, children));
+}
+
 const AddressSelectList = () => {
   const {
     dispatch,
@@ -31876,10 +31983,12 @@ const AddressSelectModal = ({
     onClose: onClose,
     id: "pelcro-address-select-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("selectAddressTitle")), /*#__PURE__*/React__default['default'].createElement("p", null, t("selectAddressSubtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressSelectView, Object.assign({
+    className: "plc-text-xl plc-font-bold"
+  }, t("selectAddressTitle")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, t("selectAddressSubtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(AddressSelectView, Object.assign({
     onAddNewAddress: onAddNewAddress
   }, otherProps, {
     onSuccess: onSuccess,
@@ -32035,7 +32144,7 @@ const PaymentMethodSelectList = () => {
       checked: isSelected,
       value: paymentMethod.id,
       onChange: handlePaymentMethodSelect
-    }, getPaymentCardIcon$1((_paymentMethod$proper = paymentMethod.properties) === null || _paymentMethod$proper === void 0 ? void 0 : _paymentMethod$proper.brand), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, getPaymentCardIcon((_paymentMethod$proper = paymentMethod.properties) === null || _paymentMethod$proper === void 0 ? void 0 : _paymentMethod$proper.brand), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
     }, /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-font-semibold"
@@ -32135,10 +32244,12 @@ const PaymentMethodSelectModal = ({
     onClose: onClose,
     id: "pelcro-payment-method-select-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("select.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("select.subtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectView, Object.assign({
+    className: "plc-text-xl plc-font-bold"
+  }, t("select.title")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, t("select.subtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectView, Object.assign({
     onAddNewPaymentMethod: onAddNewPaymentMethod
   }, otherProps, {
     onSuccess: onSuccess
@@ -33494,12 +33605,12 @@ const Card = ({
 }) => {
   useTranslation("dashboard");
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `plc-bg-white plc-border-2 plc-p-6 plc-rounded plc-my-11 md:plc-my-20 ${className}`,
+    className: `plc-bg-white plc-border-2 plc-p-6 md:plc-p-8 plc-rounded plc-my-11 md:plc-my-20 ${className}`,
     id: "plc-dashboard-card"
   }, title && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-end plc-justify-between"
   }, /*#__PURE__*/React__default['default'].createElement("h3", {
-    className: "plc-font-medium plc-text-xl"
+    className: "plc-font-bold plc-text-xl"
   }, title), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.loading) && /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-text-blue-500"
   }, "Loading..."), (requestStates === null || requestStates === void 0 ? void 0 : requestStates.success) && /*#__PURE__*/React__default['default'].createElement("span", {
@@ -34757,7 +34868,7 @@ const AddressesMenu = props => {
 
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-addresses-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto",
     title: t("labels.addresses"),
     requestStates: requestStates
   }, /*#__PURE__*/React__default['default'].createElement(AddressesItems, {
@@ -34778,6 +34889,11 @@ const AddressesItems = props => {
   } = useTranslation("dashboard");
   const [selectedAddressId, setSelectedAddressId] = React.useState(null);
   const allAddresses = (_window$Pelcro$user$r = window.Pelcro.user.read().addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  React.useEffect(() => {
+    var _getDefaultAddress;
+
+    setSelectedAddressId(String((_getDefaultAddress = getDefaultAddress(addresses)) === null || _getDefaultAddress === void 0 ? void 0 : _getDefaultAddress.id));
+  }, []);
 
   const getDefaultAddress = addresses => {
     return addresses.find(address => address.is_default) || false;
@@ -34791,11 +34907,6 @@ const AddressesItems = props => {
 
   const addresses = moveDefaultAddressToStart(allAddresses);
   if (addresses.length === 0) return null;
-  React.useEffect(() => {
-    var _getDefaultAddress;
-
-    setSelectedAddressId(String((_getDefaultAddress = getDefaultAddress(addresses)) === null || _getDefaultAddress === void 0 ? void 0 : _getDefaultAddress.id));
-  }, []);
   return addresses.map((address, index) => address.type === "shipping" && /*#__PURE__*/React__default['default'].createElement("div", {
     key: address.id,
     className: `plc-py-2 plc-px-4 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark ${selectedAddressId === String(address.id) && `plc-border-primary-400 plc-border-2`}`
@@ -34809,9 +34920,9 @@ const AddressesItems = props => {
     className: "pelcro-address-line1 plc-text-sm plc-mt-2"
   }, address.line1), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "pelcro-address-country plc-text-sm"
-  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name), address.is_default && /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-mt-4"
-  }, t("labels.default"))), /*#__PURE__*/React__default['default'].createElement(Button, {
+  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name)), address.is_default && /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-mr-4"
+  }, t("labels.default")), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "icon",
     className: "plc-text-gray-500",
     icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
@@ -34821,89 +34932,6 @@ const AddressesItems = props => {
   })));
 };
 
-const SUB_MENUS = {
-  PROFILE: "profile",
-  QRCODE: "qr-code",
-  PASSWORDCHANGE: "passwordChange",
-  SUBSCRIPTIONS: "subscriptions",
-  DONATIONS: "donations",
-  MEMBERSHIPS: "memberships",
-  NEWSLETTERS: "Newsletters",
-  PAYMENT_CARDS: "payment-cards",
-  ADDRESSES: "addresses",
-  GIFTS: "gifts",
-  ORDERS: "orders",
-  INVOICES: "invoices",
-  LOGOUT: "logout",
-  SAVED_ITEMS: "saved-items"
-};
-const getPaymentCardIcon = name => {
-  var _icons$name$toLowerCa;
-
-  const icons = {
-    visa: /*#__PURE__*/React__default['default'].createElement("svg", {
-      className: "plc-w-12",
-      fill: "#000000",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 50 50"
-    }, /*#__PURE__*/React__default['default'].createElement("path", {
-      d: "M 5 7 C 2.25 7 0 9.25 0 12 L 0 38 C 0 40.75 2.25 43 5 43 L 45 43 C 47.75 43 50 40.75 50 38 L 50 12 C 50 9.25 47.75 7 45 7 Z M 5 9 L 45 9 C 46.667969 9 48 10.332031 48 12 L 48 38 C 48 39.667969 46.667969 41 45 41 L 5 41 C 3.332031 41 2 39.667969 2 38 L 2 12 C 2 10.332031 3.332031 9 5 9 Z M 29.6875 19.40625 C 26.585938 19.40625 25 20.933594 25 22.875 C 25 26.386719 29.0625 25.914063 29.0625 27.71875 C 29.0625 28.023438 28.828125 28.75 27.125 28.75 C 25.417969 28.75 24.3125 28.09375 24.3125 28.09375 L 23.78125 30.46875 C 23.78125 30.46875 24.886719 31.09375 27 31.09375 C 29.113281 31.09375 32.03125 29.476563 32.03125 27.125 C 32.03125 24.296875 27.96875 24.074219 27.96875 22.8125 C 27.96875 22.167969 28.46875 21.6875 29.9375 21.6875 C 30.890625 21.6875 31.96875 22.40625 31.96875 22.40625 L 32.46875 19.96875 C 32.46875 19.96875 31.050781 19.40625 29.6875 19.40625 Z M 16.46875 19.625 L 13.78125 27.5625 C 13.78125 27.5625 13.597656 26.886719 13.53125 26.46875 C 11.996094 23.023438 9.5 21.75 9.5 21.75 L 11.875 30.75 L 15.125 30.75 L 19.625 19.625 Z M 20.78125 19.625 L 19.03125 30.75 L 22 30.75 L 23.78125 19.625 Z M 36.8125 19.625 L 31.96875 30.75 L 34.90625 30.75 L 35.5 29.15625 L 39.1875 29.15625 L 39.5 30.75 L 42.1875 30.75 L 39.90625 19.625 Z M 6.25 19.65625 C 6.25 19.65625 12.054688 21.453125 13.40625 25.8125 L 12.40625 20.75 C 12.40625 20.75 11.976563 19.65625 10.8125 19.65625 Z M 37.9375 22.84375 L 38.75 27.03125 L 36.3125 27.03125 Z"
-    })),
-    mastercard: /*#__PURE__*/React__default['default'].createElement("svg", {
-      className: "plc-w-12",
-      fill: "#000000",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 50 50"
-    }, /*#__PURE__*/React__default['default'].createElement("path", {
-      d: "M 5 7 C 2.25 7 0 9.25 0 12 L 0 38 C 0 40.75 2.25 43 5 43 L 45 43 C 47.75 43 50 40.75 50 38 L 50 12 C 50 9.25 47.75 7 45 7 Z M 5 9 L 45 9 C 46.667969 9 48 10.332031 48 12 L 48 38 C 48 39.667969 46.667969 41 45 41 L 5 41 C 3.332031 41 2 39.667969 2 38 L 2 12 C 2 10.332031 3.332031 9 5 9 Z M 17 13 C 10.382812 13 5 18.382812 5 25 C 5 31.617188 10.382812 37 17 37 C 20.078125 37 22.875 35.816406 25 33.90625 C 27.125 35.816406 29.925781 37 33 37 C 39.617188 37 45 31.617188 45 25 C 45 18.382812 39.617188 13 33 13 C 29.925781 13 27.125 14.183594 25 16.09375 C 22.875 14.183594 20.078125 13 17 13 Z M 33 15 C 38.535156 15 43 19.464844 43 25 C 43 30.535156 38.535156 35 33 35 C 30.449219 35 28.109375 34.066406 26.34375 32.5 C 27.996094 30.441406 29 27.839844 29 25 C 29 22.160156 27.996094 19.558594 26.34375 17.5 C 28.109375 15.933594 30.449219 15 33 15 Z M 33 15 "
-    })),
-    "american express": /*#__PURE__*/React__default['default'].createElement("svg", {
-      className: "plc-w-12",
-      fill: "#000000",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 50 50"
-    }, /*#__PURE__*/React__default['default'].createElement("path", {
-      d: "M 5 7 C 2.25 7 0 9.25 0 12 L 0 38 C 0 40.75 2.25 43 5 43 L 45 43 C 47.75 43 50 40.75 50 38 L 50 12 C 50 9.25 47.75 7 45 7 Z M 5 9 L 45 9 C 46.667969 9 48 10.332031 48 12 L 48 38 C 48 39.667969 46.667969 41 45 41 L 5 41 C 3.332031 41 2 39.667969 2 38 L 2 12 C 2 10.332031 3.332031 9 5 9 Z M 8.5625 19.90625 L 4.84375 28.40625 L 7.0625 28.40625 L 7.875 26.5 L 12.0625 26.5 L 12.875 28.40625 L 17.09375 28.40625 L 17.09375 22.09375 L 19.90625 28.40625 L 21.8125 28.40625 L 24.65625 22.1875 L 24.65625 28.40625 L 26.75 28.40625 L 26.75 19.90625 L 23.40625 19.90625 L 20.84375 25.625 L 18.28125 19.90625 L 15 19.90625 L 15 28.09375 L 11.34375 19.90625 Z M 29.5 19.90625 L 29.5 28.4375 L 37.5 28.4375 L 40 25.59375 L 42.46875 28.4375 L 45.125 28.4375 L 41.375 24.0625 L 45.125 19.90625 L 42.46875 19.90625 L 40.0625 22.5625 L 37.75 19.90625 Z M 9.90625 21.6875 L 11.21875 24.6875 L 8.65625 24.6875 Z M 31.5625 21.71875 L 36.65625 21.75 L 38.6875 24.0625 L 36.40625 26.625 L 31.5625 26.625 L 31.5625 24.9375 L 36.1875 24.9375 L 36.1875 23.3125 L 31.5625 23.3125 Z"
-    }))
-  };
-  return (_icons$name$toLowerCa = icons[name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default['default'].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-w-12",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1",
-    d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-  }));
-};
-const hasInvoices = () => {
-  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
-
-  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
-  return invoices.length > 0;
-};
-const showNewsletters = () => {
-  var _ref, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$uiSett2;
-
-  const showNewslettersUiSettings = (_ref = ((_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$uiSett2 = _window$Pelcro$uiSett.newsletters) === null || _window$Pelcro$uiSett2 === void 0 ? void 0 : _window$Pelcro$uiSett2.length) > 0) !== null && _ref !== void 0 ? _ref : false;
-  return showNewslettersUiSettings;
-};
-const hasDonationSubs = () => {
-  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r, _window$Pelcro$user$r2;
-
-  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
-  const canceledDonations = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
-  return donations.length > 0 || canceledDonations.length > 0;
-};
-const hasActiveMemberships = () => {
-  var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
-
-  return (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read().memberships) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.some(membership => membership.status === "active" && membership.subscription.ended_at === null)) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : false;
-};
-
 const PaymentCardsMenu = props => {
   const {
     t
@@ -34919,7 +34947,7 @@ const PaymentCardsMenu = props => {
 
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-payment-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto",
     title: t("labels.paymentSource")
   }, source ? /*#__PURE__*/React__default['default'].createElement(PaymentCardsItems, {
     displaySourceCreate: displaySourceCreate,
@@ -34935,7 +34963,7 @@ const PaymentCardsItems = props => {
 
   useTranslation("dashboard");
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `plc-py-2 plc-px-4 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark`
+    className: `plc-py-4 plc-px-6 plc-mt-5 plc-flex plc-items-center plc-justify-between last:plc-mb-0 plc-rounded plc-text-gray-900 pelcro-address-wrapper plc-bg-white plc-shadow-md_dark`
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center"
   }, /*#__PURE__*/React__default['default'].createElement("p", {
@@ -36351,7 +36379,7 @@ const QRCodeMenu = props => {
   const value = window.Pelcro.user.read().id ? `${window.Pelcro.environment.domain}/admin/${window.Pelcro.siteid}/customers/${window.Pelcro.user.read().id}` : `${window.Pelcro.environment.domain}/admin/${window.Pelcro.siteid}/customers`;
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-donation-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto",
     title: t("title")
   }, /*#__PURE__*/React__default['default'].createElement(QRCode, {
     style: {
@@ -36375,7 +36403,7 @@ const ProfileMenu = props => {
 
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-profile-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto",
     title: t("labels.profile")
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdateView, {
     onPictureClick: onPictureClick
@@ -36497,7 +36525,7 @@ const NewslettersMenu = props => {
   }, []);
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-newsletters-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto",
     title: t("labels.Newsletters"),
     requestStates: requestStates
   }, /*#__PURE__*/React__default['default'].createElement(NewsLettersItems, {
@@ -36538,11 +36566,52 @@ const PasswordChangeMenu = () => {
   } = useTranslation("dashboard");
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-profile-menu",
-    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    className: "plc-max-w-100% md:plc-max-w-60% plc-m-auto",
     title: t("labels.changePassword")
   }, /*#__PURE__*/React__default['default'].createElement(PasswordChangeView, null));
 };
 
+const SUB_MENUS = {
+  PROFILE: "profile",
+  QRCODE: "qr-code",
+  PASSWORDCHANGE: "passwordChange",
+  SUBSCRIPTIONS: "subscriptions",
+  DONATIONS: "donations",
+  MEMBERSHIPS: "memberships",
+  NEWSLETTERS: "Newsletters",
+  PAYMENT_CARDS: "payment-cards",
+  ADDRESSES: "addresses",
+  GIFTS: "gifts",
+  ORDERS: "orders",
+  INVOICES: "invoices",
+  LOGOUT: "logout",
+  SAVED_ITEMS: "saved-items"
+};
+const hasInvoices = () => {
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  return invoices.length > 0;
+};
+const showNewsletters = () => {
+  var _ref, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$uiSett2;
+
+  const showNewslettersUiSettings = (_ref = ((_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$uiSett2 = _window$Pelcro$uiSett.newsletters) === null || _window$Pelcro$uiSett2 === void 0 ? void 0 : _window$Pelcro$uiSett2.length) > 0) !== null && _ref !== void 0 ? _ref : false;
+  return showNewslettersUiSettings;
+};
+const hasDonationSubs = () => {
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const canceledDonations = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  return donations.length > 0 || canceledDonations.length > 0;
+};
+const hasActiveMemberships = () => {
+  var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+
+  return (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read().memberships) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.some(membership => membership.status === "active" && membership.subscription.ended_at === null)) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : false;
+};
+
 const DashboardContent = props => {
   var _window$Pelcro$user$r, _window$Pelcro, _window$Pelcro$uiSett, _props$children;
 
@@ -39289,10 +39358,12 @@ function ProfilePicChangeModal({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("labels.cropperTitle")), /*#__PURE__*/React__default['default'].createElement("p", null, t("labels.cropperSubtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(ProfilePicChangeView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
+    className: "plc-text-xl plc-font-bold"
+  }, t("labels.cropperTitle")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm"
+  }, t("labels.cropperSubtitle")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(ProfilePicChangeView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 }
 ProfilePicChangeModal.viewId = "profile-picture";
 
@@ -39477,9 +39548,9 @@ const EmailVerifyModal = ({
     onClose: onClose,
     id: "pelcro-email-verify-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("labels.title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(EmailVerifyView, Object.assign({
     onSuccess: onSuccess
   }, otherProps))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -39632,9 +39703,9 @@ function VerifyLinkTokenModal({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold "
+    className: "plc-text-xl plc-font-bold"
   }, t("labels.title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(VerifyLinkTokenView, Object.assign({}, props, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -39683,9 +39754,9 @@ const InvoicePaymentModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold "
+    className: "plc-text-xl plc-font-bold"
   }, t("labels.checkout.title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(InvoicePaymentView, Object.assign({}, otherProps, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -39868,9 +39939,9 @@ const InvoiceDetailsModal = ({
     onClose: onClose,
     id: "pelcro-invoice-details-modal"
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(InvoiceDetailsView, Object.assign({}, otherProps, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
@@ -39903,9 +39974,9 @@ const QrCodeModal = ({
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+    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", {
-    className: "plc-text-2xl plc-font-semibold"
+    className: "plc-text-xl plc-font-bold"
   }, t("title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(QrCodeView, null)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 };
 QrCodeModal.viewId = "qrcode";