@carbonbits/sixr 1.4.0 → 1.5.0

package/dist/chunk-HDTW4FRT.js

@@ -0,0 +1,111 @@
+import { Typography } from './chunk-NZHHNVXZ.js';
+import { Slot } from '@radix-ui/react-slot';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var BASE_CLASSES = "inline-flex shrink-0 items-center justify-center gap-2 rounded-field border font-[inherit] text-field font-semibold outline-none transition-colors focus-visible:ring-3 focus-visible:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45";
+var VARIANT_CLASSES = {
+  primary: "border-transparent bg-accent text-on-accent enabled:hover:bg-accent-2",
+  secondary: "border-line bg-surface text-fg enabled:hover:bg-surface-2",
+  ghost: "border-transparent bg-transparent text-fg enabled:hover:bg-surface-2"
+};
+var SIZE_CLASSES = {
+  md: "h-10 px-4",
+  lg: "h-11 px-5"
+};
+var LABEL_TONE = {
+  primary: "on-accent",
+  secondary: "default",
+  ghost: "default"
+};
+function buttonClassName({
+  variant,
+  size,
+  fullWidth,
+  className
+}) {
+  return [
+    BASE_CLASSES,
+    VARIANT_CLASSES[variant],
+    SIZE_CLASSES[size],
+    fullWidth ? "w-full" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "h-4 w-4 animate-spin",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      "data-testid": "button-spinner",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z"
+          }
+        )
+      ]
+    }
+  );
+}
+function Button({
+  variant = "primary",
+  size = "md",
+  fullWidth = false,
+  loading = false,
+  loadingLabel,
+  asChild = false,
+  type = "button",
+  disabled,
+  className,
+  children,
+  ...rest
+}) {
+  const classes = buttonClassName({ variant, size, fullWidth, className });
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { ...rest, className: classes, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...rest,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      className: classes,
+      children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Spinner, {}),
+        loadingLabel
+      ] }) : /* @__PURE__ */ jsx(
+        Typography,
+        {
+          as: "span",
+          variant: "body",
+          weight: "semibold",
+          tone: LABEL_TONE[variant],
+          children
+        }
+      )
+    }
+  );
+}
+
+export { Button };
+//# sourceMappingURL=chunk-HDTW4FRT.js.map
+//# sourceMappingURL=chunk-HDTW4FRT.js.map

package/dist/chunk-HDTW4FRT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/button/index.tsx"],"names":[],"mappings":"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","file":"chunk-HDTW4FRT.js","sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ButtonHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { Typography, type TypographyTone } from \"@/components/typography\";\n\n/**\n * The design's primary action, as the auth screens use it: a 40px (or 44px)\n * accent-filled control with the field type scale, a 4px radius and the\n * shared 45% disabled opacity. `secondary` and `ghost` cover the quieter\n * actions that sit beside it.\n *\n * Server-safe: no state, no handlers of its own. `asChild` composes onto a\n * consumer's element — a `next/link` for a navigation styled as a button —\n * through Radix `Slot`, so the link keeps its own semantics. `loading` swaps\n * the label for a spinner and disables the control; it applies to the\n * rendered `<button>` only, since a child element owns its own content.\n */\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\";\nexport type ButtonSize = \"md\" | \"lg\";\n\nexport type ButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Stretch to the container, as the auth forms' submit does. */\n  fullWidth?: boolean;\n  /** Shows a spinner in place of the label and disables the control. */\n  loading?: boolean;\n  /** Shown next to the spinner while `loading`; nothing but the spinner otherwise. */\n  loadingLabel?: ReactNode;\n  /** Merge the styles onto the child element instead of rendering a button. */\n  asChild?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n  children: ReactNode;\n};\n\nconst BASE_CLASSES =\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-field border font-[inherit] text-field font-semibold outline-none transition-colors focus-visible:ring-3 focus-visible:ring-accent-soft disabled:cursor-not-allowed disabled:opacity-45\";\n\nconst VARIANT_CLASSES: Record<ButtonVariant, string> = {\n  primary:\n    \"border-transparent bg-accent text-on-accent enabled:hover:bg-accent-2\",\n  secondary: \"border-line bg-surface text-fg enabled:hover:bg-surface-2\",\n  ghost: \"border-transparent bg-transparent text-fg enabled:hover:bg-surface-2\",\n};\n\nconst SIZE_CLASSES: Record<ButtonSize, string> = {\n  md: \"h-10 px-4\",\n  lg: \"h-11 px-5\",\n};\n\nconst LABEL_TONE: Record<ButtonVariant, TypographyTone> = {\n  primary: \"on-accent\",\n  secondary: \"default\",\n  ghost: \"default\",\n};\n\nfunction buttonClassName({\n  variant,\n  size,\n  fullWidth,\n  className,\n}: {\n  variant: ButtonVariant;\n  size: ButtonSize;\n  fullWidth: boolean;\n  className: string | undefined;\n}): string {\n  return [\n    BASE_CLASSES,\n    VARIANT_CLASSES[variant],\n    SIZE_CLASSES[size],\n    fullWidth ? \"w-full\" : \"\",\n    className ?? \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction Spinner() {\n  return (\n    <svg\n      className=\"h-4 w-4 animate-spin\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      data-testid=\"button-spinner\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12H4Z\"\n      />\n    </svg>\n  );\n}\n\nexport function Button({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth = false,\n  loading = false,\n  loadingLabel,\n  asChild = false,\n  type = \"button\",\n  disabled,\n  className,\n  children,\n  ...rest\n}: ButtonProps) {\n  const classes = buttonClassName({ variant, size, fullWidth, className });\n\n  if (asChild) {\n    return (\n      <Slot {...rest} className={classes}>\n        {children}\n      </Slot>\n    );\n  }\n\n  return (\n    <button\n      {...rest}\n      type={type}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      className={classes}\n    >\n      {loading ? (\n        <>\n          <Spinner />\n          {loadingLabel}\n        </>\n      ) : (\n        <Typography\n          as=\"span\"\n          variant=\"body\"\n          weight=\"semibold\"\n          tone={LABEL_TONE[variant]}\n        >\n          {children}\n        </Typography>\n      )}\n    </button>\n  );\n}\n"]}

