@clerk/ui 0.1.9 → 0.1.10

package/dist/{chunk-GJNJVJGS.mjs → chunk-LLOUIL3Z.mjs}

@@ -1,66 +1,22 @@
-import { ExclamationOctagonSm, ExclamationTriangleSm, useAppearance, Alert, Icon } from './chunk-RVVUA25B.mjs';
-import { useClerk, useOptionsContext } from '@clerk/shared/react';
-import * as React2 from 'react';
-import React2__default, { forwardRef, useMemo, cloneElement } from 'react';
-import { fastDeepMergeAndReplace, titleize, normalizeDate } from '@clerk/shared';
-import { cx, cva } from 'cva';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContextAndHook, useClerk, useOptionsContext, useDeepEqualMemo } from '@clerk/shared/react';
+import * as Common from '@clerk/elements/common';
 import { OAUTH_PROVIDERS, WEB3_PROVIDERS } from '@clerk/types';
-import * as Common2 from '@clerk/elements/common';
-import { GlobalError as GlobalError$1 } from '@clerk/elements/common';
-import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { Slot } from '@radix-ui/react-slot';
-import { Command } from 'cmdk';
-import { DialogTrigger, Button as Button$1, Popover, Dialog, ToggleButton } from 'react-aria-components';
-
-// src/constants/localizations.ts
-var LOCALIZATION_NEEDED = {
-  formFieldAccessibleLabel__emailOrUsernameOrPhone: "Toggle between email or username, and phone.",
-  formFieldAccessibleLabel__phoneOrUsername: "Toggle between phone and username.",
-  developmentMode: "Development mode"
-};
-function useDisplayConfig() {
-  var _a;
-  const clerk = useClerk();
-  const displayConfig = (_a = clerk == null ? void 0 : clerk.__unstable__environment) == null ? void 0 : _a.displayConfig;
-  return displayConfig;
-}
+import { fastDeepMergeAndReplace, titleize, normalizeDate } from '@clerk/shared';
+import * as React5 from 'react';
+import { forwardRef } from 'react';
+import { cx as cx$1 } from 'cva';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// src/hooks/use-card.ts
-function useCard() {
-  const { options } = useAppearance().parsedAppearance;
-  const { applicationName, branded, logoImageUrl, homeUrl } = useDisplayConfig();
-  const logoProps = (options == null ? void 0 : options.logoVisibility) === "visible" ? {
-    href: (options == null ? void 0 : options.logoLinkUrl) || homeUrl,
-    src: (options == null ? void 0 : options.logoImageUrl) || logoImageUrl,
-    alt: applicationName
-  } : null;
-  const footerProps = {
-    branded,
-    helpPageUrl: options == null ? void 0 : options.helpPageUrl,
-    privacyPageUrl: options == null ? void 0 : options.privacyPageUrl,
-    termsPageUrl: options == null ? void 0 : options.termsPageUrl
-  };
-  return {
-    logoProps,
-    footerProps
-  };
-}
-function useEnvironment() {
+// src/contexts/AppearanceContext.tsx
+function useEnabledConnections() {
   const clerk = useClerk();
-  return clerk == null ? void 0 : clerk.__unstable__environment;
-}
-function useDevModeWarning() {
-  const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
-  const isDevelopment = isDevelopmentOrStaging();
-  const { options } = useAppearance().parsedAppearance;
-  const unsafeDisabled = (options == null ? void 0 : options.unsafe_disableDevelopmentModeWarnings) || false;
-  const developmentUiDisabled = isDevelopment && unsafeDisabled;
-  const showDevModeWarning = useMemo(
-    () => !developmentUiDisabled && displayConfig.showDevModeWarning,
-    [developmentUiDisabled, displayConfig]
-  );
-  return showDevModeWarning;
+  const { socialProviderStrategies, web3FirstFactors, authenticatableSocialStrategies } = (clerk == null ? void 0 : clerk.__unstable__environment).userSettings;
+  const enabledConnections = /* @__PURE__ */ new Set([
+    ...socialProviderStrategies,
+    ...web3FirstFactors,
+    ...authenticatableSocialStrategies
+  ]);
+  return [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].filter((provider) => enabledConnections.has(provider.strategy));
 }
 
 // ../localizations/dist/index.mjs
@@ -559,9 +515,22 @@ var enUS = {
       title: "Create your account"
     },
     restrictedAccess: {
-      title: "Restricted access",
-      subtitle: "Access to this app is limited, and an invitation is required to sign up.",
-      actionLink: "Back to sign in"
+      title: "Access restricted",
+      subtitle: "Sign ups are currently disabled. If you believe you should have access, please contact support.",
+      actionLink: "Sign in",
+      actionText: "Already have an account?",
+      blockButton__emailSupport: "Email support"
+    },
+    __experimental_legalConsent: {
+      continue: {
+        subtitle: "Please read and accept the terms to continue",
+        title: "Legal consent"
+      },
+      checkbox: {
+        label__termsOfServiceAndPrivacyPolicy: 'I agree to the {{ termsOfServiceLink || link("Terms of Service") }} and {{ privacyPolicyLink || link("Privacy Policy") }}',
+        label__onlyTermsOfService: 'I agree to the {{ termsOfServiceLink || link("Terms of Service") }}',
+        label__onlyPrivacyPolicy: 'I agree to the {{ privacyPolicyLink || link("Privacy Policy") }}'
+      }
     }
   },
   socialButtonsBlockButton: "Continue with {{provider|titleize}}",
@@ -1168,478 +1137,139 @@ function useLocalizations() {
   const { t, translateError } = makeLocalizeable(parsedLocalization || enUS);
   return { t, translateError, locale: (parsedLocalization == null ? void 0 : parsedLocalization.locale) || "en-US" };
 }
-var ClerkLogo = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    className: "cl-2a836795",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 50 14",
-    children: [
-      /* @__PURE__ */ jsx(
-        "ellipse",
-        {
-          cx: "7.889",
-          cy: "7",
-          rx: "2.187",
-          ry: "2.188",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M11.83 12.18a.415.415 0 0 1-.05.64A6.967 6.967 0 0 1 7.888 14a6.967 6.967 0 0 1-3.891-1.18.415.415 0 0 1-.051-.64l1.598-1.6a.473.473 0 0 1 .55-.074 3.92 3.92 0 0 0 1.794.431 3.92 3.92 0 0 0 1.792-.43.473.473 0 0 1 .551.074l1.599 1.598Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          opacity: "0.5",
-          d: "M11.78 1.18a.415.415 0 0 1 .05.64l-1.598 1.6a.473.473 0 0 1-.55.073 3.937 3.937 0 0 0-5.3 5.3.473.473 0 0 1-.074.55L2.71 10.942a.415.415 0 0 1-.641-.051 7 7 0 0 1 9.71-9.71Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M23.748 1.422c0-.06.05-.11.11-.11h1.64c.06 0 .11.05.11.11v11.156a.11.11 0 0 1-.11.11h-1.64a.11.11 0 0 1-.11-.11V1.422Zm-2.315 8.9a.112.112 0 0 0-.15.004 2.88 2.88 0 0 1-.884.569c-.36.148-.747.222-1.137.219-.33.01-.658-.047-.965-.166a2.422 2.422 0 0 1-.817-.527c-.424-.432-.668-1.05-.668-1.785 0-1.473.98-2.48 2.45-2.48.394-.005.785.074 1.144.234.325.144.617.35.86.607.04.044.11.049.155.01l1.108-.959a.107.107 0 0 0 .01-.152c-.832-.93-2.138-1.412-3.379-1.412-2.499 0-4.27 1.686-4.27 4.166 0 1.227.44 2.26 1.182 2.99.743.728 1.801 1.157 3.022 1.157 1.53 0 2.763-.587 3.485-1.34a.107.107 0 0 0-.009-.155l-1.137-.98Zm13.212-1.14a.108.108 0 0 1-.107.096H28.79a.106.106 0 0 0-.104.132c.286 1.06 1.138 1.701 2.302 1.701a2.59 2.59 0 0 0 1.136-.236 2.55 2.55 0 0 0 .862-.645.08.08 0 0 1 .112-.01l1.155 1.006c.044.039.05.105.013.15-.698.823-1.828 1.42-3.38 1.42-2.386 0-4.185-1.651-4.185-4.162 0-1.232.424-2.264 1.13-2.994.373-.375.82-.67 1.314-.87a3.968 3.968 0 0 1 1.557-.285c2.419 0 3.983 1.701 3.983 4.05a6.737 6.737 0 0 1-.04.647Zm-5.924-1.524a.104.104 0 0 0 .103.133h3.821c.07 0 .123-.066.103-.134-.26-.901-.921-1.503-1.947-1.503a2.13 2.13 0 0 0-.88.16 2.1 2.1 0 0 0-.733.507 2.242 2.242 0 0 0-.467.837Zm11.651-3.172c.061-.001.11.048.11.109v1.837a.11.11 0 0 1-.117.109 7.17 7.17 0 0 0-.455-.024c-1.43 0-2.27 1.007-2.27 2.329v3.732a.11.11 0 0 1-.11.11h-1.64a.11.11 0 0 1-.11-.11v-7.87c0-.06.049-.109.11-.109h1.64c.06 0 .11.05.11.11v1.104a.011.011 0 0 0 .02.007c.64-.857 1.587-1.333 2.587-1.333l.125-.001Zm4.444 4.81a.035.035 0 0 1 .056.006l2.075 3.334a.11.11 0 0 0 .093.052h1.865a.11.11 0 0 0 .093-.168L46.152 7.93a.11.11 0 0 1 .012-.131l2.742-3.026a.11.11 0 0 0-.081-.183h-1.946a.11.11 0 0 0-.08.036l-3.173 3.458a.11.11 0 0 1-.19-.074V1.422a.11.11 0 0 0-.11-.11h-1.64a.11.11 0 0 0-.11.11v11.156c0 .06.05.11.11.11h1.64a.11.11 0 0 0 .11-.11v-1.755a.11.11 0 0 1 .03-.075l1.35-1.452Z",
-          fill: "currentColor"
-        }
-      )
-    ]
-  }
-);
 
