@insforge/react 0.6.9 → 0.7.0

package/dist/atoms.cjs

@@ -1,15 +1,536 @@
 'use strict';
 
+var styled = require('@emotion/styled');
+var react = require('@emotion/react');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
-var react = require('react');
+var react$1 = require('react');
 require('@insforge/sdk');
-var react$1 = require('@insforge/shared/react');
+var react$2 = require('@insforge/shared/react');
+require('@emotion/cache');
 
-// src/components/atoms/AuthBranding.tsx
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+// src/components/atoms/styled.ts
+
+// src/styles/theme.ts
+var theme = {
+  colors: {
+    primary: "#000000",
+    primaryHover: "#1f1f1f",
+    text: "#000000",
+    textSecondary: "#828282",
+    textMuted: "#a3a3a3",
+    textGray: "#525252",
+    border: "#d4d4d4",
+    borderGray: "#e4e4e7",
+    borderHover: "#9ca3af",
+    borderFocus: "#000000",
+    bgWhite: "#ffffff",
+    bgLight: "#fafafa",
+    bgGray: "#f5f5f5",
+    bgHover: "#f9fafb",
+    error: "#dc2626",
+    errorBg: "#fee2e2",
+    successBg: "#d1fae5",
+    successDark: "#059669",
+    black: "#000000",
+    zinc900: "#09090b"
+  },
+  spacing: {
+    1: "0.25rem",
+    // 4px
+    2: "0.5rem",
+    // 8px
+    3: "0.75rem",
+    // 12px
+    4: "1rem",
+    // 16px
+    6: "1.5rem",
+    // 32px
+    10: "2.5rem"
+    // 40px
+  },
+  radius: {
+    // 2px
+    sm: "0.25rem",
+    // 4px
+    md: "0.375rem",
+    // 6px
+    lg: "0.5rem",
+    // 8px
+    xl: "0.75rem",
+    // 12px
+    full: "9999px"
+  },
+  fontSize: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 20px
+    "2xl": "1.5rem"
+    // 24px
+  },
+  lineHeight: {
+    // 16px
+    normal: "1.25rem",
+    // 20px
+    relaxed: "1.5rem",
+    // 24px
+    loose: "2rem"
+    // 32px
+  },
+  fontFamily: {
+    base: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif",
+    manrope: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif"
+  },
+  fontWeight: {
+    normal: 400,
+    medium: 500,
+    semibold: 600
+  },
+  shadow: {
+    md: "0 1px 2px 0 rgba(0, 0, 0, 0.1)",
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+  },
+  transition: {
+    fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+    base: "200ms cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  sizes: {
+    button: {
+      height: "2.5rem",
+      // 40px for submit
+      heightOAuth: "2.25rem"
+      // 36px for OAuth
+    },
+    // 32px
+    icon: "1.25rem",
+    // 20px
+    iconSm: "1.125rem",
+    // 18px
+    iconLg: "1.5rem",
+    // 24px
+    verifyCode: "3rem",
+    // 48px
+    verifyIcon: "4rem",
+    // 64px
+    verifyIconInner: "2rem"
+    // 32px
+  }
+};
+var keyframes = {
+  spin: `
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  `
+};
+
+// src/components/atoms/styled.ts
+var spinAnimation = react.keyframes`${keyframes.spin}`;
+var AuthContainerWrapper = styled__default.default.div`
+  width: 100%;
+  max-width: 400px;
+  border-radius: ${theme.radius.xl};
+  overflow: hidden;
+  box-shadow: ${theme.shadow.lg};
+`;
+var AuthCard = styled__default.default.div`
+  background-color: ${theme.colors.bgWhite};
+  padding: ${theme.spacing[6]};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: ${theme.spacing[6]};
+`;
+var AuthHeaderWrapper = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: ${theme.spacing[2]};
+`;
+var AuthHeaderTitle = styled__default.default.h1`
+  font-size: ${theme.fontSize["2xl"]};
+  font-weight: ${theme.fontWeight.semibold};
+  color: ${theme.colors.text};
+  line-height: ${theme.lineHeight.loose};
+  margin: 0;
+  font-family: ${theme.fontFamily.base};
+`;
+var AuthHeaderSubtitle = styled__default.default.p`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.colors.textSecondary};
+  line-height: ${theme.lineHeight.relaxed};
+  margin: 0;
+  font-family: ${theme.fontFamily.base};
+`;
+var FormFieldWrapper = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: ${theme.spacing[1]};
+`;
+var FormFieldLabel = styled__default.default.label`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.colors.text};
+  line-height: ${theme.lineHeight.relaxed};
+  font-family: ${theme.fontFamily.base};
+`;
+var FormFieldInput = styled__default.default.input`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing[2]};
+  align-self: stretch;
+  padding: ${theme.spacing[2]} ${theme.spacing[3]};
+  border-radius: ${theme.radius.sm};
+  border: 1px solid ${theme.colors.border};
+  background-color: ${theme.colors.bgWhite};
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  line-height: ${theme.lineHeight.normal};
+  color: ${theme.colors.text};
+  font-family: ${theme.fontFamily.base};
+  transition: border-color ${theme.transition.base};
+
+  &::placeholder {
+    color: ${theme.colors.textMuted};
+    font-size: ${theme.fontSize.sm};
+    font-weight: ${theme.fontWeight.normal};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.borderFocus};
+  }
+`;
+var PasswordFieldWrapper = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  gap: ${theme.spacing[1]};
+`;
+var PasswordFieldLabelRow = styled__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+var PasswordFieldLabel = styled__default.default.label`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.colors.text};
+  line-height: ${theme.lineHeight.relaxed};
+  font-family: ${theme.fontFamily.base};
+`;
+var PasswordFieldForgotLink = styled__default.default.a`
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  color: ${theme.colors.textSecondary};
+  text-decoration: none;
+  transition: color ${theme.transition.fast};
+  font-family: ${theme.fontFamily.base};
+  cursor: pointer;
+`;
+var PasswordFieldInputWrapper = styled__default.default.div`
+  position: relative;
+  width: 100%;
+`;
+var PasswordFieldInput = styled__default.default.input`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  padding: ${theme.spacing[2]} ${theme.spacing[3]};
+  padding-right: 2.5rem;
+  border-radius: ${theme.radius.sm};
+  border: 1px solid ${theme.colors.border};
+  background-color: ${theme.colors.bgWhite};
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.normal};
+  line-height: ${theme.lineHeight.normal};
+  color: ${theme.colors.text};
+  font-family: ${theme.fontFamily.base};
+  transition: border-color ${theme.transition.base};
+
+  &::placeholder {
+    color: ${theme.colors.textMuted};
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.borderFocus};
+  }
+`;
+var PasswordFieldToggleButton = styled__default.default.button`
+  position: absolute;
+  right: ${theme.spacing[1]};
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: ${theme.spacing[1]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${theme.colors.textSecondary};
+  transition: color ${theme.transition.fast};
+`;
+var SubmitButton = styled__default.default.button`
+  border-radius: ${theme.radius.sm};
+  background-color: ${theme.colors.primary};
+  height: ${theme.sizes.button.height};
+  width: 100%;
+  display: flex;
+  margin-top: ${theme.spacing[4]};
+  padding: ${theme.spacing[2]} ${theme.spacing[4]};
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+  align-self: stretch;
+  color: ${theme.colors.bgWhite};
+  font-weight: ${theme.fontWeight.semibold};
+  font-family: ${theme.fontFamily.manrope};
+  font-size: ${theme.fontSize.base};
+  line-height: normal;
+  border: none;
+  cursor: pointer;
+  transition: background-color ${theme.transition.base};
+
+  &:hover:not(:disabled) {
+    background-color: ${theme.colors.primaryHover};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var SubmitButtonIcon = styled__default.default.div`
+  width: ${theme.sizes.icon};
+  height: ${theme.sizes.icon};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var SubmitButtonSpinner = styled__default.default.div`
+  width: ${theme.sizes.icon};
+  height: ${theme.sizes.icon};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${spinAnimation} 1s linear infinite;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var OAuthButton = styled__default.default.button`
+  display: flex;
+  width: 100%;
+  height: ${theme.sizes.button.heightOAuth};
+  padding: ${(props) => props.$variant === "short" || props.$variant === "iconOnly" ? theme.spacing[2] : `${theme.spacing[2]} ${theme.spacing[3]}`};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: ${(props) => props.$variant === "iconOnly" ? "0" : props.$variant === "short" ? theme.spacing[2] : theme.spacing[3]};
+  border-radius: ${theme.radius.md};
+  border: 1px solid ${theme.colors.borderGray};
+  background-color: ${theme.colors.bgWhite};
+  box-shadow: ${theme.shadow.md};
+  color: ${theme.colors.zinc900};
+  text-align: center;
+  font-size: ${theme.fontSize.sm};
+  font-weight: ${theme.fontWeight.medium};
+  line-height: ${theme.lineHeight.normal};
+  cursor: pointer;
+  transition: all ${theme.transition.base};
+  font-family: ${theme.fontFamily.base};
+
+  &:hover:not(:disabled) {
+    background-color: ${theme.colors.bgHover};
+    border-color: ${theme.colors.borderHover};
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+`;
+var OAuthButtonIcon = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${theme.sizes.iconSm};
+  height: ${theme.sizes.iconSm};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var OAuthProvidersContainer = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[3]};
+  width: 100%;
+`;
+var AuthLinkWrapper = styled__default.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: ${theme.spacing[1]};
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textSecondary};
+  font-family: ${theme.fontFamily.base};
+`;
+var AuthLinkText = styled__default.default.span`
+  font-weight: ${theme.fontWeight.normal};
+`;
+var AuthLinkLink = styled__default.default.a`
+  font-weight: ${theme.fontWeight.semibold};
+  color: ${theme.colors.text};
+  text-decoration: none;
+  transition: opacity ${theme.transition.fast};
+  cursor: pointer;
+`;
+var AuthDividerWrapper = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  gap: ${theme.spacing[3]};
+`;
+var AuthDividerLine = styled__default.default.div`
+  flex: 1;
+  border-top: 1px solid ${theme.colors.border};
+`;
+var AuthDividerText = styled__default.default.span`
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textSecondary};
+  font-weight: ${theme.fontWeight.normal};
+  font-family: ${theme.fontFamily.manrope};
+`;
+var ErrorBannerWrapper = styled__default.default.div`
+  padding: ${theme.spacing[3]};
+  background-color: ${theme.colors.errorBg};
+  border-radius: ${theme.radius.md};
+  border: 1px solid ${theme.colors.error};
+`;
+var ErrorBannerContent = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing[2]};
+`;
+var ErrorBannerIcon = styled__default.default.div`
+  width: ${theme.sizes.iconLg};
+  height: ${theme.sizes.iconLg};
+  flex-shrink: 0;
+  color: ${theme.colors.error};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var ErrorBannerText = styled__default.default.p`
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.error};
+  font-weight: ${theme.fontWeight.normal};
+  font-family: ${theme.fontFamily.base};
+  margin: 0;
+`;
+var AuthBrandingWrapper = styled__default.default.div`
+  background-color: ${theme.colors.bgLight};
+  padding: ${theme.spacing[4]} ${theme.spacing[2]};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: ${theme.spacing[1]};
+`;
+var AuthBrandingText = styled__default.default.p`
+  font-size: ${theme.fontSize.xs};
+  font-weight: ${theme.fontWeight.medium};
+  color: ${theme.colors.text};
+  font-family: ${theme.fontFamily.manrope};
+  margin: 0;
+`;
+var VerificationCodeInputContainer = styled__default.default.div`
+  display: flex;
+  gap: ${theme.spacing[3]};
+  justify-content: center;
+`;
+var VerificationCodeInput = styled__default.default.input`
+  width: ${theme.sizes.verifyCode};
+  height: ${theme.sizes.verifyCode};
+  text-align: center;
+  font-size: ${theme.fontSize.base};
+  font-weight: ${theme.fontWeight.semibold};
+  border: 1px solid ${theme.colors.border};
+  border-radius: ${theme.radius.sm};
+  transition: border-color ${theme.transition.base};
+  font-family: ${theme.fontFamily.manrope};
+
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.borderFocus};
+  }
+`;
+var PasswordStrengthWrapper = styled__default.default.div`
+  margin-top: ${theme.spacing[2]};
+`;
+styled__default.default.div`
+  height: 100%;
+  transition:
+    width ${theme.transition.base},
+    background-color ${theme.transition.base};
+`;
+styled__default.default.span`
+  font-size: ${theme.fontSize.xs};
+  color: ${theme.colors.textSecondary};
+  font-family: ${theme.fontFamily.base};
+`;
+var PasswordStrengthRequirements = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[2]};
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textGray};
+  font-family: ${theme.fontFamily.base};
+`;
+var PasswordStrengthRequirement = styled__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing[2]};
+`;
 function AuthBranding() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-authBranding if-internal-ab4k9w", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-authBranding-text", children: "Secured by" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(AuthBrandingWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AuthBrandingText, { children: "Secured by" }),
     /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://insforge.dev", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
       {
@@ -78,35 +599,35 @@ function AuthBranding() {
   ] });
 }
 function AuthContainer({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-authContainer if-internal-a8f3d2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-authCard if-internal-b2k9x1", children }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(AuthContainerWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AuthCard, { children }),
     /* @__PURE__ */ jsxRuntime.jsx(AuthBranding, {})
   ] });
 }
 function AuthHeader({ title, subtitle }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-authHeader if-internal-h3m7w5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "if-authHeader-title if-internal-t4p1k9", children: title }),
-    subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-authHeader-subtitle if-internal-s7q2m3", children: subtitle })
+  return /* @__PURE__ */ jsxRuntime.jsxs(AuthHeaderWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AuthHeaderTitle, { children: title }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx(AuthHeaderSubtitle, { children: subtitle })
   ] });
 }
 function AuthErrorBanner({ error }) {
   if (!error) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-errorBanner if-internal-eb2m7k", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-errorBanner-content", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "if-errorBanner-icon" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-errorBanner-text", children: error })
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBannerWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(ErrorBannerContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ErrorBannerIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ErrorBannerText, { children: error })
   ] }) });
 }
 function AuthFormField({ label, id, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-formField if-internal-f9n6p2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "if-formField-label if-internal-l3k8m1", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { id, className: "if-formField-input if-internal-i2v8k4", ...props })
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormFieldWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FormFieldLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormFieldInput, { id, ...props })
   ] });
 }
-var NavigationContext = react.createContext(null);
+var NavigationContext = react$1.createContext(null);
 function useNavigationAdapter() {
-  const adapter = react.useContext(NavigationContext);
+  const adapter = react$1.useContext(NavigationContext);
   if (!adapter) {
     return {
       useSearchParams: () => new URLSearchParams(),
@@ -126,7 +647,7 @@ function AuthPasswordStrengthIndicator({
   config
 }) {
   const requirements = createRequirements(config);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-passwordStrength-requirement", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(PasswordStrengthWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(PasswordStrengthRequirements, { children: requirements.map((req) => /* @__PURE__ */ jsxRuntime.jsxs(PasswordStrengthRequirement, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -216,9 +737,9 @@ function AuthPasswordField({
 }) {
   const searchParams = useSearchParams();
   const { Link } = useNavigationAdapter();
-  const [showPassword, setShowPassword] = react.useState(false);
-  const [showStrength, setShowStrength] = react.useState(false);
-  const resolvedForgotPasswordHref = react.useMemo(
+  const [showPassword, setShowPassword] = react$1.useState(false);
+  const [showStrength, setShowStrength] = react$1.useState(false);
+  const resolvedForgotPasswordHref = react$1.useMemo(
     () => forgotPasswordLink ? resolveAuthUrl(forgotPasswordLink.href, searchParams) : void 0,
     [forgotPasswordLink, searchParams]
   );
@@ -228,29 +749,27 @@ function AuthPasswordField({
     }
     onFocus?.(e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-passwordField if-internal-p5w9m7", children: [
-    (label || forgotPasswordLink) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-passwordField-labelRow", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "if-passwordField-label", children: label }),
-      forgotPasswordLink && resolvedForgotPasswordHref && /* @__PURE__ */ jsxRuntime.jsx(Link, { href: resolvedForgotPasswordHref, className: "if-passwordField-forgotLink", children: forgotPasswordLink.text || "Forget Password?" })
+  return /* @__PURE__ */ jsxRuntime.jsxs(PasswordFieldWrapper, { children: [
+    (label || forgotPasswordLink) && /* @__PURE__ */ jsxRuntime.jsxs(PasswordFieldLabelRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PasswordFieldLabel, { htmlFor: id, children: label }),
+      forgotPasswordLink && resolvedForgotPasswordHref && /* @__PURE__ */ jsxRuntime.jsx(Link, { href: resolvedForgotPasswordHref, className: "", children: /* @__PURE__ */ jsxRuntime.jsx(PasswordFieldForgotLink, { as: "span", children: forgotPasswordLink.text || "Forget Password?" }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-passwordField-inputWrapper", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(PasswordFieldInputWrapper, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+        PasswordFieldInput,
         {
           id,
           type: showPassword ? "text" : "password",
-          className: "if-passwordField-input",
           value,
           onFocus: handleFocus,
           ...props
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        PasswordFieldToggleButton,
         {
           type: "button",
           onClick: () => setShowPassword(!showPassword),
-          className: "if-passwordField-toggleButton",
           "aria-label": showPassword ? "Hide password" : "Show password",
           children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
         }
@@ -267,36 +786,27 @@ function AuthSubmitButton({
   type = "submit",
   onClick
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type,
-      className: "if-submitButton if-internal-b8p3m4",
-      disabled: disabled || isLoading || confirmed,
-      onClick,
-      children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "if-submitButton-icon if-submitButton-spinner", size: 20 }),
-        confirmed && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "if-submitButton-icon", size: 20 }),
-        children
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(SubmitButton, { type, disabled: disabled || isLoading || confirmed, onClick, children: [
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx(SubmitButtonSpinner, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 20 }) }),
+    confirmed && /* @__PURE__ */ jsxRuntime.jsx(SubmitButtonIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { size: 20 }) }),
+    children
+  ] });
 }
 function AuthLink({ text, linkText, href }) {
   const searchParams = useSearchParams();
   const { Link } = useNavigationAdapter();
   const finalHref = resolveAuthUrl(href, searchParams);
-  return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "if-authLink if-internal-al5w9p", children: [
-    text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-authLink-text", children: text }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(AuthLinkWrapper, { children: [
+    text && /* @__PURE__ */ jsxRuntime.jsx(AuthLinkText, { children: text }),
     text && " ",
-    /* @__PURE__ */ jsxRuntime.jsx(Link, { href: finalHref, className: "if-authLink-link", children: linkText })
+    /* @__PURE__ */ jsxRuntime.jsx(Link, { href: finalHref, className: "", children: /* @__PURE__ */ jsxRuntime.jsx(AuthLinkLink, { as: "span", children: linkText }) })
   ] });
 }
 function AuthDivider({ text = "or" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-authDivider if-internal-ad7k3m", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-authDivider-line" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-authDivider-text", children: text }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-authDivider-line" })
+  return /* @__PURE__ */ jsxRuntime.jsxs(AuthDividerWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AuthDividerLine, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(AuthDividerText, { children: text }),
+    /* @__PURE__ */ jsxRuntime.jsx(AuthDividerLine, {})
   ] });
 }
 var OAUTH_PROVIDER_CONFIG = {
@@ -457,23 +967,17 @@ function AuthOAuthButton({
     }
     return "";
   };
-  const className = [
-    "if-oauthButton",
-    "if-internal-o4k7w2",
-    displayMode === "full" && "if-oauthButton-full",
-    displayMode === "short" && "if-oauthButton-short",
-    displayMode === "icon" && "if-oauthButton-icon-only"
-  ].filter(Boolean).join(" ");
+  const variant = displayMode === "icon" ? "iconOnly" : displayMode;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    OAuthButton,
     {
       type: "button",
       onClick: () => onClick(provider),
-      className,
+      $variant: variant,
       disabled: disabled || loading,
       style,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "if-oauthButton-icon if-submitButton-spinner", size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-oauthButton-icon", children: config.svg }),
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(SubmitButtonSpinner, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx(OAuthButtonIcon, { children: config.svg }),
         !loading && getButtonText() && /* @__PURE__ */ jsxRuntime.jsx("span", { children: getButtonText() })
       ]
     }
@@ -532,14 +1036,12 @@ function AuthOAuthProviders({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    OAuthProvidersContainer,
     {
-      className: "if-oauthProviders if-internal-op3m8k",
       style: {
         display: "grid",
         gridTemplateColumns: "repeat(6, 1fr)",
-        gap: "0.75rem",
-        width: "100%"
+        gap: "0.75rem"
       },
       children: providers.map((provider, index) => /* @__PURE__ */ jsxRuntime.jsx(
         AuthOAuthButton,
@@ -563,7 +1065,7 @@ function AuthVerificationCodeInput({
   disabled = false,
   onComplete
 }) {
-  const inputRefs = react.useRef([]);
+  const inputRefs = react$1.useRef([]);
   const handleChange = (index, digit) => {
     if (digit.length > 1) {
       return;
@@ -606,8 +1108,8 @@ function AuthVerificationCodeInput({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
+  return /* @__PURE__ */ jsxRuntime.jsx(VerificationCodeInputContainer, { children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    VerificationCodeInput,
     {
       ref: (el) => {
         inputRefs.current[index] = el;
@@ -620,14 +1122,13 @@ function AuthVerificationCodeInput({
       onKeyDown: (e) => handleKeyDown(index, e),
       onPaste: handlePaste,
       disabled,
-      className: "if-verificationCode-input",
       autoComplete: "one-time-code"
     },
     index
   )) });
 }
 function useInsforge() {
-  const context = react.useContext(react$1.InsforgeContext);
+  const context = react$1.useContext(react$2.InsforgeContext);
   if (!context) {
     return {
       user: void 0,
@@ -654,6 +1155,155 @@ function useInsforge() {
   }
   return context;
 }
+styled__default.default.form`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: ${theme.spacing[6]};
+`;
+var VerificationStepWrapper = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[6]};
+  align-items: stretch;
+`;
+var VerificationStepDescriptionContainer = styled__default.default.div`
+  width: 100%;
+  background-color: ${theme.colors.bgGray};
+  border-radius: ${theme.radius.lg};
+  padding: ${theme.spacing[3]} ${theme.spacing[3]} ${theme.spacing[6]} ${theme.spacing[3]};
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[3]};
+`;
+var VerificationStepDescriptionTitle = styled__default.default.h3`
+  color: ${theme.colors.black};
+  font-family: ${theme.fontFamily.base};
+  font-size: ${theme.fontSize.base};
+  font-style: normal;
+  font-weight: ${theme.fontWeight.semibold};
+  line-height: 24px;
+  margin: 0;
+`;
+var VerificationStepDescription = styled__default.default.p`
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textGray};
+  text-align: left;
+  font-family: ${theme.fontFamily.base};
+  margin: 0;
+`;
+var VerificationEmail = styled__default.default.span`
+  font-weight: ${theme.fontWeight.medium};
+  color: ${theme.colors.text};
+`;
+var VerificationStepCodeContainer = styled__default.default.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[10]};
+`;
+var VerificationStepCodeInputWrapper = styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${theme.spacing[6]};
+`;
+styled__default.default.p`
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.textSecondary};
+  text-align: center;
+  font-family: ${theme.fontFamily.base};
+  margin: 0;
+`;
+var VerificationStepResendContainer = styled__default.default.div`
+  width: 100%;
+  font-size: ${theme.fontSize.sm};
+  text-align: center;
+  color: ${theme.colors.textSecondary};
+  font-family: ${theme.fontFamily.base};
+`;
+var VerificationStepResendButton = styled__default.default.button`
+  color: ${theme.colors.text};
+  font-weight: ${theme.fontWeight.medium};
+  transition: all ${theme.transition.base};
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: ${theme.fontFamily.base};
+  font-size: ${theme.fontSize.sm};
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+styled__default.default.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: ${(props) => props.$stretch ? "stretch" : "center"};
+  justify-content: center;
+  gap: ${theme.spacing[6]};
+`;
+styled__default.default.div`
+  border-radius: ${theme.radius.full};
+  height: ${theme.sizes.verifyCode};
+  width: ${theme.sizes.verifyCode};
+  border-bottom: 2px solid ${theme.colors.primary};
+`;
+styled__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${theme.spacing[4]};
+`;
+styled__default.default.div`
+  width: ${theme.sizes.verifyIcon};
+  height: ${theme.sizes.verifyIcon};
+  border-radius: ${theme.radius.full};
+  background-color: ${theme.colors.successBg};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+styled__default.default.div`
+  width: ${theme.sizes.verifyIconInner};
+  height: ${theme.sizes.verifyIconInner};
+  color: ${theme.colors.successDark};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+styled__default.default.p`
+  text-align: center;
+  font-family: ${theme.fontFamily.base};
+  font-size: ${theme.fontSize.sm};
+  color: ${theme.colors.text};
+  margin: 0;
+`;
+styled__default.default.div`
+  display: none;
+`;
+styled__default.default.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+`;
 function AuthEmailVerificationStep({
   email,
   method,
@@ -661,14 +1311,14 @@ function AuthEmailVerificationStep({
   emailSent = false
 }) {
   const { sendVerificationEmail } = useInsforge();
-  const [resendDisabled, setResendDisabled] = react.useState(emailSent ? true : false);
-  const [resendCountdown, setResendCountdown] = react.useState(emailSent ? 60 : 0);
-  const [isSending, setIsSending] = react.useState(false);
-  const [verificationCode, setVerificationCode] = react.useState("");
-  const [isVerifying, setIsVerifying] = react.useState(false);
+  const [resendDisabled, setResendDisabled] = react$1.useState(emailSent ? true : false);
+  const [resendCountdown, setResendCountdown] = react$1.useState(emailSent ? 60 : 0);
+  const [isSending, setIsSending] = react$1.useState(false);
+  const [verificationCode, setVerificationCode] = react$1.useState("");
+  const [isVerifying, setIsVerifying] = react$1.useState(false);
   const isLinkMethod = method === "link";
   const displayDescription = isLinkMethod ? "We've sent an email to {email}. Please check your email to confirm your account before signing in. The confirmation link expires in 10 minutes." : "We've sent a verification code to your inbox at {email}. Enter it below to proceed.";
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     if (resendDisabled && resendCountdown > 0) {
       const timer = setInterval(() => {
         setResendCountdown((prev) => {
@@ -707,19 +1357,19 @@ function AuthEmailVerificationStep({
       setVerificationCode("");
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep", children: [
-    isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Verify Your Email" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepWrapper, { children: [
+    isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepDescriptionContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(VerificationStepDescriptionTitle, { children: "Verify Your Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(VerificationStepDescription, { children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         part,
-        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationLink-email", children: email })
+        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(VerificationEmail, { children: email })
       ] }, index)) })
     ] }),
-    !isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeContainer", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeInputWrapper", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-codeDescription", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+    !isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepCodeContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepCodeInputWrapper, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(VerificationStepDescription, { children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
           part,
-          index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationCode-email", children: email })
+          index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(VerificationEmail, { children: email })
         ] }, index)) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           AuthVerificationCodeInput,