package/dist/email-input.cjs

@@ -28,81 +28,173 @@ module.exports = __toCommonJS(email_input_exports);
 
 // src/components/field/index.tsx
 var import_react_label = require("@radix-ui/react-label");
-var import_react2 = require("react");
-
-// src/components/field/use-field-behaviour.ts
+var import_react_slot = require("@radix-ui/react-slot");
 var import_react = require("react");
-var FALLBACK_MESSAGE = "Invalid value";
-function runSchema(schema, value) {
-  if (!schema) {
-    return { valid: true };
-  }
-  const result = schema.safeParse(value);
-  if (result.success) {
-    return { valid: true };
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FieldContext = (0, import_react.createContext)(null);
+function useFieldContext() {
+  const context = (0, import_react.useContext)(FieldContext);
+  if (!context) {
+    throw new Error("Field primitives must be rendered inside FieldRoot");
   }
+  return context;
+}
+function useFieldIds(id) {
+  const generated = (0, import_react.useId)();
+  const base = id ?? generated;
   return {
-    valid: false,
-    error: result.error.issues[0]?.message ?? FALLBACK_MESSAGE
+    id: base,
+    descriptionId: `${base}-description`,
+    messageId: `${base}-message`
   };
 }
-function useFieldBehaviour({
+function FieldShell({
   value,
-  defaultValue,
-  error,
-  onChange,
-  onBlur,
-  schema,
-  validateOn = "blur",
-  onValidationChange
+  asChild = false,
+  children,
+  ...rest
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react.useState)(
-    defaultValue ?? ""
-  );
-  const [schemaError, setSchemaError] = (0, import_react.useState)(void 0);
-  const isControlled = value !== void 0;
-  const validate = (0, import_react.useCallback)(
-    (next) => {
-      const state = runSchema(schema, next);
-      setSchemaError(state.error);
-      onValidationChange?.(state);
-    },
-    [schema, onValidationChange]
+  const [hasDescription, setHasDescription] = (0, import_react.useState)(false);
+  const Component = asChild ? import_react_slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldContext.Provider,
+    {
+      value: { ...value, hasDescription, setHasDescription },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Component,
+        {
+          ...rest,
+          "data-invalid": value.invalid ? "" : void 0,
+          "data-disabled": value.disabled ? "" : void 0,
+          children
+        }
+      )
+    }
   );
-  const handleChange = (0, import_react.useCallback)(
-    (event) => {
-      const next = event.target.value;
-      if (!isControlled) {
-        setUncontrolledValue(next);
-      }
-      onChange?.(next);
-      if (validateOn === "change" || validateOn === "blur" && schemaError) {
-        validate(next);
+}
+function ConnectedFieldRoot({
+  name,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  ...rest
+}) {
+  const ids = useFieldIds(id);
+  const { field, fieldState } = (0, import_react_hook_form.useController)({ name, disabled });
+  const shownError = error ?? fieldState.error?.message;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldShell,
+    {
+      ...rest,
+      value: {
+        ...ids,
+        name,
+        error: shownError,
+        invalid: Boolean(shownError),
+        required,
+        disabled: Boolean(field.disabled ?? disabled),
+        bindings: {
+          name: field.name,
+          value: field.value ?? "",
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          ref: field.ref
+        }
       }
-    },
-    [isControlled, onChange, validateOn, schemaError, validate]
+    }
   );
-  const handleBlur = (0, import_react.useCallback)(
-    (event) => {
-      if (validateOn === "blur") {
-        validate(event.target.value);
+}
+function StandaloneFieldRoot({
+  name,
+  error,
+  required = false,
+  disabled = false,
+  id,
+  ...rest
+}) {
+  const ids = useFieldIds(id);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldShell,
+    {
+      ...rest,
+      value: {
+        ...ids,
+        name,
+        error,
+        invalid: Boolean(error),
+        required,
+        disabled,
+        bindings: { name }
       }
-      onBlur?.(event);
-    },
-    [validateOn, validate, onBlur]
+    }
   );
-  return {
-    currentValue: isControlled ? value : uncontrolledValue,
-    // A caller-supplied error outranks the schema's verdict.
-    shownError: error ?? schemaError,
-    handleChange,
-    handleBlur
+}
+function FieldRoot(props) {
+  const form = (0, import_react_hook_form.useFormContext)();
+  return form ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConnectedFieldRoot, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StandaloneFieldRoot, { ...props });
+}
+function FieldLabel(props) {
+  const { id } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_label.Label, { ...props, htmlFor: id });
+}
+function describedBy({
+  error,
+  messageId,
+  hasDescription,
+  descriptionId
+}) {
+  if (error) {
+    return messageId;
+  }
+  return hasDescription ? descriptionId : void 0;
+}
+function FieldControl(props) {
+  const context = useFieldContext();
+  const { id, invalid, required, disabled, bindings } = context;
+  const controlProps = {
+    ...bindings,
+    id,
+    "aria-invalid": invalid || void 0,
+    "aria-required": required || void 0,
+    "aria-describedby": describedBy(context),
+    disabled: disabled || void 0
   };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slot, { ...props, ...controlProps });
+}
+function FieldDescription({
+  asChild = false,
+  ...props
+}) {
+  const { descriptionId, error, setHasDescription } = useFieldContext();
+  (0, import_react.useEffect)(() => {
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [setHasDescription]);
+  if (error) {
+    return null;
+  }
+  const Component = asChild ? import_react_slot.Slot : "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, id: descriptionId });
+}
+function FieldMessage({
+  asChild = false,
+  children,
+  ...props
+}) {
+  const { messageId, error } = useFieldContext();
+  const content = error ?? children;
+  if (!content) {
+    return null;
+  }
+  const Component = asChild ? import_react_slot.Slot : "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, id: messageId, role: "alert", children: content });
 }
 
 // src/components/typography/index.tsx
-var import_react_slot = require("@radix-ui/react-slot");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT = {
   display: "h1",
   heading: "h2",
@@ -189,14 +281,14 @@ function Typography({
   ...rest
 }) {
   const hasIcon = icon !== void 0 && icon !== null;
-  const Component = asChild ? import_react_slot.Slot : as ?? DEFAULT_ELEMENT[variant];
-  const iconNode = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: ICON_CLASSES, children: icon }) : null;
-  const content = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  const Component = asChild ? import_react_slot2.Slot : as ?? DEFAULT_ELEMENT[variant];
+  const iconNode = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", className: ICON_CLASSES, children: icon }) : null;
+  const content = hasIcon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     iconPosition === "leading" ? iconNode : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: truncate ? "min-w-0 truncate" : void 0, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: truncate ? "min-w-0 truncate" : void 0, children }),
     iconPosition === "trailing" ? iconNode : null
   ] }) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...rest,