-// src/utils/validators.ts
-function isValidUrl(val) {
-  if (!val) {
-    return false;
-  }
-  try {
-    new URL(val);
-    return true;
-  } catch (e) {
-    return false;
-  }
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/utils/dva.ts
+var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+var defineConfig = (options) => {
+  const cx4 = (...inputs) => {
+    var _a, _b;
+    if (typeof ((_a = void 0 ) == null ? void 0 : _a["cx:done"]) !== "undefined") {
+      return void 0 ;
+    }
+    if (typeof ((_b = void 0 ) == null ? void 0 : _b.onComplete) !== "undefined") {
+      return void 0 ;
+    }
+    return clsx(inputs);
+  };
+  const dva2 = (config) => (props) => {
+    var _a;
+    if ((config == null ? void 0 : config.variants) == null) {
+      return cx4(config == null ? void 0 : config.base, props == null ? void 0 : props.descriptor);
+    }
+    const { variants, defaultVariants } = config;
+    const getVariantClassNames = Object.keys(variants).map((variant) => {
+      const variantProp = props == null ? void 0 : props[variant];
+      const defaultVariantProp = defaultVariants == null ? void 0 : defaultVariants[variant];
+      const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+      return variants[variant][variantKey];
+    });
+    const defaultsAndProps = {
+      ...defaultVariants,
+      // remove `undefined` props
+      ...props && Object.entries(props).reduce(
+        (acc, [key, value]) => typeof value === "undefined" ? acc : { ...acc, [key]: value },
+        {}
+      )
+    };
+    const getCompoundVariantClassNames = (_a = config == null ? void 0 : config.compoundVariants) == null ? void 0 : _a.reduce(
+      (acc, { descriptor, ...cvConfig }) => Object.entries(cvConfig).every(([cvKey, cvSelector]) => {
+        const selector = defaultsAndProps[cvKey];
+        return Array.isArray(cvSelector) ? cvSelector.includes(selector) : selector === cvSelector;
+      }) ? [...acc, descriptor] : acc,
+      []
+    );
+    return cx4(config == null ? void 0 : config.base, getVariantClassNames, getCompoundVariantClassNames, props == null ? void 0 : props.descriptor);
+  };
+  const compose2 = (...components) => (props) => {
+    const propsWithoutDescriptor = Object.fromEntries(
+      Object.entries(props || {}).filter(([key]) => !["descriptor"].includes(key))
+    );
+    return cx4(components.map((component) => component(propsWithoutDescriptor)), props == null ? void 0 : props.descriptor);
+  };
+  return {
+    compose: compose2,
+    dva: dva2,
+    cx: cx4
+  };
+};
+var { compose, dva, cx } = defineConfig();
+function getDescriptors(elements, descriptorList) {
+  const descriptors = descriptorList.split(" ");
+  return descriptors.map((d) => {
+    const value = elements[d];
+    if (!value) {
+      console.warn(`Clerk: unable to access style configuration for descriptor: ${d}`);
+    }
+    return value;
+  });
 }
-function isDataUri(val) {
-  if (!isValidUrl(val)) {
-    return false;
-  }
-  return new URL(val).protocol === "data:";
+function applyDescriptors(elements, descriptorList) {
+  const descriptors = getDescriptors(elements, descriptorList);
+  return mergeDescriptors(...descriptors);
 }
-var CLERK_IMAGE_URL_BASES = ["https://img.clerk.com/", "https://img.clerkstage.dev/", "https://img.lclclerk.com/"];
-var isClerkImage = (src) => {
-  return !!CLERK_IMAGE_URL_BASES.some((base) => src == null ? void 0 : src.includes(base));
-};
-
-// src/utils/images.ts
-var generateSrcSet = ({ src, width }) => {
-  if (!src) {
-    return "";
+var SIZE = 16;
+var layoutStyle = {
+  spinner: {
+    className: "cl-26207fa4"
   }
-  return generateSrc({ src, width });
 };
-var generateSrc = ({ src, width }) => {
-  if (!isValidUrl(src) || isDataUri(src)) {
-    return src;
-  }
-  const newSrc = new URL(src);
-  if (width) {
-    newSrc.searchParams.append("width", width == null ? void 0 : width.toString());
+var visualStyle = {
+  spinner: {
+    className: "cl-9feebad9"
   }
-  return newSrc.href;
 };
-var BASE_IMAGE_WIDTH = 80;
-var Image = React2.forwardRef(function Image2({
-  src,
-  size = BASE_IMAGE_WIDTH,
-  ...props
-}, forwardedRef) {
-  const shouldOptimize = isClerkImage(src);
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      ref: forwardedRef,
-      "data-image": "",
-      crossOrigin: "anonymous",
-      srcSet: shouldOptimize ? generateSrcSet({ src, width: size }) : void 0,
-      src: shouldOptimize ? generateSrc({ src, width: size * 2 }) : src,
-      alt: props.alt,
-      ...props
-    }
-  );
+var spinner = dva({
+  base: "spinner"
 });
-var RootDefaultElement = "div";
-var Root = React2.forwardRef(
-  function CardRoot({ as, banner, children, className, ...props }, forwardedRef) {
-    const Element = as || RootDefaultElement;
-    return /* @__PURE__ */ jsxs(
-      Element,
-      {
-        ref: forwardedRef,
-        "data-card-root": "",
-        ...props,
-        className: cx(
-          "cl-a6922c72",
-          "cl-5e44c334",
-          "cl-c4324dd6",
-          "cl-3fbacce1",
-          "cl-7ea85c83",
-          banner ? [
-            "cl-a52b4c3f",
-            "cl-5af1449f"
-          ] : "cl-bc4a783b",
-          className
-        ),
-        children: [
-          banner && /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-card-root-banner": "",
-              className: cx(
-                "cl-7817f2f2",
-                className
-              ),
-              children: /* @__PURE__ */ jsx(
-                "p",
+var Spinner = forwardRef(function Spinner2({
+  children,
+  descriptor
+}, ref) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      ...applyDescriptors(elements, spinner({ descriptor })),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "cl-32fb0905", children }),
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: [0, 0, SIZE, SIZE].join(" "),
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "cl-4f43603c",
+            style: {
+              ["--spinner-origin"]: Array.from({ length: 2 }).fill(`${16 / SIZE / 2}rem`).join(" ")
+            },
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "g",
                 {
-                  className: cx(
-                    "cl-03e68f06",
-                    className
-                  ),
-                  ...props,
-                  children: banner
-                }
-              )
-            }
-          ),
-          children && /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-card-root-inner": "",
-              className: cx("cl-9c68c093", className),
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-var Content = React2.forwardRef(function CardContent({ children, className, ...props }, forwardedRef) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: forwardedRef,
-      "data-card-content": "",
-      ...props,
-      className: cx(
-        "cl-85f9b607",
-        "cl-1c01a9d7",
-        className
-      ),
-      children
-    }
-  );
-});
-var Header = React2.forwardRef(function CardHeader({ children, className, ...props }, forwardedRef) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: forwardedRef,
-      "data-card-header": "",
-      ...props,
-      className: cx("cl-c757ad0c", className),
-      children
-    }
-  );
-});
-var Logo = React2.forwardRef(function CardLogo({
-  className,
-  href,
-  src,
-  ...props
-}, forwardedRef) {
-  if (!src) {
-    return null;
-  }
-  const img = /* @__PURE__ */ jsx(
-    Image,
-    {
-      ref: forwardedRef,
-      "data-card-logo": "",
-      src,
-      size: 200,
-      ...props,
-      className: cx("cl-deefc87a", className)
-    }
-  );
-  return /* @__PURE__ */ jsx("div", { className: "cl-4f5262b8", children: href ? /* @__PURE__ */ jsx(
-    "a",
-    {
-      href,
-      className: "cl-33c167b1",
-      children: img
-    }
-  ) : img });
-});
-var Title = React2.forwardRef(function CardTitle({ children, className, ...props }, forwardedRef) {
-  return /* @__PURE__ */ jsx(
-    "h2",
-    {
-      ref: forwardedRef,
-      "data-card-title": "",
-      ...props,
-      className: cx("cl-f29e36a7", className),
-      children
-    }
-  );
-});
-var Description = React2.forwardRef(
-  function CardDescription({ children, className, ...props }, forwardedRef) {
-    return /* @__PURE__ */ jsx(
-      "p",
-      {
-        ref: forwardedRef,
-        ...props,
-        className: cx("cl-5c413d88", className),
-        children
-      }
-    );
-  }
-);
-var Body = React2.forwardRef(function CardBody({ children, className, ...props }, forwardedRef) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: forwardedRef,
-      "data-card-body": "",
-      ...props,
-      className: cx("cl-5eebf917", className),
-      children
-    }
-  );
-});
-var Actions = React2.forwardRef(function CardActions({ children, className, ...props }, forwardedRef) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: forwardedRef,
-      "data-card-actions": "",
-      ...props,
-      className: cx(
-        "cl-cc1fa4d3",
-        // Note:
-        // Prevents underline interractions triggering outside of the link text
-        // https://linear.app/clerk/issue/SDKI-192/#comment-ebf943b0
-        "cl-04c8fa73",
-        className
-      ),
-      children
-    }
-  );
-});
-React2.forwardRef(function CardBanner({ children, className, ...props }, forwardedRef) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-card-banner": "",
-      className: cx("cl-b4e3cd77", className),
-      children: /* @__PURE__ */ jsx(
-        "p",
-        {
-          ref: forwardedRef,
-          className: cx("cl-fb5351c6", className),
-          ...props,
-          children
-        }
-      )
-    }
-  );
-});
-var Footer = React2.forwardRef(function CardFooter({
-  branded = true,
-  helpPageUrl,
-  privacyPageUrl,
-  termsPageUrl,
-  children,
-  className,
-  ...props
-}, forwardedRef) {
-  const hasPageLinks = helpPageUrl || privacyPageUrl || termsPageUrl;
-  const renderFooter = branded || hasPageLinks || children;
-  const renderSubFooter = branded || hasPageLinks;
-  const hasBrandingAndPageLinks = branded && hasPageLinks;
-  return renderFooter ? /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: forwardedRef,
-      "data-card-footer": "",
-      ...props,
-      className: cx("cl-0f2a693e", className),
-      children: [
-        children,
-        renderSubFooter ? /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cx("cl-10ec6412", hasBrandingAndPageLinks ? "cl-32c92bb1" : "cl-a503dd37"),
-            children: [
-              branded ? /* @__PURE__ */ jsxs(
-                "p",
-                {
-                  className: "cl-286d6459",
-                  children: [
-                    "Secured by",
-                    " ",
-                    /* @__PURE__ */ jsx(
-                      "a",
-                      {
-                        "aria-label": "Clerk logo",
-                        href: "https://www.clerk.com?utm_source=clerk&utm_medium=components",
-                        target: "_blank",
-                        rel: "noopener",
-                        className: "cl-e9dc1e80",
-                        children: /* @__PURE__ */ jsx(ClerkLogo, {})
-                      }
-                    )
-                  ]
-                }
-              ) : null,
-              hasPageLinks ? /* @__PURE__ */ jsxs("div", { className: "cl-c354e22d", children: [
-                helpPageUrl ? /* @__PURE__ */ jsx(FooterPageLink, { href: helpPageUrl, children: "Help" }) : null,
-                privacyPageUrl ? /* @__PURE__ */ jsx(FooterPageLink, { href: privacyPageUrl, children: "Privacy" }) : null,
-                termsPageUrl ? /* @__PURE__ */ jsx(FooterPageLink, { href: termsPageUrl, children: "Terms" }) : null
-              ] }) : null
-            ]
-          }
-        ) : null
-      ]
-    }
-  ) : null;
-});
-var FooterAction = React2.forwardRef(
-  function CardFooterAction({ children, className, ...props }, forwardedRef) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: forwardedRef,
-        "data-card-footer-action": "",
-        ...props,
-        className: cx("cl-9f2b45b5", className),
-        children
-      }
-    );
-  }
-);
-var FooterActionText = React2.forwardRef(
-  function CardFooterActionText({ children, className, ...props }, forwardedRef) {
-    return /* @__PURE__ */ jsx(
-      "p",
-      {
-        ref: forwardedRef,
-        "data-card-footer-action-text": "",
-        ...props,
-        className: cx("cl-8e9f71ce", className),
-        children
-      }
-    );
-  }
-);
-var footerActionButton = cva({
-  base: "cl-812d8d14"
-});
-var FooterActionButton = React2.forwardRef(
-  function CardFooterActionButton({ children, className, type = "button", ...props }, forwardedRef) {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref: forwardedRef,
-        "data-card-footer-action-button": "",
-        type,
-        className: footerActionButton({ className }),
-        ...props,
-        children
-      }
-    );
-  }
-);
-var FooterActionLink = React2.forwardRef(
-  function CardFooterActionLink({ children, className, ...props }, forwardedRef) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ref: forwardedRef,
-        "data-card-footer-action-link": "",
-        ...props,
-        className: footerActionButton({ className }),
-        children
-      }
-    );
-  }
-);
-var FooterPageLink = React2.forwardRef(
-  function CardFooterPageLink({ children, className, ...props }, forwardedRef) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ref: forwardedRef,
-        ...props,
-        target: "_blank",
-        rel: "noopener",
-        className: cx("cl-a53e0ec1", className),
-        children
-      }
-    );
-  }
-);
-function useEnabledConnections() {
-  const clerk = useClerk();
-  const { socialProviderStrategies, web3FirstFactors, authenticatableSocialStrategies } = (clerk == null ? void 0 : clerk.__unstable__environment).userSettings;
-  const enabledConnections = /* @__PURE__ */ new Set([
-    ...socialProviderStrategies,
-    ...web3FirstFactors,
-    ...authenticatableSocialStrategies
-  ]);
-  return [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].filter((provider) => enabledConnections.has(provider.strategy));
-}
-var SIZE = 16;
-var Spinner = forwardRef(function Spinner2({
-  children,
-  className
-}, ref) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref,
-      className: cx("cl-114ff405", className),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "cl-32fb0905", children }),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            viewBox: [0, 0, SIZE, SIZE].join(" "),
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            className: "cl-4f43603c",
-            style: {
-              ["--spinner-origin"]: Array.from({ length: 2 }).fill(`${16 / SIZE / 2}rem`).join(" ")
-            },
-            "aria-hidden": true,
-            children: [
-              /* @__PURE__ */ jsxs(
-                "g",
-                {
-                  className: cx(
-                    "cl-bfbc36b1",
-                    "cl-22c1b7ea",
-                    "cl-45bbc6bf",
-                    "cl-e5d7b81e",
-                    "cl-4bd15f3b"
+                  className: cx$1(
+                    "cl-bfbc36b1",
+                    "cl-22c1b7ea",
+                    "cl-45bbc6bf",
+                    "cl-e5d7b81e",
+                    "cl-4bd15f3b"
                   ),
                   fill: "currentColor",
                   opacity: 0.5,
@@ -1716,7 +1346,7 @@ var Spinner = forwardRef(function Spinner2({
               /* @__PURE__ */ jsx(
                 "circle",
                 {
-                  className: cx(
+                  className: cx$1(
                     "cl-4f43603c",
                     "cl-bfbc36b1",
                     "cl-22c1b7ea",
@@ -1742,46 +1372,91 @@ var Spinner = forwardRef(function Spinner2({
     }
   );
 });
-var button = cva({
-  base: [
-    "cl-16a914bc",
-    // 16px
-    "cl-da41fb98",
-    "cl-f5aee1d0",
-    "cl-c8dc0199",
-    "cl-ff9d26a5",
-    "cl-ce4a8aff",
-    "cl-b55f0528",
-    "cl-d9cf47b8",
-    "cl-b30fc560",
-    "cl-8a3782da"
-  ],
+var layoutStyle2 = {
+  button: {
+    className: [
+      "cl-16a914bc",
+      // 16px
+      "cl-da41fb98",
+      "cl-f5aee1d0",
+      "cl-c8dc0199",
+      "cl-ff9d26a5",
+      "cl-ce4a8aff",
+      "cl-8a3782da"
+    ].join(" ")
+  },
+  buttonIcon: {
+    className: "cl-27ead27a"
+  },
+  buttonSpinner: {
+    className: "cl-27ead27a"
+  }
+};
+var visualStyle2 = {
+  button: {
+    className: ["cl-b55f0528", "cl-d9cf47b8", "cl-b30fc560"].join(" ")
+  },
+  buttonPrimary: {
+    className: [
+      "cl-a98b2d0f",
+      "cl-e7b4a4f3",
+      "cl-93e9de3b",
+      "cl-cb1d8f85",
+      "cl-2b39a966",
+      "cl-5d812cb6"
+    ].join(" ")
+  },
+  buttonSecondary: {
+    className: [
+      "cl-947a937d",
+      "cl-2031c7be",
+      "cl-97c9b979",
+      "cl-aa729509"
+    ].join(" ")
+  },
+  buttonConnection: {
+    className: [
+      "cl-947a937d",
+      "cl-2031c7be",
+      "cl-97c9b979",
+      "cl-aa729509"
+    ].join(" ")
+  },
+  buttonPrimaryDefault: {
+    className: "cl-dd1ec9c5"
+  },
+  buttonSecondaryDefault: {
+    className: "cl-9b31bb43"
+  },
+  buttonConnectionDefault: {
+    className: "cl-9b31bb43"
+  },
+  buttonDisabled: {
+    className: "cl-d4e2e313"
+  },
+  buttonBusy: {
+    className: "cl-d6edf6f5"
+  },
+  buttonText: {
+    className: "cl-63a1f595"
+  },
+  buttonTextVisuallyHidden: {
+    className: "cl-32fb0905"
+  },
+  buttonIcon: {
+    className: "cl-2e5aed0f"
+  },
+  buttonSpinner: {
+    className: "cl-291bc932"
+  }
+};
+var button = dva({
+  base: "button",
   variants: {
     intent: {
-      primary: [
-        "cl-a98b2d0f",
-        "cl-e7b4a4f3",
-        "cl-93e9de3b",
-        "cl-cb1d8f85",
-        "cl-2b39a966",
-        "cl-5d812cb6"
-      ],
-      secondary: [
-        "cl-947a937d",
-        "cl-2031c7be",
-        "cl-97c9b979",
-        "cl-aa729509"
-      ],
-      // Note:
-      // This currently looks the same as `secondary`, but we've intentfully
-      // kept this as a separate variant for now, due to its nuances in `busy`
-      // behavior
-      connection: [
-        "cl-947a937d",
-        "cl-2031c7be",
-        "cl-97c9b979",
-        "cl-aa729509"
-      ]
+      primary: "buttonPrimary",
+      secondary: "buttonSecondary",
+      connection: "buttonConnection"
     },
     busy: {
       false: null,
@@ -1793,17 +1468,17 @@ var button = cva({
     }
   },
   compoundVariants: [
-    { busy: false, disabled: false, intent: "primary", className: "cl-dd1ec9c5" },
-    { busy: false, disabled: false, intent: "secondary", className: "cl-9b31bb43" },
-    { busy: false, disabled: false, intent: "connection", className: "cl-9b31bb43" },
-    { busy: false, disabled: true, className: "cl-d4e2e313" },
-    { busy: true, disabled: false, className: "cl-d6edf6f5" }
+    { busy: false, disabled: false, intent: "primary", descriptor: "buttonPrimaryDefault" },
+    { busy: false, disabled: false, intent: "secondary", descriptor: "buttonSecondaryDefault" },
+    { busy: false, disabled: false, intent: "connection", descriptor: "buttonConnectionDefault" },
+    { busy: false, disabled: true, descriptor: "buttonDisabled" },
+    { busy: true, disabled: false, descriptor: "buttonBusy" }
   ]
 });
-var Button = React2.forwardRef(function Button2({
+var Button = React5.forwardRef(function Button2({
   busy = false,
   children,
-  className,
+  descriptor,
   disabled = false,
   iconStart,
   iconEnd,
@@ -1812,38 +1487,86 @@ var Button = React2.forwardRef(function Button2({
   textVisuallyHidden,
   ...props
 }, forwardedRef) {
-  const spinner = /* @__PURE__ */ jsx(Spinner, { className: "cl-c5cd4d02", children: "Loading\u2026" });
+  const { elements } = useAppearance().parsedAppearance;
+  const spinner2 = /* @__PURE__ */ jsx(Spinner, { descriptor: "buttonSpinner", children: "Loading\u2026" });
   return /* @__PURE__ */ jsx(
     "button",
     {
-      "data-button": "",
       ref: forwardedRef,
-      className: button({ busy, disabled, intent, className }),
+      ...applyDescriptors(elements, button({ busy, disabled, intent, descriptor })),
       disabled: busy || disabled,
       type,
       ...props,
-      children: busy && intent === "primary" ? spinner : /* @__PURE__ */ jsxs(Fragment, { children: [
-        iconStart ? busy && intent === "connection" ? spinner : /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-button-icon": "",
-            className: "cl-6237331a",
-            children: iconStart
-          }
-        ) : null,
-        children ? /* @__PURE__ */ jsx("span", { className: cx("cl-63a1f595", textVisuallyHidden && "cl-32fb0905"), children }) : null,
-        iconEnd ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-button-icon": "",
-            className: "cl-6237331a",
-            children: iconEnd
-          }
-        ) : null
+      children: busy && intent === "primary" ? spinner2 : /* @__PURE__ */ jsxs(Fragment, { children: [
+        iconStart ? busy && intent === "connection" ? spinner2 : /* @__PURE__ */ jsx("span", { ...applyDescriptors(elements, "buttonIcon buttonIconStart"), children: iconStart }) : null,
+        children ? /* @__PURE__ */ jsx("span", { ...mergeDescriptors(elements.buttonText, !!textVisuallyHidden && elements.buttonTextVisuallyHidden), children }) : null,
+        iconEnd ? /* @__PURE__ */ jsx("span", { ...applyDescriptors(elements, "buttonIcon buttonIconEnd"), children: iconEnd }) : null
       ] })
     }
   );
 });
+var $bdb11010cef70236$var$idsUpdaterMap = /* @__PURE__ */ new Map();
+function $bdb11010cef70236$export$cd8c9cb68f842629(idA, idB) {
+  if (idA === idB) return idA;
+  let setIdA = $bdb11010cef70236$var$idsUpdaterMap.get(idA);
+  if (setIdA) {
+    setIdA(idB);
+    return idB;
+  }
+  let setIdB = $bdb11010cef70236$var$idsUpdaterMap.get(idB);
+  if (setIdB) {
+    setIdB(idA);
+    return idA;
+  }
+  return idB;
+}
+
+// ../../node_modules/@react-aria/utils/dist/chain.mjs
+function $ff5963eb1fccf552$export$e08e3b67e392101e(...callbacks) {
+  return (...args) => {
+    for (let callback of callbacks) if (typeof callback === "function") callback(...args);
+  };
+}
+
+// ../../node_modules/@react-aria/utils/dist/mergeProps.mjs
+function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
+  let result = {
+    ...args[0]
+  };
+  for (let i = 1; i < args.length; i++) {
+    let props = args[i];
+    for (let key in props) {
+      let a = result[key];
+      let b = props[key];
+      if (typeof a === "function" && typeof b === "function" && // This is a lot faster than a regex.
+      key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= /* 'A' */
+      65 && key.charCodeAt(2) <= /* 'Z' */
+      90) result[key] = ($ff5963eb1fccf552$export$e08e3b67e392101e)(a, b);
+      else if ((key === "className" || key === "UNSAFE_className") && typeof a === "string" && typeof b === "string") result[key] = (clsx_default)(a, b);
+      else if (key === "id" && a && b) result.id = ($bdb11010cef70236$export$cd8c9cb68f842629)(a, b);
+      else result[key] = b !== void 0 ? b : a;
+    }
+  }
+  return result;
+}
+
+// src/primitives/icons/icon.tsx
+var Icon = React5.forwardRef(
+  function Icon2(props, ref) {
+    const { children, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...restProps } = props;
+    return React5.cloneElement(children, {
+      ...$3ef42575df84b30b$export$9d1611c77c2fe928(children.props, restProps),
+      ref,
+      width: "1em",
+      height: "1em",
+      fill: "none",
+      focusable: "false",
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? ariaHidden || void 0 : true,
+      role: "img"
+    });
+  }
+);
 function Apple(props) {
   return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
     "path",
@@ -3130,10 +2853,20 @@ function getColumnCount({ length, max }) {
   const numRows = Math.ceil(length / max);
   return Math.ceil(length / numRows);
 }
+var layoutStyle3 = {
+  connectionList: {
+    className: "cl-519e344c"
+  },
+  connectionListItem: {
+    className: "cl-b9a44166"
+  }
+};
+var visualStyle3 = {};
 function Connections(props) {
   const { t } = useLocalizations();
   const enabledConnections = useEnabledConnections();
-  const { options } = useAppearance().parsedAppearance;
+  const { options, elements } = useAppearance().parsedAppearance;
+  const connectionListDescriptors = applyDescriptors(elements, "connectionList");
   const hasConnection = enabledConnections.length > 0;
   const textVisuallyHidden = typeof (props == null ? void 0 : props.textVisuallyHidden) !== "undefined" ? props.textVisuallyHidden : enabledConnections.length > 2 || (options == null ? void 0 : options.socialButtonsVariant) === "iconButton";
   const columns = getColumnCount({ length: enabledConnections.length, max: (props == null ? void 0 : props.columns) || 6 });
@@ -3141,22 +2874,23 @@ function Connections(props) {
   return hasConnection ? /* @__PURE__ */ jsx(
     "ul",
     {
-      className: "cl-519e344c",
-      style: { "--cl-connection-columns": columns },
+      className: connectionListDescriptors.className,
+      style: { ...connectionListDescriptors.style, "--cl-connection-columns": columns },
       children: enabledConnections.map((c) => {
         return /* @__PURE__ */ jsx(
           "li",
           {
-            className: "cl-b9a44166",
-            children: /* @__PURE__ */ jsx(Common2.Loading, { scope: `provider:${c.provider}`, children: (isConnectionLoading) => {
+            ...applyDescriptors(elements, "connectionListItem"),
+            children: /* @__PURE__ */ jsx(Common.Loading, { scope: `provider:${c.provider}`, children: (isConnectionLoading) => {
               return /* @__PURE__ */ jsx(
-                Common2.Connection,
+                Common.Connection,
                 {
                   name: c.provider,
                   asChild: true,
                   children: /* @__PURE__ */ jsx(
                     Button,
                     {
+                      descriptor: `buttonConnection__${c.provider}`,
                       intent: "connection",
                       busy: isConnectionLoading,
                       disabled: (props == null ? void 0 : props.disabled) || isConnectionLoading,
@@ -3177,109 +2911,22 @@ function Connections(props) {
     }
   ) : null;
 }
-function GlobalError() {
-  const { translateError } = useLocalizations();
-  return /* @__PURE__ */ jsx(GlobalError$1, { children: ({ message, code }) => {
-    return /* @__PURE__ */ jsx(Alert, { children: translateError({ message, code }) });
-  } });
-}
-var link = cva({
-  base: "cl-dc2a2420",
-  variants: {
-    busy: {
-      false: null,
-      true: "cl-5efab14d"
-    },
-    disabled: {
-      false: null,
-      true: "cl-d4e2e313"
-    },
-    // Override native behaviour for third-party packages
-    // e.g. react-aria-components
-    focusVisible: {
-      native: "cl-b13d8727",
-      "data-attribute": "cl-e6143e08"
-    },
-    size: {
-      sm: "cl-c74ab393",
-      base: "cl-757071a1"
-    }
-  },
-  compoundVariants: [
-    {
-      busy: false,
-      disabled: false,
-      className: "cl-b5672060"
-    }
-  ],
-  defaultVariants: {
-    busy: false,
-    disabled: false,
-    focusVisible: "native",
-    size: "base"
-  }
-});
-var LinkButton = React2.forwardRef(function LinkButton2({
-  busy,
-  children,
-  className,
-  disabled,
-  size,
-  ...props
-}, forwardedRef) {
-  return (
-    // eslint-disable-next-line react/button-has-type
+function ExclamationOctagonSm(props) {
+  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
     /* @__PURE__ */ jsx(
-      "button",
+      "path",
       {
-        ref: forwardedRef,
-        "data-link": true,
-        className: link({ busy, disabled, size, className }),
-        disabled: busy || disabled,
-        ...props,
-        children
+        d: "M8 5.75V7.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
       }
-    )
-  );
-});
-function CaretRightLegacySm(props) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 16 16",
-      className: "cl-36b12e83",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M10 8.25L6.5 6V10.5L10 8.25Z",
-          fill: "currentColor",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  ) });
-}
-var Animated = (props) => {
-  const { children, asChild } = props;
-  const { animations } = useAppearance().parsedAppearance.options;
-  const [parent] = useAutoAnimate();
-  const ref = animations !== false ? parent : null;
-  if (asChild) {
-    return cloneElement(children, { ref });
-  }
-  return /* @__PURE__ */ jsx("div", { ref, children });
-};
-function CheckmarkCircleSm(props) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
+    ),
     /* @__PURE__ */ jsx(
-      "circle",
+      "path",
       {
-        cx: "8",
-        cy: "8",
-        r: "5.25",
+        d: "M8 10V10.01",
         stroke: "currentColor",
         strokeWidth: "1.5",
         strokeLinecap: "round",
@@ -3289,7 +2936,7 @@ function CheckmarkCircleSm(props) {
     /* @__PURE__ */ jsx(
       "path",
       {
-        d: "M6.25 8.35L7.65 9.75L9.75 6.25",
+        d: "M10.25 2.75H5.75L2.75 5.75V10.25L5.75 13.25H10.25L13.25 10.25V5.75L10.25 2.75Z",
         stroke: "currentColor",
         strokeWidth: "1.5",
         strokeLinecap: "round",
@@ -3298,14 +2945,12 @@ function CheckmarkCircleSm(props) {
     )
   ] }) });
 }
-function InformationCircleSm(props) {
+function ExclamationTriangleSm(props) {
   return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
     /* @__PURE__ */ jsx(
-      "circle",
+      "path",
       {
-        cx: "8",
-        cy: "8",
-        r: "5.25",
+        d: "M8 6.75V8.25",
         stroke: "currentColor",
         strokeWidth: "1.5",
         strokeLinecap: "round",
@@ -3315,7 +2960,7 @@ function InformationCircleSm(props) {
     /* @__PURE__ */ jsx(
       "path",
       {
-        d: "M8 8.75V10.25",
+        d: "M8 10.5V10.51",
         stroke: "currentColor",
         strokeWidth: "1.5",
         strokeLinecap: "round",
@@ -3325,7 +2970,7 @@ function InformationCircleSm(props) {
     /* @__PURE__ */ jsx(
       "path",
       {
-        d: "M8 6.25024V6.26024",
+        d: "M2.95652 10.4518L6.27146 3.8188C6.98366 2.39373 9.01635 2.39373 9.72855 3.81881L13.0435 10.4518C13.686 11.7374 12.7516 13.25 11.3149 13.25H4.68506C3.24842 13.25 2.31404 11.7374 2.95652 10.4518Z",
         stroke: "currentColor",
         strokeWidth: "1.5",
         strokeLinecap: "round",
@@ -3334,1565 +2979,824 @@ function InformationCircleSm(props) {
     )
   ] }) });
 }
-var Root2 = React2.forwardRef(function FieldRoot({ children, className, ...props }, forwardedRef) {
-  return /* @__PURE__ */ jsx(
+var layoutStyle4 = {
+  alert: {
+    className: "cl-fbddaa7d"
+  },
+  alertIcon: {
+    className: "cl-af4e251c"
+  }
+};
+var visualStyle4 = {
+  alert: {
+    className: "cl-15c02a47"
+  },
+  alert__warning: {
+    className: "cl-a992fcfc"
+  },
+  alert__error: {
+    className: "cl-66ef3405"
+  }
+};
+var Alert = React5.forwardRef(function Alert2({ children, descriptors, intent = "error", ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-field-root": "",
       ref: forwardedRef,
       ...props,
-      className: cx(
-        "cl-dcb655e4",
-        "cl-03811a40",
-        "cl-81d1ec5b",
-        "cl-3a46e0d4",
-        "cl-4636b1d3",
-        "cl-3da4a9c6",
-        "cl-7c5144aa",
-        className
+      ...mergeDescriptors(
+        elements.alert,
+        intent === "error" && elements.alert__error,
+        intent === "warning" && elements.alert__warning,
+        ...descriptors != null ? descriptors : []
       ),
-      children
+      children: [
+        {
+          error: /* @__PURE__ */ jsx(ExclamationOctagonSm, { ...mergeDescriptors(elements.alertIcon) }),
+          warning: /* @__PURE__ */ jsx(ExclamationTriangleSm, { ...mergeDescriptors(elements.alertIcon) })
+        }[intent],
+        children
+      ]
     }
   );
 });
-var Label = React2.forwardRef(function FieldLabel({
-  className,
-  children,
-  visuallyHidden,
+var ClerkLogo = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "cl-2a836795",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 50 14",
+    children: [
+      /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx: "7.889",
+          cy: "7",
+          rx: "2.187",
+          ry: "2.188",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M11.83 12.18a.415.415 0 0 1-.05.64A6.967 6.967 0 0 1 7.888 14a6.967 6.967 0 0 1-3.891-1.18.415.415 0 0 1-.051-.64l1.598-1.6a.473.473 0 0 1 .55-.074 3.92 3.92 0 0 0 1.794.431 3.92 3.92 0 0 0 1.792-.43.473.473 0 0 1 .551.074l1.599 1.598Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          opacity: "0.5",
+          d: "M11.78 1.18a.415.415 0 0 1 .05.64l-1.598 1.6a.473.473 0 0 1-.55.073 3.937 3.937 0 0 0-5.3 5.3.473.473 0 0 1-.074.55L2.71 10.942a.415.415 0 0 1-.641-.051 7 7 0 0 1 9.71-9.71Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M23.748 1.422c0-.06.05-.11.11-.11h1.64c.06 0 .11.05.11.11v11.156a.11.11 0 0 1-.11.11h-1.64a.11.11 0 0 1-.11-.11V1.422Zm-2.315 8.9a.112.112 0 0 0-.15.004 2.88 2.88 0 0 1-.884.569c-.36.148-.747.222-1.137.219-.33.01-.658-.047-.965-.166a2.422 2.422 0 0 1-.817-.527c-.424-.432-.668-1.05-.668-1.785 0-1.473.98-2.48 2.45-2.48.394-.005.785.074 1.144.234.325.144.617.35.86.607.04.044.11.049.155.01l1.108-.959a.107.107 0 0 0 .01-.152c-.832-.93-2.138-1.412-3.379-1.412-2.499 0-4.27 1.686-4.27 4.166 0 1.227.44 2.26 1.182 2.99.743.728 1.801 1.157 3.022 1.157 1.53 0 2.763-.587 3.485-1.34a.107.107 0 0 0-.009-.155l-1.137-.98Zm13.212-1.14a.108.108 0 0 1-.107.096H28.79a.106.106 0 0 0-.104.132c.286 1.06 1.138 1.701 2.302 1.701a2.59 2.59 0 0 0 1.136-.236 2.55 2.55 0 0 0 .862-.645.08.08 0 0 1 .112-.01l1.155 1.006c.044.039.05.105.013.15-.698.823-1.828 1.42-3.38 1.42-2.386 0-4.185-1.651-4.185-4.162 0-1.232.424-2.264 1.13-2.994.373-.375.82-.67 1.314-.87a3.968 3.968 0 0 1 1.557-.285c2.419 0 3.983 1.701 3.983 4.05a6.737 6.737 0 0 1-.04.647Zm-5.924-1.524a.104.104 0 0 0 .103.133h3.821c.07 0 .123-.066.103-.134-.26-.901-.921-1.503-1.947-1.503a2.13 2.13 0 0 0-.88.16 2.1 2.1 0 0 0-.733.507 2.242 2.242 0 0 0-.467.837Zm11.651-3.172c.061-.001.11.048.11.109v1.837a.11.11 0 0 1-.117.109 7.17 7.17 0 0 0-.455-.024c-1.43 0-2.27 1.007-2.27 2.329v3.732a.11.11 0 0 1-.11.11h-1.64a.11.11 0 0 1-.11-.11v-7.87c0-.06.049-.109.11-.109h1.64c.06 0 .11.05.11.11v1.104a.011.011 0 0 0 .02.007c.64-.857 1.587-1.333 2.587-1.333l.125-.001Zm4.444 4.81a.035.035 0 0 1 .056.006l2.075 3.334a.11.11 0 0 0 .093.052h1.865a.11.11 0 0 0 .093-.168L46.152 7.93a.11.11 0 0 1 .012-.131l2.742-3.026a.11.11 0 0 0-.081-.183h-1.946a.11.11 0 0 0-.08.036l-3.173 3.458a.11.11 0 0 1-.19-.074V1.422a.11.11 0 0 0-.11-.11h-1.64a.11.11 0 0 0-.11.11v11.156c0 .06.05.11.11.11h1.64a.11.11 0 0 0 .11-.11v-1.755a.11.11 0 0 1 .03-.075l1.35-1.452Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+
+// src/utils/validators.ts
+function isValidUrl(val) {
+  if (!val) {
+    return false;
+  }
+  try {
+    new URL(val);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function isDataUri(val) {
+  if (!isValidUrl(val)) {
+    return false;
+  }
+  return new URL(val).protocol === "data:";
+}
+var CLERK_IMAGE_URL_BASES = ["https://img.clerk.com/", "https://img.clerkstage.dev/", "https://img.lclclerk.com/"];
+var isClerkImage = (src) => {
+  return !!CLERK_IMAGE_URL_BASES.some((base) => src == null ? void 0 : src.includes(base));
+};
+
+// src/utils/images.ts
+var generateSrcSet = ({ src, width }) => {
+  if (!src) {
+    return "";
+  }
+  return generateSrc({ src, width });
+};
+var generateSrc = ({ src, width }) => {
+  if (!isValidUrl(src) || isDataUri(src)) {
+    return src;
+  }
+  const newSrc = new URL(src);
+  if (width) {
+    newSrc.searchParams.append("width", width == null ? void 0 : width.toString());
+  }
+  return newSrc.href;
+};
+var BASE_IMAGE_WIDTH = 80;
+var Image = React5.forwardRef(function Image2({
+  src,
+  size = BASE_IMAGE_WIDTH,
   ...props
 }, forwardedRef) {
+  const shouldOptimize = isClerkImage(src);
   return /* @__PURE__ */ jsx(
-    "label",
+    "img",
     {
-      "data-field-label": "",
       ref: forwardedRef,
-      ...props,
-      className: cx(
-        visuallyHidden ? "cl-32fb0905" : [
-          "cl-e0435440",
-          "cl-b830f807"
-        ],
-        className
-      ),
-      children
+      "data-image": "",
+      crossOrigin: "anonymous",
+      srcSet: shouldOptimize ? generateSrcSet({ src, width: size }) : void 0,
+      src: shouldOptimize ? generateSrc({ src, width: size * 2 }) : src,
+      alt: props.alt,
+      ...props
     }
   );
 });
-var LabelEnd = React2.forwardRef(function FieldLabelEnd({ className, children, ...props }, forwardedRef) {
+var RootDefaultElement = "div";
+var cardRootLayoutStyle = {
+  cardRoot: {
+    className: [
+      "cl-a6922c72",
+      "cl-5e44c334",
+      "cl-c4324dd6",
+      "cl-3fbacce1",
+      "cl-89a8e890"
+    ].join(" ")
+  }
+};
+var cardRootVisualStyle = {
+  cardRoot: {
+    className: "cl-86f06b43"
+  },
+  cardRootDefault: {
+    className: "cl-bc4a783b"
+  },
+  cardRootInner: {
+    className: "cl-9c68c093"
+  }
+};
+var Root = React5.forwardRef(
+  function CardRoot({ as, banner, children, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    const Element = as || RootDefaultElement;
+    const cardRootDescriptors = applyDescriptors(elements, "cardRoot");
+    const cardRootDefaultDescriptors = applyDescriptors(elements, "cardRootDefault");
+    return /* @__PURE__ */ jsxs(
+      Element,
+      {
+        ref: forwardedRef,
+        ...props,
+        className: cx$1(
+          cardRootDescriptors.className,
+          banner ? [
+            "cl-a52b4c3f",
+            "cl-5af1449f"
+          ] : cardRootDefaultDescriptors.className
+        ),
+        children: [
+          banner && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cx$1(
+                "cl-7817f2f2"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cx$1(
+                    "cl-03e68f06"
+                  ),
+                  ...props,
+                  children: banner
+                }
+              )
+            }
+          ),
+          children && /* @__PURE__ */ jsx("div", { ...mergeDescriptors(elements.cardRootInner), children })
+        ]
+      }
+    );
+  }
+);
+var cardContentLayoutStyle = {
+  cardContent: {
+    className: "cl-8baa595e"
+  }
+};
+var cardContentVisualStyle = {
+  cardContent: {
+    className: [
+      "cl-c99cd8b4",
+      "cl-1c01a9d7"
+    ].join(" ")
+  }
+};
+var Content = React5.forwardRef(function CardContent({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
   return /* @__PURE__ */ jsx(
-    "span",
+    "div",
     {
-      "data-field-label-end": "",
       ref: forwardedRef,
       ...props,
-      className: cx("cl-43770a6e", className),
+      ...mergeDescriptors(elements.cardContent),
       children
     }
   );
 });
-var Hint = React2.forwardRef(function FieldHint({ className, children, ...props }, forwardedRef) {
+var cardHeaderLayoutStyle = {
+  cardHeader: {
+    className: "cl-c757ad0c"
+  }
+};
+var cardHeaderVisualStyle = {};
+var Header = React5.forwardRef(function CardHeader({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
   return /* @__PURE__ */ jsx(
-    LabelEnd,
+    "div",
     {
-      "data-field-hint": "",
       ref: forwardedRef,
       ...props,
-      className: cx("cl-275d380b", className),
+      ...mergeDescriptors(elements.cardHeader),
       children
     }
   );
 });
-var Checkbox = React2.forwardRef(function FieldCheckbox(props, forwardedRef) {
-  return /* @__PURE__ */ jsx(
-    "input",
+var cardLogoLayoutStyle = {
+  cardLogoBox: {
+    className: "cl-4f5262b8"
+  },
+  cardLogoLink: {
+    className: "cl-33c167b1"
+  },
+  cardLogoImage: {
+    className: "cl-deefc87a"
+  }
+};
+var cardLogoVisualStyle = {};
+var Logo = React5.forwardRef(function CardLogo({
+  href,
+  src,
+  ...props
+}, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  if (!src) {
+    return null;
+  }
+  const img = /* @__PURE__ */ jsx(
+    Image,
     {
-      "data-field-checkbox": "",
       ref: forwardedRef,
-      type: "checkbox",
-      className: cx("cl-833ca99c"),
-      ...props
+      src,
+      size: 200,
+      ...props,
+      ...mergeDescriptors(elements.cardLogoImage)
     }
   );
+  return /* @__PURE__ */ jsx("div", { ...mergeDescriptors(elements.cardLogoBox), children: href ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      ...mergeDescriptors(elements.cardLogoLink),
+      children: img
+    }
+  ) : img });
 });
-var InputGroup = React2.forwardRef(function FieldInputGroup({ className, ...props }, ref) {
+var cardTitleLayoutStyle = {};
+var cardTitleVisualStyle = {
+  cardTitle: {
+    className: "cl-f29e36a7"
+  }
+};
+var Title = React5.forwardRef(function CardTitle({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
   return /* @__PURE__ */ jsx(
-    "div",
+    "h2",
     {
-      "data-field-input-group": "",
-      ref,
-      className: cx(
-        "cl-ddaf1b10",
-        "cl-d2d9e1f1",
-        className
-      ),
-      ...props
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.cardTitle),
+      children
     }
   );
 });
-var InputGroupEnd = React2.forwardRef(function FieldInputGroupEnd({ className, ...props }, ref) {
+var cardDescriptionLayoutStyle = {};
+var cardDescriptionVisualStyle = {
+  cardDescription: {
+    className: "cl-5c413d88"
+  }
+};
+var Description = React5.forwardRef(
+  function CardDescription({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref: forwardedRef,
+        ...props,
+        ...mergeDescriptors(elements.cardDescription),
+        children
+      }
+    );
+  }
+);
+var cardBodyLayoutStyle = {
+  cardBody: {
+    className: "cl-5eebf917"
+  }
+};
+var cardBodyVisualStyle = {};
+var Body = React5.forwardRef(function CardBody({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-field-input-group-end": "",
-      ref,
-      className: cx("cl-4e1b09eb", className),
-      ...props
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.cardBody),
+      children
     }
   );
 });
-var Input = React2.forwardRef(function FieldInput({
-  asChild,
-  className,
-  intent = "idle",
-  state = "native",
-  variant = "default",
-  ...props
-}, forwardedRef) {
-  const Comp = asChild ? Slot : "input";
+var cardActionsLayoutStyle = {
+  cardActions: {
+    className: [
+      "cl-cc1fa4d3",
+      // Note:
+      // Prevents underline interractions triggering outside of the link text
+      // https://linear.app/clerk/issue/SDKI-192/#comment-ebf943b0
+      "cl-04c8fa73"
+    ].join(" ")
+  }
+};
+var cardActionsVisualStyle = {};
+var Actions = React5.forwardRef(function CardActions({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
   return /* @__PURE__ */ jsx(
-    Comp,
+    "div",
     {
-      "data-field-input": "",
       ref: forwardedRef,
-      className: cx(
-        "cl-43ccb14c",
-        "cl-f18c4e82",
-        // If an `InputGroup` exists, use the `pe` value, or fallback to the
-        // standard input `px` value
-        "cl-983f1668",
-        "cl-ed751b03",
-        "cl-2aeea0c3",
-        "cl-d4e2e313",
-        "cl-ed4ed5cf",
-        // variant
-        {
-          default: "cl-f6005322",
-          "otp-digit": "cl-cb0ccd68"
-        }[variant],
-        // state
-        {
-          native: "cl-0290fbc4",
-          hover: "cl-8d0f1e66",
-          "focus-visible": "cl-e88ce474"
-        }[state],
-        // intent
-        {
-          idle: [
-            "cl-cac18779",
-            "cl-03c582dd"
-          ],
-          info: [
-            "cl-fa487ffe",
-            "cl-03c582dd"
-          ],
-          error: [
-            "cl-cffb481b",
-            "cl-776840f6",
-            "cl-1e334ea3"
-          ],
-          success: [
-            "cl-90c7848a",
-            "cl-204cd4cf",
-            "cl-0810e01c"
-            // (optically adjusted ring to 25 opacity)
-          ],
-          warning: [
-            "cl-d250e2b7",
-            "cl-8cae7b37",
-            "cl-43888e8c"
-          ]
-        }[intent],
-        className
-      ),
-      ...props
+      ...props,
+      ...mergeDescriptors(elements.cardActions),
+      children
     }
   );
 });
-var Message = React2.forwardRef(function FieldMessage({ className, children, justify = "start", intent = "idle", ...props }, forwardedRef) {
-  return /* @__PURE__ */ jsxs(
-    "p",
+var cardFooterLayoutStyle = {
+  cardFooter: {
+    className: "cl-0f2a693e"
+  },
+  cardFooterAction: {
+    className: "cl-0c81043e"
+  }
+};
+var cardFooterVisualStyle = {
+  cardFooterAction: {
+    className: "cl-e7659ac7"
+  },
+  cardFooterActionText: {
+    className: "cl-8e9f71ce"
+  },
+  cardFooterActionLink: {
+    className: "cl-812d8d14"
+  },
+  cardFooterActionButton: {
+    className: "cl-812d8d14"
+  },
+  cardFooterActionPageLink: {
+    className: "cl-39faa7ab"
+  }
+};
+var Footer = React5.forwardRef(function CardFooter({
+  branded = true,
+  helpPageUrl,
+  privacyPageUrl,
+  termsPageUrl,
+  children,
+  className,
+  ...props
+}, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  const hasPageLinks = helpPageUrl || privacyPageUrl || termsPageUrl;
+  const renderFooter = branded || hasPageLinks || children;
+  const renderSubFooter = branded || hasPageLinks;
+  const hasBrandingAndPageLinks = branded && hasPageLinks;
+  return renderFooter ? /* @__PURE__ */ jsxs(
+    "div",
     {
-      "data-field-message": "",
       ref: forwardedRef,
       ...props,
-      className: cx(
-        "cl-12c39ca4",
-        {
-          start: "cl-c62ec162",
-          center: "cl-a503dd37",
-          end: "cl-307644c3"
-        }[justify],
-        {
-          idle: "cl-de621653",
-          info: "cl-de621653",
-          error: "cl-e5cd1f02",
-          success: "cl-e8e05e0c",
-          warning: "cl-d794f084"
-        }[intent],
-        className
-      ),
+      ...mergeDescriptors(elements.cardFooter),
       children: [
-        intent !== "idle" && /* @__PURE__ */ jsx("span", { className: "cl-eb8de575", children: {
-          error: /* @__PURE__ */ jsx(ExclamationOctagonSm, {}),
-          info: /* @__PURE__ */ jsx(InformationCircleSm, {}),
-          success: /* @__PURE__ */ jsx(CheckmarkCircleSm, {}),
-          warning: /* @__PURE__ */ jsx(ExclamationTriangleSm, {})
-        }[intent] }),
-        children
+        children,
+        renderSubFooter ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx$1("cl-10ec6412", hasBrandingAndPageLinks ? "cl-32c92bb1" : "cl-a503dd37"),
+            children: [
+              branded ? /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  className: "cl-286d6459",
+                  children: [
+                    "Secured by",
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        "aria-label": "Clerk logo",
+                        href: "https://www.clerk.com?utm_source=clerk&utm_medium=components",
+                        target: "_blank",
+                        rel: "noopener",
+                        className: "cl-e9dc1e80",
+                        children: /* @__PURE__ */ jsx(ClerkLogo, {})
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              hasPageLinks ? /* @__PURE__ */ jsxs("div", { className: "cl-c354e22d", children: [
+                helpPageUrl ? /* @__PURE__ */ jsx(FooterPageLink, { href: helpPageUrl, children: "Help" }) : null,
+                privacyPageUrl ? /* @__PURE__ */ jsx(FooterPageLink, { href: privacyPageUrl, children: "Privacy" }) : null,
+                termsPageUrl ? /* @__PURE__ */ jsx(FooterPageLink, { href: termsPageUrl, children: "Terms" }) : null
+              ] }) : null
+            ]
+          }
+        ) : null
       ]
     }
-  );
+  ) : null;
 });
-function EyeSlashSm(props) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
-    /* @__PURE__ */ jsx(
-      "path",
+var FooterAction = React5.forwardRef(
+  function CardFooterAction({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        d: "M2.949 7C2.80739 7.40946 2.75 7.76622 2.75 8C2.75 9 3.8 12.25 8 12.25C8.35547 12.25 8.68838 12.2267 9 12.1835M11.5 11.1743C12.8384 10.134 13.25 8.62607 13.25 8C13.25 7 12.2 3.75 8 3.75C6.7199 3.75 5.73242 4.05191 4.97809 4.5",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        ref: forwardedRef,
+        ...props,
+        ...mergeDescriptors(elements.cardFooterAction),
+        children
       }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
+    );
+  }
+);
+var FooterActionText = React5.forwardRef(
+  function CardFooterActionText({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsx(
+      "p",
       {
-        d: "M8.88388 8.88388C9.37204 8.39573 9.37204 7.60427 8.88388 7.11612C8.39573 6.62796 7.60427 6.62796 7.11612 7.11612",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        ref: forwardedRef,
+        ...props,
+        ...mergeDescriptors(elements.cardFooterActionText),
+        children
       }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
+    );
+  }
+);
+var FooterActionButton = React5.forwardRef(
+  function CardFooterActionButton({ children, className, type = "button", ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsx(
+      "button",
       {
-        d: "M3 3L13 13",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        ref: forwardedRef,
+        type,
+        ...props,
+        ...mergeDescriptors(elements.cardFooterActionButton),
+        children
       }
-    )
-  ] }) });
-}
-function EyeSm(props) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
-    /* @__PURE__ */ jsx(
-      "path",
+    );
+  }
+);
+var FooterActionLink = React5.forwardRef(
+  function CardFooterActionLink({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsx(
+      "a",
       {
-        d: "M13.25 8C13.25 9 12.2 12.25 8 12.25C3.8 12.25 2.75 9 2.75 8C2.75 7 3.8 3.75 8 3.75C12.2 3.75 13.25 7 13.25 8Z",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        ref: forwardedRef,
+        ...props,
+        ...mergeDescriptors(elements.cardFooterActionLink),
+        children
       }
-    ),
-    /* @__PURE__ */ jsx(
-      "circle",
+    );
+  }
+);
+var FooterPageLink = React5.forwardRef(
+  function CardFooterPageLink({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsx(
+      "a",
       {
-        cx: "8",
-        cy: "8",
-        r: "1.25",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
+        ref: forwardedRef,
+        ...props,
+        target: "_blank",
+        rel: "noopener",
+        ...mergeDescriptors(elements.cardFooterActionPageLink),
+        children
       }
-    )
-  ] }) });
-}
-function PasswordField({
-  alternativeFieldTrigger,
-  className,
-  label,
-  name = "password",
-  ...props
-}) {
-  const [type, setType] = React2__default.useState("password");
-  const id = React2__default.useId();
-  const { t, locale } = useLocalizations();
-  return /* @__PURE__ */ jsx(
-    Common2.Field,
-    {
-      name,
-      asChild: true,
-      children: /* @__PURE__ */ jsxs(Root2, { children: [
-        /* @__PURE__ */ jsx(Common2.Label, { asChild: true, children: /* @__PURE__ */ jsxs(Label, { children: [
-          label,
-          alternativeFieldTrigger ? /* @__PURE__ */ jsx(LabelEnd, { children: alternativeFieldTrigger }) : null
-        ] }) }),
-        /* @__PURE__ */ jsx(Common2.FieldState, { children: ({ state }) => {
-          return /* @__PURE__ */ jsxs(InputGroup, { children: [
-            /* @__PURE__ */ jsx(
-              Common2.Input,
-              {
-                type,
-                className: cx("cl-ba16e610", className),
-                ...props,
-                "aria-describedby": props.validatePassword && state !== "idle" ? id : void 0,
-                asChild: true,
-                children: /* @__PURE__ */ jsx(Input, { intent: state })
-              }
-            ),
-            /* @__PURE__ */ jsx(InputGroupEnd, { children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                className: cx(
-                  // Note:
-                  // We set to `1.375rem` (22px) here for a hairline border
-                  // around the focus ring to keep it distinct from the
-                  // "surrounding" input
-                  "cl-f739d7d3",
-                  "cl-35c8e0b5",
-                  "cl-c93b25fd"
-                ),
-                onClick: () => setType((prev2) => prev2 === "password" ? "text" : "password"),
-                title: [type === "password" ? "Show" : "Hide", "password"].join(" "),
-                disabled: props.disabled,
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "cl-32fb0905", children: [type === "password" ? "Show" : "Hide", "password"].join(" ") }),
-                  type === "password" ? /* @__PURE__ */ jsx(EyeSlashSm, {}) : /* @__PURE__ */ jsx(EyeSm, {})
-                ]
-              }
-            ) })
-          ] });
-        } }),
-        /* @__PURE__ */ jsx(Animated, { children: props.validatePassword ? /* @__PURE__ */ jsx(Common2.FieldState, { children: ({ state, codes }) => {
-          if (state === "idle") {
-            return;
-          }
-          if (state === "success") {
-            return /* @__PURE__ */ jsx(
-              Message,
-              {
-                id,
-                intent: "success",
-                children: t("unstable__errors.zxcvbn.goodPassword")
-              }
-            );
-          }
-          if (typeof codes === "undefined") {
-            return;
-          }
-          return /* @__PURE__ */ jsx(
-            Message,
-            {
-              id,
-              intent: state,
-              children: translatePasswordError({ codes, locale, t })
-            }
-          );
-        } }) : /* @__PURE__ */ jsx(Common2.FieldError, { asChild: true, children: ({ message }) => {
-          return /* @__PURE__ */ jsx(Message, { intent: "error", children: message });
-        } }) })
-      ] })
-    }
-  );
-}
-
-// src/hooks/use-attributes.ts
-function useAttributes(attribute) {
-  const environment = useEnvironment();
-  const userSettingsAttributes = environment.userSettings.attributes;
-  return userSettingsAttributes[attribute];
-}
-function useSignUpAttributes(attribute) {
-  const attr = useAttributes(attribute);
-  const { options } = useAppearance().parsedAppearance;
-  const { showOptionalFields } = options;
-  return {
-    ...attr,
-    show: (showOptionalFields || attr.required) && attr.enabled
-  };
-}
-var DEFAULT_FIELD_NAME = "emailAddress";
-var EmailField = React2__default.forwardRef(function EmailField2({
-  alternativeFieldTrigger,
-  name = DEFAULT_FIELD_NAME,
-  enabled,
-  required,
-  ...props
-}, forwardedRef) {
-  const { t, translateError } = useLocalizations();
-  const { enabled: attributeEnabled, required: attributeRequired } = useAttributes("email_address");
-  const isEnabled = enabled !== void 0 ? enabled : attributeEnabled;
-  const isRequired = required !== void 0 ? required : attributeRequired;
-  if (!isEnabled) {
-    return null;
+    );
+  }
+);
+var layoutStyle5 = {
+  ...cardRootLayoutStyle,
+  ...cardHeaderLayoutStyle,
+  ...cardContentLayoutStyle,
+  ...cardTitleLayoutStyle,
+  ...cardDescriptionLayoutStyle,
+  ...cardBodyLayoutStyle,
+  ...cardActionsLayoutStyle,
+  ...cardFooterLayoutStyle,
+  ...cardLogoLayoutStyle
+};
+var visualStyle5 = {
+  ...cardRootVisualStyle,
+  ...cardHeaderVisualStyle,
+  ...cardContentVisualStyle,
+  ...cardTitleVisualStyle,
+  ...cardDescriptionVisualStyle,
+  ...cardBodyVisualStyle,
+  ...cardActionsVisualStyle,
+  ...cardFooterVisualStyle,
+  ...cardLogoVisualStyle
+};
+var layoutStyle6 = {
+  separator: {
+    className: "cl-c53048bf"
   }
+};
+var visualStyle6 = {
+  separator: {
+    className: "cl-77b14b2e"
+  }
+};
+var Separator = React5.forwardRef(function Separator2({ children, descriptors, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
   return /* @__PURE__ */ jsx(
-    Common2.Field,
+    "div",
     {
-      name,
-      asChild: true,
-      children: /* @__PURE__ */ jsxs(Root2, { children: [
-        /* @__PURE__ */ jsx(Common2.Label, { asChild: true, children: /* @__PURE__ */ jsxs(Label, { children: [
-          t("formFieldLabel__emailAddress"),
-          alternativeFieldTrigger ? /* @__PURE__ */ jsx(LabelEnd, { children: alternativeFieldTrigger }) : !isRequired ? /* @__PURE__ */ jsx(Hint, { children: t("formFieldHintText__optional") }) : null
-        ] }) }),
-        /* @__PURE__ */ jsx(Common2.FieldState, { children: ({ state }) => {
-          return /* @__PURE__ */ jsx(
-            Common2.Input,
-            {
-              ref: forwardedRef,
-              type: "email",
-              ...props,
-              required: isRequired,
-              asChild: true,
-              children: /* @__PURE__ */ jsx(Input, { intent: state })
-            }
-          );
-        } }),
-        /* @__PURE__ */ jsx(Animated, { children: /* @__PURE__ */ jsx(Common2.FieldError, { asChild: true, children: ({ message, code }) => {
-          return /* @__PURE__ */ jsx(Message, { intent: "error", children: translateError({ message, code, name: "email_address" }) });
-        } }) })
-      ] })
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.separator, ...descriptors != null ? descriptors : []),
+      children
     }
   );
 });
-
-// src/constants/phone-number.ts
-var data = [
-  ["United States", "us", "1", "(...) ...-....", 100],
-  ["United Kingdom", "gb", "44", ".... ......", 100],
-  ["India", "in", "91", ".....-.....", 100],
-  ["Canada", "ca", "1", "(...) ...-....", 100],
-  ["Germany", "de", "49", "... .......", 100],
-  ["France", "fr", "33", ". .. .. .. ..", 100],
-  ["Russia", "ru", "7", "... ...-..-..", 100],
-  ["Afghanistan", "af", "93"],
-  ["Albania", "al", "355"],
-  ["Algeria ", "dz", "213"],
-  ["American Samoa", "as", "1684"],
-  ["Andorra", "ad", "376"],
-  ["Angola", "ao", "244"],
-  ["Anguilla", "ai", "1264"],
-  ["Antigua and Barbuda", "ag", "1268"],
-  ["Argentina", "ar", "54"],
-  ["Armenia", "am", "374"],
-  ["Aruba", "aw", "297"],
-  ["Australia", "au", "61", "... ... ..."],
-  ["Austria", "at", "43"],
-  ["Azerbaijan", "az", "994"],
-  ["Bahamas", "bs", "1242"],
-  ["Bahrain", "bh", "973"],
-  ["Bangladesh", "bd", "880"],
-  ["Barbados", "bb", "1246"],
-  ["Belarus", "by", "375"],
-  ["Belgium", "be", "32", "... .. .. .."],
-  ["Belize", "bz", "501"],
-  ["Benin", "bj", "229"],
-  ["Bermuda", "bm", "1441"],
-  ["Bhutan", "bt", "975"],
-  ["Bolivia", "bo", "591"],
-  ["Bosnia and Herzegovina", "ba", "387"],
-  ["Botswana", "bw", "267"],
-  ["Brazil", "br", "55"],
-  ["British Indian Ocean Territory", "io", "246"],
-  ["British Virgin Islands", "vg", "1284"],
-  ["Brunei", "bn", "673"],
-  ["Bulgaria", "bg", "359"],
-  ["Burkina Faso", "bf", "226"],
-  ["Burundi", "bi", "257"],
-  ["Cambodia", "kh", "855"],
-  ["Cameroon", "cm", "237"],
-  ["Cape Verde", "cv", "238"],
-  ["Caribbean Netherlands", "bq", "599"],
-  ["Cayman Islands", "ky", "1345"],
-  ["Central African Republic", "cf", "236"],
-  ["Chad", "td", "235"],
-  ["Chile", "cl", "56"],
-  ["China", "cn", "86", "...-....-...."],
-  ["Colombia", "co", "57"],
-  ["Comoros", "km", "269"],
-  ["Congo", "cd", "243"],
-  ["Congo", "cg", "242"],
-  ["Cook Islands", "ck", "682"],
-  ["Costa Rica", "cr", "506", "....-...."],
-  ["C\xF4te d\u2019Ivoire", "ci", "225"],
-  ["Croatia", "hr", "385"],
-  ["Cuba", "cu", "53"],
-  ["Cura\xE7ao", "cw", "599"],
-  ["Cyprus", "cy", "357"],
-  ["Czech Republic", "cz", "420"],
-  ["Denmark", "dk", "45", ".. .. .. .."],
-  ["Djibouti", "dj", "253"],
-  ["Dominica", "dm", "1767"],
-  ["Dominican Republic", "do", "1"],
-  ["Ecuador", "ec", "593"],
-  ["Egypt", "eg", "20"],
-  ["El Salvador", "sv", "503", "....-...."],
-  ["Equatorial Guinea", "gq", "240"],
-  ["Eritrea", "er", "291"],
-  ["Estonia", "ee", "372"],
-  ["Ethiopia", "et", "251"],
-  ["Falkland Islands", "fk", "500"],
-  ["Faroe Islands", "fo", "298"],
-  ["Fiji", "fj", "679"],
-  ["Finland", "fi", "358", ".. ... .. .."],
-  ["French Guiana", "gf", "594"],
-  ["French Polynesia", "pf", "689"],
-  ["Gabon", "ga", "241"],
-  ["Gambia", "gm", "220"],
-  ["Georgia", "ge", "995"],
-  ["Ghana", "gh", "233"],
-  ["Gibraltar", "gi", "350"],
-  ["Greece", "gr", "30", "... ......."],
-  ["Greenland", "gl", "299"],
-  ["Grenada", "gd", "1473"],
-  ["Guadeloupe", "gp", "590"],
-  ["Guam", "gu", "1671"],
-  ["Guatemala", "gt", "502", "....-...."],
-  ["Guinea", "gn", "224"],
-  ["Guinea-Bissau", "gw", "245"],
-  ["Guyana", "gy", "592"],
-  ["Haiti", "ht", "509", "....-...."],
-  ["Honduras", "hn", "504"],
-  ["Hong Kong", "hk", "852", ".... ...."],
-  ["Hungary", "hu", "36"],
-  ["Iceland", "is", "354", "... ...."],
-  ["Indonesia", "id", "62"],
-  ["Iran", "ir", "98"],
-  ["Iraq", "iq", "964"],
-  ["Ireland", "ie", "353", ".. ......."],
-  ["Israel", "il", "972"],
-  ["Italy", "it", "39", "... ......"],
-  ["Jamaica", "jm", "1876"],
-  ["Japan", "jp", "81", "... .. ...."],
-  ["Jordan", "jo", "962"],
-  ["Kazakhstan", "kz", "7", "... ...-..-.."],
-  ["Kenya", "ke", "254"],
-  ["Kiribati", "ki", "686"],
-  ["Kuwait", "kw", "965"],
-  ["Kyrgyzstan", "kg", "996"],
-  ["Laos", "la", "856"],
-  ["Latvia", "lv", "371"],
-  ["Lebanon", "lb", "961"],
-  ["Lesotho", "ls", "266"],
-  ["Liberia", "lr", "231"],
-  ["Libya", "ly", "218"],
-  ["Liechtenstein", "li", "423"],
-  ["Lithuania", "lt", "370"],
-  ["Luxembourg", "lu", "352"],
-  ["Macau", "mo", "853"],
-  ["Macedonia", "mk", "389"],
-  ["Madagascar", "mg", "261"],
-  ["Malawi", "mw", "265"],
-  ["Malaysia", "my", "60", "..-....-...."],
-  ["Maldives", "mv", "960"],
-  ["Mali", "ml", "223"],
-  ["Malta", "mt", "356"],
-  ["Marshall Islands", "mh", "692"],
-  ["Martinique", "mq", "596"],
-  ["Mauritania", "mr", "222"],
-  ["Mauritius", "mu", "230"],
-  ["Mexico", "mx", "52"],
-  ["Micronesia", "fm", "691"],
-  ["Moldova", "md", "373"],
-  ["Monaco", "mc", "377"],
-  ["Mongolia", "mn", "976"],
-  ["Montenegro", "me", "382"],
-  ["Montserrat", "ms", "1664"],
-  ["Morocco", "ma", "212"],
-  ["Mozambique", "mz", "258"],
-  ["Myanmar", "mm", "95"],
-  ["Namibia", "na", "264"],
-  ["Nauru", "nr", "674"],
-  ["Nepal", "np", "977"],
-  ["Netherlands", "nl", "31", ".. ........"],
-  ["New Caledonia", "nc", "687"],
-  ["New Zealand", "nz", "64", "...-...-...."],
-  ["Nicaragua", "ni", "505"],
-  ["Niger", "ne", "227"],
-  ["Nigeria", "ng", "234"],
-  ["Niue", "nu", "683"],
-  ["Norfolk Island", "nf", "672"],
-  ["North Korea", "kp", "850"],
-  ["Northern Mariana Islands", "mp", "1670"],
-  ["Norway", "no", "47", "... .. ..."],
-  ["Oman", "om", "968"],
-  ["Pakistan", "pk", "92", "...-......."],
-  ["Palau", "pw", "680"],
-  ["Palestine", "ps", "970"],
-  ["Panama", "pa", "507"],
-  ["Papua New Guinea", "pg", "675"],
-  ["Paraguay", "py", "595"],
-  ["Peru", "pe", "51"],
-  ["Philippines", "ph", "63", "... ...."],
-  ["Poland", "pl", "48", "...-...-..."],
-  ["Portugal", "pt", "351"],
-  ["Puerto Rico", "pr", "1"],
-  ["Qatar", "qa", "974"],
-  ["R\xE9union", "re", "262"],
-  ["Romania", "ro", "40"],
-  ["Rwanda", "rw", "250"],
-  ["Saint Barth\xE9lemy", "bl", "590"],
-  ["Saint Helena", "sh", "290"],
-  ["Saint Kitts and Nevis", "kn", "1869"],
-  ["Saint Lucia", "lc", "1758"],
-  ["Saint Martin", "mf", "590"],
-  ["Saint Pierre and Miquelon", "pm", "508"],
-  ["Saint Vincent and the Grenadines", "vc", "1784"],
-  ["Samoa", "ws", "685"],
-  ["San Marino", "sm", "378"],
-  ["S\xE3o Tom\xE9 and Pr\xEDncipe", "st", "239"],
-  ["Saudi Arabia", "sa", "966"],
-  ["Senegal", "sn", "221"],
-  ["Serbia", "rs", "381"],
-  ["Seychelles", "sc", "248"],
-  ["Sierra Leone", "sl", "232"],
-  ["Singapore", "sg", "65", "....-...."],
-  ["Sint Maarten", "sx", "1721"],
-  ["Slovakia", "sk", "421"],
-  ["Slovenia", "si", "386"],
-  ["Solomon Islands", "sb", "677"],
-  ["Somalia", "so", "252"],
-  ["South Africa", "za", "27"],
-  ["South Korea", "kr", "82"],
-  ["South Sudan", "ss", "211"],
-  ["Spain", "es", "34", "... ... ..."],
-  ["Sri Lanka", "lk", "94"],
-  ["Sudan", "sd", "249"],
-  ["Suriname", "sr", "597"],
-  ["Swaziland", "sz", "268"],
-  ["Sweden", "se", "46", ".. ... .. .."],
-  ["Switzerland", "ch", "41", ".. ... .. .."],
-  ["Syria", "sy", "963"],
-  ["Taiwan", "tw", "886"],
-  ["Tajikistan", "tj", "992"],
-  ["Tanzania", "tz", "255"],
-  ["Thailand", "th", "66"],
-  ["Timor-Leste", "tl", "670"],
-  ["Togo", "tg", "228"],
-  ["Tokelau", "tk", "690"],
-  ["Tonga", "to", "676"],
-  ["Trinidad and Tobago", "tt", "1868"],
-  ["Tunisia", "tn", "216"],
-  ["Turkey", "tr", "90", "... ... .. .."],
-  ["Turkmenistan", "tm", "993"],
-  ["Turks and Caicos Islands", "tc", "1649"],
-  ["Tuvalu", "tv", "688"],
-  ["U.S. Virgin Islands", "vi", "1340"],
-  ["Uganda", "ug", "256"],
-  ["Ukraine", "ua", "380"],
-  ["United Arab Emirates", "ae", "971"],
-  ["Uruguay", "uy", "598"],
-  ["Uzbekistan", "uz", "998"],
-  ["Vanuatu", "vu", "678"],
-  ["Vatican City", "va", "39", ".. .... ...."],
-  ["Venezuela", "ve", "58"],
-  ["Vietnam", "vn", "84"],
-  ["Wallis and Futuna", "wf", "681"],
-  ["Yemen", "ye", "967"],
-  ["Zambia", "zm", "260"],
-  ["Zimbabwe", "zw", "263"]
+var DESCRIPTORS = [
+  // Alert
+  "alert",
+  "alert__error",
+  "alert__warning",
+  "alertIcon",
+  // Button
+  "button",
+  "buttonPrimary",
+  "buttonSecondary",
+  "buttonConnection",
+  "buttonPrimaryDefault",
+  "buttonSecondaryDefault",
+  "buttonConnectionDefault",
+  "buttonDisabled",
+  "buttonBusy",
+  "buttonText",
+  "buttonTextVisuallyHidden",
+  "buttonIcon",
+  "buttonIconStart",
+  "buttonIconEnd",
+  "buttonSpinner",
+  ...[...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(({ provider }) => `buttonConnection__${provider}`),
+  // Connection
+  "connectionList",
+  "connectionListItem",
+  // Separator
+  "separator",
+  // Spinner
+  "spinner",
+  // Card
+  "cardRoot",
+  "cardRootDefault",
+  "cardRootInner",
+  "cardHeader",
+  "cardContent",
+  "cardTitle",
+  "cardDescription",
+  "cardBody",
+  "cardActions",
+  "cardFooter",
+  "cardFooterAction",
+  "cardFooterActionText",
+  "cardFooterActionLink",
+  "cardFooterActionButton",
+  "cardFooterActionPageLink",
+  "cardLogoBox",
+  "cardLogoLink",
+  "cardLogoImage"
 ];
-var UnitedStatesSubAreasSet = /* @__PURE__ */ new Set([
-  "907",
-  "205",
-  "251",
-  "256",
-  "334",
-  "479",
-  "501",
-  "870",
-  "480",
-  "520",
-  "602",
-  "623",
-  "928",
-  "209",
-  "213",
-  "310",
-  "323",
-  "408",
-  "415",
-  "510",
-  "530",
-  "559",
-  "562",
-  "619",
-  "626",
-  "650",
-  "661",
-  "707",
-  "714",
-  "760",
-  "805",
-  "818",
-  "831",
-  "858",
-  "909",
-  "916",
-  "925",
-  "949",
-  "951",
-  "303",
-  "719",
-  "970",
-  "203",
-  "860",
-  "202",
-  "302",
-  "239",
-  "305",
-  "321",
-  "352",
-  "386",
-  "407",
-  "561",
-  "727",
-  "772",
-  "813",
-  "850",
-  "863",
-  "904",
-  "941",
-  "954",
-  "229",
-  "404",
-  "478",
-  "706",
-  "770",
-  "912",
-  "808",
-  "319",
-  "515",
-  "563",
-  "641",
-  "712",
-  "208",
-  "217",
-  "309",
-  "312",
-  "618",
-  "630",
-  "708",
-  "773",
-  "815",
-  "847",
-  "219",
-  "260",
-  "317",
-  "574",
-  "765",
-  "812",
-  "316",
-  "620",
-  "785",
-  "913",
-  "270",
-  "502",
-  "606",
-  "859",
-  "225",
-  "318",
-  "337",
-  "504",
-  "985",
-  "413",
-  "508",
-  "617",
-  "781",
-  "978",
-  "301",
-  "410",
-  "207",
-  "231",
-  "248",
-  "269",
-  "313",
-  "517",
-  "586",
-  "616",
-  "734",
-  "810",
-  "906",
-  "989",
-  "218",
-  "320",
-  "507",
-  "612",
-  "651",
-  "763",
-  "952",
-  "314",
-  "417",
-  "573",
-  "636",
-  "660",
-  "816",
-  "228",
-  "601",
-  "662",
-  "406",
-  "252",
-  "336",
-  "704",
-  "828",
-  "910",
-  "919",
-  "701",
-  "308",
-  "402",
-  "603",
-  "201",
-  "609",
-  "732",
-  "856",
-  "908",
-  "973",
-  "505",
-  "575",
-  "702",
-  "775",
-  "212",
-  "315",
-  "516",
-  "518",
-  "585",
-  "607",
-  "631",
-  "716",
-  "718",
-  "845",
-  "914",
-  "216",
-  "330",
-  "419",
-  "440",
-  "513",
-  "614",
-  "740",
-  "937",
-  "405",
-  "580",
-  "918",
-  "503",
-  "541",
-  "215",
-  "412",
-  "570",
-  "610",
-  "717",
-  "724",
-  "814",
-  "401",
-  "803",
-  "843",
-  "864",
-  "605",
-  "423",
-  "615",
-  "731",
-  "865",
-  "901",
-  "931",
-  "210",
-  "214",
-  "254",
-  "281",
-  "325",
-  "361",
-  "409",
-  "432",
-  "512",
-  "713",
-  "806",
-  "817",
-  "830",
-  "903",
-  "915",
-  "936",
-  "940",
-  "956",
-  "972",
-  "979",
-  "435",
-  "801",
-  "276",
-  "434",
-  "540",
-  "703",
-  "757",
-  "804",
-  "802",
-  "206",
-  "253",
-  "360",
-  "425",
-  "509",
-  "262",
-  "414",
-  "608",
-  "715",
-  "920",
-  "304",
-  "307"
-]);
-var CanadaSubAreaSet = /* @__PURE__ */ new Set([
-  "204",
-  "226",
-  "236",
-  "249",
-  "250",
-  "289",
-  "306",
-  "343",
-  "365",
-  "387",
-  "403",
-  "416",
-  "418",
-  "431",
-  "437",
-  "438",
-  "450",
-  "506",
-  "514",
-  "519",
-  "548",
-  "579",
-  "581",
-  "587",
-  "604",
-  "613",
-  "639",
-  "647",
-  "672",
-  "705",
-  "709",
-  "742",
-  "778",
-  "780",
-  "782",
-  "807",
-  "819",
-  "825",
-  "867",
-  "873",
-  "902",
-  "905"
-]);
-var SubAreaCodeSets = {
-  us: UnitedStatesSubAreasSet,
-  ca: CanadaSubAreaSet
-};
-var createEntry = ([
-  name,
-  iso,
-  code,
-  pattern = "",
-  priority = 0
-]) => ({
-  name,
-  iso,
-  code,
-  pattern,
-  priority
-});
-var IsoToCountryMap = data.reduce(
-  (acc, cur) => acc.set(cur[1], createEntry(cur)),
-  /* @__PURE__ */ new Map()
-);
-var CodeToCountriesMap = data.reduce((acc, cur) => {
-  const code = cur[2];
-  const country = createEntry(cur);
-  acc.get(code) ? acc.get(code).push(country) : acc.set(code, [country]);
-  return acc;
-}, /* @__PURE__ */ new Map());
 
-// src/utils/phone-number.ts
-function getCountryIsoFromFormattedNumber(formattedNumber, fallbackIso = "us") {
-  const number = extractDigits(formattedNumber);
-  if (!number || number.length < 4) {
-    return fallbackIso;
-  }
-  if (number.startsWith("1") && phoneNumberBelongsTo("us", number)) {
-    return "us";
-  }
-  if (number.startsWith("1") && phoneNumberBelongsTo("ca", number)) {
-    return "ca";
-  }
-  return getCountryFromPhoneString(number).country.iso;
-}
-function formatPhoneNumber(phoneNumber, pattern, countryCode) {
-  if (!phoneNumber || !pattern) {
-    return phoneNumber;
-  }
-  const digits = [...extractDigits(phoneNumber)].slice(0, maxE164CompliantLength(countryCode));
-  if (digits.length <= 3) {
-    return digits.join("");
-  }
-  let res = "";
-  for (let i = 0; digits.length > 0; i++) {
-    if (i > pattern.length - 1) {
-      res += digits.shift();
-    } else {
-      res += pattern[i] === "." ? digits.shift() : pattern[i];
+// src/themes/buildTheme.ts
+function buildTheme(p) {
+  const theme = {};
+  DESCRIPTORS.forEach((descriptor) => {
+    theme[descriptor] = {
+      descriptor: `cl-${descriptor}`,
+      className: "",
+      style: {}
+    };
+  });
+  for (const descriptor in p) {
+    const key = descriptor;
+    if (p[key]) {
+      if (!(key in theme)) {
+        console.warn(`Clerk: Unknown descriptor: ${descriptor}`);
+        continue;
+      }
+      const { className, style } = p[key];
+      if (className) {
+        theme[key].className = className;
+      }
+      if (style) {
+        theme[key].style = style;
+      }
     }
   }
-  return res;
-}
-function extractDigits(formattedPhone) {
-  return (formattedPhone || "").replace(/[^\d]/g, "");
-}
-function phoneNumberBelongsTo(iso, phoneWithCode) {
-  var _a, _b;
-  if (!iso || !IsoToCountryMap.get(iso) || !phoneWithCode) {
-    return false;
+  return theme;
+}
+function mergeTheme(a, b) {
+  const mergedTheme = { ...a };
+  for (const d in mergedTheme) {
+    const descriptor = d;
+    mergedTheme[descriptor].className = [mergedTheme[descriptor].className, b[descriptor].className].join(" ");
+    mergedTheme[descriptor].style = { ...mergedTheme[descriptor].style, ...b[descriptor].style };
   }
-  const code = phoneWithCode[0];
-  const subArea = phoneWithCode.substring(1, 4);
-  return code === ((_a = IsoToCountryMap.get(iso)) == null ? void 0 : _a.code) && phoneWithCode.length - 1 === maxDigitCountForPattern(((_b = IsoToCountryMap.get(iso)) == null ? void 0 : _b.pattern) || "") && SubAreaCodeSets[iso].has(subArea);
-}
-function maxDigitCountForPattern(pattern) {
-  return (pattern.match(/\./g) || []).length;
+  return mergedTheme;
 }
-var MAX_PHONE_NUMBER_LENGTH = 15;
-function maxE164CompliantLength(countryCode) {
-  const usCountryCode = "1";
-  countryCode = countryCode || usCountryCode;
-  const codeWithPrefix = countryCode.includes("+") ? countryCode : "+" + countryCode;
-  return MAX_PHONE_NUMBER_LENGTH - codeWithPrefix.length;
-}
-function parsePhoneString(str) {
-  var _a, _b;
-  const digits = extractDigits(str);
-  const iso = getCountryIsoFromFormattedNumber(digits);
-  const pattern = ((_a = IsoToCountryMap.get(iso)) == null ? void 0 : _a.pattern) || "";
-  const code = ((_b = IsoToCountryMap.get(iso)) == null ? void 0 : _b.code) || "";
-  const number = digits.slice(code.length);
-  const formattedNumberWithCode = `+${code} ${formatPhoneNumber(number, pattern, code)}`;
-  return { iso, pattern, code, number, formattedNumberWithCode };
-}
-function stringToFormattedPhoneString(str) {
-  const parsed = parsePhoneString(str);
-  return `+${parsed.code} ${formatPhoneNumber(parsed.number, parsed.pattern, parsed.code)}`;
+
+// src/themes/layout.ts
+var layoutTheme = buildTheme({
+  ...layoutStyle4,
+  ...layoutStyle2,
+  ...layoutStyle5,
+  ...layoutStyle3,
+  ...layoutStyle6,
+  ...layoutStyle
+});
+
+// src/themes/full.ts
+var visualTheme = buildTheme({
+  ...visualStyle4,
+  ...visualStyle2,
+  ...visualStyle5,
+  ...visualStyle3,
+  ...visualStyle6,
+  ...visualStyle
+});
+var fullTheme = mergeTheme(layoutTheme, visualTheme);
+function mergeDescriptors(...descriptors) {
+  return descriptors.reduce(
+    (acc, el) => {
+      if (typeof el === "boolean") {
+        return acc;
+      }
+      acc.className = [el.descriptor, acc.className, el.className].join(" ");
+      acc.style = { ...acc.style, ...el.style };
+      return acc;
+    },
+    { className: "", style: {} }
+  );
 }
-var byPriority = (a, b) => {
-  return b.priority - a.priority;
-};
-function getCountryFromPhoneString(phone) {
-  const phoneWithCode = extractDigits(phone);
-  const matchingCountries = [];
-  for (const i of [4, 3, 2, 1]) {
-    const potentialCode = phoneWithCode.substring(0, i);
-    const countries = CodeToCountriesMap.get(potentialCode) || [];
-    if (countries.length) {
-      matchingCountries.push(...countries);
+function mergeElementsAppearanceConfig(a, b) {
+  let result;
+  if (typeof a === "string" && typeof b === "string") {
+    result = [a, b].join(" ");
+  } else if (typeof a === "string" && typeof b === "object") {
+    result = { ...b };
+    result.className = [result.className, a].join(" ");
+  } else if (typeof a === "object" && typeof b === "string") {
+    result = { ...a };
+    result.className = [result.className, b].join(" ");
+  } else if (typeof a === "object" && typeof b === "object") {
+    result = {
+      ...a,
+      ...b
+    };
+    if (a.className || b.className) {
+      result.className = [a.className, b.className].filter(Boolean).join(" ");
     }
   }
-  const fallbackCountry = IsoToCountryMap.get("us");
-  const country = matchingCountries.sort(byPriority)[0] || fallbackCountry;
-  const number = phoneWithCode.slice((country == null ? void 0 : country.code.length) || 0);
-  return { number, country };
+  if (!result) {
+    throw new Error(`Unable to merge ElementsAppearanceConfigs: ${JSON.stringify(a)} and ${JSON.stringify(b)}`);
+  }
+  return result;
 }
-function useFocusInput() {
-  const ref = React2.useRef(null);
-  const setFocus = React2.useCallback(() => {
-    requestAnimationFrame(() => {
-      if (ref.current) {
-        ref.current.focus();
+function mergeAppearance(a, b) {
+  if (!a && !b) {
+    return null;
+  }
+  if (!a) {
+    return b;
+  }
+  if (!b) {
+    return a;
+  }
+  const result = { ...a, options: { ...a.options, ...b.options } };
+  if (b.theme) {
+    result.theme = b.theme;
+  }
+  if (!result.elements && b.elements) {
+    result.elements = { ...b.elements };
+  } else if (result.elements && b.elements) {
+    Object.entries(b.elements).forEach(([element, config]) => {
+      const el = element;
+      if (el in result.elements) {
+        result.elements[el] = mergeElementsAppearanceConfig(result.elements[el], config);
+      } else {
+        result.elements[el] = config;
       }
     });
-  }, [ref]);
-  return [ref, setFocus];
-}
-function CheckmarkSm(props) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M4.25 8.75L7.25 11.75L11.75 4.25",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) }) });
-}
-function ChevronUpDownSm(props) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M5.75 5.25L8 2.75L10.25 5.25",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M5.75 10.75L8 13.25L10.25 10.75",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  ] }) });
+  }
+  return result;
 }
-
-// src/utils/merge-refs.ts
-function mergeRefs(refs) {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref != null) {
-        ref.current = value;
+function applyTheme(theme, appearance) {
+  const baseTheme = theme != null ? theme : fullTheme;
+  if (!appearance) {
+    return { theme: baseTheme, elements: structuredClone(baseTheme), options: defaultAppearance.options };
+  }
+  const result = {
+    theme: baseTheme,
+    // because we're going to perform modifications to deeply nested objects, we need to create a structuredClone of
+    // the theme or else subsequent usage of the baseTheme will contain our merged changes.
+    elements: structuredClone(baseTheme),
+    options: { ...defaultAppearance.options, ...appearance.options }
+  };
+  if (appearance.elements) {
+    Object.entries(appearance.elements).forEach(([element, config]) => {
+      const el = element;
+      if (el in appearance.elements) {
+        if (typeof config === "string") {
+          result.elements[el].className = [result.elements[el].className, config].join(" ");
+        } else {
+          const { className, ...style } = config;
+          if (className) {
+            result.elements[el].className = [result.elements[el].className, className].join(" ");
+          }
+          result.elements[el].style = { ...result.elements[el].style, ...style };
+        }
       }
     });
-  };
-}
-var format = (str, iso) => {
-  if (!str) {
-    return "";
   }
-  const country = IsoToCountryMap.get(iso);
-  return formatPhoneNumber(str, country == null ? void 0 : country.pattern, country == null ? void 0 : country.code);
+  return result;
+}
+var defaultAppearance = {
+  theme: fullTheme,
+  elements: fullTheme,
+  options: {
+    logoVisibility: "visible",
+    socialButtonsPlacement: "top",
+    socialButtonsVariant: "auto",
+    logoImageUrl: "",
+    logoLinkUrl: "",
+    showOptionalFields: true,
+    helpPageUrl: "",
+    privacyPageUrl: "",
+    termsPageUrl: "",
+    shimmer: true,
+    animations: true,
+    unsafe_disableDevelopmentModeWarnings: false
+  }
 };
-var useFormattedPhoneNumber = (props) => {
-  const [number, setNumber] = React2.useState(() => {
-    const { number: number2 } = parsePhoneString(props.initPhoneWithCode || "");
-    return number2;
-  });
-  const [iso, setIso] = React2.useState(
-    parsePhoneString(props.initPhoneWithCode || "").number ? parsePhoneString(props.initPhoneWithCode || "").iso : props.locationBasedCountryIso || "us"
-  );
-  React2.useEffect(() => {
-    setNumber(extractDigits(number));
-  }, [iso, number]);
-  const numberWithCode = React2.useMemo(() => {
-    var _a;
-    if (!number) {
-      return "";
-    }
-    const dialCode = ((_a = IsoToCountryMap.get(iso)) == null ? void 0 : _a.code) || "1";
-    return "+" + extractDigits(`${dialCode}${number}`);
-  }, [iso, number]);
-  const formattedNumber = React2.useMemo(() => {
-    return format(number, iso);
-  }, [iso, number]);
-  const setNumberAndIso = React2.useCallback((str) => {
-    const { iso: iso2, number: number2 } = parsePhoneString(str);
-    setNumber(number2);
-    setIso(iso2);
-  }, []);
-  return {
-    setNumber,
-    setIso,
-    setNumberAndIso,
-    iso,
-    number,
-    numberWithCode,
-    formattedNumber
-  };
+var [AppearanceContext, useAppearance, usePartialAppearance] = createContextAndHook("AppearanceContext");
+var AppearanceProvider = (props) => {
+  const {
+    parsedAppearance: globalAppearance,
+    themelessAppearance: globalThemelessAppearance,
+    theme: globalTheme
+  } = usePartialAppearance();
+  const ctxValue = useDeepEqualMemo(() => {
+    var _a, _b;
+    const theme = (_a = props.theme) != null ? _a : globalTheme;
+    const themelessAppearance = mergeAppearance(globalThemelessAppearance, props.appearance);
+    const parsedAppearance = applyTheme(theme, themelessAppearance);
+    return { value: { parsedAppearance, themelessAppearance, theme: (_b = props.theme) != null ? _b : globalTheme } };
+  }, [props.appearance, props.theme, globalAppearance, globalThemelessAppearance, globalTheme]);
+  return /* @__PURE__ */ jsx(AppearanceContext.Provider, { value: ctxValue, children: props.children });
 };
-var countryOptions = Array.from(IsoToCountryMap.values()).map((country) => {
-  return {
-    ...country
-  };
-});
-var PhoneNumberField = React2.forwardRef(function PhoneNumberField2({
-  alternativeFieldTrigger,
-  name = "phoneNumber",
-  initPhoneWithCode = "",
-  onChange,
-  ...props
-}, forwardedRef) {
-  var _a, _b;
-  const clerk = useClerk();
-  const locationBasedCountryIso = clerk.__internal_country;
-  const { t, translateError } = useLocalizations();
-  const [isOpen, setOpen] = React2.useState(false);
-  const [selectedCountry, setSelectedCountry] = React2.useState(countryOptions[0]);
-  const id = React2.useId();
-  const containerRef = React2.useRef(null);
-  const commandListRef = React2.useRef(null);
-  const commandInputRef = React2.useRef(null);
-  const contentWidth = ((_b = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.width) || 0;
-  const [inputRef, setInputFocus] = useFocusInput();
-  const { setNumber, setIso, setNumberAndIso, numberWithCode, formattedNumber, iso } = useFormattedPhoneNumber({
-    initPhoneWithCode,
-    locationBasedCountryIso
-  });
-  const handlePaste = (e) => {
-    e.preventDefault();
-    const inputValue = e.clipboardData.getData("text");
-    if (inputValue.includes("+")) {
-      setNumberAndIso(inputValue);
-    } else {
-      setNumber(inputValue);
-    }
-  };
-  const handlePhoneNumberChange = (e) => {
-    const inputValue = e.target.value;
-    if (inputValue.includes("+")) {
-      setNumberAndIso(inputValue);
-    } else {
-      setNumber(inputValue);
-    }
-  };
-  React2.useEffect(
-    function syncSelectedCountry() {
-      setSelectedCountry(countryOptions.find((c) => c.iso === iso) || countryOptions[0]);
-    },
-    [iso]
-  );
-  React2.useEffect(
-    function scrollActiveCommandItemIntoView() {
-      var _a2;
-      if (isOpen) {
-        (_a2 = commandInputRef.current) == null ? void 0 : _a2.focus();
-        setTimeout(() => {
-          var _a3, _b2;
-          (_b2 = (_a3 = commandListRef.current) == null ? void 0 : _a3.querySelector("[data-checked=true]")) == null ? void 0 : _b2.scrollIntoView({ block: "start" });
-        }, 0);
-      }
-    },
-    [isOpen]
-  );
-  return /* @__PURE__ */ jsx(
-    Common2.Field,
-    {
-      name,
-      asChild: true,
-      children: /* @__PURE__ */ jsxs(Root2, { children: [
-        /* @__PURE__ */ jsx(Common2.Label, { asChild: true, children: /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
-          t("formFieldLabel__phoneNumber"),
-          " ",
-          alternativeFieldTrigger ? /* @__PURE__ */ jsx(LabelEnd, { children: alternativeFieldTrigger }) : !(props == null ? void 0 : props.required) ? /* @__PURE__ */ jsx(Hint, { children: t("formFieldHintText__optional") }) : null
-        ] }) }),
-        /* @__PURE__ */ jsx(Common2.FieldState, { children: ({ state: intent }) => {
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: containerRef,
-              className: cx(
-                // Note:
-                // - To create the overlapping border/shadow effect"
-                //   - `ring` – "focus ring"
-                //   - `ring-offset` - border
-                "cl-deb747c5",
-                "cl-d9213aa4",
-                "cl-929952e4",
-                "cl-000b8592",
-                "cl-2aeea0c3",
-                "cl-b8d3fb9a",
-                // hover
-                "cl-31e80f10",
-                // focus
-                "cl-f3ff9abd",
-                "cl-2d93da67",
-                // intent
-                {
-                  idle: [
-                    "cl-60b2eb1d",
-                    "cl-9722ed3e"
-                  ],
-                  info: [
-                    "cl-d0aba580",
-                    "cl-9722ed3e"
-                  ],
-                  error: [
-                    "cl-5a239b6d",
-                    "cl-16f89e98",
-                    "cl-a0f5bec1"
-                  ],
-                  success: [
-                    "cl-903d9684",
-                    "cl-9ee10a6a",
-                    "cl-7df25448"
-                    // (optically adjusted ring to 25 opacity)
-                  ],
-                  warning: [
-                    "cl-e6adb1a7",
-                    "cl-9b871c1b",
-                    "cl-08105371"
-                  ]
-                }[intent]
-              ),
-              children: [
-                /* @__PURE__ */ jsxs(DialogTrigger, { children: [
-                  /* @__PURE__ */ jsxs(
-                    Button$1,
-                    {
-                      onPress: () => setOpen(true),
-                      isDisabled: props.disabled,
-                      className: "cl-b2ddee5e",
-                      children: [
-                        /* @__PURE__ */ jsx("span", { className: "cl-6f75bc57", children: selectedCountry.iso }),
-                        /* @__PURE__ */ jsx(ChevronUpDownSm, { className: "cl-f6142057" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Popover,
-                    {
-                      isOpen,
-                      onOpenChange: setOpen,
-                      placement: "bottom start",
-                      crossOffset: -1,
-                      children: /* @__PURE__ */ jsx(
-                        Dialog,
-                        {
-                          className: "cl-b30fc560",
-                          style: {
-                            width: contentWidth
-                          },
-                          children: /* @__PURE__ */ jsxs(Command, { className: "cl-dc1d9f19", children: [
-                            /* @__PURE__ */ jsx("div", { className: "cl-1c0d9e31", children: /* @__PURE__ */ jsx(
-                              Command.Input,
-                              {
-                                ref: commandInputRef,
-                                placeholder: "Search country or code",
-                                className: "cl-54426bd8"
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxs(
-                              Command.List,
-                              {
-                                ref: commandListRef,
-                                className: "cl-6bc50823",
-                                children: [
-                                  /* @__PURE__ */ jsx(Command.Empty, { className: "cl-1facd79b", children: "No countries found" }),
-                                  countryOptions.map(({ name: name2, iso: iso2, code }, index) => {
-                                    return /* @__PURE__ */ jsxs(
-                                      Command.Item,
-                                      {
-                                        onSelect: () => {
-                                          setIso(iso2);
-                                          setOpen(false);
-                                          setInputFocus();
-                                        },
-                                        "data-checked": selectedCountry === countryOptions[index],
-                                        className: "cl-ba59b9a7",
-                                        children: [
-                                          /* @__PURE__ */ jsx("span", { className: "cl-4128a507", children: selectedCountry === countryOptions[index] && /* @__PURE__ */ jsx(CheckmarkSm, { className: "cl-100c22d5" }) }),
-                                          /* @__PURE__ */ jsx("span", { className: "cl-2bcc5e30", children: name2 }),
-                                          /* @__PURE__ */ jsxs("span", { className: "cl-00c77415", children: [
-                                            "+",
-                                            code
-                                          ] })
-                                        ]
-                                      },
-                                      iso2
-                                    );
-                                  })
-                                ]
-                              }
-                            )
-                          ] })
-                        }
-                      )
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    tabIndex: -1,
-                    className: "cl-59bd566c",
-                    onClick: () => setInputFocus(),
-                    disabled: props.disabled,
-                    children: [
-                      "+",
-                      selectedCountry.code
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Common2.Input,
-                  {
-                    value: numberWithCode,
-                    className: "cl-e564b408"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: mergeRefs([forwardedRef, inputRef]),
-                    type: "tel",
-                    id,
-                    maxLength: 25,
-                    value: formattedNumber,
-                    onPaste: handlePaste,
-                    onChange: handlePhoneNumberChange,
-                    ...props,
-                    className: "cl-4a741be6",
-                    "data-field-input": true
-                  }
-                )
-              ]
-            }
-          );
-        } }),
-        /* @__PURE__ */ jsx(Animated, { children: /* @__PURE__ */ jsx(Common2.FieldError, { asChild: true, children: ({ message, code }) => {
-          return /* @__PURE__ */ jsx(Message, { intent: "error", children: translateError({ message, code, name: "phone_number" }) });
-        } }) })
-      ] })
-    }
-  );
-});
-function EmailOrPhoneNumberField({
-  className,
-  name = void 0,
-  toggleLabelEmail,
-  toggleLabelPhoneNumber,
-  ...props
-}) {
-  const [showPhoneNumberField, setShowPhoneNumberField] = React2.useState(false);
-  const [inputRef, setInputFocus] = useFocusInput();
-  const toggle = /* @__PURE__ */ jsx(
-    ToggleButton,
-    {
-      isSelected: showPhoneNumberField,
-      onChange: (isSelected) => {
-        setShowPhoneNumberField(isSelected);
-        setInputFocus();
-      },
-      className: link({ size: "sm", disabled: props.disabled }),
-      children: showPhoneNumberField ? toggleLabelEmail : toggleLabelPhoneNumber
-    }
-  );
-  return showPhoneNumberField ? /* @__PURE__ */ jsx(
-    PhoneNumberField,
-    {
-      alternativeFieldTrigger: toggle,
-      name,
-      ...props,
-      ref: inputRef
-    }
-  ) : /* @__PURE__ */ jsx(
-    EmailField,
-    {
-      ...props,
-      name,
-      alternativeFieldTrigger: toggle,
-      ref: inputRef
-    }
-  );
-}
-function UsernameField({
-  alternativeFieldTrigger,
-  name = "username",
-  ...props
-}) {
-  const { t, translateError } = useLocalizations();
-  return /* @__PURE__ */ jsx(
-    Common2.Field,
-    {
-      name,
-      asChild: true,
-      children: /* @__PURE__ */ jsxs(Root2, { children: [
-        /* @__PURE__ */ jsx(Common2.Label, { asChild: true, children: /* @__PURE__ */ jsxs(Label, { children: [
-          t("formFieldLabel__username"),
-          " ",
-          alternativeFieldTrigger ? /* @__PURE__ */ jsx(LabelEnd, { children: alternativeFieldTrigger }) : !(props == null ? void 0 : props.required) ? /* @__PURE__ */ jsx(Hint, { children: t("formFieldHintText__optional") }) : null
-        ] }) }),
-        /* @__PURE__ */ jsx(Common2.FieldState, { children: ({ state }) => {
-          return /* @__PURE__ */ jsx(
-            Common2.Input,
-            {
-              type: "text",
-              ...props,
-              asChild: true,
-              children: /* @__PURE__ */ jsx(Input, { intent: state })
-            }
-          );
-        } }),
-        /* @__PURE__ */ jsx(Animated, { children: /* @__PURE__ */ jsx(Common2.FieldError, { asChild: true, children: ({ message, code }) => {
-          return /* @__PURE__ */ jsx(Message, { intent: "error", children: translateError({ message, code, name: "username" }) });
-        } }) })
-      ] })
-    }
-  );
-}
-function OTPField({
-  label,
-  resend,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "cl-a8dca104", children: [
-    /* @__PURE__ */ jsx(
-      Common2.Field,
-      {
-        asChild: true,
-        name: "code",
-        children: /* @__PURE__ */ jsxs(Root2, { children: [
-          /* @__PURE__ */ jsx(Common2.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { visuallyHidden: true, children: label }) }),
-          /* @__PURE__ */ jsx(Common2.FieldState, { children: ({ state }) => /* @__PURE__ */ jsx(
-            Common2.Input,
-            {
-              type: "otp",
-              autoSubmit: true,
-              autoFocus: true,
-              className: "cl-6f38a1ba",
-              passwordManagerOffset: 24,
-              render: ({ value, status }) => /* @__PURE__ */ jsx(
-                Input,
-                {
-                  variant: "otp-digit",
-                  intent: state,
-                  state: {
-                    cursor: "focus-visible",
-                    selected: "focus-visible",
-                    hovered: "hover",
-                    none: "native"
-                  }[status],
-                  ...props,
-                  asChild: true,
-                  children: /* @__PURE__ */ jsxs("span", { children: [
-                    status === "cursor" && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "data-otp-field-cursor": "",
-                        className: "cl-0389eded"
-                      }
-                    ),
-                    value
-                  ] })
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Animated, { children: /* @__PURE__ */ jsx(Common2.FieldError, { asChild: true, children: ({ message }) => {
-            return /* @__PURE__ */ jsx(
-              Message,
-              {
-                justify: "center",
-                intent: "error",
-                children: message
-              }
-            );
-          } }) })
-        ] })
-      }
-    ),
-    resend && resend
-  ] });
-}
-function PenSm(props) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M9.23664 3.44288L4.18161 8.33251C3.90008 8.60483 3.70471 8.95383 3.61974 9.33619L2.75 13.25L6.45529 12.3782C6.81159 12.2943 7.13805 12.1143 7.3991 11.8578L12.6265 6.72023C13.4824 5.78723 13.4537 4.34072 12.5614 3.44288C11.6433 2.51904 10.1547 2.51904 9.23664 3.44288Z",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) }) });
-}
 
-export { Actions, Animated, Body, Button, CaretRightLegacySm, Checkbox, Connections, Content, Description, EmailField, EmailOrPhoneNumberField, Footer, FooterAction, FooterActionButton, FooterActionLink, FooterActionText, GlobalError, Header, Hint, Input, LOCALIZATION_NEEDED, Label, LinkButton, Logo, Message, OTPField, PasswordField, PenSm, PhoneNumberField, Root, Root2, Title, UsernameField, link, parsePhoneString, stringToFormattedPhoneString, useAttributes, useCard, useDevModeWarning, useDisplayConfig, useEnabledConnections, useEnvironment, useFocusInput, useLocalizations, useOptions, useSignUpAttributes };
+export { Actions, Alert, AppearanceProvider, Body, Button, Connections, Content, Description, ExclamationOctagonSm, ExclamationTriangleSm, Footer, FooterAction, FooterActionButton, FooterActionLink, FooterActionText, Header, Icon, Logo, Root, Separator, Title, mergeDescriptors, translatePasswordError, useAppearance, useEnabledConnections, useLocalizations, useOptions };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-GJNJVJGS.mjs.map
+//# sourceMappingURL=chunk-LLOUIL3Z.mjs.map