@salesmind-ai/design-system 1.8.0 → 1.9.0

package/dist/chunk-AI2YEYT4.js

@@ -0,0 +1,1368 @@
+import React2, { useState, useMemo, useEffect } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import clsx5 from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Input } from '@base-ui/react/input';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+
+// src/v2-auth/Button/Button.tsx
+var Button = React2.forwardRef(
+  ({ className, variant = "primary", size = "md", asChild = false, isLoading = false, children, disabled, ...props }, ref) => {
+    const buttonClass = clsx5(
+      "ds-button",
+      `ds-button--${variant}`,
+      size === "icon" ? "ds-button--icon ds-button--md" : `ds-button--${size}`,
+      isLoading && "ds-button--loading",
+      className
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          "aria-disabled": isLoading || disabled || void 0,
+          className: buttonClass,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        disabled: isLoading || disabled,
+        className: buttonClass,
+        ...props,
+        children: [
+          isLoading && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "ds-button__spinner",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: clsx5("ds-button__content", isLoading && "ds-button__content--hidden"), children })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var TextField = React2.forwardRef(
+  ({ className, label, error, helperText, endAdornment, id, ...props }, ref) => {
+    const generatedId = React2.useId();
+    const inputId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-textfield", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-textfield__label", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-textfield__input-wrapper", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: inputId,
+            ref,
+            className: clsx5(
+              "ds-textfield__input",
+              error && "ds-textfield__input--error",
+              endAdornment && "ds-textfield__input--adorned"
+            ),
+            ...props
+          }
+        ),
+        endAdornment && /* @__PURE__ */ jsx("div", { className: "ds-textfield__adornment", children: endAdornment })
+      ] }),
+      helperText && /* @__PURE__ */ jsx("span", { className: clsx5("ds-textfield__helper", error && "ds-textfield__helper--error"), children: helperText })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+var Checkbox = React2.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const generatedId = React2.useId();
+    const checkboxId = id || generatedId;
+    const labelId = `${checkboxId}-label`;
+    return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-checkbox-wrapper", className), children: [
+      /* @__PURE__ */ jsx(
+        Checkbox$1.Root,
+        {
+          id: checkboxId,
+          ref,
+          className: "ds-checkbox",
+          "aria-labelledby": label ? labelId : void 0,
+          "aria-label": label ? void 0 : "Checkbox",
+          ...props,
+          children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: "ds-checkbox__indicator", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              viewBox: "0 0 14 14",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "ds-checkbox__icon",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ) })
+        }
+      ),
+      label && /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: checkboxId, className: "ds-checkbox__label", children: label })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var defaultLoginLabels = {
+  continueWithGoogleLabel: "Continue with Google",
+  orContinueWithEmailLabel: "or continue with email",
+  emailPlaceholder: "you@company.com",
+  passwordPlaceholder: "Enter your password",
+  signInLabel: "Sign in",
+  doNotHaveAnAccountLabel: "Don't have an account?",
+  emailLabel: "Email",
+  passwordLabel: "Password",
+  rememberMeLabel: "Remember me",
+  forgotPasswordLabel: "Forgot password?",
+  signUpLabel: "Sign up",
+  trustedByLabel: "Trusted by 500+ sales teams worldwide"
+};
+var Login = ({
+  brandName,
+  tagline = "AI Sales Agents that automate your pipeline",
+  labels: customLabels,
+  showSocialLogin = true,
+  showRememberMe = true,
+  showForgotPassword = true,
+  showSignUp = true,
+  logo,
+  onSubmit,
+  onGoogleLogin,
+  onForgotPassword,
+  onSignUp,
+  isLoading = false,
+  error,
+  className,
+  style
+}) => {
+  const l = { ...defaultLoginLabels, ...customLabels };
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.({ email, password, rememberMe });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-login", className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ds-login__background", children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-login__accent ds-login__accent--1", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "ds-login__accent ds-login__accent--2", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-login__card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-login__header", children: [
+        logo ? /* @__PURE__ */ jsx("div", { className: "ds-login__logo", children: logo }) : /* @__PURE__ */ jsx("div", { className: "ds-login__logo ds-login__logo--default", children: /* @__PURE__ */ jsx("div", { className: "ds-login__logo-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx("rect", { width: "32", height: "32", rx: "8", fill: "url(#logo-gradient)" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M10 16L14 20L22 12",
+              stroke: "white",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "logo-gradient", x1: "0", y1: "0", x2: "32", y2: "32", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--accent-rgb))" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "rgb(var(--accent2-rgb))" })
+          ] }) })
+        ] }) }) }),
+        /* @__PURE__ */ jsx("h1", { className: "ds-login__title", children: brandName }),
+        /* @__PURE__ */ jsx("p", { className: "ds-login__tagline", children: tagline })
+      ] }),
+      error && /* @__PURE__ */ jsxs("div", { className: "ds-login__error", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M8 4.5V8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+              /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: error })
+      ] }),
+      showSocialLogin && /* @__PURE__ */ jsxs("div", { className: "ds-login__social", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ds-login__social-btn",
+            onClick: onGoogleLogin,
+            disabled: isLoading,
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#4285F4",
+                    d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#34A853",
+                    d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#FBBC05",
+                    d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#EA4335",
+                    d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: l.continueWithGoogleLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "ds-login__divider", children: /* @__PURE__ */ jsx("span", { children: l.orContinueWithEmailLabel }) })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { className: "ds-login__form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-login__field", children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: l.emailLabel,
+            type: "email",
+            placeholder: l.emailPlaceholder,
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            disabled: isLoading,
+            autoComplete: "email"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "ds-login__field", children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: l.passwordLabel,
+            type: showPassword ? "text" : "password",
+            placeholder: l.passwordPlaceholder,
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            disabled: isLoading,
+            autoComplete: "current-password",
+            endAdornment: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-login__password-toggle",
+                onClick: () => setShowPassword(!showPassword),
+                "aria-label": showPassword ? "Hide password" : "Show password",
+                children: showPassword ? /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+                      /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-login__options", children: [
+          showRememberMe && /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              label: l.rememberMeLabel,
+              checked: rememberMe,
+              onCheckedChange: (checked) => setRememberMe(checked === true),
+              disabled: isLoading
+            }
+          ),
+          showForgotPassword && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ds-login__link",
+              onClick: onForgotPassword,
+              disabled: isLoading,
+              children: l.forgotPasswordLabel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            variant: "primary",
+            size: "lg",
+            disabled: isLoading || !email || !password,
+            className: "ds-login__submit",
+            children: isLoading ? /* @__PURE__ */ jsx("span", { className: "ds-login__spinner" }) : l.signInLabel
+          }
+        )
+      ] }),
+      showSignUp && /* @__PURE__ */ jsxs("div", { className: "ds-login__footer", children: [
+        /* @__PURE__ */ jsx("span", { children: l.doNotHaveAnAccountLabel }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ds-login__link ds-login__link--accent",
+            onClick: onSignUp,
+            disabled: isLoading,
+            children: l.signUpLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+Login.displayName = "Login";
+var defaultSignupLabels = {
+  formTitle: "Create your account",
+  googleButtonLabel: "Sign up with Google",
+  dividerText: "or sign up with email",
+  nameLabel: "Full name",
+  namePlaceholder: "John Doe",
+  emailLabel: "Work email",
+  emailPlaceholder: "you@company.com",
+  passwordLabel: "Password",
+  passwordPlaceholder: "Create a strong password",
+  phoneLabel: "Phone",
+  phonePlaceholder: "Phone number",
+  hidePasswordLabel: "Hide password",
+  showPasswordLabel: "Show password",
+  passwordStrengthLabels: ["Very Weak", "Weak", "Fair", "Strong", "Very Strong"],
+  termsAgreementPrefix: "I agree to the ",
+  termsLabel: "Terms of Service ",
+  termsConjunction: "and ",
+  privacyLabel: "Privacy Policy",
+  submitLabel: "Create account",
+  loginPrompt: "Already have an account?",
+  loginLabel: "Sign in",
+  successTitle: "Welcome!",
+  continueToLoginLabel: "Go to Application"
+};
+function calculatePasswordStrength(password, strengthLabels) {
+  let score = 0;
+  if (password.length >= 8) score++;
+  if (password.length >= 12) score++;
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
+  if (/\d/.test(password)) score++;
+  if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) score++;
+  score = Math.min(4, score);
+  const labels = strengthLabels ?? defaultSignupLabels.passwordStrengthLabels;
+  const colors = [
+    "var(--status-error)",
+    "var(--status-warning)",
+    "#ffd000",
+    "var(--status-success)",
+    "var(--status-success)"
+  ];
+  return {
+    score,
+    label: labels[score],
+    color: colors[score]
+  };
+}
+var Signup = ({
+  brandName,
+  showSocialSignup = true,
+  logo,
+  onSubmit,
+  onGoogleSignup,
+  onLogin,
+  onTermsClick,
+  onPrivacyClick,
+  isLoading = false,
+  error,
+  isSuccess = false,
+  successMessage = /* @__PURE__ */ jsxs(Fragment, { children: [
+    "You're all set!",
+    /* @__PURE__ */ jsx("br", {}),
+    "Check your email to verify your account."
+  ] }),
+  className,
+  style,
+  labels: customLabels,
+  defaultCountry = "TH",
+  countries = [],
+  renderPhoneInput
+}) => {
+  const l = { ...defaultSignupLabels, ...customLabels };
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const defaultCountryData = countries.find((c) => c.code === defaultCountry) || countries[0] || { dial: "+66"};
+  const [countryDial, setCountryDial] = useState(defaultCountryData.dial);
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [acceptedTerms, setAcceptedTerms] = useState(false);
+  const passwordStrength = useMemo(
+    () => calculatePasswordStrength(password, l.passwordStrengthLabels),
+    [password, l.passwordStrengthLabels]
+  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const fullPhone = phone ? phone.trim().startsWith("+") ? phone.trim() : `${countryDial} ${phone}`.trim() : "";
+    onSubmit?.({ name, email, phone: fullPhone, password, acceptedTerms });
+  };
+  const isFormValid = name && email && password.length >= 8 && acceptedTerms;
+  if (isSuccess) {
+    return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-signup", className), style, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-signup__background", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-signup__accent ds-signup__accent--1", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-signup__accent ds-signup__accent--2", "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-signup__card ds-signup__card--success", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-signup__success-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: "30", stroke: "var(--status-success)", strokeWidth: "2" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M20 32L28 40L44 24",
+              stroke: "var(--status-success)",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx("h1", { className: "ds-signup__success-title", children: l.successTitle === "Welcome!" ? brandName ? `Welcome to ${brandName}!` : "Welcome!" : l.successTitle }),
+        /* @__PURE__ */ jsx("p", { className: "ds-signup__success-message", children: successMessage }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", onClick: onLogin, className: "ds-signup__success-btn", children: l.continueToLoginLabel })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-signup", className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ds-signup__background", children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-signup__accent ds-signup__accent--1", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "ds-signup__accent ds-signup__accent--2", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-signup__card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-signup__header", children: [
+        logo ? /* @__PURE__ */ jsx("div", { className: "ds-signup__logo", children: logo }) : /* @__PURE__ */ jsx("div", { className: "ds-signup__logo ds-signup__logo--default", children: /* @__PURE__ */ jsx("div", { className: "ds-signup__logo-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx("rect", { width: "32", height: "32", rx: "8", fill: "url(#signup-logo-gradient)" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M16 8V24M8 16H24",
+              stroke: "white",
+              strokeWidth: "2.5",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "signup-logo-gradient", x1: "0", y1: "0", x2: "32", y2: "32", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--accent-rgb))" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "rgb(var(--accent2-rgb))" })
+          ] }) })
+        ] }) }) }),
+        /* @__PURE__ */ jsx("h1", { className: "ds-signup__title", children: l.formTitle })
+      ] }),
+      error && /* @__PURE__ */ jsxs("div", { className: "ds-signup__error", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M8 4.5V8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+              /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: error })
+      ] }),
+      showSocialSignup && /* @__PURE__ */ jsxs("div", { className: "ds-signup__social", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ds-signup__social-btn",
+            onClick: onGoogleSignup,
+            disabled: isLoading,
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "20", height: "20", children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#4285F4",
+                    d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#34A853",
+                    d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#FBBC05",
+                    d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fill: "#EA4335",
+                    d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("span", { children: l.googleButtonLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "ds-signup__divider", children: /* @__PURE__ */ jsx("span", { children: l.dividerText }) })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { className: "ds-signup__form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-signup__field", children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: l.nameLabel,
+            type: "text",
+            placeholder: l.namePlaceholder,
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            disabled: isLoading,
+            autoComplete: "name"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "ds-signup__field", children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: l.emailLabel,
+            type: "email",
+            placeholder: l.emailPlaceholder,
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            disabled: isLoading,
+            autoComplete: "email"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "ds-signup__field ds-signup__phone-field", children: /* @__PURE__ */ jsxs("div", { className: "ds-textfield", children: [
+          /* @__PURE__ */ jsx("label", { className: "ds-textfield__label", htmlFor: "phone-input", children: l.phoneLabel }),
+          /* @__PURE__ */ jsx("div", { className: "ds-textfield__input-wrapper", children: renderPhoneInput ? renderPhoneInput({
+            value: phone,
+            onChange: setPhone,
+            placeholder: l.phonePlaceholder,
+            disabled: isLoading,
+            className: "ds-signup__phone-container ds-textfield__input",
+            id: "phone-input"
+          }) : /* @__PURE__ */ jsxs("div", { className: clsx5("ds-signup__phone-container", "ds-textfield__input"), children: [
+            /* @__PURE__ */ jsxs("div", { className: "ds-signup__flag-select-wrapper", children: [
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  className: "ds-signup__flag-select-native",
+                  value: countryDial,
+                  onChange: (e) => {
+                    const newDial = e.target.value;
+                    setCountryDial(newDial);
+                    setPhone(newDial + " ");
+                  },
+                  disabled: isLoading,
+                  "aria-label": "Select country code",
+                  children: countries.map((c) => /* @__PURE__ */ jsx("option", { value: c.dial, children: c.name }, c.code))
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "ds-signup__flag-display", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-signup__flag-icon", children: countries.find((c) => c.dial === countryDial)?.flag || "\u{1F310}" }),
+                /* @__PURE__ */ jsx("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "phone-input",
+                type: "tel",
+                placeholder: l.phonePlaceholder,
+                value: phone,
+                onChange: (e) => setPhone(e.target.value),
+                disabled: isLoading,
+                className: "ds-signup__phone-input ds-signup__phone-input-native",
+                autoComplete: "tel"
+              }
+            )
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-signup__field", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds-signup__password-wrapper", children: [
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                label: l.passwordLabel,
+                type: showPassword ? "text" : "password",
+                placeholder: l.passwordPlaceholder,
+                value: password,
+                onChange: (e) => setPassword(e.target.value),
+                disabled: isLoading,
+                autoComplete: "new-password"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-signup__password-toggle",
+                onClick: () => setShowPassword(!showPassword),
+                "aria-label": showPassword ? l.hidePasswordLabel : l.showPasswordLabel,
+                children: showPassword ? /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+                      /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          password && /* @__PURE__ */ jsxs("div", { className: "ds-signup__strength", children: [
+            /* @__PURE__ */ jsx("div", { className: "ds-signup__strength-bar", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx5(
+                  "ds-signup__strength-segment",
+                  i < passwordStrength.score && "ds-signup__strength-segment--active"
+                ),
+                style: i < passwordStrength.score ? { backgroundColor: passwordStrength.color } : {}
+              },
+              i
+            )) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ds-signup__strength-label",
+                style: { color: passwordStrength.color },
+                children: passwordStrength.label
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-signup__terms", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              label: "",
+              checked: acceptedTerms,
+              onCheckedChange: (checked) => setAcceptedTerms(checked === true),
+              disabled: isLoading
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "ds-signup__terms-text", children: [
+            (l.termsAgreementPrefix || "").endsWith(" ") ? l.termsAgreementPrefix || "" : `${l.termsAgreementPrefix || ""} `,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-signup__link",
+                onClick: onTermsClick,
+                disabled: isLoading,
+                children: l.termsLabel
+              }
+            ),
+            (l.termsConjunction || " ").startsWith(" ") && (l.termsConjunction || " ").endsWith(" ") ? l.termsConjunction || " " : ` ${(l.termsConjunction || "").trim()} `,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-signup__link",
+                onClick: onPrivacyClick,
+                disabled: isLoading,
+                children: l.privacyLabel
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            variant: "primary",
+            size: "lg",
+            disabled: isLoading || !isFormValid,
+            className: "ds-signup__submit",
+            children: isLoading ? /* @__PURE__ */ jsx("span", { className: "ds-signup__spinner" }) : l.submitLabel
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-signup__footer", children: [
+        /* @__PURE__ */ jsx("span", { children: l.loginPrompt }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ds-signup__link ds-signup__link--accent",
+            onClick: onLogin,
+            disabled: isLoading,
+            children: l.loginLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+Signup.displayName = "Signup";
+var defaultForgotPasswordLabels = {
+  forgotPasswordTitle: "Forgot password?",
+  resetInstructionsTagline: "No worries, we'll send you reset instructions.",
+  emailLabel: "Email",
+  emailPlaceholder: "Enter your email",
+  resetPasswordButton: "Reset password",
+  backToLoginButton: "Back to login",
+  checkYourEmailTitle: "Check your email",
+  passwordResetLinkTagline: "We sent a password reset link to",
+  didNotReceiveEmailHint: "Didn't receive the email? ",
+  clickToResendButton: "Click to resend",
+  setNewPasswordTitle: "Set new password",
+  mustBeCharactersTagline: "Must be at least 8 characters.",
+  passwordLabel: "Password",
+  enterNewPasswordPlaceholder: "Enter new password",
+  confirmPasswordLabel: "Confirm password",
+  confirmNewPasswordPlaceholder: "Confirm new password",
+  passwordsDontMatchError: "Passwords don't match",
+  passwordResetTitle: "Password reset",
+  passwordSuccessfullyResetTagline: "Your password has been successfully reset.",
+  clickBelowLogInHint: "Click below to log in.",
+  continueToLoginButton: "Continue to login",
+  showPasswordLabel: "Show password",
+  hidePasswordLabel: "Hide password"
+};
+var ForgotPassword = ({
+  logo,
+  labels: customLabels,
+  onSubmit,
+  onResetPassword,
+  onBackToLogin,
+  isLoading = false,
+  error,
+  step = "email",
+  email: initialEmail = "",
+  className
+}) => {
+  const l = { ...defaultForgotPasswordLabels, ...customLabels };
+  const [email, setEmail] = useState(initialEmail);
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [resendTimer, setResendTimer] = useState(0);
+  const hasStartedTimer = React2.useRef(false);
+  useEffect(() => {
+    if (step === "sent" && !hasStartedTimer.current) {
+      hasStartedTimer.current = true;
+      setResendTimer(60);
+    } else if (step !== "sent") {
+      hasStartedTimer.current = false;
+    }
+  }, [step]);
+  useEffect(() => {
+    let timerId;
+    if (resendTimer > 0) {
+      timerId = setInterval(() => {
+        setResendTimer((prev) => prev - 1);
+      }, 1e3);
+    }
+    return () => {
+      if (timerId) clearInterval(timerId);
+    };
+  }, [resendTimer]);
+  const handleResendClick = () => {
+    if (resendTimer === 0) {
+      onSubmit?.(email || initialEmail);
+      setResendTimer(60);
+    }
+  };
+  const handleEmailSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.(email);
+  };
+  const handleResetSubmit = (e) => {
+    e.preventDefault();
+    onResetPassword?.({ password, confirmPassword });
+  };
+  const renderLogo = () => logo ? /* @__PURE__ */ jsx("div", { className: "ds-forgot__logo", children: logo }) : /* @__PURE__ */ jsx("div", { className: "ds-forgot__logo ds-forgot__logo--default", children: /* @__PURE__ */ jsx("div", { className: "ds-forgot__logo-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("rect", { width: "32", height: "32", rx: "8", fill: "url(#forgot-logo-gradient)" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M16 10V14M16 22V22.01M16 26C21.5228 26 26 21.5228 26 16C26 10.4772 21.5228 6 16 6C10.4772 6 6 10.4772 6 16C6 21.5228 10.4772 26 16 26Z",
+        stroke: "white",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "forgot-logo-gradient", x1: "0", y1: "0", x2: "32", y2: "32", children: [
+      /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--accent-rgb))" }),
+      /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "rgb(var(--accent2-rgb))" })
+    ] }) })
+  ] }) }) });
+  if (step === "email") {
+    return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-forgot", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-forgot__accent ds-forgot__accent--1", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "ds-forgot__accent ds-forgot__accent--2", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-forgot__card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds-forgot__header", children: [
+          renderLogo(),
+          /* @__PURE__ */ jsx("h1", { className: "ds-forgot__title", children: l.forgotPasswordTitle }),
+          /* @__PURE__ */ jsx("p", { className: "ds-forgot__tagline", children: l.resetInstructionsTagline })
+        ] }),
+        error && /* @__PURE__ */ jsxs("div", { className: "ds-forgot__error", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M8 4.5V8.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: error })
+        ] }),
+        /* @__PURE__ */ jsxs("form", { className: "ds-forgot__form", onSubmit: handleEmailSubmit, children: [
+          /* @__PURE__ */ jsx("div", { className: "ds-forgot__field", children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: l.emailLabel,
+              type: "email",
+              placeholder: l.emailPlaceholder,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              disabled: isLoading,
+              autoComplete: "email"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              variant: "primary",
+              size: "lg",
+              disabled: isLoading || !email,
+              className: "ds-forgot__submit",
+              children: isLoading ? /* @__PURE__ */ jsx("span", { className: "ds-forgot__spinner" }) : l.resetPasswordButton
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ds-forgot__footer", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ds-forgot__back",
+            onClick: onBackToLogin,
+            disabled: isLoading,
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4" })
+                }
+              ),
+              l.backToLoginButton
+            ]
+          }
+        ) })
+      ] })
+    ] });
+  }
+  if (step === "sent") {
+    return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-forgot", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-forgot__accent ds-forgot__accent--1", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "ds-forgot__accent ds-forgot__accent--2", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-forgot__card ds-forgot__card--centered", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-forgot__success-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: "30", stroke: "rgb(var(--accent-rgb))", strokeWidth: "2" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M20 32L44 32M44 32L36 24M44 32L36 40",
+              stroke: "rgb(var(--accent-rgb))",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx("h1", { className: "ds-forgot__title", children: l.checkYourEmailTitle }),
+        /* @__PURE__ */ jsxs("p", { className: "ds-forgot__tagline", children: [
+          l.passwordResetLinkTagline,
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsx("strong", { children: email || initialEmail })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-forgot__hint", children: [
+          /* @__PURE__ */ jsx("span", { children: l.didNotReceiveEmailHint }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ds-forgot__link",
+              onClick: handleResendClick,
+              disabled: isLoading || resendTimer > 0,
+              children: resendTimer > 0 ? `${l.clickToResendButton} ${resendTimer}s` : l.clickToResendButton
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ds-forgot__footer", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ds-forgot__back",
+            onClick: onBackToLogin,
+            disabled: isLoading,
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4" })
+                }
+              ),
+              l.backToLoginButton
+            ]
+          }
+        ) })
+      ] })
+    ] });
+  }
+  if (step === "reset") {
+    const passwordsMatch = password === confirmPassword;
+    const isValid = password.length >= 8 && passwordsMatch;
+    return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-forgot", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-forgot__accent ds-forgot__accent--1", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "ds-forgot__accent ds-forgot__accent--2", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-forgot__card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds-forgot__header", children: [
+          renderLogo(),
+          /* @__PURE__ */ jsx("h1", { className: "ds-forgot__title", children: l.setNewPasswordTitle }),
+          /* @__PURE__ */ jsx("p", { className: "ds-forgot__tagline", children: l.mustBeCharactersTagline })
+        ] }),
+        error && /* @__PURE__ */ jsxs("div", { className: "ds-forgot__error", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M8 4.5V8.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: error })
+        ] }),
+        /* @__PURE__ */ jsxs("form", { className: "ds-forgot__form", onSubmit: handleResetSubmit, children: [
+          /* @__PURE__ */ jsx("div", { className: "ds-forgot__field", children: /* @__PURE__ */ jsxs("div", { className: "ds-forgot__password-wrapper", children: [
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                label: l.passwordLabel,
+                type: showPassword ? "text" : "password",
+                placeholder: l.enterNewPasswordPlaceholder,
+                value: password,
+                onChange: (e) => setPassword(e.target.value),
+                disabled: isLoading,
+                autoComplete: "new-password"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-forgot__password-toggle",
+                onClick: () => setShowPassword(!showPassword),
+                "aria-label": showPassword ? l.hidePasswordLabel : l.showPasswordLabel,
+                children: showPassword ? /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+                      /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "ds-forgot__field", children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              label: l.confirmPasswordLabel,
+              type: showPassword ? "text" : "password",
+              placeholder: l.confirmNewPasswordPlaceholder,
+              value: confirmPassword,
+              onChange: (e) => setConfirmPassword(e.target.value),
+              disabled: isLoading,
+              autoComplete: "new-password",
+              error: confirmPassword.length > 0 && !passwordsMatch,
+              helperText: confirmPassword.length > 0 && !passwordsMatch ? l.passwordsDontMatchError : void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              variant: "primary",
+              size: "lg",
+              disabled: isLoading || !isValid,
+              className: "ds-forgot__submit",
+              children: isLoading ? /* @__PURE__ */ jsx("span", { className: "ds-forgot__spinner" }) : l.resetPasswordButton
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ds-forgot__footer", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ds-forgot__back",
+            onClick: onBackToLogin,
+            disabled: isLoading,
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4" })
+                }
+              ),
+              l.backToLoginButton
+            ]
+          }
+        ) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx5("ds-forgot", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-forgot__accent ds-forgot__accent--1", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("div", { className: "ds-forgot__accent ds-forgot__accent--2", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-forgot__card ds-forgot__card--centered", children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-forgot__success-icon ds-forgot__success-icon--check", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: "30", stroke: "var(--status-success)", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M20 32L28 40L44 24",
+            stroke: "var(--status-success)",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx("h1", { className: "ds-forgot__title", children: l.passwordResetTitle }),
+      /* @__PURE__ */ jsxs("p", { className: "ds-forgot__tagline", children: [
+        l.passwordSuccessfullyResetTagline,
+        /* @__PURE__ */ jsx("br", {}),
+        l.clickBelowLogInHint
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", onClick: onBackToLogin, className: "ds-forgot__submit", children: l.continueToLoginButton })
+    ] })
+  ] });
+};
+ForgotPassword.displayName = "ForgotPassword";
+var defaultLabels = {
+  changeEmailTitle: "Change Email",
+  changeEmailTagline: "Enter you new email and the current password.",
+  newEmailLabel: "New Email",
+  newEmailPlaceholder: "",
+  currentPasswordLabel: "Current Password",
+  currentPasswordPlaceholder: "",
+  forgotPasswordButton: "Forgot password?",
+  continueButton: "Continue",
+  backToLoginButton: "Back to login",
+  showPasswordLabel: "Show password",
+  hidePasswordLabel: "Hide password",
+  successTitle: "Email updated",
+  successTagline: "Your email address has been successfully changed.",
+  continueToLoginButton: "Continue to login"
+};
+var EyeOpen = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+] });
+var EyeOff = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+  /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+] });
+var ChangeEmail = ({
+  logo,
+  labels: customLabels,
+  onSubmit,
+  onForgotPassword,
+  onBackToLogin,
+  isLoading = false,
+  error,
+  step = "form",
+  className
+}) => {
+  const l = { ...defaultLabels, ...customLabels };
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const renderLogo = () => logo ? /* @__PURE__ */ jsx("div", { className: "ds-change-email__logo", children: logo }) : /* @__PURE__ */ jsx("div", { className: "ds-change-email__logo" });
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.({ email, password });
+  };
+  if (step === "success") {
+    return /* @__PURE__ */ jsx("div", { className: clsx5("ds-change-email", className), children: /* @__PURE__ */ jsxs("div", { className: "ds-change-email__container", children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-change-email__accent ds-change-email__accent--1", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "ds-change-email__accent ds-change-email__accent--2", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-change-email__card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds-change-email__header", children: [
+          renderLogo(),
+          /* @__PURE__ */ jsx("h1", { className: "ds-change-email__title", children: l.successTitle }),
+          /* @__PURE__ */ jsx("p", { className: "ds-change-email__tagline", children: l.successTagline })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", onClick: onBackToLogin, className: "ds-change-email__submit", children: l.continueToLoginButton })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: clsx5("ds-change-email", className), children: /* @__PURE__ */ jsxs("div", { className: "ds-change-email__container", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-change-email__accent ds-change-email__accent--1", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("div", { className: "ds-change-email__accent ds-change-email__accent--2", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-change-email__card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-change-email__header", children: [
+        renderLogo(),
+        /* @__PURE__ */ jsx("h1", { className: "ds-change-email__title", children: l.changeEmailTitle }),
+        /* @__PURE__ */ jsx("p", { className: "ds-change-email__tagline", children: l.changeEmailTagline })
+      ] }),
+      error && /* @__PURE__ */ jsxs("div", { className: "ds-change-email__error", children: [
+        /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsx("path", { d: "M8 4.5V8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: error })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { className: "ds-change-email__form", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-change-email__field", children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: l.newEmailLabel,
+            type: "email",
+            placeholder: l.newEmailPlaceholder,
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            disabled: isLoading,
+            autoComplete: "email"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "ds-change-email__field", children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: l.currentPasswordLabel,
+            type: showPassword ? "text" : "password",
+            placeholder: l.currentPasswordPlaceholder,
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            disabled: isLoading,
+            autoComplete: "current-password",
+            endAdornment: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-change-email__password-toggle",
+                onClick: () => setShowPassword(!showPassword),
+                "aria-label": showPassword ? l.hidePasswordLabel : l.showPasswordLabel,
+                children: showPassword ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(EyeOpen, {})
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-change-email__options",
+            style: { display: "flex", justifyContent: "flex-end", marginTop: -8 },
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ds-change-email__link",
+                onClick: onForgotPassword,
+                disabled: isLoading,
+                children: l.forgotPasswordButton
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            variant: "primary",
+            size: "lg",
+            disabled: isLoading || !email || !password,
+            className: "ds-change-email__submit",
+            children: isLoading ? /* @__PURE__ */ jsx("span", { className: "ds-change-email__spinner" }) : l.continueButton
+          }
+        ) })
+      ] })
+    ] })
+  ] }) });
+};
+ChangeEmail.displayName = "ChangeEmail";
+
+export { Button, ChangeEmail, Checkbox, ForgotPassword, Login, Signup, TextField };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-AI2YEYT4.js.map