@clerk/ui 0.1.9 → 0.1.10

package/dist/chunk-TVTJKSVH.mjs

@@ -0,0 +1,1811 @@
+import { ExclamationOctagonSm, ExclamationTriangleSm, useLocalizations, translatePasswordError, useAppearance, Alert, Icon } from './chunk-LLOUIL3Z.mjs';
+import { useClerk } from '@clerk/shared/react';
+import * as React6 from 'react';
+import React6__default, { useMemo, cloneElement } from 'react';
+import * as Common from '@clerk/elements/common';
+import { GlobalError as GlobalError$1 } from '@clerk/elements/common';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva, cx } from 'cva';
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+import { Slot } from '@radix-ui/react-slot';
+import { Command } from 'cmdk';
+import { DialogTrigger, Button, Popover, Dialog, ToggleButton } from 'react-aria-components';
+import { useClerkHostRouter } from '@clerk/shared/router';
+
+// 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;
+}
+
+// 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() {
+  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;
+}
+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 = React6.forwardRef(function LinkButton2({
+  busy,
+  children,
+  className,
+  disabled,
+  size,
+  ...props
+}, forwardedRef) {
+  return (
+    // eslint-disable-next-line react/button-has-type
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: forwardedRef,
+        "data-link": true,
+        className: link({ busy, disabled, size, className }),
+        disabled: busy || disabled,
+        ...props,
+        children
+      }
+    )
+  );
+});
+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",
+      {
+        cx: "8",
+        cy: "8",
+        r: "5.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6.25 8.35L7.65 9.75L9.75 6.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }) });
+}
+function InformationCircleSm(props) {
+  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "8",
+        cy: "8",
+        r: "5.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 8.75V10.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 6.25024V6.26024",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }) });
+}
+var Root = React6.forwardRef(function FieldRoot({ children, className, ...props }, forwardedRef) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-field-root": "",
+      ref: forwardedRef,
+      ...props,
+      className: cx(
+        "cl-dcb655e4",
+        "cl-03811a40",
+        "cl-81d1ec5b",
+        "cl-3a46e0d4",
+        "cl-4636b1d3",
+        "cl-3da4a9c6",
+        "cl-7c5144aa",
+        className
+      ),
+      children
+    }
+  );
+});
+var Label = React6.forwardRef(function FieldLabel({
+  className,
+  children,
+  visuallyHidden,
+  ...props
+}, forwardedRef) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      "data-field-label": "",
+      ref: forwardedRef,
+      ...props,
+      className: cx(
+        visuallyHidden ? "cl-32fb0905" : [
+          "cl-e0435440",
+          "cl-b830f807"
+        ],
+        className
+      ),
+      children
+    }
+  );
+});
+var LabelEnd = React6.forwardRef(function FieldLabelEnd({ className, children, ...props }, forwardedRef) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-field-label-end": "",
+      ref: forwardedRef,
+      ...props,
+      className: cx("cl-43770a6e", className),
+      children
+    }
+  );
+});
+var Hint = React6.forwardRef(function FieldHint({ className, children, ...props }, forwardedRef) {
+  return /* @__PURE__ */ jsx(
+    LabelEnd,
+    {
+      "data-field-hint": "",
+      ref: forwardedRef,
+      ...props,
+      className: cx("cl-275d380b", className),
+      children
+    }
+  );
+});
+var Checkbox = React6.forwardRef(function FieldCheckbox(props, forwardedRef) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-field-checkbox": "",
+      ref: forwardedRef,
+      type: "checkbox",
+      className: cx("cl-833ca99c"),
+      ...props
+    }
+  );
+});
+var InputGroup = React6.forwardRef(function FieldInputGroup({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-field-input-group": "",
+      ref,
+      className: cx(
+        "cl-ddaf1b10",
+        "cl-d2d9e1f1",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var InputGroupEnd = React6.forwardRef(function FieldInputGroupEnd({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-field-input-group-end": "",
+      ref,
+      className: cx("cl-4e1b09eb", className),
+      ...props
+    }
+  );
+});
+var Input = React6.forwardRef(function FieldInput({
+  asChild,
+  className,
+  intent = "idle",
+  state = "native",
+  variant = "default",
+  ...props
+}, forwardedRef) {
+  const Comp = asChild ? Slot : "input";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "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
+    }
+  );
+});
+var Message = React6.forwardRef(function FieldMessage({ className, children, justify = "start", intent = "idle", ...props }, forwardedRef) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      "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
+      ),
+      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
+      ]
+    }
+  );
+});
+function EyeSlashSm(props) {
+  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        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"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        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"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M3 3L13 13",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }) });
+}
+function EyeSm(props) {
+  return /* @__PURE__ */ jsx(Icon, { ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        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"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "8",
+        cy: "8",
+        r: "1.25",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }) });
+}
+var PasswordField = React6__default.forwardRef(function PasswordField2({
+  alternativeFieldTrigger,
+  className,
+  fieldClassName,
+  fieldRef,
+  label,
+  name = "password",
+  ...props
+}, forwardedRef) {
+  const [type, setType] = React6__default.useState("password");
+  const id = React6__default.useId();
+  const { t, locale } = useLocalizations();
+  return /* @__PURE__ */ jsx(
+    Common.Field,
+    {
+      name,
+      asChild: true,
+      children: /* @__PURE__ */ jsxs(
+        Root,
+        {
+          className: fieldClassName,
+          ref: fieldRef,
+          children: [
+            /* @__PURE__ */ jsx(Common.Label, { asChild: true, children: /* @__PURE__ */ jsxs(Label, { children: [
+              label,
+              alternativeFieldTrigger ? /* @__PURE__ */ jsx(LabelEnd, { children: alternativeFieldTrigger }) : null
+            ] }) }),
+            /* @__PURE__ */ jsx(Common.FieldState, { children: ({ state }) => {
+              return /* @__PURE__ */ jsxs(InputGroup, { children: [
+                /* @__PURE__ */ jsx(
+                  Common.Input,
+                  {
+                    type,
+                    className: cx("cl-ba16e610", className),
+                    ...props,
+                    ref: forwardedRef,
+                    "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((prev) => prev === "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(Common.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(Common.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 = React6__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;
+  }
+  return /* @__PURE__ */ jsx(
+    Common.Field,
+    {
+      name,
+      asChild: true,
+      children: /* @__PURE__ */ jsxs(Root, { children: [
+        /* @__PURE__ */ jsx(Common.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(Common.FieldState, { children: ({ state }) => {
+          return /* @__PURE__ */ jsx(
+            Common.Input,
+            {
+              ref: forwardedRef,
+              type: "email",
+              ...props,
+              required: isRequired,
+              asChild: true,
+              children: /* @__PURE__ */ jsx(Input, { intent: state })
+            }
+          );
+        } }),
+        /* @__PURE__ */ jsx(Animated, { children: /* @__PURE__ */ jsx(Common.FieldError, { asChild: true, children: ({ message, code }) => {
+          return /* @__PURE__ */ jsx(Message, { intent: "error", children: translateError({ message, code, name: "email_address" }) });
+        } }) })
+      ] })
+    }
+  );
+});
+
+// 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 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];
+    }
+  }
+  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;
+  }
+  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;
+}
+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)}`;
+}
+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);
+    }
+  }
+  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 };
+}
+function useFocusInput() {
+  const ref = React6.useRef(null);
+  const setFocus = React6.useCallback(() => {
+    requestAnimationFrame(() => {
+      if (ref.current) {
+        ref.current.focus();
+      }
+    });
+  }, [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"
+      }
+    )
+  ] }) });
+}
+
+// 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;
+      }
+    });
+  };
+}
+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);
+};
+var useFormattedPhoneNumber = (props) => {
+  const [number, setNumber] = React6.useState(() => {
+    const { number: number2 } = parsePhoneString(props.initPhoneWithCode || "");
+    return number2;
+  });
+  const [iso, setIso] = React6.useState(
+    parsePhoneString(props.initPhoneWithCode || "").number ? parsePhoneString(props.initPhoneWithCode || "").iso : props.locationBasedCountryIso || "us"
+  );
+  React6.useEffect(() => {
+    setNumber(extractDigits(number));
+  }, [iso, number]);
+  const numberWithCode = React6.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 = React6.useMemo(() => {
+    return format(number, iso);
+  }, [iso, number]);
+  const setNumberAndIso = React6.useCallback((str) => {
+    const { iso: iso2, number: number2 } = parsePhoneString(str);
+    setNumber(number2);
+    setIso(iso2);
+  }, []);
+  return {
+    setNumber,
+    setIso,
+    setNumberAndIso,
+    iso,
+    number,
+    numberWithCode,
+    formattedNumber
+  };
+};
+var countryOptions = Array.from(IsoToCountryMap.values()).map((country) => {
+  return {
+    ...country
+  };
+});
+var PhoneNumberField = React6.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] = React6.useState(false);
+  const [selectedCountry, setSelectedCountry] = React6.useState(countryOptions[0]);
+  const id = React6.useId();
+  const containerRef = React6.useRef(null);
+  const commandListRef = React6.useRef(null);
+  const commandInputRef = React6.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);
+    }
+  };
+  React6.useEffect(
+    function syncSelectedCountry() {
+      setSelectedCountry(countryOptions.find((c) => c.iso === iso) || countryOptions[0]);
+    },
+    [iso]
+  );
+  React6.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(
+    Common.Field,
+    {
+      name,
+      asChild: true,
+      children: /* @__PURE__ */ jsxs(Root, { children: [
+        /* @__PURE__ */ jsx(Common.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(Common.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,
+                    {
+                      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(
+                  Common.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(Common.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] = React6.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(
+    Common.Field,
+    {
+      name,
+      asChild: true,
+      children: /* @__PURE__ */ jsxs(Root, { children: [
+        /* @__PURE__ */ jsx(Common.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(Common.FieldState, { children: ({ state }) => {
+          return /* @__PURE__ */ jsx(
+            Common.Input,
+            {
+              type: "text",
+              ...props,
+              asChild: true,
+              children: /* @__PURE__ */ jsx(Input, { intent: state })
+            }
+          );
+        } }),
+        /* @__PURE__ */ jsx(Animated, { children: /* @__PURE__ */ jsx(Common.FieldError, { asChild: true, children: ({ message, code }) => {
+          return /* @__PURE__ */ jsx(Message, { intent: "error", children: translateError({ message, code, name: "username" }) });
+        } }) })
+      ] })
+    }
+  );
+}
+var RouterLink = React6.forwardRef(function RouterLink2({ asChild, children, href, ...props }, forwardedRef) {
+  const router = useClerkHostRouter();
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref: forwardedRef,
+      ...props,
+      href,
+      onClick: (e) => {
+        e.preventDefault();
+        if (href) {
+          router.push(href);
+        }
+      },
+      children
+    }
+  );
+});
+function OTPField({
+  label,
+  resend,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "cl-a8dca104", children: [
+    /* @__PURE__ */ jsx(
+      Common.Field,
+      {
+        asChild: true,
+        name: "code",
+        children: /* @__PURE__ */ jsxs(Root, { children: [
+          /* @__PURE__ */ jsx(Common.Label, { asChild: true, children: /* @__PURE__ */ jsx(Label, { visuallyHidden: true, children: label }) }),
+          /* @__PURE__ */ jsx(Common.FieldState, { children: ({ state }) => /* @__PURE__ */ jsx(
+            Common.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(Common.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 { Animated, CaretRightLegacySm, Checkbox, EmailField, EmailOrPhoneNumberField, GlobalError, Hint, Input, LOCALIZATION_NEEDED, Label, LinkButton, Message, OTPField, PasswordField, PenSm, PhoneNumberField, Root, RouterLink, UsernameField, link, parsePhoneString, stringToFormattedPhoneString, useAttributes, useCard, useDevModeWarning, useDisplayConfig, useEnvironment, useFocusInput, useSignUpAttributes };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-TVTJKSVH.mjs.map