@clerk/ui 0.1.10 → 0.1.11-canary.vf875463

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

@@ -1048,8 +1048,8 @@ var makeLocalizeable = (resource) => {
     const base = readObjectPath(resource, key);
     return applyTokensToString(base || "", params || {});
   };
-  const translateError = ({ message, code, name }) => {
-    return t(`unstable__errors.${code}__${name}`) || t(`unstable__errors.${code}`) || message;
+  const translateError = ({ message: message2, code, name }) => {
+    return t(`unstable__errors.${code}__${name}`) || t(`unstable__errors.${code}`) || message2;
   };
   return {
     t,
@@ -1069,13 +1069,13 @@ function canUseListFormat(locale) {
 var addFullStop = (string) => {
   return !string ? "" : string.endsWith(".") ? string : `${string}.`;
 };
-var createListFormat = (message, locale) => {
+var createListFormat = (message2, locale) => {
   let messageWithPrefix;
   if (canUseListFormat(locale)) {
     const formatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
-    messageWithPrefix = formatter.format(message);
+    messageWithPrefix = formatter.format(message2);
   } else {
-    messageWithPrefix = message.join(", ");
+    messageWithPrefix = message2.join(", ");
   }
   return messageWithPrefix;
 };
@@ -1157,7 +1157,7 @@ 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) => {
+  const cx5 = (...inputs) => {
     var _a, _b;
     if (typeof ((_a = void 0 ) == null ? void 0 : _a["cx:done"]) !== "undefined") {
       return void 0 ;
@@ -1170,7 +1170,7 @@ var defineConfig = (options) => {
   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);
+      return cx5(config == null ? void 0 : config.base, props == null ? void 0 : props.descriptor);
     }
     const { variants, defaultVariants } = config;
     const getVariantClassNames = Object.keys(variants).map((variant) => {
@@ -1194,18 +1194,18 @@ var defineConfig = (options) => {
       }) ? [...acc, descriptor] : acc,
       []
     );
-    return cx4(config == null ? void 0 : config.base, getVariantClassNames, getCompoundVariantClassNames, props == null ? void 0 : props.descriptor);
+    return cx5(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 cx5(components.map((component) => component(propsWithoutDescriptor)), props == null ? void 0 : props.descriptor);
   };
   return {
     compose: compose2,
     dva: dva2,
-    cx: cx4
+    cx: cx5
   };
 };
 var { compose, dva, cx } = defineConfig();
@@ -1493,10 +1493,10 @@ var Button = React5.forwardRef(function Button2({
     "button",
     {
       ref: forwardedRef,
-      ...applyDescriptors(elements, button({ busy, disabled, intent, descriptor })),
       disabled: busy || disabled,
       type,
       ...props,
+      ...applyDescriptors(elements, button({ busy, disabled, intent, descriptor })),
       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,
@@ -2991,10 +2991,10 @@ var visualStyle4 = {
   alert: {
     className: "cl-15c02a47"
   },
-  alert__warning: {
+  alertWarning: {
     className: "cl-a992fcfc"
   },
-  alert__error: {
+  alertError: {
     className: "cl-66ef3405"
   }
 };
@@ -3007,8 +3007,8 @@ var Alert = React5.forwardRef(function Alert2({ children, descriptors, intent =
       ...props,
       ...mergeDescriptors(
         elements.alert,
-        intent === "error" && elements.alert__error,
-        intent === "warning" && elements.alert__warning,
+        intent === "error" && elements.alertError,
+        intent === "warning" && elements.alertWarning,
         ...descriptors != null ? descriptors : []
       ),
       children: [
@@ -3536,12 +3536,395 @@ var visualStyle5 = {
   ...cardFooterVisualStyle,
   ...cardLogoVisualStyle
 };
+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 fieldRootLayoutStyle = {
+  fieldRoot: {
+    className: [
+      "cl-dcb655e4",
+      "cl-03811a40",
+      "cl-81d1ec5b",
+      "cl-3a46e0d4",
+      "cl-7c5144aa"
+    ].join(" ")
+  }
+};
+var fieldRootVisualStyle = {
+  fieldRoot: {
+    className: [
+      "cl-4636b1d3",
+      "cl-3da4a9c6"
+    ].join(" ")
+  }
+};
+var Root2 = React5.forwardRef(function FieldRoot({ children, className, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.fieldRoot),
+      children
+    }
+  );
+});
+var fieldLabelLayoutStyle = {
+  fieldLabel: {
+    className: "cl-8c391822"
+  }
+};
+var fieldLabelVisualStyle = {
+  fieldLabel: {
+    className: "cl-f75d1b2a"
+  }
+};
+var Label = React5.forwardRef(function FieldLabel({
+  className,
+  children,
+  visuallyHidden,
+  ...props
+}, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  const fieldLabelDescriptors = applyDescriptors(elements, "fieldLabel");
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      ref: forwardedRef,
+      ...props,
+      className: cx$1(visuallyHidden ? "cl-32fb0905" : fieldLabelDescriptors.className),
+      children
+    }
+  );
+});
+var fieldLabelEndLayoutStyle = {
+  fieldLabelEnd: {
+    className: "cl-43770a6e"
+  }
+};
+var LabelEnd = React5.forwardRef(function FieldLabelEnd({ className, children, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.fieldLabelEnd),
+      children
+    }
+  );
+});
+var fieldHintVisualStyle = {
+  fieldLabelEnd: {
+    className: "cl-275d380b"
+  }
+};
+var Hint = React5.forwardRef(function FieldHint({ className, children, ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsx(
+    LabelEnd,
+    {
+      ref: forwardedRef,
+      ...props,
+      ...mergeDescriptors(elements.fieldHint),
+      children
+    }
+  );
+});
+var fieldCheckboxLayoutStyle = {
+  fieldCheckbox: {
+    className: "cl-13e816a3"
+  }
+};
+var fieldCheckboxVisualStyle = {
+  fieldCheckbox: {
+    className: "cl-12b86d4e"
+  }
+};
+var Checkbox = React5.forwardRef(function FieldCheckbox(props, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: forwardedRef,
+      type: "checkbox",
+      ...props,
+      ...mergeDescriptors(elements.fieldCheckbox)
+    }
+  );
+});
+var fieldInputGroupLayoutStyle = {
+  fieldInputGroup: {
+    className: "cl-6a6227fc"
+  }
+};
+var InputGroup = React5.forwardRef(function FieldInputGroup({ className, ...props }, ref) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      ...mergeDescriptors(elements.fieldInputGroup)
+    }
+  );
+});
+var fieldInputGroupEndLayoutStyle = {
+  fieldInputGroupEnd: {
+    className: "cl-4e1b09eb"
+  }
+};
+var InputGroupEnd = React5.forwardRef(function FieldInputGroupEnd({ className, ...props }, ref) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-field-input-group-end": "",
+      ref,
+      ...props,
+      ...mergeDescriptors(elements.fieldInputGroupEnd)
+    }
+  );
+});
+var fieldInputLayoutStyle = {
+  fieldInput: {
+    className: [
+      "cl-58d0413d",
+      "cl-43ccb14c",
+      "cl-f18c4e82",
+      // If an `InputGroup` exists, use the `pe` value, or fallback to the
+      // standard input `px` value
+      "cl-983f1668",
+      "cl-d3e031f6",
+      "cl-ed4ed5cf"
+    ].join(" ")
+  }
+};
+var fieldInputVisualStyle = {
+  fieldInput: {
+    className: [
+      "cl-ac0ebc23",
+      "cl-2aeea0c3",
+      "cl-0290fbc4",
+      "cl-d4e2e313"
+    ].join(" ")
+  },
+  fieldInputIdle: {
+    className: [
+      "cl-cac18779",
+      "cl-03c582dd"
+    ].join(" ")
+  },
+  fieldInputInfo: {
+    className: [
+      "cl-fa487ffe",
+      "cl-03c582dd"
+    ].join(" ")
+  },
+  fieldInputError: {
+    className: [
+      "cl-cffb481b",
+      "cl-776840f6",
+      "cl-1e334ea3"
+    ].join(" ")
+  },
+  fieldInputSuccess: {
+    className: [
+      "cl-90c7848a",
+      "cl-204cd4cf",
+      "cl-0810e01c"
+    ].join(" ")
+  },
+  fieldInputWarning: {
+    className: [
+      "cl-d250e2b7",
+      "cl-8cae7b37",
+      "cl-43888e8c"
+    ].join(" ")
+  }
+};
+var input = dva({
+  base: "fieldInput",
+  variants: {
+    intent: {
+      idle: "fieldInputIdle",
+      info: "fieldInputInfo",
+      error: "fieldInputError",
+      success: "fieldInputSuccess",
+      warning: "fieldInputWarning"
+    }
+  }
+});
+var Input = React5.forwardRef(function FieldInput({ descriptor, intent = "idle", ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...applyDescriptors(elements, input({ intent, descriptor }))
+    }
+  );
+});
+var fieldMessageLayoutStyle = {
+  fieldMessage: {
+    className: "cl-b86c33af"
+  },
+  fieldMessageStart: {
+    className: "cl-c62ec162"
+  },
+  fieldMessageCenter: {
+    className: "cl-a503dd37"
+  },
+  fieldMessageEnd: {
+    className: "cl-307644c3"
+  }
+};
+var fieldMessageVisualStyle = {
+  fieldMessage: {
+    className: "cl-757071a1"
+  },
+  fieldMessageIdle: {
+    className: "cl-de621653"
+  },
+  fieldMessageInfo: {
+    className: "cl-de621653"
+  },
+  fieldMessageError: {
+    className: "cl-e5cd1f02"
+  },
+  fieldMessageSuccess: {
+    className: "cl-e8e05e0c"
+  },
+  fieldMessageWarning: {
+    className: "cl-d794f084"
+  }
+};
+var message = dva({
+  base: "fieldMessage",
+  variants: {
+    justify: {
+      start: "fieldMessageStart",
+      center: "fieldMessageCenter",
+      end: "fieldMessageEnd"
+    },
+    intent: {
+      idle: "fieldMessageIdle",
+      info: "fieldMessageInfo",
+      error: "fieldMessageError",
+      success: "fieldMessageSuccess",
+      warning: "fieldMessageWarning"
+    }
+  }
+});
+var Message = React5.forwardRef(function FieldMessage({ descriptor, children, justify = "start", intent = "idle", ...props }, forwardedRef) {
+  const { elements } = useAppearance().parsedAppearance;
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      ref: forwardedRef,
+      ...props,
+      ...applyDescriptors(elements, message({ justify, intent, descriptor })),
+      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
+      ]
+    }
+  );
+});
 var layoutStyle6 = {
+  ...fieldRootLayoutStyle,
+  ...fieldLabelLayoutStyle,
+  ...fieldLabelEndLayoutStyle,
+  // ...fieldHintLayoutStyle,
+  ...fieldCheckboxLayoutStyle,
+  ...fieldInputGroupLayoutStyle,
+  ...fieldInputGroupEndLayoutStyle,
+  ...fieldInputLayoutStyle,
+  ...fieldMessageLayoutStyle
+};
+var visualStyle6 = {
+  ...fieldRootVisualStyle,
+  ...fieldLabelVisualStyle,
+  // ...fieldLabelEndLayoutStyle,
+  ...fieldHintVisualStyle,
+  ...fieldCheckboxVisualStyle,
+  // ...fieldInputGroupVisualStyle,
+  // ...fieldInputGroupEndVisualStyle,
+  ...fieldInputVisualStyle,
+  ...fieldMessageVisualStyle
+};
+var layoutStyle7 = {
   separator: {
     className: "cl-c53048bf"
   }
 };
