npm - @pelcro/react-pelcro-js - Versions diffs - 4.0.0-alpha.10 → 4.0.0-alpha.12 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -3072,7 +3072,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;
@@ -3177,7 +3177,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],
@@ -10010,7 +10010,7 @@ const VARIANTS = {
   ICON: "icon",
   GHOST: "ghost"
 };
-function Button$1({
+function Button({
   variant = "solid",
   isLoading,
   icon,
@@ -10135,11 +10135,11 @@ toast.confirm = (onConfirm, {
     className: "plc-font-semibold"
   }, confirmMessage), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-space-y-2 sm:plc-space-y-0 sm:plc-space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
+  }, /*#__PURE__*/React__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.createElement(Button$1, {
+  }, confirmButtonLabel !== null && confirmButtonLabel !== void 0 ? confirmButtonLabel : translations.labels.confirm), /*#__PURE__*/React__default.createElement(Button, {
     className: "plc-text-xs",
     variant: "outline",
     onClick: () => toast.dismiss(t.id)
@@ -11915,7 +11915,7 @@ function Email({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -12006,7 +12006,7 @@ function Password({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -12054,7 +12054,7 @@ function ConfirmPassword({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -12135,12 +12135,12 @@ const LoginButton = ({
   } = useContext(store$l);
   const {
     t
-  } = useTranslation$1("login");
+  } = useTranslation("login");
   const [isDisabled, setDisabled] = useState(true);
   useEffect(() => {
     setDisabled(emailError || passwordError || !email.length || !password.length || buttonDisabled);
   }, [emailError, passwordError, email, password, buttonDisabled]);
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_LOGIN
@@ -12178,7 +12178,7 @@ const LoginRequestLoginToken = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(),
@@ -12885,7 +12885,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.createElement("div", {
@@ -12973,7 +12973,7 @@ const Authorship = () => {
     target: "_blank",
     className: "plc-inline-flex plc-flex-col plc-items-center"
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "plc-inline-flex plc-mb-2"
+    className: "plc-inline-flex plc-mb-2 pelcro-authorship"
   }, "Powered by"), /*#__PURE__*/React__default.createElement(SvgPelcroAuthorship, {
     className: "pelcro-authorship"
   }));
@@ -13002,7 +13002,7 @@ function Modal({
     className: "pelcro-modal-content"
   }, children.find(({
     type
-  }) => type === ModalHeader$1 && /*#__PURE__*/React__default.createElement(ModalHeader$1, Object.assign({
+  }) => type === ModalHeader && /*#__PURE__*/React__default.createElement(ModalHeader, Object.assign({
     id: id,
     onDisplay: onDisplay,
     hideCloseButton: hideCloseButton
@@ -13012,7 +13012,7 @@ function Modal({
     type
   }) => type === ModalFooter))));
 }
-const ModalHeader$1 = ({
+const ModalHeader = ({
   id,
   onDisplay,
   hideCloseButton,
@@ -13077,7 +13077,7 @@ function LoginModal({
 }) {
   const {
     t
-  } = useTranslation$1("login");
+  } = useTranslation("login");
   const {
     switchView,
     resetView,
@@ -13117,7 +13117,7 @@ function LoginModal({
     id: "pelcro-login-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -13165,12 +13165,12 @@ const RegisterButton = ({
   } = useContext(store$k);
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const [isDisabled, setDisabled] = useState(true);
   useEffect(() => {
     setDisabled(buttonDisabled || emailError || passwordError || !email.length || !password.length);
   }, [buttonDisabled, emailError, passwordError, email, password]);
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_REGISTRATION
@@ -13192,7 +13192,7 @@ function FirstName({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -13270,7 +13270,7 @@ function LastName({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -13348,7 +13348,7 @@ function Phone({
 }) {
   const {
     t
-  } = useTranslation$1("common");
+  } = useTranslation("common");
   const {
     dispatch,
     state: {
@@ -13424,7 +13424,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;
@@ -13654,7 +13654,7 @@ function RegisterModal(props) {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     switchView,
     resetView,
@@ -13723,7 +13723,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.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -18706,7 +18706,7 @@ class SelectModal extends Component {
         className: "plc-mb-2"
       }, this.locale("labels.startingAt")), this.countStartPrice(product.plans)))), isPlanMode || /*#__PURE__*/React__default.createElement("div", {
         className: "plc-mt-auto plc-w-full"
-      }, /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+      }, /*#__PURE__*/React__default.createElement(Button, Object.assign({
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
@@ -18976,7 +18976,7 @@ class SelectModal extends Component {
       hideCloseButton: !this.closeButton,
       onClose: this.props.onClose,
       id: "pelcro-selection-modal"
-    }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+    }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("button", {
       type: "button",
@@ -18996,7 +18996,7 @@ class SelectModal extends Component {
       onChange: this.onIsGiftChange,
       checked: this.state.isGift,
       id: "pelcro-input-is-gift"
-    }, this.locale("messages.checkbox"))), /*#__PURE__*/React__default.createElement(Button$1, {
+    }, this.locale("messages.checkbox"))), /*#__PURE__*/React__default.createElement(Button, {
       disabled: this.state.disabled,
       onClick: this.submitOption,
       id: "pelcro-submit",
@@ -21123,7 +21123,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const {
     t
-  } = useTranslation$1("payment");
+  } = useTranslation("payment");
   const pelcroStore = usePelcro();
   const {
     set,
@@ -22841,7 +22841,7 @@ const StripeInputStyle = {
 const PelcroCardNumber = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("label", {
     htmlFor: "pelcro-input-card-number"
   }, t("labels.card"), " *"), /*#__PURE__*/React__default.createElement(es_9, Object.assign({
@@ -22852,7 +22852,7 @@ const PelcroCardNumber = props => {
 const PelcroCardCVC = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("label", {
     htmlFor: "pelcro-input-cvc-number"
   }, t("labels.CVC"), " *"), /*#__PURE__*/React__default.createElement(es_6, Object.assign({
@@ -22863,7 +22863,7 @@ const PelcroCardCVC = props => {
 const PelcroCardExpiry = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("label", {
     htmlFor: "pelcro-input-expiry-date"
   }, t("labels.date"), " *"), /*#__PURE__*/React__default.createElement(es_8, Object.assign({
@@ -22953,7 +22953,7 @@ const DiscountedPrice = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     dispatch,
     state: {
@@ -22983,7 +22983,7 @@ const DiscountedPrice = props => {
       className: "plc-flex plc-items-center plc-justify-center plc-mt-2 pelcro-discount"
     }, props), "(-", percentOff, ")", /*#__PURE__*/React__default.createElement("span", {
       className: "plc-ml-1 plc-font-bold pelcro-discounted-price"
-    }, priceFormatted), /*#__PURE__*/React__default.createElement(Button$1, {
+    }, priceFormatted), /*#__PURE__*/React__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
@@ -23004,7 +23004,7 @@ const SubmitPaymentMethod = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     dispatch,
     state: {
@@ -23034,7 +23034,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.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
     variant: "solid",
@@ -23065,7 +23065,7 @@ const ApplyCouponButton = ({
   } = useContext(store$j);
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const onApplyCouponCode = () => {
     dispatch({
@@ -23074,7 +23074,7 @@ const ApplyCouponButton = ({
     onClick === null || onClick === void 0 ? void 0 : onClick();
   };
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     className: "plc-h-12 plc-ml-4",
     variant: "solid",
     "aria-label": t("labels.applyCouponCode"),
@@ -23089,7 +23089,7 @@ const ApplyCouponButton = ({
 const CouponCodeField = props => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     dispatch,
     state: {
@@ -23155,7 +23155,7 @@ const CouponCode = ({
   } = useContext(store$j);
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const showCouponField = () => {
     dispatch({
@@ -23167,7 +23167,7 @@ const CouponCode = ({
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-mt-4 plc-mb-6"
-  }, /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(Button, Object.assign({
     className: "plc-mb-2 plc-text-base plc-text-gray-500",
     variant: "ghost",
     icon: /*#__PURE__*/React__default.createElement(SvgTicket, {
@@ -23508,7 +23508,7 @@ const PaypalSubscribeButton = props => {
 const BankRedirection = () => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   return /*#__PURE__*/React__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.createElement(SvgSpinner, {
@@ -23519,7 +23519,7 @@ const BankRedirection = () => {
 const BankAuthenticationSuccess = () => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   return /*#__PURE__*/React__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.createElement(SvgSpinner, {
@@ -23548,7 +23548,7 @@ const SelectedPaymentMethod = () => {
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   const {
     state: {
       isLoading
@@ -23577,7 +23577,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.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.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.createElement(Button, {
     onClick: () => switchView("payment-method-select"),
     disabled: isLoading,
     variant: "ghost",
@@ -23590,7 +23590,7 @@ const TaxAmount = () => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     state: {
       taxAmount
@@ -23642,7 +23642,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);
@@ -23702,7 +23702,7 @@ const SubscriptionRenewView = ({
 }) => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     plan
   } = usePelcro();
@@ -23790,7 +23790,7 @@ function SubscriptionRenewModal({
     id: "pelcro-subscription-renew-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -23817,7 +23817,7 @@ const SubscriptionCancelContainer = ({
   children,
   ...props
 }) => {
-  useTranslation$1("verifyEmail");
+  useTranslation("verifyEmail");
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
       case SET_CANCEL_SUBSCRIPTION_REASON:
@@ -23923,7 +23923,7 @@ function TextArea({
 const SubscriptionCancelReason = props => {
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
   const {
     dispatch,
     state
@@ -23980,7 +23980,7 @@ const SubscriptionCancelNowButton = ({
   } = useContext(store$i);
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
   const cancelSubscription = (payload, onSuccess, onFailure) => {
     window.Pelcro.subscription.cancel({
@@ -24030,7 +24030,7 @@ const SubscriptionCancelNowButton = ({
     });
   };
-  return /*#__PURE__*/React__default.createElement(Button$1, {
+  return /*#__PURE__*/React__default.createElement(Button, {
     onClick: handleCancelNowClick,
     className: `${className}`
   }, t("messages.cancelNow"));
@@ -24054,7 +24054,7 @@ const SubscriptionCancelLaterButton = ({
   } = useContext(store$i);
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
   const cancelSubscription = (payload, onSuccess, onFailure) => {
     window.Pelcro.subscription.cancel({
@@ -24104,7 +24104,7 @@ const SubscriptionCancelLaterButton = ({
     });
   };
-  return /*#__PURE__*/React__default.createElement(Button$1, {
+  return /*#__PURE__*/React__default.createElement(Button, {
     onClick: handleCancelNowClick,
     className: `${className}`
   }, t("messages.cancelLater"));
@@ -24116,7 +24116,7 @@ const SubscriptionCancelView = props => {
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-subscription-cancel-view"
   }, /*#__PURE__*/React__default.createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default.createElement("div", {
@@ -24147,12 +24147,12 @@ const SubscriptionCancelModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("subscriptionCancel");
+  } = useTranslation("subscriptionCancel");
   return /*#__PURE__*/React__default.createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-subscription-cancel-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -24179,7 +24179,7 @@ const SubscriptionSuspendContainer = ({
   children,
   ...props
 }) => {
-  useTranslation$1("SubscriptionSuspend");
+  useTranslation("SubscriptionSuspend");
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
       case SET_SUBSCRIPTION_SUSPEND_DATE:
@@ -24254,7 +24254,7 @@ const SubscriptionSuspendDate = props => {
   const {
     t
-  } = useTranslation$1("subscriptionSuspend");
+  } = useTranslation("subscriptionSuspend");
   const {
     dispatch,
     state
@@ -24305,7 +24305,7 @@ const SubscriptionSuspendButton = ({
   } = useContext(store$h);
   const {
     t
-  } = useTranslation$1("subscriptionSuspend");
+  } = useTranslation("subscriptionSuspend");
   const suspendSubscription = (payload, onSuccess, onFailure) => {
     window.Pelcro.subscription.update({
@@ -24349,7 +24349,7 @@ const SubscriptionSuspendButton = ({
     });
   };
-  return /*#__PURE__*/React__default.createElement(Button$1, {
+  return /*#__PURE__*/React__default.createElement(Button, {
     onClick: handleClick,
     className: `${className}`,
     disabled: buttonDisabled
@@ -24362,7 +24362,7 @@ const SubscriptionSuspendView = props => {
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("subscriptionSuspend");
+  } = useTranslation("subscriptionSuspend");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-subscription-suspend-view"
   }, /*#__PURE__*/React__default.createElement(SubscriptionSuspendContainer, props, /*#__PURE__*/React__default.createElement("div", {
@@ -24428,7 +24428,7 @@ const PaymentSuccessView = ({
 }) => {
   const {
     t
-  } = useTranslation$1("success");
+  } = useTranslation("success");
   const {
     successTitle,
     successContent,
@@ -24442,7 +24442,7 @@ const PaymentSuccessView = ({
       className: "plc-text-center plc-text-gray-900"
     }, /*#__PURE__*/React__default.createElement("h4", {
       className: "plc-mb-4 plc-text-3xl"
-    }, successTitle), /*#__PURE__*/React__default.createElement("p", null, successContent)), /*#__PURE__*/React__default.createElement(Button$1, {
+    }, successTitle), /*#__PURE__*/React__default.createElement("p", null, successContent)), /*#__PURE__*/React__default.createElement(Button, {
       className: "plc-mt-6",
       onClick: onClose,
       autoFocus: true
@@ -24696,7 +24696,7 @@ class DefaultNewsLetter extends Component {
       hideCloseButton: !this.closeButton,
       onClose: this.props.onClose,
       id: "pelcro-newsletter-modal"
-    }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+    }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
       className: "plc-text-2xl plc-font-semibold"
@@ -24739,7 +24739,7 @@ class DefaultNewsLetter extends Component {
       label: t("labels.postalCode")
     }), /*#__PURE__*/React__default.createElement("p", {
       className: "plc-text-gray-900 pelcro-footnote"
-    }, "* ", t("labels.required")), /*#__PURE__*/React__default.createElement(Button$1, {
+    }, "* ", t("labels.required")), /*#__PURE__*/React__default.createElement(Button, {
       role: "submit",
       className: "plc-w-full plc-mt-2",
       id: "pelcro-submit",
@@ -24787,7 +24787,7 @@ const NewsletterUpdateContainer = ({
   onFailure = () => {},
   children
 }) => {
-  const [t] = useTranslation$1("newsletter");
+  const [t] = useTranslation("newsletter");
   const handleSubmit = ({
     newsletters,
@@ -24966,8 +24966,8 @@ const NewsletterUpdateButton = ({
   } = useContext(store$g);
   const {
     t
-  } = useTranslation$1("newsletter");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("newsletter");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -25020,7 +25020,7 @@ const NewsletterUpdateList = () => {
 const NewsletterUpdateView = props => {
   const {
     t
-  } = useTranslation$1("newsletter");
+  } = useTranslation("newsletter");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-newsletter-update-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -25041,12 +25041,12 @@ const NewsletterUpdateModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("newsletter");
+  } = useTranslation("newsletter");
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-newsletter-update-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -25059,7 +25059,7 @@ const MeterView = () => {
   const {
     t
-  } = useTranslation$1("meter");
+  } = useTranslation("meter");
   const {
     switchView,
     product,
@@ -25075,10 +25075,10 @@ const MeterView = () => {
     className: "plc-text-sm plc-text-gray-600"
   }, subtitle, ",", !isAuthenticated() && " or " + t("messages.alreadyHaveAccount")), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-mt-2"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     className: "plc-w-1/2",
     onClick: () => switchView("plan-select")
-  }, t("messages.subscribeNow")), !isAuthenticated() && /*#__PURE__*/React__default.createElement(Button$1, {
+  }, t("messages.subscribeNow")), !isAuthenticated() && /*#__PURE__*/React__default.createElement(Button, {
     className: "pelcro-button-ghost plc-w-1/2",
     onClick: () => switchView("login")
   }, t("messages.loginHere"))));
@@ -25120,7 +25120,7 @@ const SubscriptionCreateView = ({
 }) => {
   const {
     t
-  } = useTranslation$1("checkoutForm");
+  } = useTranslation("checkoutForm");
   const {
     plan
   } = usePelcro();
@@ -25192,7 +25192,7 @@ function SubscriptionCreateModal({
     id: "pelcro-subscription-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -25235,7 +25235,7 @@ const UserUpdateContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   useEffect(() => {
     document.addEventListener("PelcroUserLoaded", () => {
       loadUserDataIntoFields();
@@ -25448,7 +25448,7 @@ const UserUpdateEmail = props => {
   const [enableEmailEdit, setEnableEmailEdit] = useState(false);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   const handleEnableEmailEdit = () => {
     if (enableEmailEdit) {
@@ -25473,7 +25473,7 @@ const UserUpdateEmail = props => {
     store: store$f,
     label: t("labels.email"),
     enableEmailEdit: enableEmailEdit
-  }, props)), /*#__PURE__*/React__default.createElement(Button$1, {
+  }, props)), /*#__PURE__*/React__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.createElement(SvgXIcon, {
@@ -25508,12 +25508,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] = useState(true);
   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.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_USER_UPDATE
@@ -25555,7 +25555,7 @@ const UserUpdateProfilePic = ({
     src: profilePicture,
     alt: "profile picture",
     onClick: onClick
-  }, otherProps)), /*#__PURE__*/React__default.createElement(Button$1, {
+  }, otherProps)), /*#__PURE__*/React__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.createElement(SvgEdit, null),
@@ -25569,7 +25569,7 @@ function Tin({
   store,
   ...otherProps
 }) {
-  useTranslation$1("common");
+  useTranslation("common");
   const {
     dispatch,
     state: {
@@ -25629,7 +25629,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.createElement("div", {
     id: "pelcro-user-update-view"
@@ -25688,7 +25688,7 @@ function UserUpdateModal({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   const onPictureClick = () => {
     switchView("profile-picture");
@@ -25698,7 +25698,7 @@ function UserUpdateModal({
     id: "pelcro-user-update-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -25793,7 +25793,7 @@ const AddressCreateContainer = ({
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   const {
     giftCode: giftCodeFromStore,
     subscriptionIdToRenew: subscriptionIdToRenewFromStore,
@@ -26263,8 +26263,8 @@ const AddressCreateSubmit = ({
   } = useContext(store$e);
   const {
     t
-  } = useTranslation$1("address");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -26489,7 +26489,7 @@ const AddressCreateSetDefault = props => {
 const AddressCreateView = props => {
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-address-create-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -26561,7 +26561,7 @@ const AddressCreateModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   const onSuccess = newAddressId => {
     var _otherProps$onSuccess;
@@ -26589,7 +26589,7 @@ const AddressCreateModal = ({
     id: "pelcro-address-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -26660,7 +26660,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");
   useEffect(() => {
     const getCountries = () => {
       dispatch({
@@ -27121,8 +27121,8 @@ const AddressUpdateSubmit = ({
   } = useContext(store$d);
   const {
     t
-  } = useTranslation$1("address");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -27164,7 +27164,7 @@ function AddressUpdateSetDefault(props) {
 const AddressUpdateView = props => {
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-address-update-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -27236,12 +27236,12 @@ const AddressUpdateModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-address-update-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -27308,7 +27308,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;
@@ -27325,7 +27325,7 @@ const PaymentMethodUpdateModal = props => {
     id: "pelcro-payment-method-update-modal",
     onDisplay: props.onDisplay,
     onClose: props.onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -27362,7 +27362,7 @@ const PasswordResetContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordReset");
+  } = useTranslation("passwordReset");
   const handleSubmit = ({
     email,
@@ -27503,8 +27503,8 @@ const PasswordResetButton = ({
   } = useContext(store$c);
   const {
     t
-  } = useTranslation$1("passwordReset");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("passwordReset");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -27530,7 +27530,7 @@ const PasswordResetConfirmPassword = props => /*#__PURE__*/React__default.create
 const PasswordResetView = props => {
   const {
     t
-  } = useTranslation$1("passwordReset");
+  } = useTranslation("passwordReset");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-password-reset-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -27566,12 +27566,12 @@ const PasswordResetModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordReset");
+  } = useTranslation("passwordReset");
   return /*#__PURE__*/React__default.createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-password-reset-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -27602,7 +27602,7 @@ const PasswordForgotContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordForgot");
+  } = useTranslation("passwordForgot");
   const handleSubmit = ({
     email
@@ -27702,12 +27702,12 @@ const PasswordForgotButton = ({
   } = useContext(store$b);
   const {
     t
-  } = useTranslation$1("passwordForgot");
+  } = useTranslation("passwordForgot");
   const [isDisabled, setDisabled] = useState(true);
   useEffect(() => {
     setDisabled(emailError || !email.length || buttonDisabled);
   }, [emailError, email, buttonDisabled]);
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -27726,7 +27726,7 @@ const PasswordForgotEmail = props => /*#__PURE__*/React__default.createElement(E
 const PasswordForgotView = props => {
   const {
     t
-  } = useTranslation$1("passwordForgot");
+  } = useTranslation("passwordForgot");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-password-forgot-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -27751,7 +27751,7 @@ const PasswordForgotModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordForgot");
+  } = useTranslation("passwordForgot");
   const {
     switchView
   } = usePelcro();
@@ -27759,7 +27759,7 @@ const PasswordForgotModal = ({
     id: "pelcro-password-forgot-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -27797,7 +27797,7 @@ const PasswordlessRequestContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   const handleSubmit = ({
     email
@@ -27897,12 +27897,12 @@ const PasswordlessRequestViewButton = ({
   } = useContext(store$a);
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   const [isDisabled, setDisabled] = useState(true);
   useEffect(() => {
     setDisabled(emailError || !email.length || buttonDisabled);
   }, [emailError, email, buttonDisabled]);
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -27921,7 +27921,7 @@ const PasswordlessRequestEmail = props => /*#__PURE__*/React__default.createElem
 const PasswordlessRequestView = props => {
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-password-forgot-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -27946,12 +27946,12 @@ const PasswordlessRequestModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordlessRequest");
+  } = useTranslation("passwordlessRequest");
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-password-forgot-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -27986,7 +27986,7 @@ const PasswordChangeContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordChange");
+  } = useTranslation("passwordChange");
   const handleSubmit = ({
     currentPassword,
@@ -28265,9 +28265,9 @@ const PasswordChangeButton = ({
   } = useContext(store$9);
   const {
     t
-  } = useTranslation$1("passwordChange");
+  } = useTranslation("passwordChange");
   const hasInvalidField = currentPasswordError || newPasswordError || confirmNewPasswordError;
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -28282,7 +28282,7 @@ const PasswordChangeButton = ({
 const PasswordChangeView = props => {
   const {
     t
-  } = useTranslation$1("passwordChange");
+  } = useTranslation("passwordChange");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-password-change-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -28318,12 +28318,12 @@ const PasswordChangeModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("passwordChange");
+  } = useTranslation("passwordChange");
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-password-change-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -28356,7 +28356,7 @@ const CartContainer = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("shop");
+  } = useTranslation("shop");
   useEffect(() => {
     dispatch({
       type: DISABLE_SUBMIT,
@@ -28459,7 +28459,7 @@ const CartRemoveItemButton = ({
   const {
     removeFromCart
   } = usePelcro();
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     variant: "icon",
     "data-key": itemId,
     icon: /*#__PURE__*/React__default.createElement(SvgXIcon, {
@@ -28487,8 +28487,8 @@ const CartSubmit = ({
   } = useContext(store$8);
   const {
     t
-  } = useTranslation$1("cart");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, otherProps, {
+  } = useTranslation("cart");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, otherProps, {
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -28525,7 +28525,7 @@ const CartTotalPrice = () => {
   const totalPriceCurrency = cartItems[0].currency;
   const {
     t
-  } = useTranslation$1("cart");
+  } = useTranslation("cart");
   if (!alert.content) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
@@ -28544,7 +28544,7 @@ const CartView = props => {
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("cart");
+  } = useTranslation("cart");
   useEffect(() => {
     document.dispatchEvent(cartOpened(cartItems));
   }, []);
@@ -28603,7 +28603,7 @@ const CartModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("cart");
+  } = useTranslation("cart");
   const onSuccess = items => {
     var _otherProps$onSuccess;
@@ -28622,7 +28622,7 @@ const CartModal = ({
     onDisplay: onDisplay,
     onClose: onClose,
     hideCloseButton: false
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -28642,7 +28642,7 @@ const ShopSelectProductButton = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("shop");
+  } = useTranslation("shop");
   const [disabled, setDisabled] = useState(false);
   const [textContent, setTextContent] = useState(t("buttons.select"));
@@ -28657,7 +28657,7 @@ const ShopSelectProductButton = ({
     }, 1000);
   };
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     "data-sku-id": itemId,
     id: `pelcro-shop-select-${itemId}`,
     onClick: handleClick,
@@ -28674,8 +28674,8 @@ const ShopPurchaseButton = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("shop");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, otherProps, {
+  } = useTranslation("shop");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, otherProps, {
     "data-sku-id": itemId,
     id: `pelcro-shop-purchase-${itemId}`,
     onClick: () => purchaseItem(itemId)
@@ -28745,7 +28745,7 @@ const OrderCreateModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("payment");
+  } = useTranslation("payment");
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -28758,7 +28758,7 @@ const OrderCreateModal = ({
     id: "pelcro-order-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -28776,7 +28776,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();
@@ -28834,7 +28834,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.createElement("div", {
     className: "plc-flex plc-justify-center plc-mt-6"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     id: "pelcro-submit",
     onClick: onClose,
     autoFocus: true
@@ -28868,7 +28868,7 @@ const GiftCreateContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     set
   } = usePelcro();
@@ -28992,8 +28992,8 @@ const GiftCreateSubmitButton = ({
   } = useContext(store$7);
   const {
     t
-  } = useTranslation$1("register");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("register");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -29027,7 +29027,7 @@ const GiftCreateStartDate = props => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     dispatch,
     state
@@ -29062,7 +29062,7 @@ function GiftCreateMessage(props) {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     dispatch,
     state
@@ -29096,7 +29096,7 @@ function GiftCreateMessage(props) {
 const GiftCreateView = props => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-gift-create-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -29155,7 +29155,7 @@ const GiftCreateModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     switchView,
     switchToAddressView,
@@ -29179,7 +29179,7 @@ const GiftCreateModal = ({
     id: "pelcro-gift-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -29219,7 +29219,7 @@ const GiftRedeemContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     set
   } = usePelcro();
@@ -29339,8 +29339,8 @@ const GiftRedeemSubmitButton = ({
   } = useContext(store$6);
   const {
     t
-  } = useTranslation$1("register");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("register");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -29354,7 +29354,7 @@ const GiftRedeemSubmitButton = ({
 const GiftRedeemView = props => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-gift-redeem-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -29383,7 +29383,7 @@ const GiftRedeemModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("register");
+  } = useTranslation("register");
   const {
     switchView,
     switchToAddressView,
@@ -29406,7 +29406,7 @@ const GiftRedeemModal = ({
     id: "pelcro-gift-redeem-modal",
     onClose: onClose,
     onDisplay: onDisplay
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -29463,7 +29463,7 @@ const AddressSelectContainer = ({
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   const {
     switchView,
     giftCode: giftCodeFromStore,
@@ -29664,8 +29664,8 @@ const AddressSelectSubmit = ({
   } = useContext(store$5);
   const {
     t
-  } = useTranslation$1("address");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("address");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -29680,7 +29680,7 @@ const AddressSelectSubmit = ({
 const AddressSelectView = props => {
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-address-select-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -29712,7 +29712,7 @@ const AddressSelectModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("address");
+  } = useTranslation("address");
   const onSuccess = selectedAddressId => {
     var _otherProps$onSuccess;
@@ -29744,7 +29744,7 @@ const AddressSelectModal = ({
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-address-select-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -29871,7 +29871,7 @@ const PaymentMethodSelectContainer = ({
 const PaymentMethodSelectList = () => {
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   const {
     dispatch,
     state: {
@@ -29921,7 +29921,7 @@ const PaymentMethodSelectSubmit = ({
 }) => {
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   const {
     dispatch,
     state: {
@@ -29929,7 +29929,7 @@ const PaymentMethodSelectSubmit = ({
       isSubmitting
     }
   } = useContext(store$4);
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -29944,7 +29944,7 @@ const PaymentMethodSelectSubmit = ({
 const PaymentMethodSelectView = props => {
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-payment-method-select-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -29973,7 +29973,7 @@ const PaymentMethodSelectModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("paymentMethod");
+  } = useTranslation("paymentMethod");
   const onSuccess = selectedPaymentMethodId => {
     var _otherProps$onSuccess;
@@ -29993,7 +29993,7 @@ const PaymentMethodSelectModal = ({
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-payment-method-select-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -31380,7 +31380,7 @@ const Card = ({
   requestStates,
   ...restProps
 }) => {
-  useTranslation$1("dashboard");
+  useTranslation("dashboard");
   return /*#__PURE__*/React__default.createElement("div", {
     className: `plc-bg-white plc-border-2 plc-p-6 plc-rounded plc-my-20 ${className}`,
     id: "plc-dashboard-card"
@@ -31404,7 +31404,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] = 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
@@ -31424,7 +31424,7 @@ const SavedItems = ({
 }) => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const [isLoading, setLoading] = useState(false);
   const {
     isAuthenticated
@@ -31484,7 +31484,7 @@ const SavedItems = ({
         src: item === null || item === void 0 ? void 0 : item.image
       }), /*#__PURE__*/React__default.createElement("span", {
         className: "plc-font-semibold"
-      }, item.title)))), /*#__PURE__*/React__default.createElement(Button$1, {
+      }, item.title)))), /*#__PURE__*/React__default.createElement(Button, {
         variant: "ghost",
         type: "button",
         className: "plc-text-gray-500 plc-rounded-2xl",
@@ -31513,10 +31513,30 @@ function SvgCalendar(props) {
   })));
 }
+const AddNew = ({
+  title,
+  onClick
+}) => {
+  const handleClick = () => {
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title && /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mt-5 plc-relative plc-text-primary-500"
+  }, /*#__PURE__*/React__default.createElement("hr", {
+    className: "plc-absolute plc-border-t-2 plc-my-4 plc-top-1.5 plc-w-full"
+  }), /*#__PURE__*/React__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.createElement(SvgPlus, {
+    className: "plc-w-4 plc-h-4 plc-mr-1"
+  }), /*#__PURE__*/React__default.createElement("span", null, title))));
+};
 const SubscriptionsMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   return /*#__PURE__*/React__default.createElement(Card, {
     id: "pelcro-dashboard-subscriptions-menu",
     className: "plc-max-w-80% plc-m-auto",
@@ -31537,20 +31557,15 @@ const SubscriptionsMenu = props => {
     className: "plc-w-1/5"
   }, t("labels.actions")))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
     className: "plc-h-4"
-  })), /*#__PURE__*/React__default.createElement(Accordion, null, /*#__PURE__*/React__default.createElement(SubscriptionsItems, props)), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
-    colSpan: "5",
-    className: "plc-p-1"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    variant: "ghost",
-    icon: /*#__PURE__*/React__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.createElement(Accordion, null, /*#__PURE__*/React__default.createElement(SubscriptionsItems, props))), /*#__PURE__*/React__default.createElement(AddNew, {
+    title: t("labels.addSubscription"),
     onClick: props.displayProductSelect
-  }, t("labels.addSubscription")))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+  }), /*#__PURE__*/React__default.createElement("table", {
+    className: "plc-w-full plc-table-fixed pelcro-subscriptions-table plc-text-left"
+  }, /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
     colSpan: "5",
     className: "plc-p-1"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "ghost",
     icon: /*#__PURE__*/React__default.createElement(SvgGift, {
       className: "plc-w-4 plc-h-4 plc-mr-1"
@@ -31574,7 +31589,7 @@ const SubscriptionsItems = ({
 }) => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const {
     switchView,
     setSubscriptionToCancel,
@@ -31703,35 +31718,35 @@ const SubscriptionsItems = ({
       className: "plc-inline-block plc-mt-1 plc-underline"
     }, getSubscriptionStatus(sub).content), /*#__PURE__*/React__default.createElement("br", null), sub.shipments_remaining ? /*#__PURE__*/React__default.createElement("span", {
       className: "plc-inline-block plc-mt-1"
-    }, sub.shipments_remaining, " ", t("labels.shipments")) : null)), /*#__PURE__*/React__default.createElement("td", null, sub.cancel_at_period_end === 1 && sub.plan.auto_renew && !sub.is_gift_recipient && /*#__PURE__*/React__default.createElement(Button$1, {
+    }, sub.shipments_remaining, " ", t("labels.shipments")) : null)), /*#__PURE__*/React__default.createElement("td", null, sub.cancel_at_period_end === 1 && sub.plan.auto_renew && !sub.is_gift_recipient && /*#__PURE__*/React__default.createElement(Button, {
       variant: "ghost",
       className: "plc-text-green-400 focus:plc-ring-green-300 pelcro-dashboard-sub-reactivate-button",
       icon: /*#__PURE__*/React__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.createElement(Button$1, {
+    }, t("labels.reactivate")), sub.cancel_at_period_end === 1 && sub.status !== "incomplete" && /*#__PURE__*/React__default.createElement(Button, {
       variant: "ghost",
       className: "plc-text-blue-400 pelcro-dashboard-sub-renew-button",
       icon: /*#__PURE__*/React__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.createElement(Button$1, {
+    }, t("labels.renew")), sub.shipments_suspended_until && isDateAfterToday(sub.shipments_suspended_until) && sub.shipments_remaining > 0 && /*#__PURE__*/React__default.createElement(Button, {
       variant: "ghost",
       className: "plc-text-blue-400 pelcro-dashboard-sub-suspend-button",
       icon: /*#__PURE__*/React__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.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.createElement(Button, {
       variant: "ghost",
       className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-suspend-button",
       icon: /*#__PURE__*/React__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.createElement(Button$1, {
+    }, t("labels.suspend")), !sub.plan.auto_renew || sub.plan.auto_renew && sub.cancel_at_period_end === 0 ? /*#__PURE__*/React__default.createElement(Button, {
       variant: "ghost",
       className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
       icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
@@ -31875,7 +31890,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.createElement(Card, {
     id: "pelcro-dashboard-orders-menu",
@@ -31910,9 +31925,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.createElement(React__default.Fragment, {
       key: order.id
@@ -31930,7 +31947,7 @@ const OrderItems = ({
       count: getItemsAmount(order.id)
     }))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("p", {
       className: "plc-font-semibold "
-    }, order.created)), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__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.createElement("td", null, /*#__PURE__*/React__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.createElement("span", {
       className: `plc-transition plc-ease-out  ${isActive && "plc-text-white plc-transform plc-rotate-90"}`
@@ -31962,30 +31979,10 @@ const OrderItems = ({
   });
 };
-const AddNew = ({
-  title,
-  onClick
-}) => {
-  const handleClick = () => {
-    onClick === null || onClick === void 0 ? void 0 : onClick();
-  };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title && /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-mt-5 plc-relative plc-text-primary-500"
-  }, /*#__PURE__*/React__default.createElement("hr", {
-    className: "plc-absolute plc-border-t-2 plc-my-4 plc-top-1.5 plc-w-full"
-  }), /*#__PURE__*/React__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.createElement(SvgPlus, {
-    className: "plc-w-4 plc-h-4 plc-mr-1"
-  }), /*#__PURE__*/React__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.createElement("tr", {
       key: sub.id,
@@ -31998,22 +31995,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.createElement("td", null, /*#__PURE__*/React__default.createElement("div", {
       className: "plc-mb-4 plc-text-gray-500 pelcro-donation-date"
-    }, sub.status && /*#__PURE__*/React__default.createElement("span", null, formatStartDate(sub.start)))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__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.createElement("br", null), /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-mb-4 plc-text-xs plc-text-gray-500"
-    }, sub.status && /*#__PURE__*/React__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.createElement("td", null, sub.cancel_at_period_end === 1 && /*#__PURE__*/React__default.createElement(Button, {
-      variant: "ghost",
-      icon: /*#__PURE__*/React__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.createElement("span", null, formatStartDate(sub.start)))));
   });
   return /*#__PURE__*/React__default.createElement(Card, {
     id: "pelcro-dashboard-donation-menu",
@@ -32027,13 +32009,7 @@ const DonationsMenu = props => {
     className: "plc-w-1/4"
   }, t("labels.plan")), /*#__PURE__*/React__default.createElement("th", {
     className: "plc-w-1/4"
-  }, t("labels.startDate")), /*#__PURE__*/React__default.createElement("th", {
-    className: "plc-w-1/4"
-  }, t("labels.status.title")), /*#__PURE__*/React__default.createElement("th", {
-    className: "plc-w-1/4"
-  }, t("labels.actions")))), /*#__PURE__*/React__default.createElement("tbody", null, subscriptions)), /*#__PURE__*/React__default.createElement(AddNew, {
-    title: t("labels.newDonations")
-  }));
+  }, t("labels.startDate")))), /*#__PURE__*/React__default.createElement("tbody", null, subscriptions)));
 };
 function getDonationSubs() {
@@ -32052,7 +32028,7 @@ function formatStartDate(date) {
 const InvoicesMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   return /*#__PURE__*/React__default.createElement(Card, {
     id: "pelcro-dashboard-invoices-menu",
     className: "plc-max-w-80% plc-m-auto",
@@ -32079,7 +32055,7 @@ const InvoicesItems = () => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const {
     setInvoice,
     switchView
@@ -32111,7 +32087,7 @@ const InvoicesItems = () => {
       className: "plc-py-2"
     }, /*#__PURE__*/React__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.createElement("td", null, /*#__PURE__*/React__default.createElement(Button$1, {
+    }, invoiceStatus.icon, invoiceStatus.title)), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Button, {
       variant: "ghost",
       className: "plc-text-blue-400 focus:plc-ring-blue-400 pelcro-dashboard-view-invoice-button",
       icon: /*#__PURE__*/React__default.createElement(SvgDocument, {
@@ -32190,7 +32166,7 @@ function getInvoiceStatus(invoice) {
 const MembershipsMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   return /*#__PURE__*/React__default.createElement(Card, {
     id: "pelcro-dashboard-donation-menu",
     className: "plc-max-w-80% plc-m-auto",
@@ -32215,7 +32191,7 @@ const MembershipsMenu = props => {
 const MembershipsItems = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const {
     switchView,
     setSelectedMembership,
@@ -32262,7 +32238,7 @@ const MembershipsItems = props => {
       className: "plc-inline-block plc-mt-1"
     }, membership.subscription.shipments_remaining, " ", t("labels.shipments")) : null)), /*#__PURE__*/React__default.createElement("td", {
       className: "plc-truncate"
-    }, /*#__PURE__*/React__default.createElement(Button$1, {
+    }, /*#__PURE__*/React__default.createElement(Button, {
       variant: "ghost",
       icon: /*#__PURE__*/React__default.createElement(SvgEdit, {
         className: "plc-w-4 plc-h-4"
@@ -32329,7 +32305,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 = () => {
@@ -32359,7 +32335,7 @@ const GiftsMenu = props => {
         className: "plc-mb-4 plc-text-xs plc-text-gray-500"
       }, recipient.status && /*#__PURE__*/React__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.createElement("td", null, /*#__PURE__*/React__default.createElement(Button$1, {
+      }, props === null || props === void 0 ? void 0 : props.getSubscriptionStatus(recipient).content))), recipient.cancel_at_period_end === 1 && /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Button, {
         variant: "ghost",
         icon: /*#__PURE__*/React__default.createElement(SvgRefresh, {
           className: "plc-w-4 plc-h-4"
@@ -32402,7 +32378,7 @@ const GiftsMenu = props => {
 const AddressesMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const [requestStates, setRequestStates] = useState({
     loading: false,
     success: false,
@@ -32426,7 +32402,7 @@ const AddressesMenu = props => {
 const AddressesItems = props => {
   var _window$Pelcro$user$r;
-  useTranslation$1("dashboard");
+  useTranslation("dashboard");
   const {
     switchView
   } = usePelcro();
@@ -32465,7 +32441,7 @@ const AddressesItems = props => {
     className: "pelcro-address-line1 plc-text-sm plc-mt-2"
   }, address.line1), /*#__PURE__*/React__default.createElement("p", {
     className: "pelcro-address-country plc-text-sm"
-  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name)), /*#__PURE__*/React__default.createElement(Button$1, {
+  }, address.city, ", ", address.state_name, " ", address.postal_code, ", ", address.country_name)), /*#__PURE__*/React__default.createElement(Button, {
     variant: "icon",
     className: "plc-text-gray-500",
     icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
@@ -32519,7 +32495,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.createElement(Card, {
     id: "pelcro-dashboard-payment-menu",
@@ -32537,7 +32513,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.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.createElement("div", {
@@ -32546,7 +32522,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.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.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.createElement(Button, {
     variant: "icon",
     className: "plc-text-gray-500",
     icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
@@ -33951,7 +33927,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.createElement(Card, {
     id: "pelcro-dashboard-donation-menu",
@@ -33968,7 +33944,7 @@ const QRCodeMenu = props => {
 const ProfileMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const {
     switchView
   } = usePelcro();
@@ -34014,7 +33990,7 @@ const NewslettersMenu = props => {
   const {
     t
-  } = useTranslation$1("dashboard");
+  } = useTranslation("dashboard");
   const defaultStatues = {
     loading: false,
     success: false,
@@ -34109,7 +34085,7 @@ const NewslettersMenu = props => {
     newsletters: newsletters
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-justify-center"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     onClick: handleSubmit,
     disabled: requestStates.loading
   }, "SUBMIT")));
@@ -34119,7 +34095,7 @@ const NewsLettersItems = ({
   newsletters,
   handleChange
 }) => {
-  useTranslation$1("dashboard");
+  useTranslation("dashboard");
   if (newsletters.length === 0) return null;
   return newsletters.map(newsletter => {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
@@ -34451,7 +34427,7 @@ class Dashboard extends 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.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.createElement("td", null, /*#__PURE__*/React__default.createElement(Button$1, {
+        }, this.locale("labels.default")))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Button, {
           variant: "icon",
           className: "plc-text-gray-500",
           icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
@@ -34473,7 +34449,7 @@ class Dashboard extends Component {
       }), addresses, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
         colSpan: "2",
         className: "plc-p-1"
-      }, /*#__PURE__*/React__default.createElement(Button$1, {
+      }, /*#__PURE__*/React__default.createElement(Button, {
         variant: "ghost",
         icon: /*#__PURE__*/React__default.createElement(SvgPlus, {
           className: "plc-w-4 plc-mr-1"
@@ -34585,9 +34561,10 @@ class Dashboard extends Component {
       setActiveDashboardLink: this.setActiveDashboardLink,
       activeDashboardLink: this.state.activeDashboardLink
     }), /*#__PURE__*/React__default.createElement(DashboardLink, {
+      show: showNewsletters(),
       name: SUB_MENUS.NEWSLETTERS,
       icon: /*#__PURE__*/React__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,
@@ -34683,7 +34660,7 @@ class Dashboard extends Component {
       setSubscriptionIdToRenew: this.props.setSubscriptionIdToRenew,
       setIsRenewingGift: this.props.setIsRenewingGift,
       setView: this.props.setView
-    }), this.state.activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default.createElement(OrdersMenu, null), this.state.activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default.createElement(InvoicesMenu, null), this.state.activeDashboardLink === SUB_MENUS.LOGOUT && this.props.logout(), /*#__PURE__*/React__default.createElement(Button$1, {
+    }), this.state.activeDashboardLink === SUB_MENUS.ORDERS && /*#__PURE__*/React__default.createElement(OrdersMenu, null), this.state.activeDashboardLink === SUB_MENUS.INVOICES && /*#__PURE__*/React__default.createElement(InvoicesMenu, null), this.state.activeDashboardLink === SUB_MENUS.LOGOUT && this.props.logout(), /*#__PURE__*/React__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",
@@ -34702,15 +34679,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.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.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",
@@ -34759,7 +34743,7 @@ const ProfilePicChangeContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   const handleUpdatePicture = async ({
     imageSrc,
@@ -34959,8 +34943,8 @@ const ProfilePicChangeButton = ({
   } = useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("userEdit");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_USER_UPDATE
@@ -36369,7 +36353,7 @@ const ProfilePicChangeZoom = ({
   } = useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   return /*#__PURE__*/React__default.createElement("div", {
     className: `plc-flex plc-flex-col plc-items-center ${className}`
   }, /*#__PURE__*/React__default.createElement("label", {
@@ -36421,7 +36405,7 @@ const ProfilePicChangeSelectButton = ({
   } = useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   const browseFiles = () => {
     const fileInput = document.getElementById("pelcro-profile-picture-selector");
@@ -36432,7 +36416,7 @@ const ProfilePicChangeSelectButton = ({
     }
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, Object.assign({
     icon: /*#__PURE__*/React__default.createElement(SvgPhotograph, null),
     disabled: isSubmitting,
     onClick: browseFiles,
@@ -36463,8 +36447,8 @@ const ProfilePicChangeRemoveButton = ({
   } = useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("userEdit");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     icon: /*#__PURE__*/React__default.createElement(SvgXIcon, {
       className: "plc-h-6 plc-w-6"
     }),
@@ -36486,7 +36470,7 @@ const ProfilePicChangeWrapper = () => {
   } = useContext(store$3);
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   const currentProfilePicture = window.Pelcro.user.read().profile_photo;
   return imageSrc ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProfilePicChangeCropper, null), /*#__PURE__*/React__default.createElement(ProfilePicChangeZoom, {
     className: "plc-mt-4 plc-mb-4"
@@ -36532,12 +36516,12 @@ function ProfilePicChangeModal({
 }) {
   const {
     t
-  } = useTranslation$1("userEdit");
+  } = useTranslation("userEdit");
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-profile-picture-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -36567,7 +36551,7 @@ const EmailVerifyContainer = ({
 }) => {
   const {
     t
-  } = useTranslation$1("verifyEmail");
+  } = useTranslation("verifyEmail");
   const submit = () => {
     window.Pelcro.user.resendEmailVerification((err, res) => {
@@ -36649,8 +36633,8 @@ const EmailVerifyResendButton = ({
   } = useContext(store$2);
   const {
     t
-  } = useTranslation$1("verifyEmail");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("verifyEmail");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -36666,7 +36650,7 @@ const EmailVerifyView = props => {
   const {
     t
-  } = useTranslation$1("verifyEmail");
+  } = useTranslation("verifyEmail");
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-email-verify-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -36695,12 +36679,12 @@ const EmailVerifyModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("verifyEmail");
+  } = useTranslation("verifyEmail");
   return /*#__PURE__*/React__default.createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-email-verify-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -36836,7 +36820,7 @@ function VerifyLinkTokenModal({
 }) {
   const {
     t
-  } = useTranslation$1("verifyLinkToken");
+  } = useTranslation("verifyLinkToken");
   const {
     resetView
   } = usePelcro();
@@ -36853,7 +36837,7 @@ function VerifyLinkTokenModal({
     id: "pelcro-login-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -36891,7 +36875,7 @@ const InvoicePaymentModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("payment");
+  } = useTranslation("payment");
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -36904,7 +36888,7 @@ const InvoicePaymentModal = ({
     id: "pelcro-invoice-payment-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold "
@@ -36969,7 +36953,7 @@ const InvoiceDetailsDownloadButton = ({
 }) => {
   const {
     t
-  } = useTranslation$1("invoiceDetails");
+  } = useTranslation("invoiceDetails");
   const {
     invoice
   } = usePelcro();
@@ -36992,8 +36976,8 @@ const InvoiceDetailsPayButton = ({
   } = useContext(store);
   const {
     t
-  } = useTranslation$1("invoiceDetails");
-  return /*#__PURE__*/React__default.createElement(Button$1, Object.assign({
+  } = useTranslation("invoiceDetails");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
         type: HANDLE_SUBMIT
@@ -37006,7 +36990,7 @@ const InvoiceDetailsPayButton = ({
 const InvoiceDetailsView = props => {
   const {
     t
-  } = useTranslation$1("invoiceDetails");
+  } = useTranslation("invoiceDetails");
   const {
     invoice
   } = usePelcro();
@@ -37076,7 +37060,7 @@ const InvoiceDetailsModal = ({
   } = usePelcro();
   const {
     t
-  } = useTranslation$1("invoiceDetails");
+  } = useTranslation("invoiceDetails");
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -37089,7 +37073,7 @@ const InvoiceDetailsModal = ({
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-invoice-details-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -37119,12 +37103,12 @@ const QrCodeModal = ({
 }) => {
   const {
     t
-  } = useTranslation$1("qr");
+  } = useTranslation("qr");
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-qrcode-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ModalHeader, null, /*#__PURE__*/React__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.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold"
@@ -37132,4 +37116,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button$1 as Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };