@clerk/ui 0.1.9 → 0.1.10

package/dist/contexts.js

@@ -1,8 +1,11 @@
 'use strict';
 
 var react = require('@clerk/shared/react');
-var React = require('react');
+require('@clerk/elements/common');
+var React5 = require('react');
+var cva = require('cva');
 var jsxRuntime = require('react/jsx-runtime');
+var types = require('@clerk/types');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -22,9 +25,377 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 
 // src/contexts/AppearanceContext.tsx
+
+// ../../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 applyDescriptors(elements, descriptorList) {
+  const descriptors = getDescriptors(elements, descriptorList);
+  return mergeDescriptors(...descriptors);
+}
+var SIZE = 16;
+var layoutStyle = {
+  spinner: {
+    className: "cl-26207fa4"
+  }
+};
+var visualStyle = {
+  spinner: {
+    className: "cl-9feebad9"
+  }
+};
+var spinner = dva({
+  base: "spinner"
+});
+var Spinner = React5.forwardRef(function Spinner2({
+  children,
+  descriptor
+}, ref) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      ...applyDescriptors(elements, spinner({ descriptor })),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cl-32fb0905", children }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                "g",
+                {
+                  className: cva.cx(
+                    "cl-bfbc36b1",
+                    "cl-22c1b7ea",
+                    "cl-45bbc6bf",
+                    "cl-e5d7b81e",
+                    "cl-4bd15f3b"
+                  ),
+                  fill: "currentColor",
+                  opacity: 0.5,
+                  children: [
+                    "(",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "8",
+                        cy: "2.75",
+                        r: "0.75"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "13.25",
+                        cy: "8",
+                        r: "0.75"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "2.75",
+                        cy: "8",
+                        r: "0.75"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "4.29999",
+                        cy: "4.29001",
+                        r: "0.75"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "11.7",
+                        cy: "4.29001",
+                        r: "0.75"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "4.29999",
+                        cy: "11.72",
+                        r: "0.75"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "11.7",
+                        cy: "11.72",
+                        r: "0.75"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "8",
+                        cy: "13.25",
+                        r: "0.75"
+                      }
+                    ),
+                    ")"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: cva.cx(
+                    "cl-4f43603c",
+                    "cl-bfbc36b1",
+                    "cl-22c1b7ea",
+                    "cl-45bbc6bf",
+                    "cl-3ba7917c"
+                  ),
+                  cx: "8",
+                  cy: "8",
+                  r: "5.25",
+                  pathLength: 360,
+                  stroke: "currentColor",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeDashoffset: 100,
+                  strokeDasharray: "90 270",
+                  strokeWidth: 1.5
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+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: "buttonPrimary",
+      secondary: "buttonSecondary",
+      connection: "buttonConnection"
+    },
+    busy: {
+      false: null,
+      true: null
+    },
+    disabled: {
+      false: null,
+      true: null
+    }
+  },
+  compoundVariants: [
+    { 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" }
+  ]
+});
+React5__namespace.forwardRef(function Button2({
+  busy = false,
+  children,
+  descriptor,
+  disabled = false,
+  iconStart,
+  iconEnd,
+  intent = "primary",
+  type = "button",
+  textVisuallyHidden,
+  ...props
+}, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  const spinner2 = /* @__PURE__ */ jsxRuntime.jsx(Spinner, { descriptor: "buttonSpinner", children: "Loading\u2026" });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref: forwardedRef,
+      ...applyDescriptors(elements, button({ busy, disabled, intent, descriptor })),
+      disabled: busy || disabled,
+      type,
+      ...props,
+      children: busy && intent === "primary" ? spinner2 : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        iconStart ? busy && intent === "connection" ? spinner2 : /* @__PURE__ */ jsxRuntime.jsx("span", { ...applyDescriptors(elements, "buttonIcon buttonIconStart"), children: iconStart }) : null,
+        children ? /* @__PURE__ */ jsxRuntime.jsx("span", { ...mergeDescriptors(elements.buttonText, !!textVisuallyHidden && elements.buttonTextVisuallyHidden), children }) : null,
+        iconEnd ? /* @__PURE__ */ jsxRuntime.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;
@@ -48,22 +419,6 @@ function $ff5963eb1fccf552$export$e08e3b67e392101e(...callbacks) {
   };
 }
 
-// ../../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;
-
 // ../../node_modules/@react-aria/utils/dist/mergeProps.mjs
 function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
   let result = {
@@ -87,10 +442,10 @@ function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
 }
 
 // src/primitives/icons/icon.tsx
-var Icon = React__namespace.forwardRef(
+var Icon = React5__namespace.forwardRef(
   function Icon2(props, ref) {
     const { children, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...restProps } = props;
-    return React__namespace.cloneElement(children, {
+    return React5__namespace.cloneElement(children, {
       ...$3ef42575df84b30b$export$9d1611c77c2fe928(children.props, restProps),
       ref,
       width: "1em",
@@ -103,6 +458,15 @@ var Icon = React__namespace.forwardRef(
     });
   }
 );
+var layoutStyle3 = {
+  connectionList: {
+    className: "cl-519e344c"
+  },
+  connectionListItem: {
+    className: "cl-b9a44166"
+  }
+};
+var visualStyle3 = {};
 function ExclamationOctagonSm(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -171,17 +535,15 @@ function ExclamationTriangleSm(props) {
     )
   ] }) });
 }