-var visualStyle6 = {
+var visualStyle7 = {
   separator: {
     className: "cl-77b14b2e"
   }
@@ -3561,8 +3944,8 @@ var Separator = React5.forwardRef(function Separator2({ children, descriptors, .
 var DESCRIPTORS = [
   // Alert
   "alert",
-  "alert__error",
-  "alert__warning",
+  "alertError",
+  "alertWarning",
   "alertIcon",
   // Button
   "button",
@@ -3584,6 +3967,31 @@ var DESCRIPTORS = [
   // Connection
   "connectionList",
   "connectionListItem",
+  // Field
+  "fieldRoot",
+  "fieldLabel",
+  "fieldLabelEnd",
+  "fieldHint",
+  "fieldCheckbox",
+  "fieldInputGroup",
+  "fieldInputGroupEnd",
+  "fieldInput",
+  "fieldInputDefault",
+  "fieldInputOtp",
+  "fieldInputIdle",
+  "fieldInputInfo",
+  "fieldInputError",
+  "fieldInputSuccess",
+  "fieldInputWarning",
+  "fieldMessageStart",
+  "fieldMessageCenter",
+  "fieldMessageEnd",
+  "fieldMessage",
+  "fieldMessageIdle",
+  "fieldMessageInfo",
+  "fieldMessageError",
+  "fieldMessageSuccess",
+  "fieldMessageWarning",
   // Separator
   "separator",
   // Spinner
@@ -3654,6 +4062,7 @@ var layoutTheme = buildTheme({
   ...layoutStyle5,
   ...layoutStyle3,
   ...layoutStyle6,
+  ...layoutStyle7,
   ...layoutStyle
 });
 
@@ -3664,6 +4073,7 @@ var visualTheme = buildTheme({
   ...visualStyle5,
   ...visualStyle3,
   ...visualStyle6,
+  ...visualStyle7,
   ...visualStyle
 });
 var fullTheme = mergeTheme(layoutTheme, visualTheme);
@@ -3797,6 +4207,6 @@ var AppearanceProvider = (props) => {
   return /* @__PURE__ */ jsx(AppearanceContext.Provider, { value: ctxValue, children: props.children });
 };
 
-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 };
+export { Actions, Alert, AppearanceProvider, Body, Button, Checkbox, Connections, Content, Description, Footer, FooterAction, FooterActionButton, FooterActionLink, FooterActionText, Header, Hint, Icon, Input, InputGroup, InputGroupEnd, Label, LabelEnd, Logo, Message, Root, Root2, Separator, Title, cx, mergeDescriptors, translatePasswordError, useAppearance, useEnabledConnections, useLocalizations, useOptions };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-LLOUIL3Z.mjs.map
+//# sourceMappingURL=chunk-G52OCWYE.mjs.map