jcicl 1.0.76 → 1.0.78

package/ErrorBoundary/ErrorBoundary.js

@@ -1,25 +1,26 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import m from "react";
-import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
-import { Flex as i } from "../Flex/Flex.js";
-import s from "../theme.js";
-const h = a(i)`
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import h from "react";
+import { n as p } from "../.chunks/emotion-styled.browser.esm.js";
+import { Flex as l } from "../Flex/Flex.js";
+import n from "../theme.js";
+import { logger as u } from "../logger.js";
+const x = p(l)`
   width: 100%;
   font-size: 24px;
-  color: ${s.colors.maroon};
-  background-color: ${s.colors.lightRed}aa;
+  color: ${n.colors.maroon};
+  background-color: ${n.colors.lightRed}aa;
   padding: 16px;
   border-radius: 8px;
-  box-shadow: 0 0 13px -3px ${s.colors.maroon} inset;
+  box-shadow: 0 0 13px -3px ${n.colors.maroon} inset;
   flex-direction: column;
   p {
     margin: 0;
   }
-`, u = a("p")`
+`, f = p("p")`
   font-size: 16px;
   margin: 0 0 0 32px !important;
 `;
-class D extends m.Component {
+class C extends h.Component {
   constructor(r) {
     super(r), this.state = { hasError: !1, error: null, errorInfo: null };
   }
@@ -27,17 +28,18 @@ class D extends m.Component {
     return { hasError: !0, error: r };
   }
   componentDidCatch(r, t) {
-    console.error("Error:", r), this.setState({ ...this.state, errorInfo: t });
+    u.error("Error:", r), this.setState({ errorInfo: t });
   }
   render() {
-    const { title: r, children: t, showDetails: l = !0 } = this.props;
+    var s;
+    const { title: r, children: t, showDetails: c = !0 } = this.props;
     if (this.state.hasError) {
-      const { error: p, errorInfo: o } = this.state;
-      return /* @__PURE__ */ n(i, { column: !0, width: "100%", alignItems: "center", gap: "32px", padding: "16px 64px", children: [
+      const { error: d, errorInfo: o } = this.state;
+      return /* @__PURE__ */ i(l, { column: !0, width: "100%", alignItems: "center", gap: "32px", padding: "16px 64px", children: [
         /* @__PURE__ */ e("h1", { children: r }),
-        l && /* @__PURE__ */ n(h, { children: [
-          /* @__PURE__ */ e("p", { children: `${p}` }),
-          o == null ? void 0 : o.componentStack.split("at").map((c, d) => d > 0 && /* @__PURE__ */ e(u, { children: `at ${c}` }))
+        c && /* @__PURE__ */ i(x, { children: [
+          /* @__PURE__ */ e("p", { children: `${d}` }),
+          (s = o == null ? void 0 : o.componentStack) == null ? void 0 : s.split("at").map((m, a) => a > 0 && /* @__PURE__ */ e(f, { children: `at ${m}` }, a))
         ] })
       ] });
     }
@@ -45,5 +47,5 @@ class D extends m.Component {
   }
 }
 export {
-  D as default
+  C as default
 };

package/FormComponents/FormComponents.d.ts

@@ -4,8 +4,7 @@ import { PropsWithChildren, HTMLAttributes } from 'react';
 interface WithCustomTheme {
     customTheme: CustomThemeProps;
 }
-interface FormSectionProps extends HTMLAttributes<HTMLDivElement> {
-}
+type FormSectionProps = HTMLAttributes<HTMLDivElement>;
 export declare const FormSection: React.FC<PropsWithChildren<FormSectionProps>>;
 export declare const FormSectionStyles: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;

package/FormContext/createFormContext.js

@@ -1,88 +1,96 @@
 import { jsx as w } from "react/jsx-runtime";
-import { createContext as E, useState as P, useCallback as C, useEffect as $, useMemo as k } from "react";
-import { formatPhoneNumber as D, formatZipCode as N } from "../utils.js";
-function S(v) {
-  const { name: t, defaultValues: s = {}, onInputChangeExtensions: d = [], submit: n, debug: i = !1 } = v, f = E({
-    onFormInputChange: () => console.error(`Failed to update form input. ${t}FormContext not initialized`),
-    formData: s,
-    setFormData: () => console.error(`Failed to set form data. ${t}FormContext not initialized`),
-    resetForm: () => console.error(`Failed to reset form. ${t}FormContext not initialized`)
+import { createContext as E, useState as P, useCallback as N, useEffect as $, useMemo as k } from "react";
+import "../utils.js";
+import { logger as x } from "../logger.js";
+import { formatPhoneNumber as S, formatZipCode as D, formatSSN as A } from "../formatters.js";
+function j(v) {
+  const { name: o, defaultValues: c = {}, onInputChangeExtensions: m = [], submit: l, debug: n = !1 } = v, d = E({
+    onFormInputChange: () => x.error(`Failed to update form input. ${o}FormContext not initialized`),
+    formData: c,
+    setFormData: () => x.error(`Failed to set form data. ${o}FormContext not initialized`),
+    resetForm: () => x.error(`Failed to reset form. ${o}FormContext not initialized`)
   });
-  return { Context: f, Provider: ({ children: F }) => {
-    const [o, l] = P(s), p = C(
-      (a, e, u) => {
-        l((c) => {
-          let r;
-          if (u === "checkbox")
-            r = e.target.checked;
-          else if (u === "multiDropdown") {
-            const m = e.target.value;
-            Array.isArray(m) ? r = m.map((z) => z.value) : r = [];
-          } else if (u === "phone") {
-            const [, m] = D(e.target.value);
-            r = m;
-          } else if (u === "zip") {
-            const [, m] = N(e.target.value);
-            r = m;
+  return { Context: d, Provider: ({ children: C }) => {
+    const [r, u] = P(c), p = N(
+      (i, t, a) => {
+        u((f) => {
+          let e;
+          if (a === "checkbox")
+            e = t.target.checked;
+          else if (a === "multiDropdown") {
+            const s = t.target.value;
+            Array.isArray(s) ? e = s.map((z) => z.value) : e = [];
+          } else if (a === "phone") {
+            const [, s] = S(t.target.value);
+            e = s;
+          } else if (a === "zip") {
+            const [, s] = D(t.target.value);
+            e = s;
+          } else if (a === "ssn") {
+            const [, s] = A(t.target.value);
+            e = s;
           } else
-            r = e.target.value;
-          return r === "undefined" && (r = void 0), { ...c, [a]: r };
+            e = t.target.value;
+          return e === "undefined" && (e = void 0), { ...f, [i]: e };
         });
         let g;
-        if (u === "checkbox")
-          g = e.target.checked;
-        else if (u === "phone") {
-          const [, c] = D(e.target.value);
-          g = c;
-        } else if (u === "zip") {
-          const [, c] = N(e.target.value);
-          g = c;
+        if (a === "checkbox")
+          g = t.target.checked;
+        else if (a === "phone") {
+          const [, f] = S(t.target.value);
+          g = f;
+        } else if (a === "zip") {
+          const [, f] = D(t.target.value);
+          g = f;
         } else
-          g = e.target.value === "undefined" ? void 0 : e.target.value;
-        d.forEach((c) => {
-          c(a, g, l);
+          g = t.target.value === "undefined" ? void 0 : t.target.value;
+        m.forEach((f) => {
+          f(i, g, u);
         });
       },
-      [d]
-    ), h = C(() => l(s), [s]);
+      // onInputChangeExtensions is captured from the factory closure (not React state/props);
+      // it can never change for the lifetime of this Provider, so it's not a valid dep.
+      []
+    ), h = N(() => u(c), []);
     $(() => {
-      i && console.log(`[${t}Form] Updated form data:`, o);
-    }, [o]);
+      n && x.log(`[${o}Form] Updated form data:`, r);
+    }, [r]);
     const b = k(
       () => ({
         onFormInputChange: p,
-        formData: o,
-        setFormData: l,
+        formData: r,
+        setFormData: u,
         resetForm: h,
-        ...n ? { submit: () => n(o) } : {}
+        ...l ? { submit: () => l(r) } : {}
       }),
-      [o, p, h, n]
+      // submit is factory-closure-stable; only formData and the memoized callbacks can change.
+      [r, p, h]
     );
-    return /* @__PURE__ */ w(f.Provider, { value: b, children: F });
+    return /* @__PURE__ */ w(d.Provider, { value: b, children: C });
   } };
 }
-function V(v = "dateOfBirth", t = "age") {
-  return (s, d, n) => {
-    if (s === v && d && typeof d == "string") {
-      const i = d.split("-");
-      if (i.length !== 3) {
-        n((a) => ({ ...a, [t]: void 0 }));
+function B(v = "dateOfBirth", o = "age") {
+  return (c, m, l) => {
+    if (c === v && m && typeof m == "string") {
+      const n = m.split("-");
+      if (n.length !== 3) {
+        l((i) => ({ ...i, [o]: void 0 }));
         return;
       }
-      const f = Number(i[0]), x = Number(i[1]), F = Number(i[2]), o = /* @__PURE__ */ new Date(), l = o.getFullYear(), p = o.getMonth() + 1, h = o.getDate();
-      if (f > l || f < 1900) {
-        n((a) => ({ ...a, [t]: void 0 }));
+      const d = Number(n[0]), F = Number(n[1]), C = Number(n[2]), r = /* @__PURE__ */ new Date(), u = r.getFullYear(), p = r.getMonth() + 1, h = r.getDate();
+      if (d > u || d < 1900) {
+        l((i) => ({ ...i, [o]: void 0 }));
         return;
       }
-      let b = l - f;
-      (x > p || x === p && F > h) && (b -= 1), n((a) => ({
-        ...a,
-        [t]: String(b)
+      let b = u - d;
+      (F > p || F === p && C > h) && (b -= 1), l((i) => ({
+        ...i,
+        [o]: String(b)
       }));
-    } else s === v && n((i) => ({ ...i, [t]: void 0 }));
+    } else c === v && l((n) => ({ ...n, [o]: void 0 }));
   };
 }
 export {
-  V as createDobToAgeExtension,
-  S as createFormContext
+  B as createDobToAgeExtension,
+  j as createFormContext
 };

package/FormFields/FormFields.d.ts

@@ -18,7 +18,7 @@ export type FormFieldsProps = {
     gap?: number;
     noLabel?: boolean;
     checkboxContainer?: boolean;
-    formDefaults: Record<string, any>;
+    formDefaults: Record<string, unknown>;
     onChange: (key: string, e: React.ChangeEvent<HTMLInputElement>, type?: string) => void;
     compact?: boolean;
 };

package/FormFields/FormFields.js

@@ -1,10 +1,10 @@
-import { jsxs as b, Fragment as C, jsx as m } from "react/jsx-runtime";
-import { FormInput as h } from "../FormInput/FormInput.js";
-import { FormSectionTitle as T, FormFieldGrid as j, FormTextLine as L, FormFieldCheckboxContainer as G } from "../FormComponents/FormComponents.js";
+import { jsxs as b, Fragment as T, jsx as m } from "react/jsx-runtime";
+import { FormInput as s } from "../FormInput/FormInput.js";
+import { FormSectionTitle as g, FormFieldGrid as j, FormTextLine as I, FormFieldCheckboxContainer as L } from "../FormComponents/FormComponents.js";
 import "../AvatarWithImage/AvatarWithImage.js";
 import "../Button/Button.js";
 import "../Divider/Divider.js";
-import { Flex as I } from "../Flex/Flex.js";
+import { Flex as V } from "../Flex/Flex.js";
 import "../Grid/Grid.js";
 import "../Icon/Icon.js";
 import "../Input/Input.js";
@@ -13,7 +13,7 @@ import "../ListButton/ListButton.js";
 import "../Loading/Loading.js";
 import "../ScrollContainer/ScrollContainer.js";
 import "react";
-import { isTablet as S } from "../utils.js";
+import { useIsTablet as G } from "../utils.js";
 import "../CustomAlert/CustomAlert.js";
 import "react-dom";
 import "../Accordion/Accordion.js";
@@ -30,68 +30,68 @@ import "../.chunks/AppHeader.js";
 import "../EditableInfoCard/EditableInfoCard.js";
 import "../Nav/Nav.js";
 import "../AppContainer/AppContainer.js";
-const co = ({
+const eo = ({
   title: a,
-  fields: s,
+  fields: h,
   columns: f,
   columnsOverride: w,
-  gap: D = 21,
+  gap: C = 21,
   noLabel: x = !1,
   checkboxContainer: F = !1,
   compact: v = !1,
   formDefaults: n,
-  onChange: e
+  onChange: d
 }) => {
-  const g = f ?? (S() ? 2 : 3);
-  return /* @__PURE__ */ b(C, { children: [
-    a && /* @__PURE__ */ m(T, { children: a }),
-    !F && /* @__PURE__ */ m(j, { columns: g, columnsOverride: w, gap: D, children: s.map(({ key: r, label: l, type: o, limit: c, options: u, defaultValue: t, ...d }) => {
+  const D = G();
+  return /* @__PURE__ */ b(T, { children: [
+    a && /* @__PURE__ */ m(g, { children: a }),
+    !F && /* @__PURE__ */ m(j, { columns: f ?? (D ? 2 : 3), columnsOverride: w, gap: C, children: h.map(({ key: r, label: p, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
       const i = n[r] !== void 0 ? n[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
-      return v ? /* @__PURE__ */ b(I, { column: !0, gap: "21px", children: [
-        /* @__PURE__ */ m(L, { children: l }),
+      return v ? /* @__PURE__ */ b(V, { column: !0, gap: "21px", children: [
+        /* @__PURE__ */ m(I, { children: p }),
         /* @__PURE__ */ m(
-          h,
+          s,
           {
-            onChange: (p) => e(r, p, o),
+            onChange: (l) => d(r, l, o),
             type: o,
             limit: c,
             ...o === "checkbox" ? { checked: !!i } : { value: i },
             noLabel: !0,
-            options: u,
+            options: e,
             multiple: o === "multiDropdown",
-            ...d
+            ...u
           }
         )
       ] }, r) : /* @__PURE__ */ m(
-        h,
+        s,
         {
-          onChange: (p) => e(r, p, o),
-          label: l,
+          onChange: (l) => d(r, l, o),
+          label: p,
           type: o,
           limit: c,
           ...o === "checkbox" ? { checked: !!i } : { value: i },
           noLabel: x || v,
-          options: u,
+          options: e,
           multiple: o === "multiDropdown",
-          ...d
+          ...u
         },
         r
       );
     }) }),
-    F && /* @__PURE__ */ m(G, { children: s.map(({ key: r, label: l, type: o, limit: c, options: u, defaultValue: t, ...d }) => {
+    F && /* @__PURE__ */ m(L, { children: h.map(({ key: r, label: p, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
       const i = n[r] !== void 0 ? n[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
       return /* @__PURE__ */ m(
-        h,
+        s,
         {
-          onChange: (p) => e(r, p, o),
-          label: l,
+          onChange: (l) => d(r, l, o),
+          label: p,
           type: o,
           limit: c,
           ...o === "checkbox" ? { checked: !!i } : { defaultValue: i },
           noLabel: x,
-          options: u,
+          options: e,
           multiple: o === "multiDropdown",
-          ...d
+          ...u
         },
         r
       );
@@ -99,5 +99,5 @@ const co = ({
   ] });
 };
 export {
-  co as default
+  eo as default
 };

package/FormInput/FormInput.d.ts

@@ -4,12 +4,14 @@ import { LabeledCheckboxProps } from '../LabeledCheckbox';
 import { LabeledRadioProps } from '../LabeledRadio';
 import { LabeledDropdownProps, DropdownOption } from '../LabeledDropdown';
 import { LabeledTextAreaProps } from '../LabeledTextArea/LabeledTextArea';
-export type AllInputProps = LabeledInputProps & LabeledCheckboxProps & LabeledRadioProps & LabeledDropdownProps & LabeledCurrencyInputProps & LabeledTextAreaProps;
-export type FormInputType = 'checkbox' | 'currency' | 'date' | 'dropdown' | 'email' | 'multiDropdown' | 'number' | 'phone' | 'radio' | 'text' | 'textarea' | 'url' | 'zip';
+import { LabeledFormattedInputProps } from '../LabeledFormattedInput';
+import { FormInputType } from '../inputTypes';
+export type AllInputProps = LabeledInputProps & LabeledCheckboxProps & LabeledRadioProps & LabeledDropdownProps & LabeledCurrencyInputProps & LabeledTextAreaProps & LabeledFormattedInputProps;
+export { type FormInputType } from '../inputTypes';
 type ConflictingKeys = 'onChange' | 'options' | 'value' | 'checked' | 'defaultValue' | 'label';
 export type FormInputProps = Partial<Omit<AllInputProps, ConflictingKeys | 'type'>> & {
     type?: FormInputType;
-    onChange?: (event: any, ...args: any[]) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, ...args: unknown[]) => void;
     options?: DropdownOption[];
     value?: unknown;
     checked?: boolean;

package/FormInput/FormInput.js

@@ -1,15 +1,17 @@
-import { jsx as o } from "react/jsx-runtime";
-import { LabeledInput as t } from "../LabeledInput/LabeledInput.js";
+import { jsx as t } from "react/jsx-runtime";
+import { LabeledInput as o } from "../LabeledInput/LabeledInput.js";
 import { LabeledCurrencyInput as m } from "../LabeledCurrencyInput/LabeledCurrencyInput.js";
 import { LabeledCheckbox as a } from "../LabeledCheckbox/LabeledCheckbox.js";
 import { LabeledRadio as d } from "../LabeledRadio/LabeledRadio.js";
 import { LabeledDropdown as f } from "../LabeledDropdown/LabeledDropdown.js";
-import { LabeledTextArea as n } from "../LabeledTextArea/LabeledTextArea.js";
-const p = (r) => {
-  const { type: e = "text" } = r;
-  return e === "dropdown" || e === "multiDropdown" ? /* @__PURE__ */ o(f, { ...r }) : e === "checkbox" ? /* @__PURE__ */ o(a, { ...r }) : e === "radio" ? /* @__PURE__ */ o(d, { ...r }) : e === "currency" ? /* @__PURE__ */ o(m, { ...r }) : e === "textarea" ? /* @__PURE__ */ o(n, { ...r }) : /* @__PURE__ */ o(t, { ...r, type: e });
+import { LabeledTextArea as i } from "../LabeledTextArea/LabeledTextArea.js";
+import { LabeledFormattedInput as n } from "../LabeledFormattedInput/LabeledFormattedInput.js";
+import { formattedOrMaskedTypes as b } from "../utils.js";
+const k = (e) => {
+  const { type: r = "text" } = e;
+  return r === "dropdown" || r === "multiDropdown" ? /* @__PURE__ */ t(f, { ...e }) : r === "checkbox" ? /* @__PURE__ */ t(a, { ...e }) : r === "radio" ? /* @__PURE__ */ t(d, { ...e }) : r === "currency" ? /* @__PURE__ */ t(m, { ...e }) : r === "textarea" ? /* @__PURE__ */ t(i, { ...e }) : b.has(r) ? /* @__PURE__ */ t(n, { ...e, type: r }) : /* @__PURE__ */ t(o, { ...e, type: r });
 };
 export {
-  p as FormInput,
-  p as default
+  k as FormInput,
+  k as default
 };

package/Input/Input.d.ts

@@ -1,6 +1,11 @@
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
-export type InputProps = Omit<MuiTextFieldProps, 'variant'> & {
+import { FormInputType } from '../FormInput';
+export type InputValue = string | number | undefined;
+export type InputProps = Omit<MuiTextFieldProps, 'variant' | 'type' | 'value'> & {
+    type?: FormInputType;
+    value?: InputValue;
     borderFocusColor?: string;
+    className?: string;
 };
 export declare const Input: React.FC<InputProps>;
 export default Input;

package/Input/Input.js

@@ -1,105 +1,40 @@
-import { jsx as x } from "react/jsx-runtime";
-import { useRef as g, useState as T, useLayoutEffect as k } from "react";
-import { n as R } from "../.chunks/emotion-styled.browser.esm.js";
-import { c } from "../.chunks/emotion-react.browser.esm.js";
-import b from "../theme.js";
-import { useThemeColors as V } from "../ThemeContext.js";
-import { formatPhoneNumber as D, formatZipCode as F } from "../utils.js";
-import { T as I } from "../.chunks/TextField.js";
-const v = R(I, {
-  shouldForwardProp: (t) => t != "borderFocusColor"
-})(({ borderFocusColor: t, type: o, disabled: n }) => ({
-  ...c`
-    background-color: ${b.colors.white};
-    border-radius: 0;
-    height: 18px;
-
-    input {
-      transition: 313ms all ease-out;
-      height: 15px;
-      padding: 2px 0;
-      border-radius: 0;
-      border-bottom: 1px solid ${b.colors.gray};
-      width: 100%;
-
-      &:focus-visible {
-        ${o !== "date" && !n && c`
-          box-shadow: 0 -5px 4px -4px ${t} inset;
-        `}
-      }
-
-      ::-webkit-calendar-picker-indicator {
-        cursor: pointer;
-        transition: 201ms all ease-out;
-        outline: none !important;
-
-        &:hover,
-        :focus-visible {
-          box-shadow:
-            0 -5px 4px -4px ${t} inset,
-            0 5px 4px -4px ${t} inset;
-        }
-      }
-    }
-
-    &:hover,
-    :focus-visible {
-      input {
-        ${o !== "date" && !n && c`
-          box-shadow: 0 -5px 4px -4px ${t} inset;
-        `}
-      }
-    }
-
-    fieldset {
-      border-radius: 0;
-      border: none;
-    }
-
-    &.Mui-focused {
-      fieldset {
-        border: none;
-      }
-    }
-  `
-})), q = ({
-  borderFocusColor: t,
+import { jsx as n, Fragment as d } from "react/jsx-runtime";
+import { cn as a } from "../cn.js";
+import i from "../theme.js";
+import { useThemeColors as l } from "../ThemeContext.js";
+import { T as c } from "../.chunks/TextField.js";
+const h = "bg-white !rounded-none !h-[18px] [&_fieldset]:!rounded-none [&_fieldset]:!border-none [&_.Mui-focused_fieldset]:!border-none", x = "[&:has(.MuiFormHelperText-root)]:!h-[40px] [&:has(.MuiFormHelperText-root)]:transition-all [&:has(.MuiFormHelperText-root)]:duration-[201ms] [&:has(.MuiFormHelperText-root)]:ease-out [&_.MuiFormHelperText-root]:!mt-px [&_.MuiFormHelperText-root]:!mr-0 [&_.MuiFormHelperText-root]:text-right", m = "[&_input]:h-[15px] [&_input]:w-full [&_input]:rounded-none [&_input]:px-0 [&_input]:py-[2px]", _ = "[&_.MuiInputBase-root]:rounded-none [&_.MuiInputBase-root]:border-b [&_.MuiInputBase-root]:border-b-[var(--border-color)] [&_.MuiInputBase-root]:!shadow-[var(--default-shadow)] [&_.MuiInputBase-root:hover]:!shadow-[var(--active-shadow)] [&_.MuiInputBase-root:has(input:focus-visible)]:!shadow-[var(--active-shadow)] [&_.MuiInputBase-root]:transition-all [&_.MuiInputBase-root]:duration-[313ms] [&_.MuiInputBase-root]:ease-out", w = "[&_input::-webkit-calendar-picker-indicator]:cursor-pointer [&_input::-webkit-calendar-picker-indicator]:transition-all [&_input::-webkit-calendar-picker-indicator]:duration-[201ms] [&_input::-webkit-calendar-picker-indicator]:ease-out [&_input::-webkit-calendar-picker-indicator]:!outline-none [&_input::-webkit-calendar-picker-indicator:hover]:shadow-[var(--indicator-shadow)] [&_input::-webkit-calendar-picker-indicator:focus-visible]:shadow-[var(--indicator-shadow)]", b = a(
+  h,
+  x,
+  m,
+  w,
+  _
+), M = ["text", "password", "email", "date", "number"], B = ({
+  borderFocusColor: o,
   // border primary
-  type: o,
-  ...n
+  type: t,
+  value: s,
+  className: u,
+  ...e
 }) => {
-  const p = V();
-  if (o === "phone" || o === "zip") {
-    var d = o === "phone" ? D : F;
-    const { value: m, defaultValue: f, onChange: l, ...w } = n, u = g(null), a = g(null), [s, $] = T(null), C = (e, r) => {
-      let h = 0;
-      for (let i = 0; i < e.length; i++)
-        if (/\d/.test(e[i]) && (h++, h === r))
-          return i + 1;
-      return e.length;
-    }, S = (e) => {
-      const r = e.target.selectionStart ?? 0;
-      a.current = e.target.value.slice(0, r).replace(/\D/g, "").length, $(e.target.value), l == null || l(e);
-    };
-    return k(() => {
-      if (!u.current || a.current == null) return;
-      const e = d(s)[0], r = C(e, a.current);
-      u.current.setSelectionRange(r, r);
-    }, [m, f, s]), /* @__PURE__ */ x(
-      v,
-      {
-        ...w,
-        type: o,
-        borderFocusColor: t || p.themeColor,
-        inputRef: u,
-        value: d(s ?? (m || f))[0],
-        onChange: S
-      }
-    );
-  }
-  return /* @__PURE__ */ x(v, { borderFocusColor: t || p.themeColor, type: o, ...n });
+  const r = l(), p = {
+    "--border-color": i.colors.gray,
+    "--default-shadow": e.error === !0 ? `inset 0 -5px 4px -4px ${i.colors.error}` : void 0,
+    "--active-shadow": t !== "date" && !e.disabled ? `inset 0 -5px 4px -4px ${e.error ? i.colors.error : o || r.themeColor}` : "none",
+    "--indicator-shadow": `inset 0 -5px 4px -4px ${o || r.themeColor}, inset 0 5px 4px -4px ${o || r.themeColor}`
+  };
+  return /* @__PURE__ */ n(d, { children: /* @__PURE__ */ n(
+    c,
+    {
+      ...e,
+      type: t && M.includes(t) ? t : "text",
+      value: s,
+      className: a(b, u),
+      style: { ...e.style, ...p }
+    }
+  ) });
 };
 export {
-  q as Input,
-  q as default
+  B as Input,
+  B as default
 };

package/LabeledCheckbox/LabeledCheckbox.js

@@ -3,7 +3,8 @@ import { n as B } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as g } from "../.chunks/emotion-react.browser.esm.js";
 import { useThemeColors as P } from "../ThemeContext.js";
 import * as f from "react";
-import { a as R, g as T, s as M, r as N, b as p, e as z, u as L, c as V, P as o, d as H } from "../.chunks/DefaultPropsProvider.js";
+import { a as R, g as T, s as M, r as N, c as p, d as z, u as L, P as o, b as V } from "../.chunks/DefaultPropsProvider.js";
+import { c as H } from "../.chunks/clsx.js";
 import { S as E } from "../.chunks/SwitchBase.js";
 import { c as b } from "../.chunks/createSvgIcon.js";
 import { m as F } from "../.chunks/memoTheme.js";
@@ -27,7 +28,7 @@ const u = R("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     size: i
   } = e, s = {
     root: ["root", a && "indeterminate", `color${p(n)}`, `size${p(i)}`]
-  }, c = H(s, W, t);
+  }, c = V(s, W, t);
   return {
     ...t,
     // forward the disabled and checked classes to the SwitchBase
@@ -129,7 +130,7 @@ const u = R("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     }),
     ownerState: v,
     ref: a,
-    className: V(y.root, j),
+    className: H(y.root, j),
     ...$,
     classes: y
   });
@@ -269,7 +270,7 @@ const w = B("div", { shouldForwardProp: (e) => !["customTheme"].includes(e) })((
       }
     `}
   `
-})), ce = ({
+})), ie = ({
   label: e,
   colon: t = !0,
   displayMode: a = !1,
@@ -290,6 +291,6 @@ const w = B("div", { shouldForwardProp: (e) => !["customTheme"].includes(e) })((
   ] });
 };
 export {
-  ce as LabeledCheckbox,
-  ce as default
+  ie as LabeledCheckbox,
+  ie as default
 };

package/LabeledDropdown/LabeledDropdown.d.ts

@@ -12,6 +12,9 @@ export type LabeledDropdownProps = {
     minWidth?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     multiple?: boolean;
+    required?: boolean;
+    error?: boolean;
+    helperText?: string;
 } & AutocompleteProps<DropdownOption, boolean, boolean, boolean>;
 export declare const LabeledDropdown: React.FC<LabeledDropdownProps>;
 export default LabeledDropdown;