@pelcro/react-pelcro-js 4.0.0-alpha.11 → 4.0.0-alpha.12

package/dist/index.cjs.js

@@ -3102,7 +3102,7 @@ var _slicedToArray = unwrapExports(slicedToArray);
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-function useTranslation$1(ns) {
+function useTranslation(ns) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var i18nFromProps = props.i18n;
 
@@ -3207,7 +3207,7 @@ function withTranslation(ns) {
       var forwardedRef = _ref.forwardedRef,
           rest = _objectWithoutProperties$2(_ref, ["forwardedRef"]);
 
-      var _useTranslation = useTranslation$1(ns, rest),
+      var _useTranslation = useTranslation(ns, rest),
           _useTranslation2 = _slicedToArray(_useTranslation, 3),
           t = _useTranslation2[0],
           i18n = _useTranslation2[1],
@@ -10040,7 +10040,7 @@ const VARIANTS = {
   ICON: "icon",
   GHOST: "ghost"
 };
-function Button$1({
+function Button({
   variant = "solid",
   isLoading,
   icon,
@@ -10165,11 +10165,11 @@ toast.confirm = (onConfirm, {
     className: "plc-font-semibold"
   }, confirmMessage), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-space-y-2 sm:plc-space-y-0 sm:plc-space-x-2"
-  }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "solid",
     className: "plc-text-xs plc-bg-red-500 hover:plc-bg-red-600",
     onClick: onConfirmClick
-  }, confirmButtonLabel !== null && confirmButtonLabel !== void 0 ? confirmButtonLabel : translations.labels.confirm), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, confirmButtonLabel !== null && confirmButtonLabel !== void 0 ? confirmButtonLabel : translations.labels.confirm), /*#__PURE__*/React__default['default'].createElement(Button, {
     className: "plc-text-xs",
     variant: "outline",
     onClick: () => toast.dismiss(t.id)
@@ -11945,7 +11945,7 @@ function Email({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -12036,7 +12036,7 @@ function Password({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -12084,7 +12084,7 @@ function ConfirmPassword({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -12165,12 +12165,12 @@ const LoginButton = ({
   } = React.useContext(store$l);
   const {
     t
-  } = useTranslation$1("login");
+  } = useTranslation("login");
   const [isDisabled, setDisabled] = React.useState(true);
   React.useEffect(() => {
     setDisabled(emailError || passwordError || !email.length || !password.length || buttonDisabled);
   }, [emailError, passwordError, email, password, buttonDisabled]);
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_LOGIN
@@ -12208,7 +12208,7 @@ const LoginRequestLoginToken = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   return /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
     onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(),
@@ -12915,7 +12915,7 @@ function LoginView(props) {
 
   const {
     t
-  } = useTranslation$1("login");
+  } = useTranslation("login");
   const socialLoginEnabled = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id) || ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.google_app_id) || ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.auth0_client_id);
   const passwordlessEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.passwordless_enabled;
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -13003,7 +13003,7 @@ const Authorship = () => {
     target: "_blank",
     className: "plc-inline-flex plc-flex-col plc-items-center"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "plc-inline-flex plc-mb-2"
+    className: "plc-inline-flex plc-mb-2 pelcro-authorship"
   }, "Powered by"), /*#__PURE__*/React__default['default'].createElement(SvgPelcroAuthorship, {
     className: "pelcro-authorship"
   }));
@@ -13032,7 +13032,7 @@ function Modal({
     className: "pelcro-modal-content"
   }, children.find(({
     type
-  }) => type === ModalHeader$1 && /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, Object.assign({
+  }) => type === ModalHeader && /*#__PURE__*/React__default['default'].createElement(ModalHeader, Object.assign({
     id: id,
     onDisplay: onDisplay,
     hideCloseButton: hideCloseButton
@@ -13042,7 +13042,7 @@ function Modal({
     type
   }) => type === ModalFooter))));
 }
-const ModalHeader$1 = ({
+const ModalHeader = ({
   id,
   onDisplay,
   hideCloseButton,
@@ -13107,7 +13107,7 @@ function LoginModal({
 }) {
   const {
     t
-  } = useTranslation$1("login");
+  } = useTranslation("login");
   const {
     switchView,
     resetView,
@@ -13147,7 +13147,7 @@ function LoginModal({
     id: "pelcro-login-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -13195,12 +13195,12 @@ const RegisterButton = ({
   } = React.useContext(store$k);
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const [isDisabled, setDisabled] = React.useState(true);
   React.useEffect(() => {
     setDisabled(buttonDisabled || emailError || passwordError || !email.length || !password.length);
   }, [buttonDisabled, emailError, passwordError, email, password]);
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_REGISTRATION
@@ -13222,7 +13222,7 @@ function FirstName({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -13300,7 +13300,7 @@ function LastName({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -13378,7 +13378,7 @@ function Phone({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -13454,7 +13454,7 @@ function RegisterView(props) {
 
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   usePelcro();
   const socialLoginEnabled = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id) || ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.google_app_id) || ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.auth0_client_id);
   const showNameFields = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableNameFieldsInRegister;
@@ -13684,7 +13684,7 @@ function RegisterModal(props) {
 
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     switchView,
     resetView,
@@ -13753,7 +13753,7 @@ function RegisterModal(props) {
     id: "pelcro-register-modal",
     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$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -18736,7 +18736,7 @@ class SelectModal extends React.Component {
         className: "plc-mb-2"
       }, this.locale("labels.startingAt")), this.countStartPrice(product.plans)))), isPlanMode || /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-mt-auto plc-w-full"
-      }, /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+      }, /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
@@ -19006,7 +19006,7 @@ class SelectModal extends React.Component {
       hideCloseButton: !this.closeButton,
       onClose: this.props.onClose,
       id: "pelcro-selection-modal"
-    }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, /*#__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"
     }, this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement("button", {
       type: "button",
@@ -19026,7 +19026,7 @@ class SelectModal extends React.Component {
       onChange: this.onIsGiftChange,
       checked: this.state.isGift,
       id: "pelcro-input-is-gift"
-    }, this.locale("messages.checkbox"))), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, this.locale("messages.checkbox"))), /*#__PURE__*/React__default['default'].createElement(Button, {
       disabled: this.state.disabled,
       onClick: this.submitOption,
       id: "pelcro-submit",
@@ -21153,7 +21153,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
   const {
     t
-  } = useTranslation$1("payment");
+  } = useTranslation("payment");
   const pelcroStore = usePelcro();
   const {
     set,
@@ -22871,7 +22871,7 @@ const StripeInputStyle = {
 const PelcroCardNumber = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = 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({
@@ -22882,7 +22882,7 @@ const PelcroCardNumber = props => {
 const PelcroCardCVC = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = 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({
@@ -22893,7 +22893,7 @@ const PelcroCardCVC = props => {
 const PelcroCardExpiry = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = 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({
@@ -22983,7 +22983,7 @@ const DiscountedPrice = props => {
 
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     dispatch,
     state: {
@@ -23013,7 +23013,7 @@ const DiscountedPrice = props => {
       className: "plc-flex plc-items-center plc-justify-center plc-mt-2 pelcro-discount"
     }, props), "(-", percentOff, ")", /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-ml-1 plc-font-bold pelcro-discounted-price"
-    }, priceFormatted), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, priceFormatted), /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       className: "plc-ml-2 plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
       onClick: onCouponRemove
@@ -23034,7 +23034,7 @@ const SubmitPaymentMethod = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     dispatch,
     state: {
@@ -23064,7 +23064,7 @@ const SubmitPaymentMethod = ({
       setDisabled(disableSubmit || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length));
     }
   }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone]);
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
     variant: "solid",
@@ -23095,7 +23095,7 @@ const ApplyCouponButton = ({
   } = React.useContext(store$j);
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
 
   const onApplyCouponCode = () => {
     dispatch({
@@ -23104,7 +23104,7 @@ const ApplyCouponButton = ({
     onClick === null || onClick === void 0 ? void 0 : onClick();
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     className: "plc-h-12 plc-ml-4",
     variant: "solid",
     "aria-label": t("labels.applyCouponCode"),
@@ -23119,7 +23119,7 @@ const ApplyCouponButton = ({
 const CouponCodeField = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     dispatch,
     state: {
@@ -23185,7 +23185,7 @@ const CouponCode = ({
   } = React.useContext(store$j);
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
 
   const showCouponField = () => {
     dispatch({
@@ -23197,7 +23197,7 @@ const CouponCode = ({
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mt-4 plc-mb-6"
-  }, /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  }, /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     className: "plc-mb-2 plc-text-base plc-text-gray-500",
     variant: "ghost",
     icon: /*#__PURE__*/React__default['default'].createElement(SvgTicket, {
@@ -23538,7 +23538,7 @@ const PaypalSubscribeButton = props => {
 const BankRedirection = () => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-absolute plc-inset-0 plc-flex-col plc-items-center plc-justify-center plc-hidden plc-text-lg plc-bg-white plc-z-max plc-text-primary-500 card-authentication-container"
   }, t("messages.bankRedirection"), /*#__PURE__*/React__default['default'].createElement(SvgSpinner, {
@@ -23549,7 +23549,7 @@ const BankRedirection = () => {
 const BankAuthenticationSuccess = () => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-absolute plc-inset-0 plc-flex-col plc-items-center plc-justify-center plc-hidden plc-text-lg plc-bg-white plc-z-max plc-text-primary-500 card-authentication-success-container"
   }, t("messages.bankAuthenticationSuccess"), /*#__PURE__*/React__default['default'].createElement(SvgSpinner, {
@@ -23578,7 +23578,7 @@ const SelectedPaymentMethod = () => {
 
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   const {
     state: {
       isLoading
@@ -23607,7 +23607,7 @@ const SelectedPaymentMethod = () => {
     className: "plc-font-semibold"
   }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-sm plc-text-gray-500"
-  }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))), /*#__PURE__*/React__default['default'].createElement(Button, {
     onClick: () => switchView("payment-method-select"),
     disabled: isLoading,
     variant: "ghost",
@@ -23620,7 +23620,7 @@ const TaxAmount = () => {
 
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     state: {
       taxAmount
@@ -23672,7 +23672,7 @@ function PaymentMethodView({
 
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const cardProcessor = getSiteCardProcessor();
   const supportsVantiv = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings);
   const supportsTap = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings);
@@ -23732,7 +23732,7 @@ const SubscriptionRenewView = ({
 }) => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     plan
   } = usePelcro();
@@ -23820,7 +23820,7 @@ function SubscriptionRenewModal({
     id: "pelcro-subscription-renew-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -23847,7 +23847,7 @@ const SubscriptionCancelContainer = ({
   children,
   ...props
 }) => {
-  useTranslation$1("verifyEmail");
+  useTranslation("verifyEmail");
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
       case SET_CANCEL_SUBSCRIPTION_REASON:
@@ -23953,7 +23953,7 @@ function TextArea({
 const SubscriptionCancelReason = props => {
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
   const {
     dispatch,
     state
@@ -24010,7 +24010,7 @@ const SubscriptionCancelNowButton = ({
   } = React.useContext(store$i);
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
 
   const cancelSubscription = (payload, onSuccess, onFailure) => {
     window.Pelcro.subscription.cancel({
@@ -24060,7 +24060,7 @@ const SubscriptionCancelNowButton = ({
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  return /*#__PURE__*/React__default['default'].createElement(Button, {
     onClick: handleCancelNowClick,
     className: `${className}`
   }, t("messages.cancelNow"));
@@ -24084,7 +24084,7 @@ const SubscriptionCancelLaterButton = ({
   } = React.useContext(store$i);
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
 
   const cancelSubscription = (payload, onSuccess, onFailure) => {
     window.Pelcro.subscription.cancel({
@@ -24134,7 +24134,7 @@ const SubscriptionCancelLaterButton = ({
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  return /*#__PURE__*/React__default['default'].createElement(Button, {
     onClick: handleCancelNowClick,
     className: `${className}`
   }, t("messages.cancelLater"));
@@ -24146,7 +24146,7 @@ const SubscriptionCancelView = props => {
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-subscription-cancel-view"
   }, /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -24177,12 +24177,12 @@ const SubscriptionCancelModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-subscription-cancel-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -24209,7 +24209,7 @@ const SubscriptionSuspendContainer = ({
   children,
   ...props
 }) => {
-  useTranslation$1("SubscriptionSuspend");
+  useTranslation("SubscriptionSuspend");
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
       case SET_SUBSCRIPTION_SUSPEND_DATE:
@@ -24284,7 +24284,7 @@ const SubscriptionSuspendDate = props => {
 
   const {
     t
-  } = useTranslation$1("subscriptionSuspend");
+  } = useTranslation("subscriptionSuspend");
   const {
     dispatch,
     state
@@ -24335,7 +24335,7 @@ const SubscriptionSuspendButton = ({
   } = React.useContext(store$h);
   const {
     t
-  } = useTranslation$1("subscriptionSuspend");
+  } = useTranslation("subscriptionSuspend");
 
   const suspendSubscription = (payload, onSuccess, onFailure) => {
     window.Pelcro.subscription.update({
@@ -24379,7 +24379,7 @@ const SubscriptionSuspendButton = ({
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  return /*#__PURE__*/React__default['default'].createElement(Button, {
     onClick: handleClick,
     className: `${className}`,
     disabled: buttonDisabled
@@ -24392,7 +24392,7 @@ const SubscriptionSuspendView = props => {
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("subscriptionSuspend");
+  } = useTranslation("subscriptionSuspend");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-subscription-suspend-view"
   }, /*#__PURE__*/React__default['default'].createElement(SubscriptionSuspendContainer, props, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -24458,7 +24458,7 @@ const PaymentSuccessView = ({
 }) => {
   const {
     t
-  } = useTranslation$1("success");
+  } = useTranslation("success");
   const {
     successTitle,
     successContent,
@@ -24472,7 +24472,7 @@ const PaymentSuccessView = ({
       className: "plc-text-center plc-text-gray-900"
     }, /*#__PURE__*/React__default['default'].createElement("h4", {
       className: "plc-mb-4 plc-text-3xl"
-    }, successTitle), /*#__PURE__*/React__default['default'].createElement("p", null, successContent)), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, successTitle), /*#__PURE__*/React__default['default'].createElement("p", null, successContent)), /*#__PURE__*/React__default['default'].createElement(Button, {
       className: "plc-mt-6",
       onClick: onClose,
       autoFocus: true
@@ -24726,7 +24726,7 @@ class DefaultNewsLetter extends React.Component {
       hideCloseButton: !this.closeButton,
       onClose: this.props.onClose,
       id: "pelcro-newsletter-modal"
-    }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, /*#__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("h4", {
       className: "plc-text-2xl plc-font-semibold"
@@ -24769,7 +24769,7 @@ class DefaultNewsLetter extends React.Component {
       label: t("labels.postalCode")
     }), /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-text-gray-900 pelcro-footnote"
-    }, "* ", t("labels.required")), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, "* ", t("labels.required")), /*#__PURE__*/React__default['default'].createElement(Button, {
       role: "submit",
       className: "plc-w-full plc-mt-2",
       id: "pelcro-submit",
@@ -24817,7 +24817,7 @@ const NewsletterUpdateContainer = ({
   onFailure = () => {},
   children
 }) => {
-  const [t] = useTranslation$1("newsletter");
+  const [t] = useTranslation("newsletter");
 
   const handleSubmit = ({
     newsletters,
@@ -24996,8 +24996,8 @@ const NewsletterUpdateButton = ({
   } = React.useContext(store$g);
   const {
     t
-  } = useTranslation$1("newsletter");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("newsletter");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -25050,7 +25050,7 @@ const NewsletterUpdateList = () => {
 const NewsletterUpdateView = props => {
   const {
     t
-  } = useTranslation$1("newsletter");
+  } = useTranslation("newsletter");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-newsletter-update-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -25071,12 +25071,12 @@ const NewsletterUpdateModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("newsletter");
+  } = useTranslation("newsletter");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-newsletter-update-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -25089,7 +25089,7 @@ const MeterView = () => {
 
   const {
     t
-  } = useTranslation$1("meter");
+  } = useTranslation("meter");
   const {
     switchView,
     product,
@@ -25105,10 +25105,10 @@ const MeterView = () => {
     className: "plc-text-sm plc-text-gray-600"
   }, subtitle, ",", !isAuthenticated() && " or " + t("messages.alreadyHaveAccount")), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-mt-2"
-  }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, /*#__PURE__*/React__default['default'].createElement(Button, {
     className: "plc-w-1/2",
     onClick: () => switchView("plan-select")
-  }, t("messages.subscribeNow")), !isAuthenticated() && /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, t("messages.subscribeNow")), !isAuthenticated() && /*#__PURE__*/React__default['default'].createElement(Button, {
     className: "pelcro-button-ghost plc-w-1/2",
     onClick: () => switchView("login")
   }, t("messages.loginHere"))));
@@ -25150,7 +25150,7 @@ const SubscriptionCreateView = ({
 }) => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     plan
   } = usePelcro();
@@ -25222,7 +25222,7 @@ function SubscriptionCreateModal({
     id: "pelcro-subscription-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -25265,7 +25265,7 @@ const UserUpdateContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   React.useEffect(() => {
     document.addEventListener("PelcroUserLoaded", () => {
       loadUserDataIntoFields();
@@ -25478,7 +25478,7 @@ const UserUpdateEmail = props => {
   const [enableEmailEdit, setEnableEmailEdit] = React.useState(false);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
 
   const handleEnableEmailEdit = () => {
     if (enableEmailEdit) {
@@ -25503,7 +25503,7 @@ const UserUpdateEmail = props => {
     store: store$f,
     label: t("labels.email"),
     enableEmailEdit: enableEmailEdit
-  }, props)), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, 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",
     icon: enableEmailEdit ? /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
@@ -25538,12 +25538,12 @@ const UserUpdateButton = ({
   const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   const [isDisabled, setDisabled] = React.useState(true);
   React.useEffect(() => {
     setDisabled(buttonDisabled || emailError || !(email !== null && email !== void 0 && email.length) || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length));
   }, [email, firstName, lastName, phone, buttonDisabled, emailError, firstNameError, lastNameError, phoneError]);
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_USER_UPDATE
@@ -25585,7 +25585,7 @@ const UserUpdateProfilePic = ({
     src: profilePicture,
     alt: "profile picture",
     onClick: onClick
-  }, otherProps)), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, otherProps)), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "icon",
     className: "plc-absolute plc-bg-gray-500 plc-text-white plc-w-10 plc-h-10 plc-top-24 plc-right-2 hover:plc-bg-gray-600 hover:plc-text-white",
     icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
@@ -25599,7 +25599,7 @@ function Tin({
   store,
   ...otherProps
 }) {
-  useTranslation$1("common");
+  useTranslation("common");
   const {
     dispatch,
     state: {
@@ -25659,7 +25659,7 @@ const UserUpdateView = props => {
 
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-user-update-view"
@@ -25718,7 +25718,7 @@ function UserUpdateModal({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
 
   const onPictureClick = () => {
     switchView("profile-picture");
@@ -25728,7 +25728,7 @@ function UserUpdateModal({
     id: "pelcro-user-update-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -25823,7 +25823,7 @@ const AddressCreateContainer = ({
 
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   const {
     giftCode: giftCodeFromStore,
     subscriptionIdToRenew: subscriptionIdToRenewFromStore,
@@ -26293,8 +26293,8 @@ const AddressCreateSubmit = ({
   } = React.useContext(store$e);
   const {
     t
-  } = useTranslation$1("address");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -26519,7 +26519,7 @@ const AddressCreateSetDefault = props => {
 const AddressCreateView = props => {
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-address-create-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -26591,7 +26591,7 @@ const AddressCreateModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
 
   const onSuccess = newAddressId => {
     var _otherProps$onSuccess;
@@ -26619,7 +26619,7 @@ const AddressCreateModal = ({
     id: "pelcro-address-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -26690,7 +26690,7 @@ const AddressUpdateContainer = ({
     addressIdToEdit
   } = usePelcro();
   const addressId = (_props$addressId = props === null || props === void 0 ? void 0 : props.addressId) !== null && _props$addressId !== void 0 ? _props$addressId : addressIdToEdit;
-  const [t] = useTranslation$1("address");
+  const [t] = useTranslation("address");
   React.useEffect(() => {
     const getCountries = () => {
       dispatch({
@@ -27151,8 +27151,8 @@ const AddressUpdateSubmit = ({
   } = React.useContext(store$d);
   const {
     t
-  } = useTranslation$1("address");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -27194,7 +27194,7 @@ function AddressUpdateSetDefault(props) {
 const AddressUpdateView = props => {
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-address-update-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -27266,12 +27266,12 @@ const AddressUpdateModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-address-update-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -27338,7 +27338,7 @@ const ReactGA$2 = (_window$2 = window) !== null && _window$2 !== void 0 && (_win
 const PaymentMethodUpdateModal = props => {
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
 
   const onSuccess = res => {
     var _props$onSuccess, _ReactGA$event;
@@ -27355,7 +27355,7 @@ const PaymentMethodUpdateModal = props => {
     id: "pelcro-payment-method-update-modal",
     onDisplay: props.onDisplay,
     onClose: props.onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -27392,7 +27392,7 @@ const PasswordResetContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordReset");
+  } = useTranslation("passwordReset");
 
   const handleSubmit = ({
     email,
@@ -27533,8 +27533,8 @@ const PasswordResetButton = ({
   } = React.useContext(store$c);
   const {
     t
-  } = useTranslation$1("passwordReset");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("passwordReset");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -27560,7 +27560,7 @@ const PasswordResetConfirmPassword = props => /*#__PURE__*/React__default['defau
 const PasswordResetView = props => {
   const {
     t
-  } = useTranslation$1("passwordReset");
+  } = useTranslation("passwordReset");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-password-reset-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -27596,12 +27596,12 @@ const PasswordResetModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordReset");
+  } = useTranslation("passwordReset");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-password-reset-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -27632,7 +27632,7 @@ const PasswordForgotContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordForgot");
+  } = useTranslation("passwordForgot");
 
   const handleSubmit = ({
     email
@@ -27732,12 +27732,12 @@ const PasswordForgotButton = ({
   } = React.useContext(store$b);
   const {
     t
-  } = useTranslation$1("passwordForgot");
+  } = useTranslation("passwordForgot");
   const [isDisabled, setDisabled] = React.useState(true);
   React.useEffect(() => {
     setDisabled(emailError || !email.length || buttonDisabled);
   }, [emailError, email, buttonDisabled]);
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -27756,7 +27756,7 @@ const PasswordForgotEmail = props => /*#__PURE__*/React__default['default'].crea
 const PasswordForgotView = props => {
   const {
     t
-  } = useTranslation$1("passwordForgot");
+  } = useTranslation("passwordForgot");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-password-forgot-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -27781,7 +27781,7 @@ const PasswordForgotModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordForgot");
+  } = useTranslation("passwordForgot");
   const {
     switchView
   } = usePelcro();
@@ -27789,7 +27789,7 @@ const PasswordForgotModal = ({
     id: "pelcro-password-forgot-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -27827,7 +27827,7 @@ const PasswordlessRequestContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
 
   const handleSubmit = ({
     email
@@ -27927,12 +27927,12 @@ const PasswordlessRequestViewButton = ({
   } = React.useContext(store$a);
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   const [isDisabled, setDisabled] = React.useState(true);
   React.useEffect(() => {
     setDisabled(emailError || !email.length || buttonDisabled);
   }, [emailError, email, buttonDisabled]);
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -27951,7 +27951,7 @@ const PasswordlessRequestEmail = props => /*#__PURE__*/React__default['default']
 const PasswordlessRequestView = props => {
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-password-forgot-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -27976,12 +27976,12 @@ const PasswordlessRequestModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-password-forgot-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -28016,7 +28016,7 @@ const PasswordChangeContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordChange");
+  } = useTranslation("passwordChange");
 
   const handleSubmit = ({
     currentPassword,
@@ -28295,9 +28295,9 @@ const PasswordChangeButton = ({
   } = React.useContext(store$9);
   const {
     t
-  } = useTranslation$1("passwordChange");
+  } = useTranslation("passwordChange");
   const hasInvalidField = currentPasswordError || newPasswordError || confirmNewPasswordError;
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -28312,7 +28312,7 @@ const PasswordChangeButton = ({
 const PasswordChangeView = props => {
   const {
     t
-  } = useTranslation$1("passwordChange");
+  } = useTranslation("passwordChange");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-password-change-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -28348,12 +28348,12 @@ const PasswordChangeModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordChange");
+  } = useTranslation("passwordChange");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-password-change-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -28386,7 +28386,7 @@ const CartContainer = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("shop");
+  } = useTranslation("shop");
   React.useEffect(() => {
     dispatch({
       type: DISABLE_SUBMIT,
@@ -28489,7 +28489,7 @@ const CartRemoveItemButton = ({
   const {
     removeFromCart
   } = usePelcro();
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     variant: "icon",
     "data-key": itemId,
     icon: /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
@@ -28517,8 +28517,8 @@ const CartSubmit = ({
   } = React.useContext(store$8);
   const {
     t
-  } = useTranslation$1("cart");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({}, otherProps, {
+  } = useTranslation("cart");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({}, otherProps, {
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -28555,7 +28555,7 @@ const CartTotalPrice = () => {
   const totalPriceCurrency = cartItems[0].currency;
   const {
     t
-  } = useTranslation$1("cart");
+  } = useTranslation("cart");
 
   if (!alert.content) {
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("p", {
@@ -28574,7 +28574,7 @@ const CartView = props => {
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("cart");
+  } = useTranslation("cart");
   React.useEffect(() => {
     document.dispatchEvent(cartOpened(cartItems));
   }, []);
@@ -28633,7 +28633,7 @@ const CartModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("cart");
+  } = useTranslation("cart");
 
   const onSuccess = items => {
     var _otherProps$onSuccess;
@@ -28652,7 +28652,7 @@ const CartModal = ({
     onDisplay: onDisplay,
     onClose: onClose,
     hideCloseButton: false
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -28672,7 +28672,7 @@ const ShopSelectProductButton = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("shop");
+  } = useTranslation("shop");
   const [disabled, setDisabled] = React.useState(false);
   const [textContent, setTextContent] = React.useState(t("buttons.select"));
 
@@ -28687,7 +28687,7 @@ const ShopSelectProductButton = ({
     }, 1000);
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     "data-sku-id": itemId,
     id: `pelcro-shop-select-${itemId}`,
     onClick: handleClick,
@@ -28704,8 +28704,8 @@ const ShopPurchaseButton = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("shop");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({}, otherProps, {
+  } = useTranslation("shop");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({}, otherProps, {
     "data-sku-id": itemId,
     id: `pelcro-shop-purchase-${itemId}`,
     onClick: () => purchaseItem(itemId)
@@ -28775,7 +28775,7 @@ const OrderCreateModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("payment");
+  } = useTranslation("payment");
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -28788,7 +28788,7 @@ const OrderCreateModal = ({
     id: "pelcro-order-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -28806,7 +28806,7 @@ const OrderConfirmModal = props => {
   const latestOrderDiscount = latestOrder === null || latestOrder === void 0 ? void 0 : (_latestOrder$coupon = latestOrder.coupon) === null || _latestOrder$coupon === void 0 ? void 0 : _latestOrder$coupon.percent_off;
   const {
     t
-  } = useTranslation$1("shop");
+  } = useTranslation("shop");
   const {
     resetView
   } = usePelcro();
@@ -28864,7 +28864,7 @@ const OrderConfirmModal = props => {
     className: "pelcro-summary-total"
   }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-center plc-mt-6"
-  }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, /*#__PURE__*/React__default['default'].createElement(Button, {
     id: "pelcro-submit",
     onClick: onClose,
     autoFocus: true
@@ -28898,7 +28898,7 @@ const GiftCreateContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     set
   } = usePelcro();
@@ -29022,8 +29022,8 @@ const GiftCreateSubmitButton = ({
   } = React.useContext(store$7);
   const {
     t
-  } = useTranslation$1("register");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("register");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -29057,7 +29057,7 @@ const GiftCreateStartDate = props => {
 
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     dispatch,
     state
@@ -29092,7 +29092,7 @@ function GiftCreateMessage(props) {
 
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     dispatch,
     state
@@ -29126,7 +29126,7 @@ function GiftCreateMessage(props) {
 const GiftCreateView = props => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-gift-create-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -29185,7 +29185,7 @@ const GiftCreateModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     switchView,
     switchToAddressView,
@@ -29209,7 +29209,7 @@ const GiftCreateModal = ({
     id: "pelcro-gift-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -29249,7 +29249,7 @@ const GiftRedeemContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     set
   } = usePelcro();
@@ -29369,8 +29369,8 @@ const GiftRedeemSubmitButton = ({
   } = React.useContext(store$6);
   const {
     t
-  } = useTranslation$1("register");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("register");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -29384,7 +29384,7 @@ const GiftRedeemSubmitButton = ({
 const GiftRedeemView = props => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-gift-redeem-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -29413,7 +29413,7 @@ const GiftRedeemModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     switchView,
     switchToAddressView,
@@ -29436,7 +29436,7 @@ const GiftRedeemModal = ({
     id: "pelcro-gift-redeem-modal",
     onClose: onClose,
     onDisplay: onDisplay
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -29493,7 +29493,7 @@ const AddressSelectContainer = ({
 
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   const {
     switchView,
     giftCode: giftCodeFromStore,
@@ -29694,8 +29694,8 @@ const AddressSelectSubmit = ({
   } = React.useContext(store$5);
   const {
     t
-  } = useTranslation$1("address");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -29710,7 +29710,7 @@ const AddressSelectSubmit = ({
 const AddressSelectView = props => {
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-address-select-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -29742,7 +29742,7 @@ const AddressSelectModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
 
   const onSuccess = selectedAddressId => {
     var _otherProps$onSuccess;
@@ -29774,7 +29774,7 @@ const AddressSelectModal = ({
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-address-select-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -29901,7 +29901,7 @@ const PaymentMethodSelectContainer = ({
 const PaymentMethodSelectList = () => {
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   const {
     dispatch,
     state: {
@@ -29951,7 +29951,7 @@ const PaymentMethodSelectSubmit = ({
 }) => {
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   const {
     dispatch,
     state: {
@@ -29959,7 +29959,7 @@ const PaymentMethodSelectSubmit = ({
       isSubmitting
     }
   } = React.useContext(store$4);
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -29974,7 +29974,7 @@ const PaymentMethodSelectSubmit = ({
 const PaymentMethodSelectView = props => {
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-payment-method-select-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -30003,7 +30003,7 @@ const PaymentMethodSelectModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
 
   const onSuccess = selectedPaymentMethodId => {
     var _otherProps$onSuccess;
@@ -30023,7 +30023,7 @@ const PaymentMethodSelectModal = ({
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-payment-method-select-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -31410,7 +31410,7 @@ const Card = ({
   requestStates,
   ...restProps
 }) => {
-  useTranslation$1("dashboard");
+  useTranslation("dashboard");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: `plc-bg-white plc-border-2 plc-p-6 plc-rounded plc-my-20 ${className}`,
     id: "plc-dashboard-card"
@@ -31434,7 +31434,7 @@ const ReactGA$1 = (_window$1 = window) !== null && _window$1 !== void 0 && (_win
 const SavedItemsMenu = () => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const [userMetadata, setUserMetadata] = React.useState(window.Pelcro.user.read().metadata);
   const userSavedItems = userMetadata ? Object.entries(userMetadata) // only get metadata related to saved items
   .filter(([categoryTitle, value]) => categoryTitle.startsWith("metadata_saved_") && (value === null || value === void 0 ? void 0 : value.length)) // drop the "metadata_saved_" from the category title
@@ -31454,7 +31454,7 @@ const SavedItems = ({
 }) => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const [isLoading, setLoading] = React.useState(false);
   const {
     isAuthenticated
@@ -31514,7 +31514,7 @@ const SavedItems = ({
         src: item === null || item === void 0 ? void 0 : item.image
       }), /*#__PURE__*/React__default['default'].createElement("span", {
         className: "plc-font-semibold"
-      }, item.title)))), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+      }, item.title)))), /*#__PURE__*/React__default['default'].createElement(Button, {
         variant: "ghost",
         type: "button",
         className: "plc-text-gray-500 plc-rounded-2xl",
@@ -31543,10 +31543,30 @@ function SvgCalendar(props) {
   })));
 }
 
+const AddNew = ({
+  title,
+  onClick
+}) => {
+  const handleClick = () => {
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, title && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mt-5 plc-relative plc-text-primary-500"
+  }, /*#__PURE__*/React__default['default'].createElement("hr", {
+    className: "plc-absolute plc-border-t-2 plc-my-4 plc-top-1.5 plc-w-full"
+  }), /*#__PURE__*/React__default['default'].createElement("button", {
+    onClick: handleClick,
+    className: "plc-bg-white plc-flex plc-items-center plc-mx-auto plc-p-2 plc-relative focus-within:plc-outline-none"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
+    className: "plc-w-4 plc-h-4 plc-mr-1"
+  }), /*#__PURE__*/React__default['default'].createElement("span", null, title))));
+};
+
 const SubscriptionsMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-subscriptions-menu",
     className: "plc-max-w-80% plc-m-auto",
@@ -31567,20 +31587,15 @@ const SubscriptionsMenu = props => {
     className: "plc-w-1/5"
   }, t("labels.actions")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
     className: "plc-h-4"
-  })), /*#__PURE__*/React__default['default'].createElement(Accordion, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionsItems, props)), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
-    colSpan: "5",
-    className: "plc-p-1"
-  }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
-    variant: "ghost",
-    icon: /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
-      className: "plc-w-4 plc-h-4 plc-mr-1"
-    }),
-    className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase plc-rounded-none hover:plc-bg-gray-100",
+  })), /*#__PURE__*/React__default['default'].createElement(Accordion, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionsItems, props))), /*#__PURE__*/React__default['default'].createElement(AddNew, {
+    title: t("labels.addSubscription"),
     onClick: props.displayProductSelect
-  }, t("labels.addSubscription")))), /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
+  }), /*#__PURE__*/React__default['default'].createElement("table", {
+    className: "plc-w-full plc-table-fixed pelcro-subscriptions-table plc-text-left"
+  }, /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
     colSpan: "5",
     className: "plc-p-1"
-  }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "ghost",
     icon: /*#__PURE__*/React__default['default'].createElement(SvgGift, {
       className: "plc-w-4 plc-h-4 plc-mr-1"
@@ -31604,7 +31619,7 @@ const SubscriptionsItems = ({
 }) => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const {
     switchView,
     setSubscriptionToCancel,
@@ -31733,35 +31748,35 @@ const SubscriptionsItems = ({
       className: "plc-inline-block plc-mt-1 plc-underline"
     }, getSubscriptionStatus(sub).content), /*#__PURE__*/React__default['default'].createElement("br", null), sub.shipments_remaining ? /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-inline-block plc-mt-1"
-    }, sub.shipments_remaining, " ", t("labels.shipments")) : null)), /*#__PURE__*/React__default['default'].createElement("td", null, sub.cancel_at_period_end === 1 && sub.plan.auto_renew && !sub.is_gift_recipient && /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, sub.shipments_remaining, " ", t("labels.shipments")) : null)), /*#__PURE__*/React__default['default'].createElement("td", null, sub.cancel_at_period_end === 1 && sub.plan.auto_renew && !sub.is_gift_recipient && /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       className: "plc-text-green-400 focus:plc-ring-green-300 pelcro-dashboard-sub-reactivate-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
       onClick: onReactivateClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.reactivate")), sub.cancel_at_period_end === 1 && sub.status !== "incomplete" && /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, t("labels.reactivate")), sub.cancel_at_period_end === 1 && sub.status !== "incomplete" && /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       className: "plc-text-blue-400 pelcro-dashboard-sub-renew-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
       onClick: onRenewClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.renew")), sub.shipments_suspended_until && isDateAfterToday(sub.shipments_suspended_until) && sub.shipments_remaining > 0 && /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, t("labels.renew")), sub.shipments_suspended_until && isDateAfterToday(sub.shipments_suspended_until) && sub.shipments_remaining > 0 && /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       className: "plc-text-blue-400 pelcro-dashboard-sub-suspend-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
       onClick: onUnSuspendClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.unsuspend")), (!sub.shipments_suspended_until && sub.shipments_remaining > 0 || sub.shipments_suspended_until && !isDateAfterToday(sub.shipments_suspended_until)) && /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, t("labels.unsuspend")), (!sub.shipments_suspended_until && sub.shipments_remaining > 0 || sub.shipments_suspended_until && !isDateAfterToday(sub.shipments_suspended_until)) && /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-suspend-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgCalendar, null),
       onClick: onSuspendClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.suspend")), !sub.plan.auto_renew || sub.plan.auto_renew && sub.cancel_at_period_end === 0 ? /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, t("labels.suspend")), !sub.plan.auto_renew || sub.plan.auto_renew && sub.cancel_at_period_end === 0 ? /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
@@ -31905,7 +31920,7 @@ Accordion.item = function AccordionItem({
 const OrdersMenu = () => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const userOrders = window.Pelcro.user.read().orders;
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-orders-menu",
@@ -31940,9 +31955,11 @@ const OrderItems = ({
 
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   if ((orders === null || orders === void 0 ? void 0 : orders.length) === 0) return null;
   return !(orders !== null && orders !== void 0 && orders.length) ? null : orders === null || orders === void 0 ? void 0 : orders.map(order => {
+    var _order$items;
+
     const isActive = activeMenu === order.id;
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
       key: order.id
@@ -31960,7 +31977,7 @@ const OrderItems = ({
       count: getItemsAmount(order.id)
     }))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-font-semibold "
-    }, order.created)), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, order === null || order === void 0 ? void 0 : (_order$items = order.items) === null || _order$items === void 0 ? void 0 : _order$items[0].created_at)), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: `plc-flex plc-items-center plc-justify-center plc-transition-transform plc-ease-out plc-transform plc-rounded-full plc-w-7 plc-h-7 ${isActive ? "plc-flex plc-place-items-center plc-w-7 plc-h-7 plc-p-1 plc-bg-primary-400 plc-rounded-full" : "accordion-chevron"}`
     }, /*#__PURE__*/React__default['default'].createElement("span", {
       className: `plc-transition plc-ease-out  ${isActive && "plc-text-white plc-transform plc-rotate-90"}`
@@ -31992,30 +32009,10 @@ const OrderItems = ({
   });
 };
 
-const AddNew = ({
-  title,
-  onClick
-}) => {
-  const handleClick = () => {
-    onClick === null || onClick === void 0 ? void 0 : onClick();
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, title && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-mt-5 plc-relative plc-text-primary-500"
-  }, /*#__PURE__*/React__default['default'].createElement("hr", {
-    className: "plc-absolute plc-border-t-2 plc-my-4 plc-top-1.5 plc-w-full"
-  }), /*#__PURE__*/React__default['default'].createElement("button", {
-    onClick: handleClick,
-    className: "plc-bg-white plc-flex plc-items-center plc-mx-auto plc-p-2 plc-relative focus-within:plc-outline-none"
-  }, /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
-    className: "plc-w-4 plc-h-4 plc-mr-1"
-  }), /*#__PURE__*/React__default['default'].createElement("span", null, title))));
-};
-
 const DonationsMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const subscriptions = getDonationSubs().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
     return /*#__PURE__*/React__default['default'].createElement("tr", {
       key: sub.id,
@@ -32028,22 +32025,7 @@ const DonationsMenu = props => {
       className: "plc-text-xs plc-text-gray-400 pelcro-donation-price"
     }, getFormattedPriceByLocal(sub.plan.amount * sub.quantity, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-mb-4 plc-text-gray-500 pelcro-donation-date"
-    }, sub.status && /*#__PURE__*/React__default['default'].createElement("span", null, formatStartDate(sub.start)))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
-      className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${props === null || props === void 0 ? void 0 : props.getSubscriptionStatus(sub).bgColor} plc-uppercase ${props === null || props === void 0 ? void 0 : props.getSubscriptionStatus(sub).textColor} plc-rounded-lg`
-    }, props === null || props === void 0 ? void 0 : props.getSubscriptionStatus(sub).icon, props === null || props === void 0 ? void 0 : props.getSubscriptionStatus(sub).title), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-mb-4 plc-text-xs plc-text-gray-500"
-    }, sub.status && /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-inline-block plc-mt-1 plc-underline"
-    }, props === null || props === void 0 ? void 0 : props.getSubscriptionStatus(sub).content))), /*#__PURE__*/React__default['default'].createElement("td", null, sub.cancel_at_period_end === 1 && /*#__PURE__*/React__default['default'].createElement(Button, {
-      variant: "ghost",
-      icon: /*#__PURE__*/React__default['default'].createElement(RefreshIcon, {
-        className: "plc-w-4 plc-h-4"
-      }),
-      className: "plc-text-blue-400" // onClick={onRenewClick}
-      // disabled={this.state.disableSubmit}
-      ,
-      "data-key": sub.id
-    }, t("labels.renew"))));
+    }, sub.status && /*#__PURE__*/React__default['default'].createElement("span", null, formatStartDate(sub.start)))));
   });
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-donation-menu",
@@ -32057,13 +32039,7 @@ const DonationsMenu = props => {
     className: "plc-w-1/4"
   }, t("labels.plan")), /*#__PURE__*/React__default['default'].createElement("th", {
     className: "plc-w-1/4"
-  }, t("labels.startDate")), /*#__PURE__*/React__default['default'].createElement("th", {
-    className: "plc-w-1/4"
-  }, t("labels.status.title")), /*#__PURE__*/React__default['default'].createElement("th", {
-    className: "plc-w-1/4"
-  }, t("labels.actions")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, subscriptions)), /*#__PURE__*/React__default['default'].createElement(AddNew, {
-    title: t("labels.newDonations")
-  }));
+  }, t("labels.startDate")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, subscriptions)));
 };
 
 function getDonationSubs() {
@@ -32082,7 +32058,7 @@ function formatStartDate(date) {
 const InvoicesMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-invoices-menu",
     className: "plc-max-w-80% plc-m-auto",
@@ -32109,7 +32085,7 @@ const InvoicesItems = () => {
 
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const {
     setInvoice,
     switchView
@@ -32141,7 +32117,7 @@ const InvoicesItems = () => {
       className: "plc-py-2"
     }, /*#__PURE__*/React__default['default'].createElement("span", {
       className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${invoiceStatus.bgColor} plc-uppercase ${invoiceStatus.textColor} plc-rounded-lg`
-    }, invoiceStatus.icon, invoiceStatus.title)), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, invoiceStatus.icon, invoiceStatus.title)), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       className: "plc-text-blue-400 focus:plc-ring-blue-400 pelcro-dashboard-view-invoice-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgDocument, {
@@ -32220,7 +32196,7 @@ function getInvoiceStatus(invoice) {
 const MembershipsMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-donation-menu",
     className: "plc-max-w-80% plc-m-auto",
@@ -32245,7 +32221,7 @@ const MembershipsMenu = props => {
 const MembershipsItems = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const {
     switchView,
     setSelectedMembership,
@@ -32292,7 +32268,7 @@ const MembershipsItems = props => {
       className: "plc-inline-block plc-mt-1"
     }, membership.subscription.shipments_remaining, " ", t("labels.shipments")) : null)), /*#__PURE__*/React__default['default'].createElement("td", {
       className: "plc-truncate"
-    }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }, /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, {
         className: "plc-w-4 plc-h-4"
@@ -32359,7 +32335,7 @@ const GiftsMenu = props => {
 
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const giftRecipients = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.gift_recipients) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
 
   const renderGiftRecipients = () => {
@@ -32389,7 +32365,7 @@ const GiftsMenu = props => {
         className: "plc-mb-4 plc-text-xs plc-text-gray-500"
       }, recipient.status && /*#__PURE__*/React__default['default'].createElement("span", {
         className: "plc-inline-block plc-mt-1 plc-underline"
-      }, props === null || props === void 0 ? void 0 : props.getSubscriptionStatus(recipient).content))), recipient.cancel_at_period_end === 1 && /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+      }, props === null || props === void 0 ? void 0 : props.getSubscriptionStatus(recipient).content))), recipient.cancel_at_period_end === 1 && /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button, {
         variant: "ghost",
         icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, {
           className: "plc-w-4 plc-h-4"
@@ -32432,7 +32408,7 @@ const GiftsMenu = props => {
 const AddressesMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const [requestStates, setRequestStates] = React.useState({
     loading: false,
     success: false,
@@ -32456,7 +32432,7 @@ const AddressesMenu = props => {
 const AddressesItems = props => {
   var _window$Pelcro$user$r;
 
-  useTranslation$1("dashboard");
+  useTranslation("dashboard");
   const {
     switchView
   } = usePelcro();
@@ -32495,7 +32471,7 @@ 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)), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name)), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "icon",
     className: "plc-text-gray-500",
     icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
@@ -32549,7 +32525,7 @@ const getPaymentCardIcon = name => {
 const PaymentCardsMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const source = window.Pelcro.user.read().source;
   return /*#__PURE__*/React__default['default'].createElement(Card, {
     id: "pelcro-dashboard-payment-menu",
@@ -32567,7 +32543,7 @@ const PaymentCardsMenu = props => {
 const PaymentCardsItems = props => {
   var _props$source, _props$source$propert, _props$source2, _props$source2$proper;
 
-  useTranslation$1("dashboard");
+  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`
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -32576,7 +32552,7 @@ const PaymentCardsItems = props => {
     className: "plc-mr-6"
   }, getPaymentCardIcon(props === null || props === void 0 ? void 0 : (_props$source = props.source) === null || _props$source === void 0 ? void 0 : (_props$source$propert = _props$source.properties) === null || _props$source$propert === void 0 ? void 0 : _props$source$propert.brand)), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-ml-1 plc-text-lg plc-tracking-widest"
-  }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", props === null || props === void 0 ? void 0 : (_props$source2 = props.source) === null || _props$source2 === void 0 ? void 0 : (_props$source2$proper = _props$source2.properties) === null || _props$source2$proper === void 0 ? void 0 : _props$source2$proper.last4)), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ", props === null || props === void 0 ? void 0 : (_props$source2 = props.source) === null || _props$source2 === void 0 ? void 0 : (_props$source2$proper = _props$source2.properties) === null || _props$source2$proper === void 0 ? void 0 : _props$source2$proper.last4)), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "icon",
     className: "plc-text-gray-500",
     icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
@@ -33981,7 +33957,7 @@ var QRCode = unwrapExports(lib);
 const QRCodeMenu = props => {
   const {
     t
-  } = useTranslation$1("qr");
+  } = useTranslation("qr");
   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",
@@ -33998,7 +33974,7 @@ const QRCodeMenu = props => {
 const ProfileMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const {
     switchView
   } = usePelcro();
@@ -34044,7 +34020,7 @@ const NewslettersMenu = props => {
 
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const defaultStatues = {
     loading: false,
     success: false,
@@ -34139,7 +34115,7 @@ const NewslettersMenu = props => {
     newsletters: newsletters
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-center"
-  }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+  }, /*#__PURE__*/React__default['default'].createElement(Button, {
     onClick: handleSubmit,
     disabled: requestStates.loading
   }, "SUBMIT")));
@@ -34149,7 +34125,7 @@ const NewsLettersItems = ({
   newsletters,
   handleChange
 }) => {
-  useTranslation$1("dashboard");
+  useTranslation("dashboard");
   if (newsletters.length === 0) return null;
   return newsletters.map(newsletter => {
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -34481,7 +34457,7 @@ class Dashboard extends React.Component {
           className: "plc-rounded-full plc-bg-gray-200 plc-text-black plc-inline-flex plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-capitalize"
         }, address.type), 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-ml-2"
-        }, this.locale("labels.default")))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+        }, this.locale("labels.default")))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button, {
           variant: "icon",
           className: "plc-text-gray-500",
           icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
@@ -34503,7 +34479,7 @@ class Dashboard extends React.Component {
       }), addresses, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
         colSpan: "2",
         className: "plc-p-1"
-      }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+      }, /*#__PURE__*/React__default['default'].createElement(Button, {
         variant: "ghost",
         icon: /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
           className: "plc-w-4 plc-mr-1"
@@ -34615,9 +34591,10 @@ class Dashboard extends React.Component {
       setActiveDashboardLink: this.setActiveDashboardLink,
       activeDashboardLink: this.state.activeDashboardLink
     }), /*#__PURE__*/React__default['default'].createElement(DashboardLink, {
+      show: showNewsletters(),
       name: SUB_MENUS.NEWSLETTERS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgNewsletter, {
-        className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
+        className: "plc-transform plc--translate-x-1 plc-scale-105 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
       }),
       title: this.locale("labels.Newsletters"),
       setActiveDashboardLink: this.setActiveDashboardLink,
@@ -34713,7 +34690,7 @@ class Dashboard extends React.Component {
       setSubscriptionIdToRenew: this.props.setSubscriptionIdToRenew,
       setIsRenewingGift: this.props.setIsRenewingGift,
       setView: this.props.setView
-    }), this.state.activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default['default'].createElement(OrdersMenu, null), this.state.activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default['default'].createElement(InvoicesMenu, null), this.state.activeDashboardLink === SUB_MENUS.LOGOUT && this.props.logout(), /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    }), this.state.activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default['default'].createElement(OrdersMenu, null), this.state.activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default['default'].createElement(InvoicesMenu, null), this.state.activeDashboardLink === SUB_MENUS.LOGOUT && this.props.logout(), /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       type: "button",
       className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-5 plc-right-10",
@@ -34732,15 +34709,22 @@ function hasInvoices() {
   return invoices.length > 0;
 }
 
+function showNewsletters() {
+  var _ref, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro3$uiSet2;
+
+  const showNewslettersUiSettings = (_ref = ((_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : (_window$Pelcro3$uiSet2 = _window$Pelcro3$uiSet.newsletters) === null || _window$Pelcro3$uiSet2 === void 0 ? void 0 : _window$Pelcro3$uiSet2.length) > 0) !== null && _ref !== void 0 ? _ref : false;
+  return showNewslettersUiSettings;
+}
+
 const DashboardWithTrans = withTranslation("dashboard")(Dashboard);
 
-// The button in the lower right that shows the dashboard.
+// The button in the lower left that shows the dashboard.
 const DashboardOpenButton = () => {
   const {
     switchView
   } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-fixed plc-right-4 plc-bottom-4 pelcro-open-dashboard-btn"
+    className: "plc-fixed plc-left-4 plc-bottom-4 pelcro-open-dashboard-btn"
   }, /*#__PURE__*/React__default['default'].createElement("button", {
     className: "plc-bg-white plc-border-2 plc-rounded-full focus:plc-outline-none plc-border-primary-300 hover:plc-bg-white",
     name: "menu",
@@ -34789,7 +34773,7 @@ const ProfilePicChangeContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
 
   const handleUpdatePicture = async ({
     imageSrc,
@@ -34989,8 +34973,8 @@ const ProfilePicChangeButton = ({
   } = React.useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("userEdit");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_USER_UPDATE
@@ -36399,7 +36383,7 @@ const ProfilePicChangeZoom = ({
   } = React.useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: `plc-flex plc-flex-col plc-items-center ${className}`
   }, /*#__PURE__*/React__default['default'].createElement("label", {
@@ -36451,7 +36435,7 @@ const ProfilePicChangeSelectButton = ({
   } = React.useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
 
   const browseFiles = () => {
     const fileInput = document.getElementById("pelcro-profile-picture-selector");
@@ -36462,7 +36446,7 @@ const ProfilePicChangeSelectButton = ({
     }
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     icon: /*#__PURE__*/React__default['default'].createElement(SvgPhotograph, null),
     disabled: isSubmitting,
     onClick: browseFiles,
@@ -36493,8 +36477,8 @@ const ProfilePicChangeRemoveButton = ({
   } = React.useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("userEdit");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     icon: /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
       className: "plc-h-6 plc-w-6"
     }),
@@ -36516,7 +36500,7 @@ const ProfilePicChangeWrapper = () => {
   } = React.useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   const currentProfilePicture = window.Pelcro.user.read().profile_photo;
   return imageSrc ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ProfilePicChangeCropper, null), /*#__PURE__*/React__default['default'].createElement(ProfilePicChangeZoom, {
     className: "plc-mt-4 plc-mb-4"
@@ -36562,12 +36546,12 @@ function ProfilePicChangeModal({
 }) {
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-profile-picture-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -36597,7 +36581,7 @@ const EmailVerifyContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("verifyEmail");
+  } = useTranslation("verifyEmail");
 
   const submit = () => {
     window.Pelcro.user.resendEmailVerification((err, res) => {
@@ -36679,8 +36663,8 @@ const EmailVerifyResendButton = ({
   } = React.useContext(store$2);
   const {
     t
-  } = useTranslation$1("verifyEmail");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("verifyEmail");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -36696,7 +36680,7 @@ const EmailVerifyView = props => {
 
   const {
     t
-  } = useTranslation$1("verifyEmail");
+  } = useTranslation("verifyEmail");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-email-verify-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -36725,12 +36709,12 @@ const EmailVerifyModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("verifyEmail");
+  } = useTranslation("verifyEmail");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-email-verify-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -36866,7 +36850,7 @@ function VerifyLinkTokenModal({
 }) {
   const {
     t
-  } = useTranslation$1("verifyLinkToken");
+  } = useTranslation("verifyLinkToken");
   const {
     resetView
   } = usePelcro();
@@ -36883,7 +36867,7 @@ function VerifyLinkTokenModal({
     id: "pelcro-login-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -36921,7 +36905,7 @@ const InvoicePaymentModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("payment");
+  } = useTranslation("payment");
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -36934,7 +36918,7 @@ const InvoicePaymentModal = ({
     id: "pelcro-invoice-payment-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -36999,7 +36983,7 @@ const InvoiceDetailsDownloadButton = ({
 }) => {
   const {
     t
-  } = useTranslation$1("invoiceDetails");
+  } = useTranslation("invoiceDetails");
   const {
     invoice
   } = usePelcro();
@@ -37022,8 +37006,8 @@ const InvoiceDetailsPayButton = ({
   } = React.useContext(store);
   const {
     t
-  } = useTranslation$1("invoiceDetails");
-  return /*#__PURE__*/React__default['default'].createElement(Button$1, Object.assign({
+  } = useTranslation("invoiceDetails");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -37036,7 +37020,7 @@ const InvoiceDetailsPayButton = ({
 const InvoiceDetailsView = props => {
   const {
     t
-  } = useTranslation$1("invoiceDetails");
+  } = useTranslation("invoiceDetails");
   const {
     invoice
   } = usePelcro();
@@ -37106,7 +37090,7 @@ const InvoiceDetailsModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("invoiceDetails");
+  } = useTranslation("invoiceDetails");
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -37119,7 +37103,7 @@ const InvoiceDetailsModal = ({
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-invoice-details-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -37149,12 +37133,12 @@ const QrCodeModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("qr");
+  } = useTranslation("qr");
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-qrcode-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader$1, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__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("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -37202,7 +37186,7 @@ exports.Auth0LoginButton = Auth0LoginButton;
 exports.Badge = Badge;
 exports.BankAuthenticationSuccess = BankAuthenticationSuccess;
 exports.BankRedirection = BankRedirection;
-exports.Button = Button$1;
+exports.Button = Button;
 exports.CartContainer = CartContainer;
 exports.CartModal = CartModal;
 exports.CartRemoveItemButton = CartRemoveItemButton;
@@ -37265,6 +37249,7 @@ exports.MeterView = MeterView;
 exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
 exports.NewsLetter = NewsletterWithHook;
 exports.NewsletterUpdateButton = NewsletterUpdateButton;
 exports.NewsletterUpdateContainer = NewsletterUpdateContainer;