@ttoss/react-auth-core 0.4.29 → 0.4.30

package/dist/index.cjs

@@ -0,0 +1,1102 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+Object.defineProperty(exports, Symbol.toStringTag, {
+  value: 'Module'
+});
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+      key = keys[i];
+      if (!__hasOwnProp.call(to, key) && key !== except) {
+        __defProp(to, key, {
+          get: (k => from[k]).bind(null, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+      }
+    }
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+
+//#endregion
+let _ttoss_react_notifications = require("@ttoss/react-notifications");
+let _ttoss_ui = require("@ttoss/ui");
+let react = require("react");
+let react$1 = __toESM(react, 1);
+react = __toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ttoss_components_NotificationCard = require("@ttoss/components/NotificationCard");
+let _ttoss_react_i18n = require("@ttoss/react-i18n");
+let _ttoss_forms = require("@ttoss/forms");
+let _ttoss_logger = require("@ttoss/logger");
+let react_error_boundary = require("react-error-boundary");
+
+//#region src/AuthCard.tsx
+const LogoContext = react.createContext({});
+const LogoProvider = ({
+  children,
+  ...values
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(LogoContext.Provider, {
+    value: values,
+    children
+  });
+};
+const AuthCard = ({
+  children,
+  title,
+  buttonLabel,
+  extraButton,
+  isValidForm
+}) => {
+  const {
+    logo
+  } = react.useContext(LogoContext);
+  const {
+    isLoading
+  } = (0, _ttoss_react_notifications.useNotifications)();
+  return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Box, {
+    sx: {
+      maxWidth: "400px",
+      width: "full",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      paddingX: "8",
+      paddingY: "9",
+      backgroundColor: "surface"
+    },
+    children: [logo && /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
+      sx: {
+        width: "full",
+        maxHeight: "90px",
+        justifyContent: "center",
+        marginBottom: "8"
+      },
+      children: logo
+    }), /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+      sx: {
+        flexDirection: "column"
+      },
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Heading, {
+        as: "h2",
+        variant: "h2",
+        sx: {
+          marginBottom: "8"
+        },
+        children: title
+      }), children, /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+        sx: {
+          flexDirection: "column",
+          width: "100%",
+          gap: "7",
+          marginTop: "8"
+        },
+        children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Button, {
+          type: "submit",
+          variant: "accent",
+          disabled: isLoading || !isValidForm,
+          sx: {
+            textAlign: "center",
+            display: "initial"
+          },
+          loading: isLoading,
+          children: buttonLabel
+        }), extraButton]
+      })]
+    })]
+  });
+};
+
+//#endregion
+//#region src/AuthConfirmSignUpCheckEmail.tsx
+const AuthConfirmSignUpCheckEmail = ({
+  onConfirmSignUpCheckEmail
+}) => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)("form", {
+    onSubmit: e => {
+      e.preventDefault();
+      onConfirmSignUpCheckEmail();
+    },
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthCard, {
+      isValidForm: true,
+      buttonLabel: intl.formatMessage({
+        id: "38HSjr",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Sign In"
+        }]
+      }),
+      title: intl.formatMessage({
+        id: "cGR2eI",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Confirmation"
+        }]
+      }),
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_components_NotificationCard.NotificationCard, {
+        type: "info",
+        message: intl.formatMessage({
+          id: "qTQ4hP",
+          defaultMessage: [{
+            "type": 0,
+            "value": "An email has been sent to your address. Please check your inbox and follow the instructions to confirm your sign up."
+          }]
+        })
+      })
+    })
+  });
+};
+
+//#endregion
+//#region src/AuthConfirmSignUpWithCode.tsx
+const AuthConfirmSignUpWithCode = ({
+  email,
+  onConfirmSignUpWithCode
+}) => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
+  const formMethods = (0, _ttoss_forms.useForm)({
+    resolver: (0, _ttoss_forms.yupResolver)(_ttoss_forms.yup.object().shape({
+      code: _ttoss_forms.yup.string().required(intl.formatMessage({
+        id: "0XOzcH",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Required field"
+        }]
+      })).max(6, intl.formatMessage({
+        id: "S3pjKw",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Minimum "
+        }, {
+          "type": 1,
+          "value": "value"
+        }, {
+          "type": 0,
+          "value": " characters"
+        }]
+      }, {
+        value: 6
+      }))
+    }).required())
+  });
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.Form, {
+    ...formMethods,
+    onSubmit: ({
+      code
+    }) => {
+      return onConfirmSignUpWithCode({
+        code,
+        email
+      });
+    },
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsxs)(AuthCard, {
+      buttonLabel: intl.formatMessage({
+        id: "UNttd+",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Confirm"
+        }]
+      }),
+      isValidForm: formMethods.formState.isValid,
+      title: intl.formatMessage({
+        id: "cGR2eI",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Confirmation"
+        }]
+      }),
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_components_NotificationCard.NotificationCard, {
+        type: "info",
+        message: intl.formatMessage({
+          id: "pwv2cR",
+          defaultMessage: [{
+            "type": 0,
+            "value": "We have sent a confirmation code to your email address. Please enter the code below."
+          }]
+        })
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldInput, {
+        sx: {
+          marginTop: "6"
+        },
+        name: "code",
+        label: intl.formatMessage({
+          id: "KY2T6J",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Code"
+          }]
+        })
+      })]
+    })
+  });
+};
+
+//#endregion
+//#region src/AuthForgotPassword.tsx
+const AuthForgotPassword = props => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
+  const formMethods = (0, _ttoss_forms.useForm)({
+    resolver: (0, _ttoss_forms.yupResolver)(_ttoss_forms.yup.object().shape({
+      email: _ttoss_forms.yup.string().email(intl.formatMessage({
+        id: "9cApwd",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Please, insert a valid e-mail"
+        }]
+      })).required()
+    }).required()),
+    mode: "onChange"
+  });
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.Form, {
+    ...formMethods,
+    sx: {
+      maxWidth: "390px"
+    },
+    onSubmit: ({
+      email
+    }) => {
+      return props.onForgotPassword({
+        email
+      });
+    },
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsxs)(AuthCard, {
+      buttonLabel: intl.formatMessage({
+        id: "mZzmNV",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Recover Password"
+        }]
+      }),
+      isValidForm: formMethods.formState.isValid,
+      title: intl.formatMessage({
+        id: "S4bbEj",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Recovering Password"
+        }]
+      }),
+      extraButton: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Button, {
+        sx: {
+          textAlign: "center",
+          display: "initial"
+        },
+        variant: "secondary",
+        onClick: props.onGoToSignIn,
+        children: intl.formatMessage({
+          id: "6PdOcy",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Cancel"
+          }]
+        })
+      }),
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldInput, {
+        name: "email",
+        label: intl.formatMessage({
+          id: "XreZg+",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Registered Email"
+          }]
+        })
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_react_notifications.NotificationsBox, {}), props.onGoToSignUp && /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Text, {
+        sx: {
+          marginTop: "xl",
+          cursor: "pointer"
+        },
+        as: _ttoss_ui.Link,
+        onClick: props.onGoToSignUp,
+        children: intl.formatMessage({
+          id: "lZvoYL",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Sign up now"
+          }]
+        })
+      })]
+    })
+  });
+};
+
+//#endregion
+//#region src/AuthForgotPasswordResetPassword.tsx
+const AuthForgotPasswordResetPassword = props => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
+  const codeValidation = _ttoss_forms.yup.string().required(intl.formatMessage({
+    id: "0XOzcH",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Required field"
+    }]
+  }));
+  const formMethods = (0, _ttoss_forms.useForm)({
+    resolver: (0, _ttoss_forms.yupResolver)(_ttoss_forms.yup.object().shape({
+      code: props.maxCodeLength ? codeValidation.min(props.maxCodeLength, intl.formatMessage({
+        id: "S3pjKw",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Minimum "
+        }, {
+          "type": 1,
+          "value": "value"
+        }, {
+          "type": 0,
+          "value": " characters"
+        }]
+      }, {
+        value: props.maxCodeLength
+      })).max(props.maxCodeLength, intl.formatMessage({
+        id: "SfWKyS",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Maximum "
+        }, {
+          "type": 1,
+          "value": "value"
+        }, {
+          "type": 0,
+          "value": " characters"
+        }]
+      }, {
+        value: props.maxCodeLength
+      })) : codeValidation,
+      newPassword: _ttoss_forms.yup.string().required(intl.formatMessage({
+        id: "kdFYba",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Password field is required"
+        }]
+      })).min(props.passwordMinimumLength || 8, intl.formatMessage({
+        id: "TZ4WUk",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Password requires "
+        }, {
+          "type": 1,
+          "value": "value"
+        }, {
+          "type": 0,
+          "value": " characters"
+        }]
+      }, {
+        value: props.passwordMinimumLength || 8
+      })).trim()
+    })),
+    mode: "onChange"
+  });
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.Form, {
+    ...formMethods,
+    sx: {
+      maxWidth: "390px"
+    },
+    onSubmit: ({
+      code,
+      newPassword
+    }) => {
+      return props.onForgotPasswordResetPassword({
+        email: props.email,
+        code,
+        newPassword
+      });
+    },
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsxs)(AuthCard, {
+      buttonLabel: intl.formatMessage({
+        id: "HT4tSM",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Reset Password"
+        }]
+      }),
+      isValidForm: formMethods.formState.isValid,
+      title: intl.formatMessage({
+        id: "HT4tSM",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Reset Password"
+        }]
+      }),
+      extraButton: props.onGoToSignIn ? /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Button, {
+        type: "button",
+        sx: {
+          textAlign: "center",
+          display: "initial"
+        },
+        variant: "secondary",
+        onClick: props.onGoToSignIn,
+        children: intl.formatMessage({
+          id: "6PdOcy",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Cancel"
+          }]
+        })
+      }) : null,
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldInput, {
+        name: "code",
+        label: intl.formatMessage({
+          id: "s1OmP0",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Confirmation code"
+          }]
+        })
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldPassword, {
+        name: "newPassword",
+        label: intl.formatMessage({
+          id: "e3IQoc",
+          defaultMessage: [{
+            "type": 0,
+            "value": "New Password"
+          }]
+        })
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_react_notifications.NotificationsBox, {})]
+    })
+  });
+};
+
+//#endregion
+//#region src/AuthFullScreen.tsx
+const AuthFullScreen = ({
+  children
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
+    sx: {
+      height: "100vh",
+      width: "100vw",
+      justifyContent: "center",
+      alignItems: "center",
+      margin: 0,
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "cover"
+    },
+    children
+  });
+};
+
+//#endregion
+//#region src/AuthSignIn.tsx
+const AuthSignIn = ({
+  onSignIn,
+  onGoToSignUp,
+  defaultValues,
+  onGoToForgotPassword,
+  passwordMinimumLength = 8
+}) => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
+  const formMethods = (0, _ttoss_forms.useForm)({
+    defaultValues,
+    mode: "onChange",
+    resolver: (0, _ttoss_forms.yupResolver)(_ttoss_forms.yup.object().shape({
+      email: _ttoss_forms.yup.string().required(intl.formatMessage({
+        id: "d1YCuH",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Enter your email address"
+        }]
+      })).email(intl.formatMessage({
+        id: "9cApwd",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Please, insert a valid e-mail"
+        }]
+      })),
+      password: _ttoss_forms.yup.string().required(intl.formatMessage({
+        id: "kdFYba",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Password field is required"
+        }]
+      })).min(passwordMinimumLength, intl.formatMessage({
+        id: "TZ4WUk",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Password requires "
+        }, {
+          "type": 1,
+          "value": "value"
+        }, {
+          "type": 0,
+          "value": " characters"
+        }]
+      }, {
+        value: passwordMinimumLength
+      })).trim()
+    }))
+  });
+  const onSubmitForm = data => {
+    return onSignIn(data);
+  };
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.Form, {
+    sx: {
+      maxWidth: "390px",
+      width: "100%"
+    },
+    ...formMethods,
+    onSubmit: onSubmitForm,
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsxs)(AuthCard, {
+      title: intl.formatMessage({
+        id: "SQJto2",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Sign in"
+        }]
+      }),
+      buttonLabel: intl.formatMessage({
+        id: "SQJto2",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Sign in"
+        }]
+      }),
+      isValidForm: formMethods.formState.isValid,
+      extraButton: onGoToSignUp ? /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Button, {
+        type: "button",
+        variant: "secondary",
+        sx: {
+          textAlign: "center",
+          display: "initial"
+        },
+        onClick: onGoToSignUp,
+        children: intl.formatMessage({
+          id: "EZ3YF2",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Sign up"
+          }]
+        })
+      }) : null,
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+        sx: {
+          flexDirection: "column",
+          gap: "xl"
+        },
+        children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldInput, {
+          name: "email",
+          label: intl.formatMessage({
+            id: "5E12mO",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Email"
+            }]
+          })
+        }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldPassword, {
+          name: "password",
+          label: intl.formatMessage({
+            id: "PylVqx",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Password"
+            }]
+          })
+        })]
+      }), onGoToForgotPassword && /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
+        sx: {
+          justifyContent: "space-between",
+          marginTop: "lg"
+        },
+        children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Text, {
+          sx: {
+            marginLeft: "auto",
+            cursor: "pointer"
+          },
+          as: _ttoss_ui.Link,
+          onClick: onGoToForgotPassword,
+          children: intl.formatMessage({
+            id: "BtK6KR",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Forgot password?"
+            }]
+          })
+        })
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_react_notifications.NotificationsBox, {})]
+    })
+  });
+};
+
+//#endregion
+//#region src/AuthSignUp.tsx
+const AuthSignUp = props => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
+  const {
+    passwordMinimumLength = 8
+  } = props;
+  const schema = react.useMemo(() => {
+    return _ttoss_forms.yup.object().shape({
+      email: _ttoss_forms.yup.string().required(intl.formatMessage({
+        id: "d1YCuH",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Enter your email address"
+        }]
+      })).email(intl.formatMessage({
+        id: "OhDL0i",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Invalid email"
+        }]
+      })),
+      password: _ttoss_forms.yup.string().required(intl.formatMessage({
+        id: "kdFYba",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Password field is required"
+        }]
+      })).min(passwordMinimumLength, intl.formatMessage({
+        id: "TZ4WUk",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Password requires "
+        }, {
+          "type": 1,
+          "value": "value"
+        }, {
+          "type": 0,
+          "value": " characters"
+        }]
+      }, {
+        value: passwordMinimumLength
+      })).trim(),
+      confirmPassword: _ttoss_forms.yup.string().required(intl.formatMessage({
+        id: "NJ57Qj",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Confirm password field is required"
+        }]
+      })).oneOf([_ttoss_forms.yup.ref("password")], intl.formatMessage({
+        id: "WU/CqP",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Passwords are not the same"
+        }]
+      })),
+      signUpTerms: props.signUpTerms?.isRequired ? _ttoss_forms.yup.boolean().required(intl.formatMessage({
+        id: "qnQYqN",
+        defaultMessage: [{
+          "type": 0,
+          "value": "You must accept the terms and conditions"
+        }]
+      })) : _ttoss_forms.yup.boolean()
+    });
+  }, [intl, props.signUpTerms?.isRequired, passwordMinimumLength]);
+  const signUpTermsLabel = react.useMemo(() => {
+    if (!props.signUpTerms) return null;
+    return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Text, {
+      children: [intl.formatMessage({
+        id: "Co3exe",
+        defaultMessage: [{
+          "type": 0,
+          "value": "By signing up, you agree to the following Terms and Conditions."
+        }]
+      }), " ", props.signUpTerms.terms.map((term, index, terms) => {
+        const finalPunctuation = index === terms.length - 1 ? "." : ", ";
+        return /* @__PURE__ */(0, react_jsx_runtime.jsxs)(react.Fragment, {
+          children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Link, {
+            href: term.url,
+            target: "_blank",
+            rel: "noreferrer",
+            children: term.label
+          }, index), finalPunctuation]
+        }, index);
+      })]
+    });
+  }, [intl, props.signUpTerms]);
+  const signUpTermsNode = react.useMemo(() => {
+    if (!props.signUpTerms) return null;
+    if (props.signUpTerms.isRequired) return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldCheckbox, {
+      name: "signUpTerms",
+      label: signUpTermsLabel
+    });else return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {
+      children: signUpTermsLabel
+    });
+  }, [props.signUpTerms, signUpTermsLabel]);
+  const formMethods = (0, _ttoss_forms.useForm)({
+    mode: "onChange",
+    resolver: (0, _ttoss_forms.yupResolver)(schema)
+  });
+  const onSubmitForm = data => {
+    return props.onSignUp(data);
+  };
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.Form, {
+    sx: {
+      maxWidth: "390px",
+      width: "100%"
+    },
+    ...formMethods,
+    onSubmit: onSubmitForm,
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsxs)(AuthCard, {
+      buttonLabel: intl.formatMessage({
+        id: "URJDrG",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Sign up"
+        }]
+      }),
+      title: intl.formatMessage({
+        id: "oayEC3",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Sign up"
+        }]
+      }),
+      isValidForm: formMethods.formState.isValid,
+      extraButton: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Text, {
+        sx: {
+          cursor: "pointer"
+        },
+        onClick: props.onGoToSignIn,
+        as: _ttoss_ui.Link,
+        children: intl.formatMessage({
+          id: "8GMUPk",
+          defaultMessage: [{
+            "type": 0,
+            "value": "I'm already registered"
+          }]
+        })
+      }),
+      children: [/* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+        sx: {
+          flexDirection: "column",
+          gap: "xl"
+        },
+        children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldInput, {
+          name: "email",
+          label: intl.formatMessage({
+            id: "5E12mO",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Email"
+            }]
+          })
+        }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldPassword, {
+          name: "password",
+          label: intl.formatMessage({
+            id: "PylVqx",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Password"
+            }]
+          })
+        }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_forms.FormFieldPassword, {
+          name: "confirmPassword",
+          label: intl.formatMessage({
+            id: "lY+cuM",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Confirm password"
+            }]
+          })
+        }), signUpTermsNode]
+      }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_react_notifications.NotificationsBox, {})]
+    })
+  });
+};
+
+//#endregion
+//#region src/ErrorBoundary.tsx
+const ErrorFallback = ({
+  resetErrorBoundary
+}) => {
+  const {
+    intl
+  } = (0, _ttoss_react_i18n.useI18n)();
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
+    role: "alert",
+    children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_components_NotificationCard.NotificationCard, {
+      type: "error",
+      message: intl.formatMessage({
+        id: "khMx/2",
+        defaultMessage: [{
+          "type": 0,
+          "value": "An error occurred with your authentication. Please try again."
+        }]
+      }),
+      onClose: resetErrorBoundary
+    })
+  });
+};
+const ErrorBoundary = ({
+  children
+}) => {
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(react_error_boundary.ErrorBoundary, {
+    FallbackComponent: ErrorFallback,
+    onError: error => {
+      (0, _ttoss_logger.notify)({
+        type: "error",
+        title: "Authentication Error",
+        message: error instanceof Error ? error.message : String(error)
+      });
+    },
+    children
+  });
+};
+
+//#endregion
+//#region src/useAuthScreen.ts
+const useAuthScreen = initialScreen => {
+  const [screen, setScreen] = react$1.useState(initialScreen || {
+    value: "signIn"
+  });
+  return {
+    screen,
+    setScreen
+  };
+};
+
+//#endregion
+//#region src/Auth.tsx
+const AuthLogic = props => {
+  const {
+    screen,
+    setScreen,
+    onSignUp,
+    onForgotPassword,
+    onSignIn,
+    onConfirmSignUpCheckEmail,
+    onConfirmSignUpWithCode,
+    onForgotPasswordResetPassword,
+    passwordMinimumLength,
+    signUpTerms,
+    maxForgotPasswordCodeLength
+  } = props;
+  const {
+    clearNotifications,
+    setLoading
+  } = (0, _ttoss_react_notifications.useNotifications)();
+  /**
+  * Clear notifications when the state changes
+  */
+  react.useEffect(() => {
+    clearNotifications();
+  }, [screen.value, clearNotifications]);
+  /**
+  * Clear notifications when the component unmounts
+  */
+  react.useEffect(() => {
+    return clearNotifications;
+  }, [clearNotifications]);
+  const onGoToSignIn = () => {
+    setScreen({
+      value: "signIn"
+    });
+  };
+  const onGoToSignUp = react.useCallback(() => {
+    if (!onSignUp) return;
+    setScreen({
+      value: "signUp"
+    });
+  }, [onSignUp, setScreen]);
+  const onGoToForgotPassword = react.useCallback(() => {
+    if (!onForgotPassword) return;
+    setScreen({
+      value: "forgotPassword"
+    });
+  }, [onForgotPassword, setScreen]);
+  const notificationsWrapper = fn => {
+    return async input => {
+      if (fn) {
+        clearNotifications();
+        setLoading(true);
+        const result = await fn(input);
+        setLoading(false);
+        return result;
+      }
+    };
+  };
+  if (screen.value === "signIn") return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthSignIn, {
+    onSignIn: notificationsWrapper(onSignIn),
+    onGoToSignUp: onSignUp && onGoToSignUp,
+    onGoToForgotPassword: onForgotPassword && onGoToForgotPassword,
+    passwordMinimumLength
+  });
+  if (screen.value === "signUp" && onSignUp) return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthSignUp, {
+    onSignUp: notificationsWrapper(onSignUp),
+    passwordMinimumLength,
+    onGoToSignIn,
+    signUpTerms
+  });
+  if (screen.value === "forgotPassword" && onForgotPassword) return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthForgotPassword, {
+    onForgotPassword: notificationsWrapper(onForgotPassword),
+    onGoToSignIn,
+    onGoToSignUp: onSignUp && onGoToSignUp
+  });
+  if (screen.value === "confirmResetPassword" && onForgotPasswordResetPassword) return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthForgotPasswordResetPassword, {
+    onForgotPasswordResetPassword: notificationsWrapper(onForgotPasswordResetPassword),
+    onGoToSignIn,
+    email: screen.context.email,
+    maxCodeLength: maxForgotPasswordCodeLength
+  });
+  if (screen.value === "confirmSignUpWithCode" && onConfirmSignUpWithCode) return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthConfirmSignUpWithCode, {
+    onConfirmSignUpWithCode: notificationsWrapper(onConfirmSignUpWithCode),
+    email: screen.context.email
+  });
+  if (screen.value === "confirmSignUpCheckEmail" && onConfirmSignUpCheckEmail) return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthConfirmSignUpCheckEmail, {
+    onConfirmSignUpCheckEmail
+  });
+  return null;
+};
+const Auth = props => {
+  const {
+    layout = {
+      fullScreen: true
+    }
+  } = props;
+  const authScreenHook = useAuthScreen(props.initialScreen);
+  const screen = props.screen ?? authScreenHook.screen;
+  const setScreen = props.setScreen ?? authScreenHook.setScreen;
+  const withLogoNode = react.useMemo(() => {
+    return /* @__PURE__ */(0, react_jsx_runtime.jsx)(LogoProvider, {
+      logo: props.logo,
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(ErrorBoundary, {
+        children: /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthLogic, {
+          screen,
+          setScreen,
+          signUpTerms: props.signUpTerms,
+          passwordMinimumLength: props.passwordMinimumLength,
+          maxForgotPasswordCodeLength: props.maxForgotPasswordCodeLength,
+          onSignIn: props.onSignIn,
+          onSignUp: props.onSignUp,
+          onConfirmSignUpCheckEmail: props.onConfirmSignUpCheckEmail,
+          onConfirmSignUpWithCode: props.onConfirmSignUpWithCode,
+          onForgotPassword: props.onForgotPassword,
+          onForgotPasswordResetPassword: props.onForgotPasswordResetPassword
+        })
+      })
+    });
+  }, [props, screen, setScreen]);
+  if (layout.fullScreen) {
+    if (layout.sideContentPosition) return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthFullScreen, {
+      children: /* @__PURE__ */(0, react_jsx_runtime.jsxs)(_ttoss_ui.Flex, {
+        sx: {
+          width: "100%",
+          height: "100%",
+          flexDirection: layout.sideContentPosition === "left" ? "row" : "row-reverse"
+        },
+        children: [/* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
+          sx: {
+            width: "100%",
+            height: "100%",
+            flex: [0, 0, 1],
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: layout.sideContent
+        }), /* @__PURE__ */(0, react_jsx_runtime.jsx)(_ttoss_ui.Flex, {
+          sx: {
+            width: "100%",
+            height: "100%",
+            flex: [1],
+            justifyContent: "center",
+            alignItems: "center"
+          },
+          children: withLogoNode
+        })]
+      })
+    });
+    return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthFullScreen, {
+      children: withLogoNode
+    });
+  }
+  return withLogoNode;
+};
+
+//#endregion
+//#region src/AuthProvider.tsx
+const AuthContext = react.createContext(null);
+const UNAUTHENTICATED_USER = {
+  user: null,
+  tokens: null,
+  isAuthenticated: false
+};
+const AuthProvider = props => {
+  const {
+    getAuthData,
+    signOut: signOutProp
+  } = props;
+  const {
+    setLoading
+  } = (0, _ttoss_react_notifications.useNotifications)();
+  const [authData, setAuthData] = react.useState({
+    user: null,
+    tokens: null,
+    isAuthenticated: void 0
+  });
+  /**
+  * Update the loading state based on authentication status.
+  */
+  react.useEffect(() => {
+    setLoading(authData.isAuthenticated === void 0);
+  }, [authData.isAuthenticated, setLoading]);
+  /**
+  * Fetch the authentication data when the component mounts.
+  */
+  react.useEffect(() => {
+    const fetchAuthData = async () => {
+      try {
+        const data = await getAuthData?.();
+        if (data) setAuthData(data);else setAuthData(UNAUTHENTICATED_USER);
+      } catch {
+        setAuthData(UNAUTHENTICATED_USER);
+      }
+    };
+    fetchAuthData();
+  }, [getAuthData]);
+  const signOut = react.useCallback(async () => {
+    await signOutProp?.();
+    setAuthData(UNAUTHENTICATED_USER);
+  }, [signOutProp]);
+  if (authData.isAuthenticated === void 0) return null;
+  return /* @__PURE__ */(0, react_jsx_runtime.jsx)(AuthContext.Provider, {
+    value: {
+      signOut,
+      isAuthenticated: authData.isAuthenticated ?? false,
+      user: authData.user,
+      tokens: authData.tokens,
+      setAuthData
+    },
+    children: props.children
+  });
+};
+const useAuth = () => {
+  const context = react.useContext(AuthContext);
+  if (!context) throw new Error("useAuth must be used within an AuthProvider");
+  return context;
+};
+
+//#endregion
+exports.Auth = Auth;
+exports.AuthConfirmSignUpCheckEmail = AuthConfirmSignUpCheckEmail;
+exports.AuthConfirmSignUpWithCode = AuthConfirmSignUpWithCode;
+exports.AuthForgotPassword = AuthForgotPassword;
+exports.AuthForgotPasswordResetPassword = AuthForgotPasswordResetPassword;
+exports.AuthFullScreen = AuthFullScreen;
+exports.AuthProvider = AuthProvider;
+exports.AuthSignIn = AuthSignIn;
+exports.AuthSignUp = AuthSignUp;
+exports.ErrorBoundary = ErrorBoundary;
+exports.useAuth = useAuth;
+exports.useAuthScreen = useAuthScreen;