@payfit/unity-components 1.1.0 → 1.2.0

package/dist/esm/components/date-calendar/DateCalendar.js

@@ -1,13 +1,13 @@
 import { jsx as a, jsxs as r } from "react/jsx-runtime";
 import { useState as m } from "react";
-import { today as I, getLocalTimeZone as p, isToday as T } from "@internationalized/date";
+import { today as I, getLocalTimeZone as f, isToday as T } from "@internationalized/date";
 import { uyTv as k } from "@payfit/unity-themes";
-import { Calendar as B, Heading as M, CalendarGrid as O, CalendarGridHeader as W, CalendarHeaderCell as P, CalendarGridBody as R, CalendarCell as Z } from "react-aria-components";
-import { IconButton as h } from "../icon-button/IconButton.js";
-import { useMonthsList as $ } from "./hooks/useMonthsList.js";
-import { useYearsList as q } from "./hooks/useYearsList.js";
-import { DateSegmentSelect as v } from "./parts/DateSegmentSelect.js";
-const z = k({
+import { Calendar as B, Heading as F, CalendarGrid as M, CalendarGridHeader as O, CalendarHeaderCell as W, CalendarGridBody as P, CalendarCell as R } from "react-aria-components";
+import { IconButton as b } from "../icon-button/IconButton.js";
+import { useMonthsList as Z } from "./hooks/useMonthsList.js";
+import { useYearsList as $ } from "./hooks/useYearsList.js";
+import { DateSegmentSelect as h } from "./parts/DateSegmentSelect.js";
+const q = k({
   slots: {
     base: "",
     calendarWrapper: "uy:flex uy:flex-col uy:gap-100",
@@ -39,80 +39,80 @@ const z = k({
     isDisabled: !1
   }
 });
-function A({
-  value: c,
-  defaultValue: l,
-  minValue: d,
-  maxValue: s,
-  onChange: o,
-  onFocusChange: i,
+function z({
+  value: n,
+  defaultValue: d,
+  minValue: i,
+  maxValue: u,
+  onChange: p,
+  onFocusChange: g,
   ...t
 }) {
-  const f = I(p()), [g, x] = m(
-    c ?? l ?? f
-  ), [n, u] = m(
-    c ?? l ?? f
-  ), D = $(), C = q({
-    startYear: d == null ? void 0 : d.year,
-    endYear: s == null ? void 0 : s.year
+  const y = I(f()), [v, C] = m(
+    n ?? d ?? y
+  ), [l, s] = m(
+    n ?? d ?? y
+  ), x = Z(), D = $({
+    startYear: i?.year,
+    endYear: u?.year
   }), N = (e) => {
-    u(
-      (y) => y.set({ month: parseInt(e, 10) })
+    s(
+      (o) => o.set({ month: parseInt(e, 10) })
     );
   }, H = (e) => {
-    u(
-      (y) => y.set({ year: parseInt(e, 10) })
+    s(
+      (o) => o.set({ year: parseInt(e, 10) })
     );
   }, {
     base: w,
     calendarWrapper: G,
     dialogHeader: L,
-    dialogHeaderGroup: b,
+    dialogHeaderGroup: c,
     calendarGrid: S,
     calendarHeaderCell: Y,
     calendarCell: j
-  } = z({ isDisabled: t.isDisabled });
+  } = q({ isDisabled: t.isDisabled });
   return /* @__PURE__ */ a("div", { className: w(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
     B,
     {
       ...t,
-      minValue: d,
-      maxValue: s,
-      value: g,
-      defaultValue: l,
+      minValue: i,
+      maxValue: u,
+      value: v,
+      defaultValue: d,
       onChange: (e) => {
-        x(e), o == null || o(e);
+        C(e), p?.(e);
       },
-      focusedValue: n,
+      focusedValue: l,
       onFocusChange: (e) => {
-        u(e), i == null || i(e);
+        s(e), g?.(e);
       },
       children: /* @__PURE__ */ r("div", { className: G(), children: [
         /* @__PURE__ */ r("header", { className: L(), children: [
-          /* @__PURE__ */ a(M, { className: "uy:sr-only" }),
+          /* @__PURE__ */ a(F, { className: "uy:sr-only" }),
           /* @__PURE__ */ r(
             "div",
             {
-              className: b({
+              className: c({
                 className: "uy:pl-100 uy:gap-200"
               }),
               children: [
                 /* @__PURE__ */ a(
-                  v,
+                  h,
                   {
                     type: "month",
-                    items: D,
-                    value: n.month.toString(),
+                    items: x,
+                    value: l.month.toString(),
                     onChange: N,
                     isDisabled: t.isDisabled
                   }
                 ),
                 /* @__PURE__ */ a(
-                  v,
+                  h,
                   {
                     type: "year",
-                    items: C,
-                    value: n.year.toString(),
+                    items: D,
+                    value: l.year.toString(),
                     onChange: H,
                     isDisabled: t.isDisabled
                   }
@@ -123,12 +123,12 @@ function A({
           /* @__PURE__ */ r(
             "div",
             {
-              className: b({
+              className: c({
                 className: "uy:ml-auto uy:gap-100"
               }),
               children: [
                 /* @__PURE__ */ a(
-                  h,
+                  b,
                   {
                     slot: "previous",
                     icon: "CaretLeftOutlined",
@@ -139,7 +139,7 @@ function A({
                   }
                 ),
                 /* @__PURE__ */ a(
-                  h,
+                  b,
                   {
                     slot: "next",
                     icon: "CaretRightOutlined",
@@ -153,13 +153,13 @@ function A({
             }
           )
         ] }),
-        /* @__PURE__ */ r(O, { className: S(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ a(W, { children: (e) => /* @__PURE__ */ a(P, { className: Y(), children: e }) }),
-          /* @__PURE__ */ a(R, { children: (e) => /* @__PURE__ */ a(
-            Z,
+        /* @__PURE__ */ r(M, { className: S(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ a(O, { children: (e) => /* @__PURE__ */ a(W, { className: Y(), children: e }) }),
+          /* @__PURE__ */ a(P, { children: (e) => /* @__PURE__ */ a(
+            R,
             {
               date: e,
-              "data-today": T(e, p()) ? !0 : void 0,
+              "data-today": T(e, f()) ? !0 : void 0,
               className: j()
             }
           ) })
@@ -168,7 +168,7 @@ function A({
     }
   ) });
 }
-A.displayName = "DateCalendar";
+z.displayName = "DateCalendar";
 export {
-  A as DateCalendar
+  z as DateCalendar
 };

package/dist/esm/components/date-calendar/parts/DateSegmentSelect.js

@@ -1,29 +1,26 @@
-import { jsxs as v, jsx as n } from "react/jsx-runtime";
-import { useState as $ } from "react";
-import { IconSprite as w } from "@payfit/unity-icons";
-import { useId as x } from "react-aria";
-import { useIntl as I } from "react-intl";
-function N({
-  items: o,
-  value: i,
-  onChange: y,
+import { jsxs as b, jsx as n } from "react/jsx-runtime";
+import { useState as I } from "react";
+import { IconSprite as v } from "@payfit/unity-icons";
+import { useId as $ } from "react-aria";
+import { useIntl as w } from "react-intl";
+function x({
+  items: a,
+  value: o,
+  onChange: m,
   type: e,
-  isDisabled: s = !1
+  isDisabled: i = !1
 }) {
-  const l = (t) => () => {
-    const a = o.find((b) => b.id === t);
-    return (a == null ? void 0 : a.name) ?? Array.from({ length: 3 }).join("\0");
-  }, r = x(), c = I(), [p, f] = $(l(i)), d = `${r}-calendar-${e}-select-label`, u = `${r}-calendar-${e}-select`, m = `${r}-calendar-${e}-select-description`, h = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", g = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
-  return /* @__PURE__ */ v("div", { className: "uy:isolation-isolate uy:relative uy:inline-flex uy:items-center uy:cursor-pointer", children: [
+  const s = (t) => () => a.find((g) => g.id === t)?.name ?? Array.from({ length: 3 }).join("\0"), r = $(), l = w(), [y, p] = I(s(o)), c = `${r}-calendar-${e}-select-label`, d = `${r}-calendar-${e}-select`, u = `${r}-calendar-${e}-select-description`, f = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:label" : "unity:component:form-field:date-picker:segment-select:year:label", h = e === "month" ? "unity:component:form-field:date-picker:segment-select:month:description" : "unity:component:form-field:date-picker:segment-select:year:description";
+  return /* @__PURE__ */ b("div", { className: "uy:isolation-isolate uy:relative uy:inline-flex uy:items-center uy:cursor-pointer", children: [
     /* @__PURE__ */ n(
       "label",
       {
-        id: d,
-        htmlFor: u,
+        id: c,
+        htmlFor: d,
         className: "uy:sr-only",
         "aria-hidden": "true",
-        children: c.formatMessage({
-          id: h,
+        children: l.formatMessage({
+          id: f,
           defaultMessage: `Change current ${e}`
         })
       }
@@ -31,39 +28,39 @@ function N({
     /* @__PURE__ */ n(
       "select",
       {
-        id: u,
-        value: i,
+        id: d,
+        value: o,
         onChange: (t) => {
-          y(t.target.value), f(l(t.target.value));
+          m(t.target.value), p(s(t.target.value));
         },
-        disabled: s,
+        disabled: i,
         className: "uy:appearance-none uy:box-border uy:w-[var(--uy-selected-item-width)] uy:bg-transparent uy:border-none uy:rounded-50 uy:capitalize uy:text-content-form-enabled uy:typography-action-large uy:cursor-pointer uy:pr-300 uy:disabled:text-content-form-disabled uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring [-webkit-tap-highlight-color:transparent] [background-color:transparent]",
         style: {
-          "--uy-selected-item-width": `calc(var(--uy-spacing-300) + ${p.length}ch)`
+          "--uy-selected-item-width": `calc(var(--uy-spacing-300) + ${y.length}ch)`
         },
-        "aria-labelledby": d,
-        "aria-describedby": m,
-        children: o.map((t) => /* @__PURE__ */ n("option", { value: t.id, children: t.name }, t.id))
+        "aria-labelledby": c,
+        "aria-describedby": u,
+        children: a.map((t) => /* @__PURE__ */ n("option", { value: t.id, children: t.name }, t.id))
       }
     ),
     /* @__PURE__ */ n("div", { className: "uy:absolute uy:right-0 uy:pointer-events-none uy:text-content-neutral-low", children: /* @__PURE__ */ n(
-      w,
+      v,
       {
         src: "CaretDownOutlined",
         width: 20,
         height: 20,
         color: "inherit",
         role: "presentation",
-        className: s ? "uy:text-content-form-disabled" : ""
+        className: i ? "uy:text-content-form-disabled" : ""
       }
     ) }),
-    /* @__PURE__ */ n("span", { id: m, className: "uy:sr-only", "aria-hidden": "true", children: c.formatMessage({
-      id: g,
+    /* @__PURE__ */ n("span", { id: u, className: "uy:sr-only", "aria-hidden": "true", children: l.formatMessage({
+      id: h,
       defaultMessage: `Press Enter or Space to change ${e}, then use up and down arrows to select a ${e}`
     }) })
   ] });
 }
-N.displayName = "DateSegmentSelect";
+x.displayName = "DateSegmentSelect";
 export {
-  N as DateSegmentSelect
+  x as DateSegmentSelect
 };

package/dist/esm/components/date-picker/DatePicker.js

@@ -1,15 +1,15 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { forwardRef as W } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-import { DatePicker as I, Group as P, Button as U, Popover as j, Dialog as E } from "react-aria-components";
-import { useIntl as M } from "react-intl";
-import { DateCalendar as O } from "../date-calendar/DateCalendar.js";
-import { Icon as R } from "../icon/Icon.js";
-import { DateInput as G } from "./parts/DateInput.js";
-const T = m({
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { forwardRef as V } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { DatePicker as N, Group as O, Button as W, Popover as I, Dialog as U } from "react-aria-components";
+import { useIntl as B } from "react-intl";
+import { DateCalendar as j } from "../date-calendar/DateCalendar.js";
+import { Icon as E } from "../icon/Icon.js";
+import { DateInput as M } from "./parts/DateInput.js";
+const R = b({
   slots: {
     base: [
-      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-100",
+      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75",
       "uy:active:border-border-form-active uy:data-[focus-visible]:border-border-form-active"
     ],
     inputWrapper: [
@@ -20,7 +20,7 @@ const T = m({
       "uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
     ],
     suffix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:text-content-neutral-low",
+      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75 uy:text-content-neutral-low",
       "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:border-border-form-active",
       "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-[3px]"
     ]
@@ -58,7 +58,7 @@ const T = m({
       }
     }
   ]
-}), $ = m({
+}), G = b({
   base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-75",
   variants: {
     isEntering: {
@@ -68,68 +68,68 @@ const T = m({
       true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in"
     }
   }
-}), q = W(
+}), T = V(
   ({
-    value: f,
-    defaultValue: n,
-    isInvalid: b,
-    isLoading: p,
-    isDisabled: t,
-    isReadOnly: u,
-    onClearButtonPress: d,
-    onBlur: o,
-    onFocus: i,
-    onChange: s,
-    onOpenChange: l,
-    id: v,
+    value: u,
+    defaultValue: i,
+    isInvalid: n,
+    isLoading: y,
+    isDisabled: o,
+    isReadOnly: t,
+    onClearButtonPress: c,
+    onBlur: s,
+    onFocus: d,
+    onChange: m,
+    onOpenChange: p,
+    id: g,
     ...e
-  }, z) => {
-    const g = M(), { base: x, inputWrapper: h, suffix: D } = T({
-      isInvalid: !!b,
-      isReadOnly: !!u,
-      isDisabled: !!t
-    }), y = (r) => {
-      s == null || s(r);
+  }, $) => {
+    const h = B(), { base: v, inputWrapper: x, suffix: D } = R({
+      isInvalid: !!n,
+      isReadOnly: !!t,
+      isDisabled: !!o
+    }), l = (r) => {
+      m?.(r);
     }, w = (r) => {
-      l == null || l(r), r ? i == null || i() : o == null || o();
-    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
-      d == null || d();
+      p?.(r), r ? d?.() : s?.();
+    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, C = () => {
+      c?.();
     };
-    return /* @__PURE__ */ c(
-      I,
+    return /* @__PURE__ */ f(
+      N,
       {
         "data-dd-privacy": "mask",
         ...e,
-        className: x(),
-        value: f,
-        defaultValue: n,
+        className: v(),
+        value: u,
+        defaultValue: i,
         minValue: e.minValue,
         maxValue: e.maxValue,
-        isReadOnly: !!u,
-        isDisabled: !!t,
-        onChange: y,
-        onFocus: i,
-        onBlur: o,
+        isReadOnly: !!t,
+        isDisabled: !!o,
+        onChange: l,
+        onFocus: d,
+        onBlur: s,
         onOpenChange: w,
         isDateUnavailable: k,
         children: [
-          /* @__PURE__ */ c(P, { className: h(), id: v, children: [
+          /* @__PURE__ */ f(O, { className: x(), id: g, children: [
             /* @__PURE__ */ a(
-              G,
+              M,
               {
-                isLoading: p,
-                isDisabled: t,
-                isReadOnly: u,
-                isInvalid: b,
-                onClearButtonPress: V
+                isLoading: y,
+                isDisabled: o,
+                isReadOnly: t,
+                isInvalid: n,
+                onClearButtonPress: C
               }
             ),
-            /* @__PURE__ */ a(U, { className: D(), isDisabled: u || t, children: /* @__PURE__ */ a(
-              R,
+            /* @__PURE__ */ a(W, { className: D(), isDisabled: t || o, children: /* @__PURE__ */ a(
+              E,
               {
                 src: "CalendarBlankOutlined",
                 color: "inherit",
-                alt: g.formatMessage({
+                alt: h.formatMessage({
                   id: "unity:component:form-field:date-picker:calendar-button",
                   defaultMessage: "Open Calendar"
                 })
@@ -137,17 +137,17 @@ const T = m({
             ) })
           ] }),
           /* @__PURE__ */ a(
-            j,
+            I,
             {
-              className: ({ isEntering: r, isExiting: N }) => $({ isEntering: r, isExiting: N }),
-              children: /* @__PURE__ */ a(E, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-                O,
+              className: ({ isEntering: r, isExiting: P }) => G({ isEntering: r, isExiting: P }),
+              children: /* @__PURE__ */ a(U, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+                j,
                 {
-                  value: f,
-                  defaultValue: n,
+                  value: u,
+                  defaultValue: i,
                   minValue: e.minValue,
                   maxValue: e.maxValue,
-                  onChange: y,
+                  onChange: l,
                   firstDayOfWeek: e.firstDayOfWeek
                 }
               ) })
@@ -158,7 +158,7 @@ const T = m({
     );
   }
 );
-q.displayName = "DatePicker";
+T.displayName = "DatePicker";
 export {
-  q as DatePicker
+  T as DatePicker
 };

package/dist/esm/components/date-picker/parts/DateInput.js

@@ -1,12 +1,12 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { useContext as b } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
+import { uyTv as i } from "@payfit/unity-themes";
 import { DatePickerStateContext as g, DateInput as x, DateSegment as v } from "react-aria-components";
 import { useIntl as I } from "react-intl";
 import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
 import { Icon as D } from "../../icon/Icon.js";
-import { Spinner as M } from "../../spinner/Spinner.js";
-const N = d({
+import { Spinner as C } from "../../spinner/Spinner.js";
+const M = i({
   base: "uy:group uy:box-content uy:rounded-25 uy:px-25 uy:text-end uy:tabular-nums! uy:outline-none uy:typography-body uy:focus:bg-surface-form-active uy:focus:rounded-25 uy:focus:text-content-inverted uy:data-[disabled]:text-content-form-disabled",
   variants: {
     isPlaceholder: {
@@ -18,7 +18,7 @@ const N = d({
       false: ""
     }
   }
-}), w = d({
+}), N = i({
   slots: {
     base: "uy:flex uy:gap-50 uy:flex-grow uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100",
     input: "uy:flex uy:gap-25 uy:w-fit uy:grow",
@@ -54,47 +54,47 @@ const N = d({
     }
   ]
 });
-function O({
-  isLoading: n,
-  isInvalid: u,
-  isReadOnly: s,
-  isDisabled: l,
-  onClearButtonPress: a
+function P({
+  isLoading: r,
+  isInvalid: o,
+  isReadOnly: n,
+  isDisabled: s,
+  onClearButtonPress: d
 }) {
-  const o = I(), t = b(g), { dateValue: c } = t, { base: m, input: y, state: f } = w({
-    isInvalid: !!u,
-    isReadOnly: !!s,
-    isDisabled: !!l
-  }), p = c && !n && !s && !l;
-  return /* @__PURE__ */ i("div", { className: m(), children: [
-    /* @__PURE__ */ e(x, { className: y(), children: (r) => /* @__PURE__ */ e(
+  const t = I(), u = b(g), { dateValue: c } = u, { base: m, input: y, state: f } = N({
+    isInvalid: !!o,
+    isReadOnly: !!n,
+    isDisabled: !!s
+  }), p = c && !r && !n && !s;
+  return /* @__PURE__ */ l("div", { className: m(), children: [
+    /* @__PURE__ */ e(x, { className: y(), children: (a) => /* @__PURE__ */ e(
       v,
       {
-        segment: r,
-        className: N({
-          isPlaceholder: r.isPlaceholder,
-          isLiteral: r.type === "literal"
+        segment: a,
+        className: M({
+          isPlaceholder: a.isPlaceholder,
+          isLiteral: a.type === "literal"
         })
       }
     ) }),
-    /* @__PURE__ */ i("div", { className: f(), children: [
-      n && /* @__PURE__ */ e(
-        M,
+    /* @__PURE__ */ l("div", { className: f(), children: [
+      r && /* @__PURE__ */ e(
+        C,
         {
           color: "inherit",
           size: "small",
-          label: o.formatMessage({
+          label: t.formatMessage({
             id: "unity:component:common:loading:label",
             defaultMessage: "Loading..."
           })
         }
       ),
-      u && /* @__PURE__ */ e(
+      o && /* @__PURE__ */ e(
         D,
         {
           src: "WarningCircleOutlined",
           color: "content.form.invalid",
-          alt: o.formatMessage({
+          alt: t.formatMessage({
             id: "unity:component:form-field:form-input:error:alt",
             defaultMessage: "Error"
           })
@@ -104,21 +104,21 @@ function O({
         h,
         {
           slot: null,
-          title: o.formatMessage({
+          title: t.formatMessage({
             id: "unity:component:common:clear:title",
             defaultMessage: "Clear"
           }),
           icon: "CloseOutlined",
           onPress: () => {
-            t == null || t.setValue(null), a == null || a();
+            u?.setValue(null), d?.();
           }
         }
       )
     ] })
   ] });
 }
-O.displayName = "DateInput";
+P.displayName = "DateInput";
 export {
-  O as DateInput,
-  w as dateInput
+  P as DateInput,
+  N as dateInput
 };

package/dist/esm/components/date-picker-field/DatePickerField.d.ts

@@ -1,7 +1,7 @@
 import { CalendarDate } from '@internationalized/date';
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { DatePickerProps } from '../date-picker/DatePicker.js';
 import { LabelProps } from '../label/Label.js';
@@ -45,7 +45,7 @@ export type TypedDatePickerFieldProps<TFieldValues extends FieldValues = FieldVa
     name: TName;
 };
 type DatePickerFieldComponent = {
-    <TSchema extends Schema>(props: TypedDatePickerFieldProps<ZodInfer<TSchema>> & {
+    <TSchema extends Schema>(props: TypedDatePickerFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
         ref?: ForwardedRef<HTMLDivElement>;
     }): React.JSX.Element;
     displayName?: string;