@axenstudio/axen-form 0.1.4 → 0.1.5

package/dist/fields/EmailField/EmailField.cjs

@@ -3,25 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
-const EmailIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
-    ]
-  }
-);
+const iconUtils = require("../iconUtils.cjs");
 function EmailField({
   name,
   value,
@@ -33,9 +15,27 @@ function EmailField({
   placeholder,
   disabled,
   readOnly,
-  required
+  required,
+  icon
 }) {
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "email");
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...aria,
+      type: "email",
+      name,
+      value: value ?? "",
+      onChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      autoComplete: "email",
+      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -46,25 +46,10 @@ function EmailField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputGroup, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputPrefix, children: /* @__PURE__ */ jsxRuntime.jsx(EmailIcon, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ...aria,
-          type: "email",
-          name,
-          value: value ?? "",
-          onChange,
-          onBlur,
-          placeholder: placeholder ?? "user@example.com",
-          disabled,
-          readOnly,
-          autoComplete: "email",
-          className: fieldUtils.cx(fieldBase_module.default.input, fieldBase_module.default.inputGroupInput, error && fieldBase_module.default.inputError)
-        }
-      )
-    ] }),
+    resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
+      inputEl
+    ] }) : inputEl,
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {

package/dist/fields/EmailField/EmailField.d.ts

@@ -1,3 +1,3 @@
 import { FieldComponentProps } from '../../types';
-export declare function EmailField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
+export declare function EmailField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, icon, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EmailField.d.ts.map

package/dist/fields/EmailField/EmailField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailField.d.ts","sourceRoot":"","sources":["../../../src/fields/EmailField/EmailField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAsBvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CA2C/B"}
+{"version":3,"file":"EmailField.d.ts","sourceRoot":"","sources":["../../../src/fields/EmailField/EmailField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAkD/B"}

package/dist/fields/EmailField/EmailField.js

@@ -1,25 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
-const EmailIcon = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
-      /* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
-    ]
-  }
-);
+import { resolveFieldIcon } from "../iconUtils.js";
 function EmailField({
   name,
   value,
@@ -31,9 +13,27 @@ function EmailField({
   placeholder,
   disabled,
   readOnly,
-  required
+  required,
+  icon
 }) {
   const aria = ariaProps(name, { error, helperText, required, label });
+  const resolvedIcon = resolveFieldIcon(icon, "email");
+  const inputEl = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...aria,
+      type: "email",
+      name,
+      value: value ?? "",
+      onChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      autoComplete: "email",
+      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
     label && /* @__PURE__ */ jsx(
       "label",
@@ -44,25 +44,10 @@ function EmailField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
-      /* @__PURE__ */ jsx("span", { className: styles.inputPrefix, children: /* @__PURE__ */ jsx(EmailIcon, {}) }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ...aria,
-          type: "email",
-          name,
-          value: value ?? "",
-          onChange,
-          onBlur,
-          placeholder: placeholder ?? "user@example.com",
-          disabled,
-          readOnly,
-          autoComplete: "email",
-          className: cx(styles.input, styles.inputGroupInput, error && styles.inputError)
-        }
-      )
-    ] }),
+    resolvedIcon ? /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
+      inputEl
+    ] }) : inputEl,
     helperText && /* @__PURE__ */ jsx(
       "span",
       {

package/dist/fields/NumberField/NumberField.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const numberUtils = require("../../core/numberUtils.cjs");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 function NumberField({
   name,
   value,
@@ -23,6 +24,7 @@ function NumberField({
   prefix,
   suffix,
   locale,
+  icon,
   form
 }) {
   const inputRef = react.useRef(null);
@@ -60,6 +62,7 @@ function NumberField({
   }
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const hasAdornment = prefix || suffix;
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "number");
   const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -77,10 +80,27 @@ function NumberField({
       step,
       className: fieldUtils.cx(
         hasAdornment ? fieldUtils.cx(fieldBase_module.default.input, fieldBase_module.default.inputGroupInput) : fieldBase_module.default.input,
+        !hasAdornment && resolvedIcon && fieldBase_module.default.inputWithIcon,
         error && fieldBase_module.default.inputError
       )
     }
   );
+  const renderInput = () => {
+    if (hasAdornment) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputGroup, children: [
+        prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputPrefix, children: prefix }),
+        inputEl,
+        suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputSuffix, children: suffix })
+      ] });
+    }
+    if (resolvedIcon) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
+        inputEl
+      ] });
+    }
+    return inputEl;
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -91,11 +111,7 @@ function NumberField({
         children: label
       }
     ),
