@axenstudio/axen-form 0.1.4 → 0.1.5

package/dist/fields/AutocompleteField/AutocompleteField.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 AutocompleteField_module = require("./AutocompleteField.module.css.cjs");
 const DEBOUNCE_MS = 400;
 function AutocompleteField({
@@ -21,6 +22,7 @@ function AutocompleteField({
   options: staticOptions,
   fetchOptions,
   optionLabel,
+  icon,
   form
 }) {
   const [inputText, setInputText] = react.useState("");
@@ -156,6 +158,7 @@ function AutocompleteField({
   }, []);
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const listboxId = `${name}-listbox`;
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "autocomplete");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -166,7 +169,8 @@ function AutocompleteField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.inputWrap, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldUtils.cx(AutocompleteField_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",
         {
@@ -192,7 +196,11 @@ function AutocompleteField({
           "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
           "aria-autocomplete": "list",
           autoComplete: "off",
-          className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
+          className: fieldUtils.cx(
+            fieldBase_module.default.input,
+            resolvedIcon && fieldBase_module.default.inputWithIcon,
+            error && fieldBase_module.default.inputError
+          )
         }
       ),
       loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.spinner, "aria-hidden": "true" })

package/dist/fields/AutocompleteField/AutocompleteField.d.ts

@@ -1,5 +1,5 @@
 import { AutocompleteOption, FieldComponentProps } from '../../types';
-export declare function AutocompleteField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, options: staticOptions, fetchOptions, optionLabel, form, }: FieldComponentProps & {
+export declare function AutocompleteField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, options: staticOptions, fetchOptions, optionLabel, icon, form, }: FieldComponentProps & {
     fetchOptions?: (query: string, signal?: AbortSignal) => Promise<AutocompleteOption[]>;
     optionLabel?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompleteField/AutocompleteField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAO3E,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAgPA"}
+{"version":3,"file":"AutocompleteField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompleteField/AutocompleteField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQ3E,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAsPA"}

package/dist/fields/AutocompleteField/AutocompleteField.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } 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 "./AutocompleteField.module.css.js";
 const DEBOUNCE_MS = 400;
 function AutocompleteField({
@@ -19,6 +20,7 @@ function AutocompleteField({
   options: staticOptions,
   fetchOptions,
   optionLabel,
+  icon,
   form
 }) {
   const [inputText, setInputText] = useState("");
@@ -154,6 +156,7 @@ function AutocompleteField({
   }, []);
   const aria = ariaProps(name, { error, helperText, required, label });
   const listboxId = `${name}-listbox`;
+  const resolvedIcon = resolveFieldIcon(icon, "autocomplete");
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, children: [
     label && /* @__PURE__ */ jsx(
       "label",
@@ -164,7 +167,8 @@ function AutocompleteField({
         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",
         {
@@ -190,7 +194,11 @@ function AutocompleteField({
           "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
           "aria-autocomplete": "list",
           autoComplete: "off",
-          className: cx(styles.input, error && styles.inputError)
+          className: cx(
+            styles.input,
+            resolvedIcon && styles.inputWithIcon,
+            error && styles.inputError
+          )
         }
       ),
       loading && /* @__PURE__ */ jsx("span", { className: localStyles.spinner, "aria-hidden": "true" })

package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const AutocompleteField_module = require("../AutocompleteField/AutocompleteField.module.css.cjs");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 const DEBOUNCE_MS = 400;
 function AutocompleteMultiField({
   name,
@@ -21,6 +22,7 @@ function AutocompleteMultiField({
   options: staticOptions,
   fetchOptions,
   optionLabel,
+  icon,
   form
 }) {
   const [inputText, setInputText] = react.useState("");
@@ -172,6 +174,7 @@ function AutocompleteMultiField({
   }, []);
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const listboxId = `${name}-listbox`;
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "autocomplete-multi");
   const allPool = staticOptions ?? knownPoolRef.current;
   const resolveLabel = (val) => {
     const opt = allPool.find((o) => o.value === val);
@@ -193,6 +196,14 @@ function AutocompleteMultiField({
         className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError),
         style: { height: "auto", padding: 0 },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.chipWrap, children: [
+          resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: fieldBase_module.default.fieldIcon,
+              style: { position: "static", transform: "none", flexShrink: 0 },
+              children: resolvedIcon
+            }
+          ),
           selectedValues.map((val) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AutocompleteField_module.default.chip, children: [
             resolveLabel(val),
             !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts

@@ -1,5 +1,5 @@
 import { AutocompleteOption, FieldComponentProps } from '../../types';
-export declare function AutocompleteMultiField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, options: staticOptions, fetchOptions, optionLabel, form, }: FieldComponentProps & {
+export declare function AutocompleteMultiField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, options: staticOptions, fetchOptions, optionLabel, icon, form, }: FieldComponentProps & {
     fetchOptions?: (query: string, signal?: AbortSignal) => Promise<AutocompleteOption[]>;
     optionLabel?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteMultiField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompleteMultiField/AutocompleteMultiField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAO3E,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAsRA"}
+{"version":3,"file":"AutocompleteMultiField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompleteMultiField/AutocompleteMultiField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQ3E,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CA+RA"}

package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.js

@@ -3,6 +3,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import localStyles from "../AutocompleteField/AutocompleteField.module.css.js";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { resolveFieldIcon } from "../iconUtils.js";
 const DEBOUNCE_MS = 400;
 function AutocompleteMultiField({
   name,
@@ -19,6 +20,7 @@ function AutocompleteMultiField({
   options: staticOptions,
   fetchOptions,
   optionLabel,
+  icon,
   form
 }) {
   const [inputText, setInputText] = useState("");
@@ -170,6 +172,7 @@ function AutocompleteMultiField({
   }, []);
   const aria = ariaProps(name, { error, helperText, required, label });
   const listboxId = `${name}-listbox`;
+  const resolvedIcon = resolveFieldIcon(icon, "autocomplete-multi");
   const allPool = staticOptions ?? knownPoolRef.current;
   const resolveLabel = (val) => {
     const opt = allPool.find((o) => o.value === val);
@@ -191,6 +194,14 @@ function AutocompleteMultiField({
         className: cx(styles.input, error && styles.inputError),
         style: { height: "auto", padding: 0 },
         children: /* @__PURE__ */ jsxs("div", { className: localStyles.chipWrap, children: [
+          resolvedIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: styles.fieldIcon,
+              style: { position: "static", transform: "none", flexShrink: 0 },
+              children: resolvedIcon
+            }
+          ),
           selectedValues.map((val) => /* @__PURE__ */ jsxs("span", { className: localStyles.chip, children: [
             resolveLabel(val),
             !disabled && !readOnly && /* @__PURE__ */ jsx(

package/dist/fields/AutocompletePredictField/AutocompletePredictField.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const AutocompleteField_module = require("../AutocompleteField/AutocompleteField.module.css.cjs");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 const DEBOUNCE_MS = 400;
 function AutocompletePredictField({
   name,
@@ -21,6 +22,7 @@ function AutocompletePredictField({
   options: staticOptions,
   fetchOptions,
   optionLabel,
+  icon,
   form
 }) {
   const [inputText, setInputText] = react.useState("");
@@ -202,6 +204,7 @@ function AutocompletePredictField({
   }, []);
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const listboxId = `${name}-listbox`;
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "autocomplete-predict");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -212,7 +215,8 @@ function AutocompletePredictField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.predictWrap, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldUtils.cx(AutocompleteField_module.default.predictWrap, resolvedIcon && fieldBase_module.default.inputIconWrapper), children: [
+      resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
       ghostText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.ghostText, "aria-hidden": "true", children: ghostText }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { ref: measureRef, className: AutocompleteField_module.default.ghostHidden, "aria-hidden": "true", children: inputText }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -240,7 +244,11 @@ function AutocompletePredictField({
           "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
           "aria-autocomplete": "both",
           autoComplete: "off",
-          className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError),
+          className: fieldUtils.cx(
+            fieldBase_module.default.input,
+            resolvedIcon && fieldBase_module.default.inputWithIcon,
+            error && fieldBase_module.default.inputError
+          ),
           style: { background: "transparent", position: "relative", zIndex: 1 }
         }
       ),

package/dist/fields/AutocompletePredictField/AutocompletePredictField.d.ts

@@ -3,7 +3,7 @@ import { AutocompleteOption, FieldComponentProps } from '../../types';
  * Autocomplete with predictive ghost text.
  * Shows a faded suggestion that can be accepted with Tab.
  */
-export declare function AutocompletePredictField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, options: staticOptions, fetchOptions, optionLabel, form, }: FieldComponentProps & {
+export declare function AutocompletePredictField({ name, value, onChange: _onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, options: staticOptions, fetchOptions, optionLabel, icon, form, }: FieldComponentProps & {
     fetchOptions?: (query: string, signal?: AbortSignal) => Promise<AutocompleteOption[]>;
     optionLabel?: string;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompletePredictField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompletePredictField/AutocompletePredictField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAO3E;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAiSA"}
+{"version":3,"file":"AutocompletePredictField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompletePredictField/AutocompletePredictField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQ3E;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAuSA"}

package/dist/fields/AutocompletePredictField/AutocompletePredictField.js

@@ -3,6 +3,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import localStyles from "../AutocompleteField/AutocompleteField.module.css.js";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { resolveFieldIcon } from "../iconUtils.js";
 const DEBOUNCE_MS = 400;
 function AutocompletePredictField({
   name,
@@ -19,6 +20,7 @@ function AutocompletePredictField({
   options: staticOptions,
   fetchOptions,
   optionLabel,
+  icon,
   form
 }) {
   const [inputText, setInputText] = useState("");
@@ -200,6 +202,7 @@ function AutocompletePredictField({
   }, []);
   const aria = ariaProps(name, { error, helperText, required, label });
   const listboxId = `${name}-listbox`;
+  const resolvedIcon = resolveFieldIcon(icon, "autocomplete-predict");
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, children: [
     label && /* @__PURE__ */ jsx(
       "label",
@@ -210,7 +213,8 @@ function AutocompletePredictField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: localStyles.predictWrap, children: [
+    /* @__PURE__ */ jsxs("div", { className: cx(localStyles.predictWrap, resolvedIcon && styles.inputIconWrapper), children: [
+      resolvedIcon && /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
       ghostText && /* @__PURE__ */ jsx("span", { className: localStyles.ghostText, "aria-hidden": "true", children: ghostText }),
       /* @__PURE__ */ jsx("span", { ref: measureRef, className: localStyles.ghostHidden, "aria-hidden": "true", children: inputText }),
       /* @__PURE__ */ jsx(
@@ -238,7 +242,11 @@ function AutocompletePredictField({
           "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
           "aria-autocomplete": "both",
           autoComplete: "off",
-          className: cx(styles.input, error && styles.inputError),
+          className: cx(
+            styles.input,
+            resolvedIcon && styles.inputWithIcon,
+            error && styles.inputError
+          ),
           style: { background: "transparent", position: "relative", zIndex: 1 }
         }
       ),

package/dist/fields/DateField/DateField.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const dateUtils = require("../../core/dateUtils.cjs");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 function DateField({
   name,
   value,
@@ -18,15 +19,35 @@ function DateField({
   required,
   min,
   max,
-  locale
+  locale,
+  icon
 }) {
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? dateUtils.getDefaultLocale();
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "date");
   const dateValue = typeof value === "string" ? value : "";
   const displayText = dateValue ? dateUtils.formatDateLocale(dateValue, resolvedLocale) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...aria,
+      type: "date",
+      name,
+      value: dateValue,
+      onChange: handleChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      min,
+      max,
+      lang: resolvedLocale,
+      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",
@@ -37,24 +58,10 @@ function DateField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ...aria,
-        type: "date",
-        name,
-        value: dateValue,
-        onChange: handleChange,
-        onBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        min,
-        max,
-        lang: resolvedLocale,
-        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,
     displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",

package/dist/fields/DateField/DateField.d.ts

@@ -1,5 +1,5 @@
 import { FieldComponentProps } from '../../types';
-export declare function DateField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, locale, }: Readonly<FieldComponentProps & {
+export declare function DateField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, locale, icon, }: Readonly<FieldComponentProps & {
     min?: string;
     max?: string;
     locale?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateField/DateField.tsx"],"names":[],"mappings":"AAEA,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,EACR,GAAG,EACH,GAAG,EACH,MAAM,GACP,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAyDjF"}
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateField/DateField.tsx"],"names":[],"mappings":"AAEA,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,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAoEjF"}

package/dist/fields/DateField/DateField.js

@@ -1,7 +1,8 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { formatDateLocale, getDefaultLocale } from "../../core/dateUtils.js";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { resolveFieldIcon } from "../iconUtils.js";
 function DateField({
   name,
   value,
@@ -16,15 +17,35 @@ function DateField({
   required,
   min,
   max,
-  locale
+  locale,
+  icon
 }) {
   const aria = ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? getDefaultLocale();
+  const resolvedIcon = resolveFieldIcon(icon, "date");
   const dateValue = typeof value === "string" ? value : "";
   const displayText = dateValue ? formatDateLocale(dateValue, resolvedLocale) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const inputEl = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...aria,
+      type: "date",
+      name,
+      value: dateValue,
+      onChange: handleChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      min,
+      max,
+      lang: resolvedLocale,
+      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
     label && /* @__PURE__ */ jsx(
       "label",
@@ -35,24 +56,10 @@ function DateField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ...aria,
-        type: "date",
-        name,
-        value: dateValue,
-        onChange: handleChange,
-        onBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        min,
-        max,
-        lang: resolvedLocale,
-        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,
     displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsx(
       "span",

package/dist/fields/DateTimeField/DateTimeField.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const dateUtils = require("../../core/dateUtils.cjs");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 function DateTimeField({
   name,
   value,
@@ -19,15 +20,35 @@ function DateTimeField({
   min,
   max,
   locale,
-  ampm
+  ampm,
+  icon
 }) {
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? dateUtils.getDefaultLocale();
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "datetime");
   const dtValue = typeof value === "string" ? value : "";
   const displayText = dtValue ? dateUtils.formatDateTimeLocale(dtValue, resolvedLocale, ampm) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...aria,
+      type: "datetime-local",
+      name,
+      value: dtValue,
+      onChange: handleChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      min,
+      max,
+      lang: resolvedLocale,
+      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",
@@ -38,24 +59,10 @@ function DateTimeField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ...aria,
-        type: "datetime-local",
-        name,
-        value: dtValue,
-        onChange: handleChange,
-        onBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        min,
-        max,
-        lang: resolvedLocale,
-        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,
     displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",

package/dist/fields/DateTimeField/DateTimeField.d.ts

@@ -1,5 +1,5 @@
 import { FieldComponentProps } from '../../types';
-export declare function DateTimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, locale, ampm, }: Readonly<FieldComponentProps & {
+export declare function DateTimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, min, max, locale, ampm, icon, }: Readonly<FieldComponentProps & {
     min?: string;
     max?: string;
     locale?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTimeField/DateTimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,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,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,GACL,EAAE,QAAQ,CACT,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CACtF,2CAyDA"}
+{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTimeField/DateTimeField.tsx"],"names":[],"mappings":"AAEA,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,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,EACJ,IAAI,GACL,EAAE,QAAQ,CACT,mBAAmB,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CACtF,2CAiEA"}

package/dist/fields/DateTimeField/DateTimeField.js

@@ -1,7 +1,8 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { formatDateTimeLocale, getDefaultLocale } from "../../core/dateUtils.js";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { resolveFieldIcon } from "../iconUtils.js";
 function DateTimeField({
   name,
   value,
@@ -17,15 +18,35 @@ function DateTimeField({
   min,
   max,
   locale,
-  ampm
+  ampm,
+  icon
 }) {
   const aria = ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? getDefaultLocale();
+  const resolvedIcon = resolveFieldIcon(icon, "datetime");
   const dtValue = typeof value === "string" ? value : "";
   const displayText = dtValue ? formatDateTimeLocale(dtValue, resolvedLocale, ampm) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const inputEl = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...aria,
+      type: "datetime-local",
+      name,
+      value: dtValue,
+      onChange: handleChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      min,
+      max,
+      lang: resolvedLocale,
+      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
     label && /* @__PURE__ */ jsx(
       "label",
@@ -36,24 +57,10 @@ function DateTimeField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ...aria,
-        type: "datetime-local",
-        name,
-        value: dtValue,
-        onChange: handleChange,
-        onBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        min,
-        max,
-        lang: resolvedLocale,
-        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,
     displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsx(
       "span",