-var layoutStyle = {
+var layoutStyle4 = {
   alert: {
     className: "cl-fbddaa7d"
   },
-  alert__warning: {},
-  alert__error: {},
   alertIcon: {
     className: "cl-af4e251c"
   }
 };
-var visualStyle = {
+var visualStyle4 = {
   alert: {
     className: "cl-15c02a47"
   },
@@ -190,10 +552,9 @@ var visualStyle = {
   },
   alert__error: {
     className: "cl-66ef3405"
-  },
-  alertIcon: {}
+  }
 };
-React__namespace.forwardRef(function Alert2({ children, descriptors, intent = "error", ...props }, forwardedRef) {
+React5__namespace.forwardRef(function Alert2({ children, descriptors, intent = "error", ...props }, forwardedRef) {
   const { elements } = useAppearance().parsedAppearance;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -216,17 +577,532 @@ React__namespace.forwardRef(function Alert2({ children, descriptors, intent = "e
     }
   );
 });
-var layoutStyle2 = {
+var ClerkLogo = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    className: "cl-2a836795",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 50 14",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "ellipse",
+        {
+          cx: "7.889",
+          cy: "7",
+          rx: "2.187",
+          ry: "2.188",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.forwardRef(function Image2({
+  src,
+  size = BASE_IMAGE_WIDTH,
+  ...props
+}, forwardedRef) {
+  const shouldOptimize = isClerkImage(src);
+  return /* @__PURE__ */ jsxRuntime.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 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"
+  }
+};
+React5__namespace.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__ */ jsxRuntime.jsxs(
+      Element,
+      {
+        ref: forwardedRef,
+        ...props,
+        className: cva.cx(
+          cardRootDescriptors.className,
+          banner ? [
+            "cl-a52b4c3f",
+            "cl-5af1449f"
+          ] : cardRootDefaultDescriptors.className
+        ),
+        children: [
+          banner && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cva.cx(
+                "cl-7817f2f2"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cva.cx(
+                    "cl-03e68f06"
+                  ),
+                  ...props,
+                  children: banner
+                }
+              )
+            }
+          ),
+          children && /* @__PURE__ */ jsxRuntime.jsx("div", { ...mergeDescriptors(elements.cardRootInner), children })
+        ]
+      }
+    );
+  }
+);
+var cardContentLayoutStyle = {
+  cardContent: {
+    className: "cl-8baa595e"
+  }
+};
+var cardContentVisualStyle = {
+  cardContent: {
+    className: [
+      "cl-c99cd8b4",
+      "cl-1c01a9d7"
+    ].join(" ")
+  }
+};
+React5__namespace.forwardRef(function CardContent({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.cardContent),
+      children
+    }
+  );
+});
+var cardHeaderLayoutStyle = {
+  cardHeader: {
+    className: "cl-c757ad0c"
+  }
+};
+var cardHeaderVisualStyle = {};
+React5__namespace.forwardRef(function CardHeader({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.cardHeader),
+      children
+    }
+  );
+});
+var cardLogoLayoutStyle = {
+  cardLogoBox: {
+    className: "cl-4f5262b8"
+  },
+  cardLogoLink: {
+    className: "cl-33c167b1"
+  },
+  cardLogoImage: {
+    className: "cl-deefc87a"
+  }
+};
+var cardLogoVisualStyle = {};
+React5__namespace.forwardRef(function CardLogo({
+  href,
+  src,
+  ...props
+}, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  if (!src) {
+    return null;
+  }
+  const img = /* @__PURE__ */ jsxRuntime.jsx(
+    Image,
+    {
+      ref: forwardedRef,
+      src,
+      size: 200,
+      ...props,
+      ...mergeDescriptors(elements.cardLogoImage)
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...mergeDescriptors(elements.cardLogoBox), children: href ? /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      ...mergeDescriptors(elements.cardLogoLink),
+      children: img
+    }
+  ) : img });
+});
+var cardTitleLayoutStyle = {};
+var cardTitleVisualStyle = {
+  cardTitle: {
+    className: "cl-f29e36a7"
+  }
+};
+React5__namespace.forwardRef(function CardTitle({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h2",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.cardTitle),
+      children
+    }
+  );
+});
+var cardDescriptionLayoutStyle = {};
+var cardDescriptionVisualStyle = {
+  cardDescription: {
+    className: "cl-5c413d88"
+  }
+};
+React5__namespace.forwardRef(
+  function CardDescription({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref: forwardedRef,
+        ...props,
+        ...mergeDescriptors(elements.cardDescription),
+        children
+      }
+    );
+  }
+);
+var cardBodyLayoutStyle = {
+  cardBody: {
+    className: "cl-5eebf917"
+  }
+};
+var cardBodyVisualStyle = {};
+React5__namespace.forwardRef(function CardBody({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.cardBody),
+      children
+    }
+  );
+});
+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 = {};
+React5__namespace.forwardRef(function CardActions({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.cardActions),
+      children
+    }
+  );
+});
+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"
+  }
+};
+React5__namespace.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.cardFooter),
+      children: [
+        children,
+        renderSubFooter ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cva.cx("cl-10ec6412", hasBrandingAndPageLinks ? "cl-32c92bb1" : "cl-a503dd37"),
+            children: [
+              branded ? /* @__PURE__ */ jsxRuntime.jsxs(
+                "p",
+                {
+                  className: "cl-286d6459",
+                  children: [
+                    "Secured by",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ClerkLogo, {})
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              hasPageLinks ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cl-c354e22d", children: [
+                helpPageUrl ? /* @__PURE__ */ jsxRuntime.jsx(FooterPageLink, { href: helpPageUrl, children: "Help" }) : null,
+                privacyPageUrl ? /* @__PURE__ */ jsxRuntime.jsx(FooterPageLink, { href: privacyPageUrl, children: "Privacy" }) : null,
+                termsPageUrl ? /* @__PURE__ */ jsxRuntime.jsx(FooterPageLink, { href: termsPageUrl, children: "Terms" }) : null
+              ] }) : null
+            ]
+          }
+        ) : null
+      ]
+    }
+  ) : null;
+});
+React5__namespace.forwardRef(
+  function CardFooterAction({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: forwardedRef,
+        ...props,
+        ...mergeDescriptors(elements.cardFooterAction),
+        children
+      }
+    );
+  }
+);
+React5__namespace.forwardRef(
+  function CardFooterActionText({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref: forwardedRef,
+        ...props,
+        ...mergeDescriptors(elements.cardFooterActionText),
+        children
+      }
+    );
+  }
+);
+React5__namespace.forwardRef(
+  function CardFooterActionButton({ children, className, type = "button", ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: forwardedRef,
+        type,
+        ...props,
+        ...mergeDescriptors(elements.cardFooterActionButton),
+        children
+      }
+    );
+  }
+);
+React5__namespace.forwardRef(
+  function CardFooterActionLink({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        ref: forwardedRef,
+        ...props,
+        ...mergeDescriptors(elements.cardFooterActionLink),
+        children
+      }
+    );
+  }
+);
+var FooterPageLink = React5__namespace.forwardRef(
+  function CardFooterPageLink({ children, className, ...props }, forwardedRef) {
+    const { elements } = useAppearance().parsedAppearance;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        ref: forwardedRef,
+        ...props,
+        target: "_blank",
+        rel: "noopener",
+        ...mergeDescriptors(elements.cardFooterActionPageLink),
+        children
+      }
+    );
+  }
+);
+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 visualStyle2 = {
+var visualStyle6 = {
   separator: {
     className: "cl-77b14b2e"
   }
 };
-React__namespace.forwardRef(function Separator2({ children, descriptors, ...props }, forwardedRef) {
+React5__namespace.forwardRef(function Separator2({ children, descriptors, ...props }, forwardedRef) {
   const { elements } = useAppearance().parsedAppearance;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -238,18 +1114,81 @@ React__namespace.forwardRef(function Separator2({ children, descriptors, ...prop
     }
   );
 });
+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",
+  ...[...types.OAUTH_PROVIDERS, ...types.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"
+];
 
 // src/themes/buildTheme.ts
 function buildTheme(p) {
   const theme = {};
+  DESCRIPTORS.forEach((descriptor) => {
+    theme[descriptor] = {
+      descriptor: `cl-${descriptor}`,
+      className: "",
+      style: {}
+    };
+  });
   for (const descriptor in p) {
-    if (p[descriptor]) {
-      const { className, style } = p[descriptor];
-      theme[descriptor] = {
-        descriptor: `cl-${descriptor}`,
-        className: className != null ? className : "",
-        style: style != null ? style : {}
-      };
+    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 theme;
@@ -265,10 +1204,24 @@ function mergeTheme(a, b) {
 }
 
 // src/themes/layout.ts
-var layoutTheme = buildTheme({ ...layoutStyle, ...layoutStyle2 });
+var layoutTheme = buildTheme({
+  ...layoutStyle4,
+  ...layoutStyle2,
+  ...layoutStyle5,
+  ...layoutStyle3,
+  ...layoutStyle6,
+  ...layoutStyle
+});
 
 // src/themes/full.ts
-var visualTheme = buildTheme({ ...visualStyle, ...visualStyle2 });
+var visualTheme = buildTheme({
+  ...visualStyle4,
+  ...visualStyle2,
+  ...visualStyle5,
+  ...visualStyle3,
+  ...visualStyle6,
+  ...visualStyle
+});
 var fullTheme = mergeTheme(layoutTheme, visualTheme);
 function mergeDescriptors(...descriptors) {
   return descriptors.reduce(
@@ -303,7 +1256,7 @@ function mergeElementsAppearanceConfig(a, b) {
     }
   }
   if (!result) {
-    throw new Error(`Unable to merge ElementsAppearanceConfigs: ${a} and ${b}`);
+    throw new Error(`Unable to merge ElementsAppearanceConfigs: ${JSON.stringify(a)} and ${JSON.stringify(b)}`);
   }
   return result;
 }