-    hasAdornment ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputGroup, children: [
-      prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputPrefix, children: prefix }),
-      inputEl,
-      suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.inputSuffix, children: suffix })
-    ] }) : inputEl,
+    renderInput(),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {

package/dist/fields/NumberField/NumberField.d.ts

@@ -1,5 +1,5 @@
 import { FieldComponentProps } from '../../types';
-export declare function NumberField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, step, prefix, suffix, locale, form, }: FieldComponentProps & {
+export declare function NumberField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, step, prefix, suffix, locale, icon, form, }: FieldComponentProps & {
     min?: number;
     max?: number;
     step?: number;

package/dist/fields/NumberField/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/fields/NumberField/NumberField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,EACJ,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CA0GA"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/fields/NumberField/NumberField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,EACJ,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CAyHA"}

package/dist/fields/NumberField/NumberField.js

@@ -3,6 +3,7 @@ import { useRef, useLayoutEffect, useCallback } from "react";
 import { stripNonNumeric, formatNumber, calculateCursorPosition } from "../../core/numberUtils.js";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { resolveFieldIcon } from "../iconUtils.js";
 function NumberField({
   name,
   value,
@@ -21,6 +22,7 @@ function NumberField({
   prefix,
   suffix,
   locale,
+  icon,
   form
 }) {
   const inputRef = useRef(null);
@@ -58,6 +60,7 @@ function NumberField({
   }
   const aria = ariaProps(name, { error, helperText, required, label });
   const hasAdornment = prefix || suffix;
+  const resolvedIcon = resolveFieldIcon(icon, "number");
   const inputEl = /* @__PURE__ */ jsx(
     "input",
     {
@@ -75,10 +78,27 @@ function NumberField({
       step,
       className: cx(
         hasAdornment ? cx(styles.input, styles.inputGroupInput) : styles.input,
+        !hasAdornment && resolvedIcon && styles.inputWithIcon,
         error && styles.inputError
       )
     }
   );
+  const renderInput = () => {
+    if (hasAdornment) {
+      return /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
+        prefix && /* @__PURE__ */ jsx("span", { className: styles.inputPrefix, children: prefix }),
+        inputEl,
+        suffix && /* @__PURE__ */ jsx("span", { className: styles.inputSuffix, children: suffix })
+      ] });
+    }
+    if (resolvedIcon) {
+      return /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
+        inputEl
+      ] });
+    }
+    return inputEl;
+  };
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
     label && /* @__PURE__ */ jsx(
       "label",
@@ -89,11 +109,7 @@ function NumberField({
         children: label
       }
     ),
-    hasAdornment ? /* @__PURE__ */ jsxs("div", { className: styles.inputGroup, children: [
-      prefix && /* @__PURE__ */ jsx("span", { className: styles.inputPrefix, children: prefix }),
-      inputEl,
-      suffix && /* @__PURE__ */ jsx("span", { className: styles.inputSuffix, children: suffix })
-    ] }) : inputEl,
+    renderInput(),
     helperText && /* @__PURE__ */ jsx(
       "span",
       {

package/dist/fields/PasswordField/PasswordField.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 const PasswordField_module = require("./PasswordField.module.css.cjs");
 function PasswordField({
   name,
@@ -16,10 +17,12 @@ function PasswordField({
   placeholder,
   disabled,
   readOnly,
-  required
+  required,
+  icon
 }) {
   const [visible, setVisible] = react.useState(false);
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "password");
   const toggleVisible = react.useCallback(() => {
     setVisible((v) => !v);
   }, []);
@@ -33,7 +36,8 @@ function PasswordField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: PasswordField_module.default.inputWrap, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldUtils.cx(PasswordField_module.default.inputWrap, resolvedIcon && fieldBase_module.default.inputIconWrapper), children: [
+      resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -47,7 +51,12 @@ function PasswordField({
           disabled,
           readOnly,
           autoComplete: "current-password",
-          className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError, PasswordField_module.default.passwordInput)
+          className: fieldUtils.cx(
+            fieldBase_module.default.input,
+            error && fieldBase_module.default.inputError,
+            PasswordField_module.default.passwordInput,
+            resolvedIcon && fieldBase_module.default.inputWithIcon
+          )
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/fields/PasswordField/PasswordField.d.ts

@@ -1,3 +1,3 @@
 import { FieldComponentProps } from '../../types';
-export declare function PasswordField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
+export declare function PasswordField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, icon, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PasswordField.d.ts.map

package/dist/fields/PasswordField/PasswordField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../src/fields/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAuD/B"}
+{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../src/fields/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAMvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CA8D/B"}

package/dist/fields/PasswordField/PasswordField.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { resolveFieldIcon } from "../iconUtils.js";
 import localStyles from "./PasswordField.module.css.js";
 function PasswordField({
   name,
@@ -14,10 +15,12 @@ function PasswordField({
   placeholder,
   disabled,
   readOnly,
-  required
+  required,
+  icon
 }) {
   const [visible, setVisible] = useState(false);
   const aria = ariaProps(name, { error, helperText, required, label });
+  const resolvedIcon = resolveFieldIcon(icon, "password");
   const toggleVisible = useCallback(() => {
     setVisible((v) => !v);
   }, []);
@@ -31,7 +34,8 @@ function PasswordField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: localStyles.inputWrap, children: [
+    /* @__PURE__ */ jsxs("div", { className: cx(localStyles.inputWrap, resolvedIcon && styles.inputIconWrapper), children: [
+      resolvedIcon && /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -45,7 +49,12 @@ function PasswordField({
           disabled,
           readOnly,
           autoComplete: "current-password",
-          className: cx(styles.input, error && styles.inputError, localStyles.passwordInput)
+          className: cx(
+            styles.input,
+            error && styles.inputError,
+            localStyles.passwordInput,
+            resolvedIcon && styles.inputWithIcon
+          )
         }
       ),
       /* @__PURE__ */ jsx(

package/dist/fields/PhoneField/PhoneField.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 function PhoneField({
   name,
   value,
@@ -14,9 +15,28 @@ function PhoneField({
   placeholder,
   disabled,
   readOnly,
-  required
+  required,
+  icon
 }) {
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "phone");
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...aria,
+      type: "tel",
+      name,
+      value: value ?? "",
+      onChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      autoComplete: "tel",
+      inputMode: "tel",
+      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -27,23 +47,10 @@ function PhoneField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ...aria,
-        type: "tel",
-        name,
-        value: value ?? "",
-        onChange,
-        onBlur,
-        placeholder: placeholder ?? "+1 (555) 000-0000",
-        disabled,
-        readOnly,
-        autoComplete: "tel",
-        inputMode: "tel",
-        className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
-      }
-    ),
+    resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
+      inputEl
+    ] }) : inputEl,
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {

package/dist/fields/PhoneField/PhoneField.d.ts

@@ -1,3 +1,3 @@
 import { FieldComponentProps } from '../../types';
-export declare function PhoneField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, icon, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PhoneField.d.ts.map

package/dist/fields/PhoneField/PhoneField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../src/fields/PhoneField/PhoneField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAuC/B"}
+{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../src/fields/PhoneField/PhoneField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAmD/B"}

package/dist/fields/PhoneField/PhoneField.js

@@ -1,6 +1,7 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { resolveFieldIcon } from "../iconUtils.js";
 function PhoneField({
   name,
   value,
@@ -12,9 +13,28 @@ function PhoneField({
   placeholder,
   disabled,
   readOnly,
-  required
+  required,
+  icon
 }) {
   const aria = ariaProps(name, { error, helperText, required, label });
+  const resolvedIcon = resolveFieldIcon(icon, "phone");
+  const inputEl = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...aria,
+      type: "tel",
+      name,
+      value: value ?? "",
+      onChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      autoComplete: "tel",
+      inputMode: "tel",
+      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
     label && /* @__PURE__ */ jsx(
       "label",
@@ -25,23 +45,10 @@ function PhoneField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ...aria,
-        type: "tel",
-        name,
-        value: value ?? "",
-        onChange,
-        onBlur,
-        placeholder: placeholder ?? "+1 (555) 000-0000",
-        disabled,
-        readOnly,
-        autoComplete: "tel",
-        inputMode: "tel",
-        className: cx(styles.input, error && styles.inputError)
-      }
-    ),
+    resolvedIcon ? /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
+      inputEl
+    ] }) : inputEl,
     helperText && /* @__PURE__ */ jsx(
       "span",
       {

package/dist/fields/TextField/TextField.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 function TextField({
   name,
   value,
@@ -14,9 +15,26 @@ function TextField({
   placeholder,
   disabled,
   readOnly,
-  required
+  required,
+  icon
 }) {
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "text");
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...aria,
+      type: "text",
+      name,
+      value: value ?? "",
+      onChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -27,21 +45,10 @@ function TextField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ...aria,
-        type: "text",
-        name,
-        value: value ?? "",
-        onChange,
-        onBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
-      }
-    ),
+    resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
+      inputEl
+    ] }) : inputEl,
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {

package/dist/fields/TextField/TextField.d.ts

@@ -1,3 +1,3 @@
 import { FieldComponentProps } from '../../types';
-export declare function TextField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TextField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, icon, }: Readonly<FieldComponentProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/fields/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/fields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAqC/B"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/fields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAiD/B"}