@@ -214,38 +306,26 @@ function Typography({
   );
 }
 
-// src/components/field/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FIELD_CLASSES = "h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45";
+// src/components/input/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CONTROL_CLASSES = "h-10 w-full rounded-field border bg-surface px-3 font-[inherit] text-field text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-45";
 var VALID_CLASSES = "border-line focus:border-accent focus:ring-3 focus:ring-accent-soft";
 var INVALID_CLASSES = "border-danger focus:border-danger focus:ring-3 focus:ring-danger-soft";
-function fieldClassName(invalid, hasTrailing, className) {
-  return [
-    FIELD_CLASSES,
-    invalid ? INVALID_CLASSES : VALID_CLASSES,
-    hasTrailing ? "pr-16" : "",
-    className ?? ""
-  ].filter(Boolean).join(" ");
-}
-function FieldLabel({
-  htmlFor,
+function InputLabel({
   label,
   optional,
   action
 }) {
-  if (!label) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Typography,
     {
       variant: "label",
       tone: "muted",
       className: "mb-1.5 flex items-center",
       asChild: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_label.Label, { htmlFor, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FieldLabel, { children: [
         label,
-        optional ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        optional ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Typography,
           {
             as: "span",
@@ -256,114 +336,77 @@ function FieldLabel({
             children: "Optional"
           }
         ) : null,
-        action ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ml-auto", children: action }) : null
+        action ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ml-auto", children: action }) : null
       ] })
     }
   );
 }
-function FieldMessage({
-  id,
-  error,
-  hint
+function InputControl({
+  hasTrailing,
+  className,
+  ...rest
 }) {
+  const { invalid } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldControl, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      ...rest,
+      className: [
+        CONTROL_CLASSES,
+        invalid ? INVALID_CLASSES : VALID_CLASSES,
+        hasTrailing ? "pr-16" : "",
+        className ?? ""
+      ].filter(Boolean).join(" ")
+    }
+  ) });
+}
+function InputMessages({ hint }) {
+  const { error } = useFieldContext();
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      Typography,
-      {
-        as: "p",
-        variant: "hint",
-        tone: "danger",
-        id,
-        role: "alert",
-        className: "mt-1.5",
-        children: error
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typography, { as: "p", variant: "hint", tone: "danger", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { className: "mt-1.5" }) });
   }
   if (hint) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      Typography,