@@ -743,17 +1393,16 @@ function AuthEmailVerificationStep({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepResendContainer, { children: [
       "Didn't receive the email?",
       " ",
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        VerificationStepResendButton,
         {
           onClick: () => {
             void handleResend();
           },
           disabled: resendDisabled || isSending,
-          className: "if-verificationStep-resendButton",
           children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
         }
       )
@@ -766,14 +1415,14 @@ function AuthResetPasswordVerificationStep({
   onVerifyCode,
   onResendEmail
 }) {
-  const [resendDisabled, setResendDisabled] = react.useState(true);
-  const [resendCountdown, setResendCountdown] = react.useState(60);
-  const [isSending, setIsSending] = react.useState(false);
-  const [verificationCode, setVerificationCode] = react.useState("");
-  const [isVerifying, setIsVerifying] = react.useState(false);
+  const [resendDisabled, setResendDisabled] = react$1.useState(true);
+  const [resendCountdown, setResendCountdown] = react$1.useState(60);
+  const [isSending, setIsSending] = react$1.useState(false);
+  const [verificationCode, setVerificationCode] = react$1.useState("");
+  const [isVerifying, setIsVerifying] = react$1.useState(false);
   const isLinkMethod = method === "link";
   const displayDescription = isLinkMethod ? "We have sent an email to {email}. Please check your email to reset your password. The link expires in 10 minutes." : "We've sent a reset password code to your inbox at {email}. Enter it below to proceed.";
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     if (resendCountdown > 0) {
       const timer = setInterval(() => {
         setResendCountdown((prev) => {
@@ -787,7 +1436,7 @@ function AuthResetPasswordVerificationStep({
       return () => clearInterval(timer);
     }
   }, [resendCountdown]);
-  const handleResend = react.useCallback(async () => {
+  const handleResend = react$1.useCallback(async () => {
     setResendDisabled(true);
     setResendCountdown(60);
     setIsSending(true);
@@ -812,16 +1461,16 @@ function AuthResetPasswordVerificationStep({
       setVerificationCode("");
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep", children: [
-    isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Check Your Email" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepWrapper, { children: [
+    isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepDescriptionContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(VerificationStepDescriptionTitle, { children: "Check Your Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(VerificationStepDescription, { children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         part,
-        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationLink-email", children: email })
+        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(VerificationEmail, { children: email })
       ] }, index)) })
     ] }),
-    !isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeContainer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+    !isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepCodeContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(VerificationStepCodeInputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
         AuthVerificationCodeInput,
         {
           value: verificationCode,
@@ -842,17 +1491,16 @@ function AuthResetPasswordVerificationStep({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-resendContainer", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VerificationStepResendContainer, { children: [
       "Didn't receive the email?",
       " ",
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        VerificationStepResendButton,
         {
           onClick: () => {
             void handleResend();
           },
           disabled: resendDisabled || isSending,
-          className: "if-verificationStep-resendButton",
           children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
         }
       )