jcicl 2.0.2 → 4.0.2

package/DesktopStepper/DesktopStepper.d.ts

@@ -7,18 +7,22 @@ export type StepProps = {
 export declare const Step: React.FC<PropsWithChildren<StepProps>>;
 /** Imperative handle for driving the stepper from a parent (e.g. jumping to a step with errors). */
 export type DesktopStepperHandle = {
-    /** Animate to the given step index (clamped to the valid range). */
+    /** Animate to the given step index unless validation errors are found during onNext (clamped to the valid range). */
     goToStep: (index: number) => void;
 };
 export type DesktopStepperProps = {
     onNext?: (step?: number) => boolean;
     onFinish: () => Promise<void>;
     onBack?: () => void;
+    /** Determines which step titles are clickable. 'next' allows clicking on the next and all previous steps, 'back' allows clicking on previous steps (default), 'all' allows clicking on all steps, and 'none' disables clicking. */
+    clickVariant?: 'next' | 'back' | 'all' | 'none';
+    submitButtonLabel?: string;
     /** If true, the stepper will maintain the height of the tallest step. */
     staticHeight?: boolean;
     /** Optional imperative handle exposing `goToStep` for programmatic navigation. */
     ref?: React.Ref<DesktopStepperHandle>;
     children: React.ReactElement<StepProps>[];
+    className?: string;
 };
-declare const DesktopStepper: ({ onNext, onBack, onFinish, staticHeight, ref, children, }: PropsWithChildren<DesktopStepperProps>) => import("react/jsx-runtime").JSX.Element;
+declare const DesktopStepper: ({ onNext, onBack, onFinish, staticHeight, clickVariant, submitButtonLabel, ref, children, className, }: PropsWithChildren<DesktopStepperProps>) => import("react/jsx-runtime").JSX.Element;
 export default DesktopStepper;

package/DesktopStepper/DesktopStepper.js

@@ -1,204 +1,245 @@
-import { jsx as t, jsxs as p, Fragment as G } from "react/jsx-runtime";
-import { useState as y, useRef as N, Children as le, isValidElement as se, useLayoutEffect as oe, useEffect as ie, useCallback as J, useImperativeHandle as ne, Fragment as ce } from "react";
-import { flushSync as C } from "react-dom";
-import { cn as s } from "../cn.js";
-import { Button as K } from "../Button/Button.js";
-import { Flex as T } from "../Flex/Flex.js";
-import { SlideOut as ae, SlideIn as ue, SlideInReverse as P, SlideOutReverse as de } from "../animation/Slide/Slide.js";
-import { useThemeColors as O } from "../ThemeContext.js";
-import x from "../theme.js";
-import { useIsMobile as U } from "../utils.js";
-import { C as me } from "../.chunks/check.js";
-const Me = ({ title: i, children: n, className: o }) => /* @__PURE__ */ t("div", { title: i, className: s("p-2.5 w-full", o), children: n }), pe = ({ label: i, number: n, completed: o, active: c }) => {
-  const h = O(), R = U(), e = {
+import { jsx as l, jsxs as h, Fragment as X } from "react/jsx-runtime";
+import { useState as C, useRef as x, Children as ae, isValidElement as ue, useLayoutEffect as me, useEffect as de, useCallback as L, useImperativeHandle as fe } from "react";
+import { flushSync as Y } from "react-dom";
+import { cn as n } from "../cn.js";
+import { Button as Z } from "../Button/Button.js";
+import { Flex as _ } from "../Flex/Flex.js";
+import { SlideOut as he, SlideIn as pe, SlideInReverse as V, SlideOutReverse as be } from "../animation/Slide/Slide.js";
+import { useThemeColors as A } from "../ThemeContext.js";
+import g from "../theme.js";
+import { useIsMobile as ee } from "../utils.js";
+import { C as ve } from "../.chunks/check.js";
+const _e = ({ children: s, className: i }) => /* @__PURE__ */ l("div", { className: n("p-2.5 w-full", i), children: s }), Ce = ({ label: s, number: i, completed: u, active: c, onClick: m }) => {
+  const b = A(), j = ee(), N = {
     "--item-circle-transition-delay": c ? "0.3s" : "0s",
-    "--item-circle-border": h.themeColor,
-    "--item-circle-bg": c || o ? h.themeColor : "transparent",
-    "--item-circle-color": c || o ? x.colors.white : h.themeColor,
-    "--label-color": h.themeColor,
-    "--label-opacity": c ? 1 : 0.7
+    "--item-circle-border": b.themeColor,
+    "--item-circle-bg": c || u ? b.themeColor : "transparent",
+    "--item-circle-color": c || u ? g.colors.white : b.themeColor,
+    "--label-color": b.themeColor,
+    "--label-opacity": c ? 1 : 0.8,
+    "--label-weight": c ? "500" : "400"
   };
-  return /* @__PURE__ */ t("div", { style: e, className: s("stepperTitleItem font-medium justify-center items-center"), children: /* @__PURE__ */ p(T, { column: !0, alignItems: "center", gap: "4px", children: [
-    /* @__PURE__ */ t("div", { className: s("itemCircle", "justify-center flex box-border items-center select-none transition-all duration-300 delay-(--item-circle-transition-delay) ease-in-out w-[35px] h-[35px] mx-[8px] rounded-full border-[2px] border-(--item-circle-border) bg-(--item-circle-bg) text-(--item-circle-color)"), children: o ? /* @__PURE__ */ t(me, { size: 18, strokeWidth: 3 }) : n }),
-    /* @__PURE__ */ t("div", { className: s("label", "text-(--label-color) text-center opacity-(--label-opacity) transition-[all_0.5s_ease]", R && "px-[5px]"), children: i })
+  return /* @__PURE__ */ l("div", { style: N, className: n("stepperTitleItem font-medium justify-center items-center"), children: /* @__PURE__ */ h(_, { column: !0, alignItems: "center", gap: "4px", children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: n("itemCircle", "font-[inherit] font-medium! justify-center flex box-border items-center select-none transition-all duration-300 delay-(--item-circle-transition-delay) ease-in-out w-[35px] h-[35px] mx-[8px] rounded-full border-[2px] border-(--item-circle-border) bg-(--item-circle-bg) text-(--item-circle-color)", m && "cursor-pointer"),
+        onClick: m,
+        disabled: !m,
+        children: u ? /* @__PURE__ */ l(ve, { size: 18, strokeWidth: 3 }) : i
+      }
+    ),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: n("label", "cursor-default text-sm mx-1 text-(--label-color) text-center opacity-(--label-opacity) font-(--label-weight) transition-[all_0.5s_ease]", j && "px-[5px]", m && "cursor-pointer"),
+        onClick: m,
+        children: s
+      }
+    )
   ] }) });
-}, he = ({ activated: i }) => {
-  const n = O(), o = {
-    "--title-slider-active-color": n.themeColor,
-    "--title-slider-active-percent": i ? "50%" : "49%",
-    "--title-slider-inactive-color": n.themeLightA,
-    "--title-slider-position": i ? "left bottom" : "right bottom"
+}, ge = ({ activated: s }) => {
+  const i = A(), u = {
+    "--title-slider-active-color": i.themeColor,
+    "--title-slider-active-percent": s ? "50%" : "49%",
+    "--title-slider-inactive-color": i.themeLightA,
+    "--title-slider-position": s ? "left bottom" : "right bottom"
   };
-  return /* @__PURE__ */ t("div", { className: s("flex-1 h-[3px] rounded-[2px] self-start mt-[16px] bg-[linear-gradient(to_right,var(--title-slider-active-color)_var(--title-slider-active-percent),var(--title-slider-inactive-color)_50%)] bg-size-[200%_100%] bg-[position:var(--title-slider-position)] transition-background-position duration-500 ease-in-out"), style: o });
-}, fe = "relative w-full h-full flex items-center justify-between flex-col gap-[15px] m-0 bg-transparent overflow-hidden", Q = "absolute top-0 w-full h-full", be = "relative w-full [&_.jcSlideContainer]:justify-items-center", Ce = "will-change-[height] transition-[height] duration-500 ease-[cubic-bezier(0.2,0,0,1)]", Ee = ({
-  onNext: i = () => !0,
-  onBack: n,
-  onFinish: o,
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: n(
+        "absolute top-4 left-[calc(50%+25px)] h-0.75 w-[calc(100%-50px)] rounded-sm bg-size-[200%_100%] duration-500 ease-in-out",
+        "bg-[linear-gradient(to_right,var(--title-slider-active-color)_var(--title-slider-active-percent),var(--title-slider-inactive-color)_50%)] bg-position-(--title-slider-position)"
+      ),
+      style: u
+    }
+  );
+}, Se = "relative w-full h-full flex items-center justify-between flex-col gap-[15px] m-0 bg-transparent overflow-hidden", F = "absolute top-0 w-full h-full", ye = "relative w-full [&_.jcSlideContainer]:justify-items-center", we = "will-change-[height] transition-[height] duration-500 ease-[cubic-bezier(0.2,0,0,1)]", Ae = ({
+  onNext: s = () => !0,
+  onBack: i,
+  onFinish: u,
   staticHeight: c = !1,
-  ref: h,
-  children: R
+  clickVariant: m = "back",
+  submitButtonLabel: b,
+  ref: j,
+  children: N,
+  className: D
 }) => {
-  const [e, w] = y(0), [v, f] = y("forward"), [z, I] = y(null), [B, k] = y(!1), [_, A] = y(!1), D = N(null), L = N([]), M = N(null), g = N(0), d = O(), H = U(), a = le.toArray(R).filter(
-    (l) => se(l)
-  ), E = a.map((l) => l.props.title || ""), X = E.some((l) => l !== ""), u = a.length, Y = {
+  const [e, te] = C(0), [S, H] = C("forward"), [W, k] = C(null), [T, R] = C(!1), [B, $] = C(!1), q = x(null), G = x([]), M = x(null), O = x(0), d = A(), J = ee(), a = ae.toArray(N).filter(
+    (t) => ue(t)
+  ), E = a.map((t) => t.props.title || ""), re = E.some((t) => t !== ""), y = a.length, p = e === y - 1, le = {
     "--progress-bar-bg": d.themeLightA,
     "--progress-bar-border": d.themeColor,
     "--progress-bar-color": d.themeColor
   };
-  oe(() => {
+  me(() => {
     if (c) {
-      const $ = L.current, V = () => {
-        let m = 0;
-        $.forEach((S) => {
-          if (S) {
-            const F = S.getBoundingClientRect().height;
-            F > m && (m = F);
+      const I = G.current, P = () => {
+        let f = 0;
+        I.forEach((v) => {
+          if (v) {
+            const U = v.getBoundingClientRect().height;
+            U > f && (f = U);
           }
-        }), I(m ? Math.ceil(m) : null);
+        }), k(f ? Math.ceil(f) : null);
       };
-      if (V(), typeof ResizeObserver > "u") return;
-      const q = [];
-      return $.forEach((m) => {
-        if (m) {
-          const S = new ResizeObserver(V);
-          S.observe(m), q.push(S);
+      if (P(), typeof ResizeObserver > "u") return;
+      const Q = [];
+      return I.forEach((f) => {
+        if (f) {
+          const v = new ResizeObserver(P);
+          v.observe(f), Q.push(v);
         }
-      }), () => q.forEach((m) => m.disconnect());
+      }), () => Q.forEach((f) => f.disconnect());
     }
-    const l = D.current;
-    if (!l) return;
+    const t = q.current;
+    if (!t) return;
     const r = () => {
-      I(Math.ceil(l.getBoundingClientRect().height));
+      k(Math.ceil(t.getBoundingClientRect().height));
     };
     if (r(), typeof ResizeObserver > "u") return;
-    const b = new ResizeObserver(r);
-    return b.observe(l), () => b.disconnect();
-  }, [e, u, c]), ie(() => () => clearTimeout(M.current ?? void 0), []);
-  const j = J(() => {
-    A(!0), clearTimeout(M.current ?? void 0), M.current = setTimeout(() => {
-      A(!1);
+    const o = new ResizeObserver(r);
+    return o.observe(t), () => o.disconnect();
+  }, [e, y, c]), de(() => () => clearTimeout(M.current ?? void 0), []);
+  const K = L(() => {
+    $(!0), clearTimeout(M.current ?? void 0), M.current = setTimeout(() => {
+      $(!1);
     }, 550);
-  }, []), Z = async () => {
-    if (e === u - 1) {
-      k(!0);
+  }, []), w = L(
+    (t, r) => {
+      K(), O.current = e, Y(() => H("none")), Y(() => H(t)), te(r);
+    },
+    [K, e]
+  ), se = async () => {
+    if (p) {
+      R(!0);
       try {
-        await (o == null ? void 0 : o());
+        await (u == null ? void 0 : u());
       } finally {
-        k(!1);
+        R(!1);
       }
     } else {
-      if (!(i == null ? void 0 : i(e))) {
-        k(!1);
+      if (!(s == null ? void 0 : s(e))) {
+        R(!1);
         return;
       }
-      j(), g.current = e, C(() => f("none")), C(() => f("forward")), w((r) => r + 1);
+      w("forward", e + 1);
     }
-  }, ee = () => {
-    j(), g.current = e, C(() => f("none")), C(() => f("reverse")), w((l) => l - 1), n == null || n();
-  }, W = J(
-    (l) => {
-      const r = Math.max(0, Math.min(l, u - 1));
-      if (r === e) return;
-      j(), g.current = e;
-      const b = r > e ? "forward" : "reverse";
-      C(() => f("none")), C(() => f(b)), w(r);
+  }, ie = () => {
+    w("reverse", e - 1), i == null || i();
+  }, z = L(
+    (t) => {
+      let r = Math.max(0, Math.min(t, y - 1));
+      for (let o = e; o > r; o--)
+        i == null || i();
+      for (let o = e; o < r; o++)
+        if (!(s == null ? void 0 : s(o))) {
+          r = o;
+          break;
+        }
+      r !== e && w(r > e ? "forward" : "reverse", r);
     },
-    [e, u, j]
+    [e, y, w, s, i]
   );
-  ne(h, () => ({ goToStep: W }), [W]);
-  const te = () => /* @__PURE__ */ t(
-    K,
+  fe(j, () => ({ goToStep: z }), [z]);
+  const oe = () => /* @__PURE__ */ l(
+    Z,
     {
       variant: "custom",
-      onClick: Z,
-      backgroundColor: e === u - 1 ? x.colors.gold : d.themeColor,
-      hoverColor: e === u - 1 ? x.colors.goldHover : d.themeDark,
-      textColor: e === u - 1 ? x.colors.black : x.colors.white,
-      disabled: B,
-      children: e === u - 1 ? B ? "Submitting..." : "Submit" : "Next"
+      onClick: se,
+      backgroundColor: p ? g.colors.gold : d.themeColor,
+      hoverColor: p ? g.colors.goldHover : d.themeDark,
+      textColor: p ? g.colors.black : g.colors.white,
+      disabled: T,
+      children: p ? T ? "Submitting..." : b || "Submit" : "Next"
     }
-  ), re = () => /* @__PURE__ */ t(
-    K,
+  ), ne = () => /* @__PURE__ */ l(
+    Z,
     {
       variant: "custom",
-      onClick: ee,
+      onClick: ie,
       backgroundColor: d.themeLight,
       borderColor: d.themeColor,
       hoverColor: d.themeMediumB,
       textColor: d.themeColor,
       children: "Back"
     }
-  );
-  return /* @__PURE__ */ p(T, { column: !0, justifyContent: "center", gap: "10px", className: s("jcStep"), children: [
-    /* @__PURE__ */ t(T, { justifyContent: "space-between", width: "90%", className: s("jcDesktopStepHeader", "self-center"), children: E.map((l, r) => /* @__PURE__ */ p(ce, { children: [
-      /* @__PURE__ */ t(
-        pe,
+  ), ce = (t) => {
+    if (!T && !(m === "none" || t === e) && !(m === "back" && t > e) && !(m === "next" && t > e + 1))
+      return () => z(t);
+  };
+  return /* @__PURE__ */ h(_, { column: !0, justifyContent: "center", gap: "10px", className: n("jcStep", D), children: [
+    /* @__PURE__ */ l("ol", { className: "m-0 mb-1 flex w-full list-none items-start p-0", children: E.map((t, r) => /* @__PURE__ */ h("li", { className: "relative flex min-w-0 flex-1 flex-col items-center", children: [
+      /* @__PURE__ */ l(
+        Ce,
         {
-          label: l,
+          label: t,
           number: r + 1,
           completed: r < e,
-          active: r === e
-        },
-        r
+          active: r === e,
+          onClick: ce(r)
+        }
       ),
-      r < E.length - 1 && (H !== X || !H) && /* @__PURE__ */ t(he, { activated: r < e })
+      r < E.length - 1 && (J !== re || !J) && /* @__PURE__ */ l(ge, { activated: r < e })
     ] }, r)) }),
-    /* @__PURE__ */ p("div", { className: s("jcStep", fe), style: Y, children: [
-      /* @__PURE__ */ p(
+    /* @__PURE__ */ h("div", { className: n("jcStep", Se), style: le, children: [
+      /* @__PURE__ */ h(
         "div",
         {
-          className: s(be, _ && Ce),
+          className: n(ye, B && we),
           style: {
-            height: c || z != null && _ ? `${z}px` : "auto"
+            height: c || W != null && B ? `${W}px` : "auto"
           },
           children: [
-            c ? /* @__PURE__ */ t(
+            c ? /* @__PURE__ */ l(
               "div",
               {
                 "aria-hidden": "true",
                 className: "jcStepperMeasure pointer-events-none absolute left-0 top-0 invisible w-full",
-                children: a.map((l, r) => /* @__PURE__ */ t(
+                children: a.map((t, r) => /* @__PURE__ */ l(
                   "div",
                   {
-                    ref: (b) => {
-                      L.current[r] = b;
+                    ref: (o) => {
+                      G.current[r] = o;
                     },
                     className: "w-full",
-                    children: l
+                    children: t
                   },
                   r
                 ))
               }
-            ) : /* @__PURE__ */ t(
+            ) : /* @__PURE__ */ l(
               "div",
               {
-                ref: D,
+                ref: q,
                 "aria-hidden": "true",
                 className: "jcStepperMeasure pointer-events-none absolute left-0 top-0 invisible w-full",
                 children: a[e] ?? null
               }
             ),
-            e === 0 && v === "forward" && /* @__PURE__ */ t("div", { className: s("jcSlideContainer"), children: a[e] ?? null }),
-            e !== 0 && v === "forward" && /* @__PURE__ */ p(G, { children: [
-              /* @__PURE__ */ t("div", { className: s("jcSlideOutContainer", Q), children: /* @__PURE__ */ t(ae, { className: "jcSlideContainer", children: a[g.current] ?? null }) }),
-              /* @__PURE__ */ t(ue, { className: "jcSlideContainer", children: a[e] ?? null })
+            e === 0 && S === "forward" && /* @__PURE__ */ l("div", { className: n("jcSlideContainer"), children: a[e] ?? null }),
+            e !== 0 && S === "forward" && /* @__PURE__ */ h(X, { children: [
+              /* @__PURE__ */ l("div", { className: n("jcSlideOutContainer", F), children: /* @__PURE__ */ l(he, { className: "jcSlideContainer", children: a[O.current] ?? null }) }),
+              /* @__PURE__ */ l(pe, { className: "jcSlideContainer", children: a[e] ?? null })
             ] }),
-            e === u - 1 && v === "reverse" && /* @__PURE__ */ t(P, { className: "jcSlideContainer", children: a[e] ?? null }),
-            e !== u - 1 && v === "reverse" && /* @__PURE__ */ p(G, { children: [
-              /* @__PURE__ */ t("div", { className: s("jcSlideOutContainer", Q), children: /* @__PURE__ */ t(de, { className: "jcSlideContainer", children: a[g.current] ?? null }) }),
-              /* @__PURE__ */ t(P, { className: "jcSlideContainer", children: a[e] ?? null })
+            p && S === "reverse" && /* @__PURE__ */ l(V, { className: "jcSlideContainer", children: a[e] ?? null }),
+            !p && S === "reverse" && /* @__PURE__ */ h(X, { children: [
+              /* @__PURE__ */ l("div", { className: n("jcSlideOutContainer", F), children: /* @__PURE__ */ l(be, { className: "jcSlideContainer", children: a[O.current] ?? null }) }),
+              /* @__PURE__ */ l(V, { className: "jcSlideContainer", children: a[e] ?? null })
             ] })
           ]
         }
       ),
-      /* @__PURE__ */ p(T, { gap: "10px", className: "self-end mb-[5px] mr-[5px]", children: [
-        e !== 0 && re(),
-        te()
+      /* @__PURE__ */ h(_, { gap: "10px", className: "self-end mb-[5px] mr-[5px]", children: [
+        e !== 0 && ne(),
+        oe()
       ] })
     ] })
   ] });
 };
 export {
-  Me as Step,
-  Ee as default
+  _e as Step,
+  Ae as default
 };

package/FormFields/FormFields.js

@@ -20,7 +20,8 @@ import "react-dom";
 import "../Accordion/Accordion.js";
 import "../ErrorBoundary/ErrorBoundary.js";
 import "../InfoCard/InfoCard.js";
-import "../LabeledInput/LabeledInput.js";
+import "../theme.js";
+import "../labeledFieldStyles.js";
 import "../List/List.js";
 import "../LogoLoop/LogoLoop.js";
 import "../Pagination/Pagination.js";
@@ -35,7 +36,7 @@ import "../Nav/Nav.js";
 import "../AuthContext/AuthProvider.js";
 import "../AppContainer/AppContainer.js";
 import "../DefaultTemplate/DefaultTemplate.js";
-const xo = ({
+const Fo = ({
   title: h,
   fields: a,
   columns: w,
@@ -104,5 +105,5 @@ const xo = ({
   ] });
 };
 export {
-  xo as default
+  Fo as default
 };

package/FormInput/FormInput.d.ts

@@ -22,5 +22,26 @@ export type FormInputProps = Partial<Omit<AllInputProps, ConflictingKeys | 'type
     overrideValidation?: boolean;
     customValidation?: InputValidationFunction;
 };
+/**
+ * The field's validation message, or undefined when it passes. Pure and module-level so it can be
+ * exercised directly, and so the component doesn't have to hold it in state: validation is a
+ * function of the props, and the useEffect form it replaced cost a second render on every
+ * keystroke — callers routinely pass a fresh `customValidation` closure each render, which no
+ * dependency array can compare usefully. Computing it inline also lands the error on the same
+ * commit as the value rather than one render later.
+ *
+ * checkbox/radio wrap MUI Checkbox/Radio, which have no helper-text slot, so there's nowhere to
+ * surface a message — they're skipped entirely.
+ */
+export declare const resolveValidationError: ({ type, value, required, label, showError, overrideValidation, customValidation, }: {
+    type: FormInputType;
+    value: unknown;
+    required?: boolean;
+    label?: string;
+    showError?: boolean;
+    /** Skip the required and type-based rules, applying only `customValidation`. */
+    overrideValidation?: boolean;
+    customValidation?: InputValidationFunction;
+}) => string | undefined;
 export declare const FormInput: React.FC<FormInputProps>;
 export default FormInput;

package/FormInput/FormInput.js

@@ -1,42 +1,53 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as v, useEffect as E } from "react";
-import { LabeledInput as k } from "../LabeledInput/LabeledInput.js";
-import { LabeledCurrencyInput as w } from "../LabeledCurrencyInput/LabeledCurrencyInput.js";
-import { LabeledCheckbox as I } from "../LabeledCheckbox/LabeledCheckbox.js";
-import { LabeledRadio as V } from "../LabeledRadio/LabeledRadio.js";
-import { LabeledDropdown as q } from "../LabeledDropdown/LabeledDropdown.js";
-import { LabeledTextArea as C } from "../LabeledTextArea/LabeledTextArea.js";
-import { LabeledFormattedInput as D } from "../LabeledFormattedInput/LabeledFormattedInput.js";
-import { formattedOrMaskedTypes as F } from "../utils.js";
-import { inputValidatorsByType as T } from "../validators.js";
-const G = (a) => {
-  const { type: r = "text", required: m, label: l, value: d } = a, { customValidation: s, showError: p, overrideValidation: f = !1, ...e } = a, [y, u] = v(!1), [L, c] = v(void 0), h = r !== "checkbox" && r !== "radio";
-  E(() => {
-    if (!p || !h) {
-      u(!1), c(void 0);
-      return;
-    }
-    const x = d === void 0 || d === "", n = [];
-    m && !f && n.push(
-      (t) => t === void 0 || t === "" ? `${l ?? "This field"} is required.` : void 0
-    ), !f && T[r] && !x && n.push(T[r]), s && !x && n.push(s);
-    const b = n.map((t) => t(d)).find((t) => t !== void 0);
-    u(!!b), c(b);
-  }, [p, d, r, m, l, s, f, h]);
-  const i = {
-    error: y || a.error,
-    helperText: L ?? a.helperText
+import { jsx as t } from "react/jsx-runtime";
+import { LabeledInput as s } from "../LabeledInput/LabeledInput.js";
+import { LabeledDateInput as u } from "../LabeledDateInput/LabeledDateInput.js";
+import { LabeledCurrencyInput as c } from "../LabeledCurrencyInput/LabeledCurrencyInput.js";
+import { LabeledCheckbox as b } from "../LabeledCheckbox/LabeledCheckbox.js";
+import { LabeledRadio as x } from "../LabeledRadio/LabeledRadio.js";
+import { LabeledDropdown as h } from "../LabeledDropdown/LabeledDropdown.js";
+import { LabeledTextArea as L } from "../LabeledTextArea/LabeledTextArea.js";
+import { LabeledFormattedInput as T } from "../LabeledFormattedInput/LabeledFormattedInput.js";
+import { formattedOrMaskedTypes as v } from "../utils.js";
+import { inputValidatorsByType as E } from "../validators.js";
+const I = ({
+  type: o,
+  value: r,
+  required: m,
+  label: a,
+  showError: p,
+  overrideValidation: f = !1,
+  customValidation: d
+}) => {
+  if (!p || o === "checkbox" || o === "radio") return;
+  const n = r === void 0 || r === "";
+  if (m && !f && n) return `${a ?? "This field"} is required.`;
+  if (n) return;
+  const e = f ? void 0 : E[o];
+  return (e == null ? void 0 : e(r)) ?? (d == null ? void 0 : d(r));
+}, H = (o) => {
+  const { type: r = "text", required: m, label: a, value: p } = o, { customValidation: f, showError: d, overrideValidation: n = !1, ...e } = o, l = I({
+    type: r,
+    value: p,
+    required: m,
+    label: a,
+    showError: d,
+    overrideValidation: n,
+    customValidation: f
+  }), i = {
+    error: !!l || o.error,
+    helperText: l ?? o.helperText
   };
-  return r === "dropdown" || r === "multiDropdown" ? /* @__PURE__ */ o(q, { ...e, ...i }) : r === "checkbox" ? /* @__PURE__ */ o(I, { ...e }) : r === "radio" ? /* @__PURE__ */ o(V, { ...e }) : r === "currency" ? /* @__PURE__ */ o(w, { ...e, ...i }) : r === "textarea" ? /* @__PURE__ */ o(C, { ...e, ...i }) : F.has(r) ? /* @__PURE__ */ o(
-    D,
+  return r === "dropdown" || r === "multiDropdown" ? /* @__PURE__ */ t(h, { ...e, ...i }) : r === "checkbox" ? /* @__PURE__ */ t(b, { ...e }) : r === "radio" ? /* @__PURE__ */ t(x, { ...e }) : r === "currency" ? /* @__PURE__ */ t(c, { ...e, ...i }) : r === "textarea" ? /* @__PURE__ */ t(L, { ...e, ...i }) : r === "date" ? /* @__PURE__ */ t(u, { ...e, ...i }) : v.has(r) ? /* @__PURE__ */ t(
+    T,
     {
       ...e,
       type: r,
       ...i
     }
-  ) : /* @__PURE__ */ o(k, { ...e, type: r, ...i });
+  ) : /* @__PURE__ */ t(s, { ...e, type: r, ...i });
 };
 export {
-  G as FormInput,
-  G as default
+  H as FormInput,
+  H as default,
+  I as resolveValidationError
 };

package/FormInput/index.d.ts

@@ -1 +1 @@
-export { default, type FormInputProps, type FormInputType } from './FormInput.tsx';
+export { default, resolveValidationError, type FormInputProps, type FormInputType } from './FormInput.tsx';

package/FormInput/index.js

@@ -1,4 +1,5 @@
-import { FormInput as t } from "./FormInput.js";
+import { FormInput as a, resolveValidationError as e } from "./FormInput.js";
 export {
-  t as default
+  a as default,
+  e as resolveValidationError
 };

package/LabeledCurrencyInput/LabeledCurrencyInput.d.ts

@@ -1,8 +1,6 @@
 import { InputProps } from '../Input';
-export interface StyleProps {
-    grid?: boolean;
-    displayMode?: boolean;
-}
+import { StyleProps } from '../labeledFieldStyles';
+export type { StyleProps };
 export type LabeledCurrencyInputProps = InputProps & StyleProps & {
     label: string;
     noLabel?: boolean;

package/LabeledDateInput/LabeledDateInput.d.ts

@@ -0,0 +1,13 @@
+import { InputProps } from '../Input';
+import { StyleProps } from '../labeledFieldStyles';
+export type { StyleProps };
+export type LabeledDateInputProps = InputProps & StyleProps & {
+    label?: string;
+    noLabel?: boolean;
+    /** Earliest selectable date. Takes the `YYYY-MM-DD` a date input expects; widened to match LabeledInput. */
+    min?: string | number;
+    /** Latest selectable date. Takes the `YYYY-MM-DD` a date input expects; widened to match LabeledInput. */
+    max?: string | number;
+};
+export declare const LabeledDateInput: React.FC<LabeledDateInputProps>;
+export default LabeledDateInput;