-      {
-        as: "p",
-        variant: "hint",
-        tone: "subtle",
-        id,
-        className: "mt-1.5",
-        children: hint
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typography, { as: "p", variant: "hint", tone: "subtle", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldDescription, { className: "mt-1.5", children: hint }) });
   }
   return null;
 }
-function Field({
+function InputField({
+  name,
   label,
   hint,
   error,
   optional = false,
   action,
   trailing,
-  type,
-  value,
-  defaultValue,
-  onChange,
-  schema,
-  validateOn = "blur",
-  onValidationChange,
   id,
-  className,
-  onBlur,
+  disabled,
+  required,
+  type,
   ...rest
 }) {
-  const generatedId = (0, import_react2.useId)();
-  const inputId = id ?? generatedId;
-  const describedById = `${inputId}-description`;
-  const { currentValue, shownError, handleChange, handleBlur } = useFieldBehaviour({
-    value,
-    defaultValue,
-    error,
-    onChange,
-    onBlur,
-    schema,
-    validateOn,
-    onValidationChange
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      FieldLabel,
-      {
-        htmlFor: inputId,
-        label,
-        optional,
-        action
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: trailing ? "relative" : void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "input",
-        {
-          ...rest,
-          id: inputId,
-          type,
-          value: currentValue,
-          "aria-invalid": shownError ? true : void 0,
-          "aria-describedby": shownError || hint ? describedById : void 0,
-          onChange: handleChange,
-          onBlur: handleBlur,
-          className: fieldClassName(
-            Boolean(shownError),
-            Boolean(trailing),
-            className
-          )
-        }
-      ),
-      trailing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute top-1/2 right-[9px] flex -translate-y-1/2 items-center text-hint font-semibold text-fg-subtle", children: trailing }) : null
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldMessage, { id: describedById, error: shownError, hint })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    FieldRoot,
+    {
+      name,
+      id,
+      error,
+      disabled,
+      required,
+      className: "flex flex-col",
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputLabel, { label, optional, action }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: trailing ? "relative" : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputControl, { ...rest, type, hasTrailing: Boolean(trailing) }),
+          trailing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute top-1/2 right-[9px] flex -translate-y-1/2 items-center font-semibold text-fg-subtle text-hint", children: trailing }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputMessages, { hint })
+      ]
+    }
+  );
 }
 
 // src/components/email-input/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function EmailInput({
   autoComplete = "email",
   inputMode = "email",
@@ -371,8 +414,8 @@ function EmailInput({
   spellCheck = false,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Field,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    InputField,
     {
       ...rest,
       type: "email",