@clearstory/drywall-react 5.1.1 → 5.2.0

package/dist/{AdapterDayjs-BKhf_aHy.js → AdapterDayjs-BkUCTS9t.js}

@@ -1,6 +1,6 @@
 import { _ as gt } from "./index-BJi91Is8.js";
 import { g as Q } from "./index-B5q5ym9h.js";
-import { w as Dt } from "./Datepicker-ixcQBj5A.js";
+import { w as Dt } from "./Datepicker-CE6vashk.js";
 var tt = { exports: {} }, $t = tt.exports, ht;
 function Tt() {
   return ht || (ht = 1, (function(W, t) {

package/dist/{Datepicker-ixcQBj5A.js → Datepicker-CE6vashk.js}

@@ -584,7 +584,7 @@ const es = {
     maxRows: v,
     minRows: A,
     multiline: T = !1,
-    name: $,
+    name: B,
     onBlur: R,
     onChange: F,
     onFocus: O,
@@ -595,7 +595,7 @@ const es = {
     SelectProps: L,
     slots: M = {},
     slotProps: Q = {},
-    type: j,
+    type: $,
     value: re,
     variant: W = "outlined",
     ...X
@@ -647,7 +647,7 @@ const es = {
     externalForwardedProps: ee,
     additionalProps: U,
     ownerState: ie
-  }), [B, E] = ct("inputLabel", {
+  }), [j, E] = ct("inputLabel", {
     elementType: cn,
     externalForwardedProps: ee,
     ownerState: ie
@@ -670,11 +670,11 @@ const es = {
     defaultValue: u,
     fullWidth: b,
     multiline: T,
-    name: $,
+    name: B,
     rows: V,
     maxRows: v,
     minRows: A,
-    type: j,
+    type: $,
     value: re,
     id: ue,
     inputRef: x,
@@ -690,7 +690,7 @@ const es = {
   });
   return /* @__PURE__ */ ge(Y, {
     ...ne,
-    children: [k != null && k !== "" && /* @__PURE__ */ C(B, {
+    children: [k != null && k !== "" && /* @__PURE__ */ C(j, {
       htmlFor: ue,
       id: de,
       ...E,
@@ -2249,7 +2249,7 @@ function ca(e) {
     m === "tooltip" ? ta(() => {
       h.current?.contains(Ne(h.current)) || l.current?.contains(Ne(l.current)) || g();
     }) : g();
-  }), [k, v, A] = la(c, x), T = f.useRef(null), $ = Ve(T, l), R = Ve($, k), F = (M) => {
+  }), [k, v, A] = la(c, x), T = f.useRef(null), B = Ve(T, l), R = Ve(B, k), F = (M) => {
     M.key === "Escape" && (M.stopPropagation(), g());
   }, O = s?.desktopTransition ?? u ? Lt : Nr, w = s?.desktopTrapFocus ?? Ar, I = s?.desktopPaper ?? aa, V = s?.popper ?? sa, N = me({
     elementType: V,
@@ -2372,7 +2372,7 @@ function Bo({
     v(R, !0), R !== g && (b(R), n && n(R));
   }), T = H(() => {
     k && A(k);
-  }), $ = H((R, F, O) => {
+  }), B = H((R, F, O) => {
     const w = F === "finish", I = O ? (
       // handles case like `DateTimePicker`, where a view might return a `finish` selection state
       // but when it's not the final view given all `views` -> overall selection state should be `partial`.
@@ -2395,7 +2395,7 @@ function Bo({
     // Always return up-to-date default view instead of the initial one (i.e. defaultView.current)
     defaultView: s.includes(o) ? o : s[0],
     goToNextView: T,
-    setValueAndGoToNextView: $
+    setValueAndGoToNextView: B
   });
 }
 function to() {
@@ -2492,7 +2492,7 @@ function ma(e) {
     timezone: S,
     value: x,
     onError: n.onError
-  }), $ = H((w) => {
+  }), B = H((w) => {
     const I = typeof w == "function" ? w(v.open) : w;
     m || A((V) => p({}, V, {
       open: I
@@ -2504,7 +2504,7 @@ function ma(e) {
       validationError: L,
       shortcut: M,
       source: Q,
-      shouldClose: j = V === "accept"
+      shouldClose: $ = V === "accept"
     } = I ?? {};
     let re, W;
     !N && !D && !v.hasBeenModifiedSinceMount ? (re = !0, W = V === "accept") : (re = !o.areValuesEqual(P, w, x), W = V === "accept" && !o.areValuesEqual(P, w, v.lastCommittedValue)), A((te) => p({}, te, {
@@ -2524,7 +2524,7 @@ function ma(e) {
       }
       return X;
     };
-    re && k(w, ie()), W && u && u(w, ie()), j && $(!1);
+    re && k(w, ie()), W && u && u(w, ie()), $ && B(!1);
   });
   x !== v.lastExternalValue && A((w) => p({}, w, {
     lastExternalValue: x,
@@ -2559,7 +2559,7 @@ function ma(e) {
     state: v,
     setValue: R,
     setValueFromView: F,
-    setOpen: $,
+    setOpen: B,
     value: x,
     viewValue: O
   };
@@ -2594,7 +2594,7 @@ const ha = ["className", "sx"], $o = ({
     readOnly: A,
     // Field props
     formatDensity: T,
-    enableAccessibleFieldDOMStructure: $,
+    enableAccessibleFieldDOMStructure: B,
     selectedSections: R,
     onSelectedSectionsChange: F,
     format: O,
@@ -2605,7 +2605,7 @@ const ha = ["className", "sx"], $o = ({
   } = n, {
     className: N,
     sx: L
-  } = n, M = J(n, ha), Q = Bt(), j = be(), re = Ao(P), W = fa(g, S), {
+  } = n, M = J(n, ha), Q = Bt(), $ = be(), re = Ao(P), W = fa(g, S), {
     current: X
   } = f.useRef(y ?? null), [ie, te] = f.useState(null), ue = f.useRef(null), oe = f.useRef(null), de = f.useRef(null), he = Ve(e, de), {
     timezone: ee,
@@ -2620,7 +2620,7 @@ const ha = ["className", "sx"], $o = ({
     valueManager: o,
     validator: a
   }), {
-    view: B,
+    view: j,
     setView: E,
     defaultView: G,
     focusedView: pe,
@@ -2639,7 +2639,7 @@ const ha = ["className", "sx"], $o = ({
     getStepNavigation: h
   }), Le = H(() => Y(o.emptyValue, {
     source: "view"
-  })), Ke = H(() => Y(o.getTodayValue(j, ee, r), {
+  })), Ke = H(() => Y(o.getTodayValue($, ee, r), {
     source: "view"
   })), it = H(() => Y(z, {
     source: "view"
@@ -2662,25 +2662,25 @@ const ha = ["className", "sx"], $o = ({
     hasUIView: !1,
     viewModeLookup: {},
     timeViewsCount: 0
-  }), [m, g]), Oe = fe[B], Ie = H(() => Oe), [ve, je] = f.useState(Oe === "UI" ? B : null);
-  ve !== B && fe[B] === "UI" && je(B), Ue(() => {
+  }), [m, g]), Oe = fe[j], Ie = H(() => Oe), [ve, je] = f.useState(Oe === "UI" ? j : null);
+  ve !== j && fe[j] === "UI" && je(j), Ue(() => {
     Oe === "field" && U.open && (_(!1), setTimeout(() => {
-      oe?.current?.setSelectedSections(B), oe?.current?.focusField(B);
+      oe?.current?.setSelectedSections(j), oe?.current?.focusField(j);
     }));
-  }, [B]), Ue(() => {
+  }, [j]), Ue(() => {
     if (!U.open)
       return;
-    let Te = B;
-    Oe === "field" && ve != null && (Te = ve), Te !== G && fe[Te] === "UI" && fe[G] === "UI" && (Te = G), Te !== B && E(Te), K(Te, !0);
+    let Te = j;
+    Oe === "field" && ve != null && (Te = ve), Te !== G && fe[Te] === "UI" && fe[G] === "UI" && (Te = G), Te !== j && E(Te), K(Te, !0);
   }, [U.open]);
   const ce = f.useMemo(() => ({
-    isPickerValueEmpty: o.areValuesEqual(j, z, o.emptyValue),
+    isPickerValueEmpty: o.areValuesEqual($, z, o.emptyValue),
     isPickerOpen: U.open,
     isPickerDisabled: n.disabled ?? !1,
     isPickerReadOnly: n.readOnly ?? !1,
     pickerOrientation: W,
     pickerVariant: s
-  }), [j, o, z, U.open, W, s, n.disabled, n.readOnly]), Re = f.useMemo(() => x || !le ? "hidden" : v || A ? "disabled" : "enabled", [x, le, v, A]), Ee = H(Se), Be = f.useMemo(() => k && !Me ? [] : ["cancel", "nextOrAccept"], [k, Me]), St = f.useMemo(() => ({
+  }), [$, o, z, U.open, W, s, n.disabled, n.readOnly]), Re = f.useMemo(() => x || !le ? "hidden" : v || A ? "disabled" : "enabled", [x, le, v, A]), Ee = H(Se), Be = f.useMemo(() => k && !Me ? [] : ["cancel", "nextOrAccept"], [k, Me]), St = f.useMemo(() => ({
     setValue: Y,
     setOpen: _,
     clearValue: Le,
@@ -2725,11 +2725,11 @@ const ha = ["className", "sx"], $o = ({
     onPopperExited: i
   }), [ae, ce, le, Ie, Q, ie, d, Be, i]), gr = f.useMemo(() => ({
     formatDensity: T,
-    enableAccessibleFieldDOMStructure: $,
+    enableAccessibleFieldDOMStructure: B,
     selectedSections: R,
     onSelectedSectionsChange: F,
     fieldRef: oe
-  }), [T, $, R, F, oe]);
+  }), [T, B, R, F, oe]);
   return {
     providerProps: {
       localeText: u,
@@ -2739,7 +2739,7 @@ const ha = ["className", "sx"], $o = ({
       fieldPrivateContextValue: gr,
       isValidContextValue: (Te) => {
         const Ge = a({
-          adapter: j,
+          adapter: $,
           value: Te,
           timezone: ee,
           props: n
@@ -3009,13 +3009,13 @@ const xa = (e, n) => {
     externalSlotProps: c?.shortcuts,
     className: d.shortcuts,
     ownerState: u
-  }), T = Array.isArray(A?.items) && A.items.length > 0, $ = r && v ? /* @__PURE__ */ C(v, p({}, A)) : null;
+  }), T = Array.isArray(A?.items) && A.items.length > 0, B = r && v ? /* @__PURE__ */ C(v, p({}, A)) : null;
   return {
     toolbar: P,
     content: S,
     tabs: k,
     actionBar: y,
-    shortcuts: $,
+    shortcuts: B,
     ownerState: p({}, u, {
       hasShortcuts: T
     })
@@ -3436,9 +3436,9 @@ const Ia = ["props", "steps"], Ra = ["ownerState"], Ta = (e) => {
     referenceDate: h,
     onChange: g,
     valueManager: i
-  }), $ = f.useRef(v);
+  }), B = f.useRef(v);
   f.useEffect(() => {
-    $.current = v;
+    B.current = v;
   }, [v]);
   const {
     hasValidationError: R
@@ -3489,12 +3489,12 @@ const Ia = ["props", "steps"], Ra = ["ownerState"], Ta = (e) => {
     state: "selectedSections"
   }), M = (E) => {
     L(E), m?.(E);
-  }, Q = f.useMemo(() => on(N, I.sections), [N, I.sections]), j = Q === "all" ? 0 : Q, re = f.useMemo(() => xs(I.sections, r && !x), [I.sections, r, x]), W = f.useMemo(() => I.sections.every((E) => E.value === ""), [I.sections]), X = f.useMemo(() => {
-    if (j != null)
+  }, Q = f.useMemo(() => on(N, I.sections), [N, I.sections]), $ = Q === "all" ? 0 : Q, re = f.useMemo(() => xs(I.sections, r && !x), [I.sections, r, x]), W = f.useMemo(() => I.sections.every((E) => E.value === ""), [I.sections]), X = f.useMemo(() => {
+    if ($ != null)
       return !1;
     const E = I.sections.filter((G) => G.value !== "");
     return E.length > 0 && I.sections.length - E.length > 0;
-  }, [I.sections, j]), ie = f.useMemo(() => k !== void 0 ? k : R || X, [R, X, k]), te = (E) => {
+  }, [I.sections, $]), ie = f.useMemo(() => k !== void 0 ? k : R || X, [R, X, k]), te = (E) => {
     const G = {
       validationError: s({
         adapter: n,
@@ -3511,8 +3511,8 @@ const Ia = ["props", "steps"], Ra = ["ownerState"], Ta = (e) => {
       modified: !0
     }), pe;
   }, oe = f.useRef(null), de = ft(), he = (E) => {
-    j != null && (oe.current = {
-      sectionIndex: j,
+    $ != null && (oe.current = {
+      sectionIndex: $,
       value: E
     }, de.start(0, () => {
       oe.current = null;
@@ -3528,11 +3528,11 @@ const Ia = ["props", "steps"], Ra = ["ownerState"], Ta = (e) => {
       characterQuery: null
     })), te(i.emptyValue));
   }, U = () => {
-    if (j == null)
+    if ($ == null)
       return;
-    const E = I.sections[j];
+    const E = I.sections[$];
     E.value !== "" && (he(""), c.getDateFromSection(v, E) === null ? V((G) => p({}, G, {
-      sections: ue(j, ""),
+      sections: ue($, ""),
       tempValueStrAndroid: null,
       characterQuery: null
     })) : (V((G) => p({}, G, {
@@ -3564,12 +3564,12 @@ const Ia = ["props", "steps"], Ra = ["ownerState"], Ta = (e) => {
   }) => {
     de.clear(), Y.clear();
     const K = c.getDateFromSection(v, E);
-    pe && j < I.sections.length - 1 && M(j + 1);
-    const se = ue(j, G), Se = c.getDateSectionsFromValue(se, E), Ce = ys(n, Se, F);
+    pe && $ < I.sections.length - 1 && M($ + 1);
+    const se = ue($, G), Se = c.getDateSectionsFromValue(se, E), Ce = ys(n, Se, F);
     if (n.isValid(Ce)) {
       const Me = Xn(n, Ce, Se, c.getDateFromSection(I.referenceValue, E), !0);
       return K == null && Y.start(0, () => {
-        $.current === v && V((Le) => p({}, Le, {
+        B.current === v && V((Le) => p({}, Le, {
           sections: c.clearDateSections(I.sections, E),
           tempValueStrAndroid: null
         }));
@@ -3614,16 +3614,16 @@ const Ia = ["props", "steps"], Ra = ["ownerState"], Ta = (e) => {
       characterQuery: null
     }));
   }
-  I.characterQuery != null && !ie && j == null && Z(null), I.characterQuery != null && I.sections[I.characterQuery.sectionIndex]?.type !== I.characterQuery.sectionType && Z(null), f.useEffect(() => {
+  I.characterQuery != null && !ie && $ == null && Z(null), I.characterQuery != null && I.sections[I.characterQuery.sectionIndex]?.type !== I.characterQuery.sectionType && Z(null), f.useEffect(() => {
     oe.current != null && (oe.current = null);
   });
-  const B = ft();
-  return f.useEffect(() => (I.characterQuery != null && B.start(Fa, () => Z(null)), () => {
-  }), [I.characterQuery, Z, B]), f.useEffect(() => {
-    I.tempValueStrAndroid != null && j != null && U();
+  const j = ft();
+  return f.useEffect(() => (I.characterQuery != null && j.start(Fa, () => Z(null)), () => {
+  }), [I.characterQuery, Z, j]), f.useEffect(() => {
+    I.tempValueStrAndroid != null && $ != null && U();
   }, [I.sections]), {
     // States and derived states
-    activeSectionIndex: j,
+    activeSectionIndex: $,
     areAllSectionsEmpty: W,
     error: ie,
     localizedDigits: F,
@@ -3850,7 +3850,7 @@ function Na(e) {
     manager: n,
     internalPropsWithDefaults: c,
     stateResponse: a
-  }), S = ft(), x = H(($) => {
+  }), S = ft(), x = H((B) => {
     D || !s.isReady() || (r(!0), l === "all" ? S.start(0, () => {
       const R = document.getSelection().getRangeAt(0).startOffset;
       if (R === 0) {
@@ -3863,11 +3863,11 @@ function Na(e) {
         F += 1, O += `${w.startSeparator}${w.value || w.placeholder}${w.endSeparator}`.length;
       }
       b(F - 1);
-    }) : o ? s.getRoot().contains($.target) || b(u.startIndex) : (r(!0), b(u.startIndex)));
-  }), k = H(($) => {
+    }) : o ? s.getRoot().contains(B.target) || b(u.startIndex) : (r(!0), b(u.startIndex)));
+  }), k = H((B) => {
     if (!s.isReady() || l !== "all")
       return;
-    const F = $.target.textContent ?? "";
+    const F = B.target.textContent ?? "";
     s.getRoot().innerHTML = d.sections.map((O) => `${O.startSeparator}${O.value || O.placeholder}${O.endSeparator}`).join(""), vn({
       focused: o,
       domGetters: s,
@@ -3876,24 +3876,24 @@ function Na(e) {
       keyPressed: F,
       sectionIndex: 0
     }));
-  }), v = H(($) => {
+  }), v = H((B) => {
     if (m || l !== "all") {
-      $.preventDefault();
+      B.preventDefault();
       return;
     }
-    const R = $.clipboardData.getData("text");
-    $.preventDefault(), g(null), y(R);
+    const R = B.clipboardData.getData("text");
+    B.preventDefault(), g(null), y(R);
   }), A = H(() => {
     if (o || D || !s.isReady())
       return;
-    const $ = Ne(s.getRoot());
-    r(!0), s.getSectionIndexFromDOMElement($) != null || b(u.startIndex);
+    const B = Ne(s.getRoot());
+    r(!0), s.getSectionIndexFromDOMElement(B) != null || b(u.startIndex);
   }), T = H(() => {
     setTimeout(() => {
       if (!s.isReady())
         return;
-      const $ = Ne(s.getRoot());
-      !s.getRoot().contains($) && (r(!1), b(null));
+      const B = Ne(s.getRoot());
+      !s.getRoot().contains(B) && (r(!1), b(null));
     });
   });
   return {
@@ -4009,7 +4009,7 @@ function Ba(e) {
     }), v(V);
   }), T = H((O) => {
     O.preventDefault();
-  }), $ = H((O) => {
+  }), B = H((O) => {
     if (O.preventDefault(), S || P || typeof l != "number")
       return;
     const w = d.sections[l], I = O.clipboardData.getData("text"), V = /^[a-zA-Z]+$/.test(I), N = /^[0-9]+$/.test(I), L = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(I);
@@ -4032,7 +4032,7 @@ function Ba(e) {
     return {
       // Event handlers
       onInput: A,
-      onPaste: $,
+      onPaste: B,
       onMouseUp: T,
       onDragOver: R,
       onFocus: F(w),
@@ -4057,7 +4057,7 @@ function Ba(e) {
       children: O.value || O.placeholder,
       inputMode: O.contentType === "letter" ? "text" : "numeric"
     };
-  }, [u, x, P, S, k, o, n, A, $, T, R, F, c, h]);
+  }, [u, x, P, S, k, o, n, A, B, T, R, F, c, h]);
 }
 function $a(e, n) {
   if (e.value)
@@ -4135,12 +4135,12 @@ const _a = (e) => {
     autoFocus: k = !1,
     focused: v,
     unstableFieldRef: A
-  } = l, T = f.useRef(null), $ = Ve(u, T), R = f.useMemo(() => ({
+  } = l, T = f.useRef(null), B = Ve(u, T), R = f.useMemo(() => ({
     isReady: () => T.current != null,
     getRoot: () => T.current.getRoot(),
-    getSectionContainer: (B) => T.current.getSectionContainer(B),
-    getSectionContent: (B) => T.current.getSectionContent(B),
-    getSectionIndexFromDOMElement: (B) => T.current.getSectionIndexFromDOMElement(B)
+    getSectionContainer: (j) => T.current.getSectionContainer(j),
+    getSectionContent: (j) => T.current.getSectionContent(j),
+    getSectionIndexFromDOMElement: (j) => T.current.getSectionIndexFromDOMElement(j)
   }), [T]), F = Uo({
     manager: o,
     internalPropsWithDefaults: l,
@@ -4156,21 +4156,21 @@ const _a = (e) => {
     // Methods to update the states
     clearValue: M,
     setSelectedSections: Q
-  } = F, j = zo({
+  } = F, $ = zo({
     stateResponse: F
   }), re = a(L), [W, X] = f.useState(!1);
-  function ie(B = 0) {
+  function ie(j = 0) {
     if (S || !T.current || // if the field is already focused, we don't need to focus it again
     no(T) != null)
       return;
-    const E = on(B, N.sections);
+    const E = on(j, N.sections);
     X(!0), T.current.getSectionContent(E).focus();
   }
   const te = Na({
     manager: o,
     internalPropsWithDefaults: l,
     stateResponse: F,
-    applyCharacterEditing: j,
+    applyCharacterEditing: $,
     focused: W,
     setFocused: X,
     domGetters: R
@@ -4183,35 +4183,35 @@ const _a = (e) => {
   }), de = Ba({
     manager: o,
     stateResponse: F,
-    applyCharacterEditing: j,
+    applyCharacterEditing: $,
     internalPropsWithDefaults: l,
     domGetters: R,
     focused: W
-  }), he = H((B) => {
-    D?.(B), te.onKeyDown(B);
-  }), ee = H((B) => {
-    d?.(B), te.onBlur(B);
-  }), U = H((B) => {
-    g?.(B), te.onFocus(B);
-  }), _ = H((B) => {
-    B.isDefaultPrevented() || (h?.(B), te.onClick(B));
-  }), Y = H((B) => {
-    y?.(B), te.onPaste(B);
-  }), ne = H((B) => {
-    b?.(B), te.onInput(B);
-  }), z = H((B, ...E) => {
-    B.preventDefault(), m?.(B, ...E), M(), oo(T) ? Q(V.startIndex) : ie(0);
-  }), Z = f.useMemo(() => N.sections.map((B, E) => {
-    const G = de(B, E);
+  }), he = H((j) => {
+    D?.(j), te.onKeyDown(j);
+  }), ee = H((j) => {
+    d?.(j), te.onBlur(j);
+  }), U = H((j) => {
+    g?.(j), te.onFocus(j);
+  }), _ = H((j) => {
+    j.isDefaultPrevented() || (h?.(j), te.onClick(j));
+  }), Y = H((j) => {
+    y?.(j), te.onPaste(j);
+  }), ne = H((j) => {
+    b?.(j), te.onInput(j);
+  }), z = H((j, ...E) => {
+    j.preventDefault(), m?.(j, ...E), M(), oo(T) ? Q(V.startIndex) : ie(0);
+  }), Z = f.useMemo(() => N.sections.map((j, E) => {
+    const G = de(j, E);
     return {
       container: oe(E),
-      content: de(B, E),
+      content: de(j, E),
       before: {
-        children: B.startSeparator
+        children: j.startSeparator
       },
       after: {
-        children: B.endSeparator,
-        "data-range-position": B.isEndFormatSeparator ? G["data-range-position"] : void 0
+        children: j.endSeparator,
+        "data-range-position": j.isEndFormatSeparator ? G["data-range-position"] : void 0
       }
     };
   }), [N.sections, oe, de]);
@@ -4225,8 +4225,8 @@ const _a = (e) => {
       if (I === "all")
         T.current.getRoot().focus();
       else if (typeof I == "number") {
-        const B = T.current.getSectionContent(I);
-        B && B.focus();
+        const j = T.current.getSectionContent(I);
+        j && j.focus();
       }
     }
   }, [I, W]), Ue(() => {
@@ -4238,11 +4238,11 @@ const _a = (e) => {
   }), f.useImperativeHandle(A, () => ({
     getSections: () => N.sections,
     getActiveSectionIndex: () => no(T),
-    setSelectedSections: (B) => {
+    setSelectedSections: (j) => {
       if (S || !T.current)
         return;
-      const E = on(B, N.sections);
-      X((E === "all" ? 0 : E) !== null), Q(B);
+      const E = on(j, N.sections);
+      X((E === "all" ? 0 : E) !== null), Q(j);
     },
     focusField: ie,
     isFieldFocused: () => oo(T)
@@ -4258,7 +4258,7 @@ const _a = (e) => {
     error: w,
     clearable: !!(P && !O && !x && !S),
     focused: v ?? W,
-    sectionListRef: $,
+    sectionListRef: B,
     // Additional
     enableAccessibleFieldDOMStructure: !0,
     elements: Z,
@@ -4320,7 +4320,7 @@ const pt = (e) => e.replace(/[\u2066\u2067\u2068\u2069]/g, ""), Wa = (e, n, o) =
     placeholder: A
   } = g, {
     readOnly: T = !1,
-    disabled: $ = !1,
+    disabled: B = !1,
     autoFocus: R = !1,
     focused: F,
     unstableFieldRef: O
@@ -4334,7 +4334,7 @@ const pt = (e) => e.replace(/[\u2066\u2067\u2068\u2069]/g, ""), Wa = (e, n, o) =
     areAllSectionsEmpty: L,
     error: M,
     localizedDigits: Q,
-    parsedSelectedSections: j,
+    parsedSelectedSections: $,
     sectionOrder: re,
     state: W,
     value: X,
@@ -4361,7 +4361,7 @@ const pt = (e) => e.replace(/[\u2066\u2067\u2068\u2069]/g, ""), Wa = (e, n, o) =
   function Z(ae = 0) {
     Ne(w.current) !== w.current && (w.current?.focus(), oe(ae));
   }
-  const B = H((ae) => {
+  const j = H((ae) => {
     y?.(ae);
     const le = w.current;
     o.start(0, () => {
@@ -4371,11 +4371,11 @@ const pt = (e) => e.replace(/[\u2066\u2067\u2068\u2069]/g, ""), Wa = (e, n, o) =
   }), E = H((ae, ...le) => {
     ae.isDefaultPrevented() || (D?.(ae, ...le), z());
   }), G = H((ae) => {
-    if (m?.(ae), ae.preventDefault(), T || $)
+    if (m?.(ae), ae.preventDefault(), T || B)
       return;
     const le = ae.clipboardData.getData("text");
-    if (typeof j == "number") {
-      const fe = W.sections[j], we = /^[a-zA-Z]+$/.test(le), Oe = /^[0-9]+$/.test(le), Ie = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(le);
+    if (typeof $ == "number") {
+      const fe = W.sections[$], we = /^[a-zA-Z]+$/.test(le), Oe = /^[0-9]+$/.test(le), Ie = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(le);
       if (fe.contentType === "letter" && we || fe.contentType === "digit" && Oe || fe.contentType === "digit-with-letter" && Ie) {
         ue(null), he({
           section: fe,
@@ -4399,12 +4399,12 @@ const pt = (e) => e.replace(/[\u2066\u2067\u2068\u2069]/g, ""), Wa = (e, n, o) =
       return;
     }
     const fe = ae.nativeEvent.data, we = fe && fe.length > 1, Oe = we ? fe : le, Ie = pt(Oe);
-    if (j === "all" && oe(N), N == null || we) {
+    if ($ === "all" && oe(N), N == null || we) {
       ee(we ? fe : Ie);
       return;
     }
     let ve;
-    if (j === "all" && Ie.length === 1)
+    if ($ === "all" && Ie.length === 1)
       ve = Ie;
     else {
       const je = pt(u.getV6InputValueFromSections(ne, Q, n));
@@ -4440,17 +4440,17 @@ const pt = (e) => e.replace(/[\u2066\u2067\u2068\u2069]/g, ""), Wa = (e, n, o) =
     function ae() {
       if (!w.current)
         return;
-      if (j == null) {
+      if ($ == null) {
         w.current.scrollLeft && (w.current.scrollLeft = 0);
         return;
       }
       if (w.current !== Ne(w.current))
         return;
       const le = w.current.scrollTop;
-      if (j === "all")
+      if ($ === "all")
         w.current.select();
       else {
-        const fe = ne[j], we = fe.type === "empty" ? fe.startInInput - fe.startSeparator.length : fe.startInInput, Oe = fe.type === "empty" ? fe.endInInput + fe.endSeparator.length : fe.endInInput;
+        const fe = ne[$], we = fe.type === "empty" ? fe.startInInput - fe.startSeparator.length : fe.startInInput, Oe = fe.type === "empty" ? fe.endInInput + fe.endSeparator.length : fe.endInInput;
         (we !== w.current.selectionStart || Oe !== w.current.selectionEnd) && w.current === Ne(w.current) && w.current.setSelectionRange(we, Oe), r.start(0, () => {
           w.current && w.current === Ne(w.current) && // The section might loose all selection, where `selectionStart === selectionEnd`
           // https://github.com/mui/mui-x/pull/13652
@@ -4477,10 +4477,10 @@ const pt = (e) => e.replace(/[\u2066\u2067\u2068\u2069]/g, ""), Wa = (e, n, o) =
   })), p({}, g, {
     error: M,
     "aria-invalid": M,
-    clearable: !!(k && !L && !T && !$),
+    clearable: !!(k && !L && !T && !B),
     onBlur: pe,
     onClick: E,
-    onFocus: B,
+    onFocus: j,
     onPaste: G,
     onKeyDown: Ce,
     onClear: se,
@@ -4493,7 +4493,7 @@ const pt = (e) => e.replace(/[\u2066\u2067\u2068\u2069]/g, ""), Wa = (e, n, o) =
     value: lt ? "" : Le,
     onChange: K,
     focused: F,
-    disabled: $,
+    disabled: B,
     readOnly: T,
     autoFocus: R,
     openPickerAriaLabel: Y
@@ -4996,15 +4996,15 @@ const Vt = /* @__PURE__ */ f.forwardRef(function(n, o) {
     inputProps: v,
     inputRef: A,
     sectionListRef: T,
-    onFocus: $,
+    onFocus: B,
     onBlur: R,
     classes: F,
     ownerState: O
-  } = r, w = J(r, Ja), I = Ut(), V = f.useRef(null), N = f.useRef(null), L = f.useRef([]), M = Ve(o, V), Q = Ve(v?.ref, A), j = an();
-  if (!j)
+  } = r, w = J(r, Ja), I = Ut(), V = f.useRef(null), N = f.useRef(null), L = f.useRef([]), M = Ve(o, V), Q = Ve(v?.ref, A), $ = an();
+  if (!$)
     throw new Error("MUI X: PickersInputBase should always be used inside a PickersTextField component");
   const re = O ?? I, W = (U) => {
-    j.onFocus?.(U), $?.(U);
+    $.onFocus?.(U), B?.(U);
   }, X = (U) => {
     W(U);
   }, ie = (U) => {
@@ -5017,19 +5017,19 @@ const Vt = /* @__PURE__ */ f.forwardRef(function(n, o) {
       U.preventDefault(), _.requestSubmit(Y);
     }
   }, te = (U) => {
-    j.onBlur?.(U), R?.(U);
+    $.onBlur?.(U), R?.(U);
   };
   f.useEffect(() => {
-    j && j.setAdornedStart(!!d);
-  }, [j, d]), f.useEffect(() => {
-    j && (a ? j.onEmpty() : j.onFilled());
-  }, [j, a]);
+    $ && $.setAdornedStart(!!d);
+  }, [$, d]), f.useEffect(() => {
+    $ && (a ? $.onEmpty() : $.onFilled());
+  }, [$, a]);
   const ue = ai(F, re), oe = g?.root || Yt, de = me({
     elementType: oe,
     externalSlotProps: b?.root,
     externalForwardedProps: w,
     additionalProps: {
-      "aria-invalid": j.error,
+      "aria-invalid": $.error,
       ref: M
     },
     className: ue.root,
@@ -5074,7 +5074,7 @@ const Vt = /* @__PURE__ */ f.forwardRef(function(n, o) {
           className: U === "before" ? ht.sectionBefore : ht.sectionAfter
         })
       }
-    }), u, h ? h(p({}, j)) : null, /* @__PURE__ */ C(ri, p({
+    }), u, h ? h(p({}, $)) : null, /* @__PURE__ */ C(ri, p({
       name: x,
       className: ue.input,
       value: i,
@@ -5083,8 +5083,8 @@ const Vt = /* @__PURE__ */ f.forwardRef(function(n, o) {
       "aria-hidden": "true",
       tabIndex: -1,
       readOnly: k,
-      required: j.required,
-      disabled: j.disabled,
+      required: $.required,
+      disabled: $.disabled,
       onFocus: X
     }, v, {
       ref: Q
@@ -5976,7 +5976,7 @@ const ki = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "e
     onKeyDown: v,
     onKeyUp: A,
     onPaste: T,
-    onInput: $,
+    onInput: B,
     endAdornment: R,
     startAdornment: F,
     tabIndex: O,
@@ -5988,14 +5988,14 @@ const ki = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "e
     id: M,
     name: Q,
     // Props used by FormHelperText
-    helperText: j,
+    helperText: $,
     FormHelperTextProps: re,
     // Props used by InputLabel
     label: W,
     InputLabelProps: X,
     // @ts-ignore
     "data-active-range-position": ie
-  } = r, te = J(r, ki), ue = f.useRef(null), oe = Ve(o, ue), de = Bt(M), he = j && de ? `${de}-helper-text` : void 0, ee = W && de ? `${de}-label` : void 0, U = kn({
+  } = r, te = J(r, ki), ue = f.useRef(null), oe = Ve(o, ue), de = Bt(M), he = $ && de ? `${de}-helper-text` : void 0, ee = W && de ? `${de}-label` : void 0, U = kn({
     disabled: r.disabled,
     required: r.required,
     readOnly: y?.readOnly
@@ -6036,7 +6036,7 @@ const ki = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "e
         onClick: k,
         onKeyDown: v,
         onKeyUp: A,
-        onInput: $,
+        onInput: B,
         onPaste: T,
         onFocus: s,
         onBlur: a,
@@ -6058,10 +6058,10 @@ const ki = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "e
         "aria-describedby": he,
         "aria-live": he ? "polite" : void 0,
         "data-active-range-position": ie
-      }, z, y)), j && /* @__PURE__ */ C(go, p({
+      }, z, y)), $ && /* @__PURE__ */ C(go, p({
         id: he
       }, re, {
-        children: j
+        children: $
       }))]
     }))
   });
@@ -6192,14 +6192,14 @@ const Ri = ["enableAccessibleFieldDOMStructure"], Ti = ["InputProps", "readOnly"
       clearable: v,
       clearButtonPosition: A,
       openPickerButtonPosition: T,
-      openPickerAriaLabel: $
+      openPickerAriaLabel: B
     } = o, R = J(o, Ti), F = Qe >= 6 && R?.slotProps?.input ? kt(R?.slotProps?.input, S) : nn;
     return {
       clearable: v,
       onClear: k,
       clearButtonPosition: A,
       openPickerButtonPosition: T,
-      openPickerAriaLabel: $,
+      openPickerAriaLabel: B,
       textFieldProps: p({}, R, Qe >= 6 && R?.slotProps?.input ? {
         slotProps: p({}, R?.slotProps, {
           input: (O) => p({}, He(F, O), {
@@ -6294,7 +6294,7 @@ function $i(e) {
     ownerState: p({}, g, {
       position: "end"
     })
-  }), A = J(v, Ei), T = a.slots.openPickerButton ?? gt, $ = me({
+  }), A = J(v, Ei), T = a.slots.openPickerButton ?? gt, B = me({
     elementType: T,
     externalSlotProps: a.slotProps.openPickerButton,
     additionalProps: {
@@ -6307,7 +6307,7 @@ function $i(e) {
       )
     },
     ownerState: g
-  }), R = J($, Ni), F = a.slots.openPickerIcon ?? o, O = me({
+  }), R = J(B, Ni), F = a.slots.openPickerIcon ?? o, O = me({
     elementType: F,
     externalSlotProps: a.slotProps.openPickerIcon,
     ownerState: g
@@ -6363,9 +6363,9 @@ function $i(e) {
       }
     }
   }, ...Array.isArray(i.sx) ? i.sx : [i.sx]]);
-  const j = Qe >= 6 && i?.slotProps?.input ? He(kt(Q, M), g) : p({}, Q, M);
+  const $ = Qe >= 6 && i?.slotProps?.input ? He(kt(Q, M), g) : p({}, Q, M);
   return i.inputProps = Qe >= 6 && i?.slotProps?.htmlInput ? He(i.slotProps.htmlInput, g) : i.inputProps, delete i?.slotProps?.input, n.enableAccessibleFieldDOMStructure && delete i?.slotProps, /* @__PURE__ */ C(P, p({}, i, {
-    InputProps: j
+    InputProps: $
   }));
 }
 function kt(e, n) {
@@ -6808,7 +6808,11 @@ const or = ({
   ), [m, P] = f.useReducer(y, {
     isMonthSwitchingAnimating: !1,
     focusedDay: D,
-    currentMonth: b.startOfMonth(D),
+    // Keep the time from the reference date when computing the current month anchor.
+    // Using startOfMonth would reset the time to 00:00 which breaks expectations
+    // that month selections preserve the referenceDate time when no value is provided.
+    // See tests: "should use `referenceDate` when no value defined".
+    currentMonth: b.setDate(D, 1),
     slideDirection: "left"
   }), S = or({
     shouldDisableDate: d,
@@ -6831,10 +6835,10 @@ const or = ({
     if (A === "cell-interaction" && m.focusedDay != null && b.isSameDay(v, m.focusedDay))
       return;
     const T = A === "cell-interaction";
-    let $, R;
+    let B, R;
     if (A === "cell-interaction")
-      $ = g(v, m.currentMonth), R = v;
-    else if ($ = b.isSameMonth(v, m.currentMonth) ? m.currentMonth : b.startOfMonth(v), R = v, S(R)) {
+      B = g(v, m.currentMonth), R = v;
+    else if (B = b.isSameMonth(v, m.currentMonth) ? m.currentMonth : b.startOfMonth(v), R = v, S(R)) {
       const w = b.startOfMonth(v), I = b.endOfMonth(v);
       R = Mt({
         adapter: b,
@@ -6847,11 +6851,11 @@ const or = ({
         timezone: h
       });
     }
-    const F = !b.isSameMonth(m.currentMonth, $), O = !b.isSameYear(m.currentMonth, $);
-    F && c?.($), O && l?.(b.startOfYear($)), P({
+    const F = !b.isSameMonth(m.currentMonth, B), O = !b.isSameYear(m.currentMonth, B);
+    F && c?.(B), O && l?.(b.startOfYear(B)), P({
       type: "setVisibleDate",
-      month: $,
-      direction: b.isAfterDay($, m.currentMonth) ? "left" : "right",
+      month: B,
+      direction: b.isAfterDay(B, m.currentMonth) ? "left" : "right",
       focusedDay: m.focusedDay != null && R != null && b.isSameDay(R, m.focusedDay) ? m.focusedDay : R,
       skipAnimation: T
     });
@@ -7061,7 +7065,7 @@ const Qi = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onCli
     disableMargin: v,
     disableHighlightToday: A,
     showDaysOutsideCurrentMonth: T
-  } = r, $ = J(r, Qi), R = sr({
+  } = r, B = J(r, Qi), R = sr({
     day: m,
     selected: P,
     disabled: S,
@@ -7082,7 +7086,7 @@ const Qi = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onCli
   return k && !T ? /* @__PURE__ */ C(Ji, {
     className: ke(F.root, F.hiddenDaySpacingFiller, a),
     ownerState: R,
-    role: $.role
+    role: B.role
   }) : /* @__PURE__ */ C(Zi, p({
     className: ke(F.root, a),
     ref: I,
@@ -7095,7 +7099,7 @@ const Qi = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onCli
     onMouseEnter: (L) => y(L, m),
     onClick: N,
     onMouseDown: V
-  }, $, {
+  }, B, {
     ownerState: R,
     children: D ?? O.format(m, "dayOfMonth")
   }));
@@ -7471,7 +7475,7 @@ function yl(e) {
     slots: b,
     slotProps: y,
     timezone: D
-  } = n, m = be(), P = _t(D), S = r != null && m.isSameDay(o, r), x = c && S, k = s.some((V) => m.isSameDay(V, o)), v = m.isSameDay(o, P), A = f.useMemo(() => u || a(o), [u, a, o]), T = f.useMemo(() => m.getMonth(o) !== i, [m, o, i]), $ = sr({
+  } = n, m = be(), P = _t(D), S = r != null && m.isSameDay(o, r), x = c && S, k = s.some((V) => m.isSameDay(V, o)), v = m.isSameDay(o, P), A = f.useMemo(() => u || a(o), [u, a, o]), T = f.useMemo(() => m.getMonth(o) !== i, [m, o, i]), B = sr({
     day: o,
     selected: k,
     disabled: A,
@@ -7492,7 +7496,7 @@ function yl(e) {
       // it is used in date range dragging logic by accessing `dataset.timestamp`
       "data-timestamp": m.toJsDate(o).valueOf()
     }, l),
-    ownerState: p({}, $, {
+    ownerState: p({}, B, {
       day: o,
       isDayDisabled: A,
       isDaySelected: k
@@ -7546,7 +7550,7 @@ function Pl(e) {
     shouldDisableDate: v,
     shouldDisableMonth: A,
     shouldDisableYear: T,
-    dayOfWeekFormatter: $ = (_) => o.format(_, "weekdayShort").charAt(0).toUpperCase(),
+    dayOfWeekFormatter: B = (_) => o.format(_, "weekdayShort").charAt(0).toUpperCase(),
     hasFocus: R,
     onFocusedViewChange: F,
     gridLabelId: O,
@@ -7562,7 +7566,7 @@ function Pl(e) {
     disablePast: P,
     disableFuture: S,
     timezone: V
-  }), j = Ze(), re = H((_) => {
+  }), $ = Ze(), re = H((_) => {
     g || d(_);
   }), W = (_) => {
     Q(_) || (r(_), F?.(!0));
@@ -7634,15 +7638,15 @@ function Pl(e) {
       children: [w && /* @__PURE__ */ C(pl, {
         variant: "caption",
         role: "columnheader",
-        "aria-label": j.calendarWeekNumberHeaderLabel,
+        "aria-label": $.calendarWeekNumberHeaderLabel,
         className: L.weekNumberLabel,
-        children: j.calendarWeekNumberHeaderText
+        children: $.calendarWeekNumberHeaderText
       }), cs(o, N).map((_, Y) => /* @__PURE__ */ C(dl, {
         variant: "caption",
         role: "columnheader",
         "aria-label": o.format(_, "weekday"),
         className: L.weekDayLabel,
-        children: $(_)
+        children: B(_)
       }, Y.toString()))]
     }), u ? /* @__PURE__ */ C(ml, {
       className: L.loadingContainer,
@@ -7666,8 +7670,8 @@ function Pl(e) {
           children: [w && /* @__PURE__ */ C(fl, {
             className: L.weekNumber,
             role: "rowheader",
-            "aria-label": j.calendarWeekNumberAriaLabelText(o.getWeekNumber(_[0])),
-            children: j.calendarWeekNumberText(o.getWeekNumber(_[0]))
+            "aria-label": $.calendarWeekNumberAriaLabelText(o.getWeekNumber(_[0])),
+            children: $.calendarWeekNumberText(o.getWeekNumber(_[0]))
           }), _.map((ne, z) => /* @__PURE__ */ C(yl, {
             parentProps: n,
             day: ne,
@@ -7840,7 +7844,7 @@ const io = (e, n, o, r, s) => !!(e === n && r && s.isSameYear(o, r)), kl = q("di
     onFocusedViewChange: v,
     monthsPerRow: A,
     timezone: T,
-    gridLabelId: $,
+    gridLabelId: B,
     slots: R,
     slotProps: F
   } = r, O = J(r, Cl), {
@@ -7857,7 +7861,7 @@ const io = (e, n, o, r, s) => !!(e === n && r && s.isSameYear(o, r)), kl = q("di
     valueManager: qe
   }), N = _t(V), L = Ye(), M = be(), {
     ownerState: Q
-  } = Fe(), j = f.useMemo(
+  } = Fe(), $ = f.useMemo(
     () => qe.getInitialReferenceValue({
       value: w,
       adapter: M,
@@ -7868,7 +7872,7 @@ const io = (e, n, o, r, s) => !!(e === n && r && s.isSameYear(o, r)), kl = q("di
     }),
     []
     // eslint-disable-line react-hooks/exhaustive-deps
-  ), re = xl(c), W = f.useMemo(() => M.getMonth(N), [M, N]), X = f.useMemo(() => w != null ? M.getMonth(w) : null, [w, M]), [ie, te] = f.useState(() => X || M.getMonth(j)), [ue, oe] = bt({
+  ), re = xl(c), W = f.useMemo(() => M.getMonth(N), [M, N]), X = f.useMemo(() => w != null ? M.getMonth(w) : null, [w, M]), [ie, te] = f.useState(() => X || M.getMonth($)), [ue, oe] = bt({
     name: "MonthCalendar",
     state: "hasFocus",
     controlled: k,
@@ -7876,15 +7880,15 @@ const io = (e, n, o, r, s) => !!(e === n && r && s.isSameYear(o, r)), kl = q("di
   }), de = H((z) => {
     oe(z), v && v(z);
   }), he = f.useCallback((z) => {
-    const Z = M.startOfMonth(b && M.isAfter(N, D) ? N : D), B = M.startOfMonth(g && M.isBefore(N, y) ? N : y), E = M.startOfMonth(z);
-    return M.isBefore(E, Z) || M.isAfter(E, B) ? !0 : P ? P(E) : !1;
+    const Z = M.startOfMonth(b && M.isAfter(N, D) ? N : D), j = M.startOfMonth(g && M.isBefore(N, y) ? N : y), E = M.startOfMonth(z);
+    return M.isBefore(E, Z) || M.isAfter(E, j) ? !0 : P ? P(E) : !1;
   }, [g, b, y, D, N, P, M]), ee = H((z, Z) => {
     if (S)
       return;
-    const B = w && i && !M.isSameYear(w, i) ? M.setYear(w, M.getYear(i)) : w, E = M.setMonth(B ?? j, Z);
-    I(E);
+    const E = (w && i && !M.isSameYear(w, i) ? M.setYear(w, M.getYear(i)) : w) ?? i ?? $, G = M.setMonth(E, Z);
+    I(G);
   }), U = H((z) => {
-    he(M.setMonth(w ?? i ?? j, z)) || (te(z), de(!0), x && x(z));
+    he(M.setMonth(w ?? i ?? $, z)) || (te(z), de(!0), x && x(z));
   });
   f.useEffect(() => {
     te((z) => X !== null && z !== X ? X : z);
@@ -7914,11 +7918,11 @@ const io = (e, n, o, r, s) => !!(e === n && r && s.isSameYear(o, r)), kl = q("di
     className: ke(re.root, a),
     ownerState: Q,
     role: "radiogroup",
-    "aria-labelledby": $,
+    "aria-labelledby": B,
     monthsPerRow: A
   }, O, {
-    children: dn(M, i ?? w ?? j).map((z) => {
-      const Z = M.getMonth(z), B = M.format(z, "monthShort"), E = M.format(z, "month"), G = io(Z, X, z, w, M), pe = h || he(z);
+    children: dn(M, i ?? w ?? $).map((z) => {
+      const Z = M.getMonth(z), j = M.format(z, "monthShort"), E = M.format(z, "month"), G = io(Z, X, z, w, M), pe = h || he(z);
       return /* @__PURE__ */ C(dr, {
         selected: G,
         value: Z,
@@ -7934,8 +7938,8 @@ const io = (e, n, o, r, s) => !!(e === n && r && s.isSameYear(o, r)), kl = q("di
         slots: R,
         slotProps: F,
         classes: c,
-        children: B
-      }, B);
+        children: j
+      }, j);
     })
   }));
 });
@@ -8212,7 +8216,7 @@ const Vl = q("div", {
     yearsOrder: v,
     yearsPerRow: A,
     timezone: T,
-    gridLabelId: $,
+    gridLabelId: B,
     slots: R,
     slotProps: F
   } = r, O = J(r, Rl), {
@@ -8229,7 +8233,7 @@ const Vl = q("div", {
     valueManager: qe
   }), N = _t(V), L = Ye(), M = be(), {
     ownerState: Q
-  } = Fe(), j = f.useMemo(
+  } = Fe(), $ = f.useMemo(
     () => qe.getInitialReferenceValue({
       value: w,
       adapter: M,
@@ -8240,7 +8244,7 @@ const Vl = q("div", {
     }),
     []
     // eslint-disable-line react-hooks/exhaustive-deps
-  ), re = Tl(i), W = f.useMemo(() => M.getYear(N), [M, N]), X = f.useMemo(() => w != null ? M.getYear(w) : null, [w, M]), [ie, te] = f.useState(() => X || M.getYear(j)), [ue, oe] = bt({
+  ), re = Tl(i), W = f.useMemo(() => M.getYear(N), [M, N]), X = f.useMemo(() => w != null ? M.getYear(w) : null, [w, M]), [ie, te] = f.useState(() => X || M.getYear($)), [ue, oe] = bt({
     name: "YearCalendar",
     state: "hasFocus",
     controlled: x,
@@ -8257,10 +8261,10 @@ const Vl = q("div", {
   }, [h, g, b, y, N, P, M]), ee = H((K, se) => {
     if (m)
       return;
-    const Se = M.setYear(w ?? j, se);
+    const Se = M.setYear(w ?? $, se);
     I(Se);
   }), U = H((K) => {
-    he(M.setYear(w ?? j, K)) || (te(K), de(!0), S?.(K));
+    he(M.setYear(w ?? $, K)) || (te(K), de(!0), S?.(K));
   });
   f.useEffect(() => {
     te((K) => X !== null && K !== X ? X : K);
@@ -8284,15 +8288,15 @@ const Vl = q("div", {
     U(se);
   }), Z = H((K, se) => {
     ie === se && de(!1);
-  }), B = f.useRef(null), E = Ve(o, B);
+  }), j = f.useRef(null), E = Ve(o, j);
   f.useEffect(() => {
-    if (s || B.current === null)
+    if (s || j.current === null)
       return;
-    const K = B.current.querySelector('[tabindex="0"]');
+    const K = j.current.querySelector('[tabindex="0"]');
     if (!K)
       return;
-    const se = K.offsetHeight, Se = K.offsetTop, Ce = B.current.clientHeight, Me = B.current.scrollTop, Le = Se + se;
-    se > Ce || Se < Me || (B.current.scrollTop = Le - Ce / 2 - se / 2);
+    const se = K.offsetHeight, Se = K.offsetTop, Ce = j.current.clientHeight, Me = j.current.scrollTop, Le = Se + se;
+    se > Ce || Se < Me || (j.current.scrollTop = Le - Ce / 2 - se / 2);
   }, [s]);
   const G = M.getYearRange([y, b]);
   v === "desc" && G.reverse();
@@ -8302,7 +8306,7 @@ const Vl = q("div", {
     className: ke(re.root, a),
     ownerState: Q,
     role: "radiogroup",
-    "aria-labelledby": $,
+    "aria-labelledby": B,
     yearsPerRow: A
   }, O, {
     children: [G.map((K) => {
@@ -8509,8 +8513,8 @@ const Bl = ["children", "className", "slots", "slotProps", "isNextDisabled", "is
     isHidden: y,
     goTo: D,
     label: m
-  }, $ = c?.previousIconButton ?? lo, R = me({
-    elementType: $,
+  }, B = c?.previousIconButton ?? lo, R = me({
+    elementType: B,
     externalSlotProps: l?.previousIconButton,
     additionalProps: {
       size: "medium",
@@ -8561,7 +8565,7 @@ const Bl = ["children", "className", "slots", "slotProps", "isNextDisabled", "is
     className: ke(v.root, i),
     ownerState: k
   }, x, {
-    children: [/* @__PURE__ */ C($, p({}, R, {
+    children: [/* @__PURE__ */ C(B, p({}, R, {
       children: r ? /* @__PURE__ */ C(N, p({}, M)) : /* @__PURE__ */ C(w, p({}, V))
     })), a ? /* @__PURE__ */ C(Pt, {
       variant: "subtitle1",
@@ -8683,7 +8687,7 @@ const Ul = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "
     classes: v,
     timezone: A,
     format: T = `${s.formats.month} ${s.formats.year}`
-  } = a, $ = J(a, Ul), {
+  } = a, B = J(a, Ul), {
     ownerState: R
   } = Fe(), F = Kl(v), O = i?.switchViewButton ?? Zl, w = me({
     elementType: O,
@@ -8705,7 +8709,7 @@ const Ul = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "
     disableFuture: d,
     maxDate: g,
     timezone: A
-  }), j = zl(l, {
+  }), $ = zl(l, {
     disablePast: h,
     minDate: b,
     timezone: A
@@ -8721,7 +8725,7 @@ const Ul = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "
   if (S.length === 1 && S[0] === "year")
     return null;
   const W = s.formatByString(l, T);
-  return /* @__PURE__ */ ge(Gl, p({}, $, {
+  return /* @__PURE__ */ ge(Gl, p({}, B, {
     ownerState: R,
     className: ke(F.root, k),
     ref: o,
@@ -8751,7 +8755,7 @@ const Ul = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "
         slots: i,
         slotProps: c,
         onGoToPrevious: M,
-        isPreviousDisabled: j,
+        isPreviousDisabled: $,
         previousLabel: r.previousMonth,
         onGoToNext: L,
         isNextDisabled: Q,
@@ -8865,7 +8869,7 @@ const sc = q(ec, {
     views: v,
     openTo: A,
     className: T,
-    classes: $,
+    classes: B,
     disabled: R,
     readOnly: F,
     minDate: O,
@@ -8876,7 +8880,7 @@ const sc = q(ec, {
     showDaysOutsideCurrentMonth: L,
     fixedWeekNumber: M,
     dayOfWeekFormatter: Q,
-    slots: j,
+    slots: $,
     slotProps: re,
     loading: W,
     renderLoading: X,
@@ -8902,7 +8906,7 @@ const sc = q(ec, {
     setView: ne,
     focusedView: z,
     setFocusedView: Z,
-    goToNextView: B,
+    goToNextView: j,
     setValueAndGoToNextView: E
   } = Bo({
     view: k,
@@ -8931,7 +8935,7 @@ const sc = q(ec, {
     disableFuture: g,
     timezone: _,
     getCurrentMonthFromVisibleDate: (ce, Re) => r.isSameMonth(ce, Re) ? Re : r.startOfMonth(ce)
-  }), Ce = R && ee || O, Me = R && ee || w, Le = `${a}-grid-label`, Ke = z !== null, it = j?.calendarHeader ?? Fn, lt = me({
+  }), Ce = R && ee || O, Me = R && ee || w, Le = `${a}-grid-label`, Ke = z !== null, it = $?.calendarHeader ?? Fn, lt = me({
     elementType: it,
     externalSlotProps: re?.calendarHeader,
     additionalProps: {
@@ -8967,7 +8971,7 @@ const sc = q(ec, {
     Be ? (E(Be, "finish"), K({
       target: Be,
       reason: "cell-interaction"
-    })) : (B(), K({
+    })) : (j(), K({
       target: Re,
       reason: "cell-interaction"
     }));
@@ -8985,7 +8989,7 @@ const sc = q(ec, {
     Be ? (E(Be, "finish"), K({
       target: Be,
       reason: "cell-interaction"
-    })) : (B(), K({
+    })) : (j(), K({
       target: Re,
       reason: "cell-interaction"
     }));
@@ -8996,7 +9000,7 @@ const sc = q(ec, {
       reason: "controlled-value-change"
     });
   }, [ee]);
-  const we = oc($), Oe = {
+  const we = oc(B), Oe = {
     disablePast: b,
     disableFuture: g,
     maxDate: w,
@@ -9007,7 +9011,7 @@ const sc = q(ec, {
     disabled: R,
     timezone: _,
     gridLabelId: Le,
-    slots: j,
+    slots: $,
     slotProps: re
   }, ve = f.useRef(Y);
   f.useEffect(() => {
@@ -9020,7 +9024,7 @@ const sc = q(ec, {
     ownerState: s
   }, he, {
     children: [/* @__PURE__ */ C(it, p({}, lt, {
-      slots: j,
+      slots: $,
       slotProps: re
     })), /* @__PURE__ */ C(ac, {
       reduceAnimations: m,
@@ -9323,7 +9327,7 @@ const ot = ({
   onYearChange: v,
   yearsOrder: A,
   yearsPerRow: T,
-  slots: $,
+  slots: B,
   slotProps: R,
   loading: F,
   renderLoading: O,
@@ -9334,7 +9338,7 @@ const ot = ({
   dayOfWeekFormatter: L,
   sx: M,
   autoFocus: Q,
-  fixedWeekNumber: j,
+  fixedWeekNumber: $,
   displayWeekNumber: re,
   timezone: W
 }) => /* @__PURE__ */ C(Vn, {
@@ -9362,7 +9366,7 @@ const ot = ({
   onYearChange: v,
   yearsOrder: A,
   yearsPerRow: T,
-  slots: $,
+  slots: B,
   slotProps: R,
   loading: F,
   renderLoading: O,
@@ -9373,7 +9377,7 @@ const ot = ({
   dayOfWeekFormatter: L,
   sx: M,
   autoFocus: Q,
-  fixedWeekNumber: j,
+  fixedWeekNumber: $,
   displayWeekNumber: re,
   timezone: W
 });
@@ -10605,7 +10609,7 @@ const mc = {
       error: A,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       focused: T,
-      ...$
+      ...B
     } = o, R = at(), F = Ve(
       n,
       Ve(R.triggerRef, R.rootRef)
@@ -10613,7 +10617,7 @@ const mc = {
     return /* @__PURE__ */ ge(
       hc,
       {
-        ...$,
+        ...B,
         ref: F,
         error: A,
         color: S,

package/dist/components/Datepicker/Datepicker.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { D, D as f } from "../../Datepicker-ixcQBj5A.js";
+import { D, D as f } from "../../Datepicker-CE6vashk.js";
 import "../../generateUtilityClass-BhfUaMgk.js";
 import "../../styled-BKpRY52y.js";
 import "../../useForkRef-9kN4DArm.js";

package/dist/components/Datepicker/index.js

@@ -1,5 +1,5 @@
-import { c as e, a as r, b as i, D as t, L as l, M as o, P as d, e as C, d as c, f as D, D as k, g as n, j as p, i as P, p as y, h as f } from "../../Datepicker-ixcQBj5A.js";
-import { A as b } from "../../AdapterDayjs-BKhf_aHy.js";
+import { c as e, a as r, b as i, D as t, L as l, M as o, P as d, e as C, d as c, f as D, D as k, g as n, j as p, i as P, p as y, h as f } from "../../Datepicker-CE6vashk.js";
+import { A as b } from "../../AdapterDayjs-BkUCTS9t.js";
 export {
   b as AdapterDayjs,
   e as DateCalendar,

package/dist/components/DatepickerControl/DatepickerControl.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { D } from "../../Datepicker-ixcQBj5A.js";
+import { D } from "../../Datepicker-CE6vashk.js";
 import { FormSublabel as b } from "../FormSublabel/FormSublabel.js";
 import { useId as w } from "../../hooks/useId.js";
 import "../../icons/ClearstoryIcon.js";

package/dist/main.js

@@ -11,7 +11,7 @@ import { I as ha } from "./Info-BIwRC_L9.js";
 import { StyledEngineProvider as Pa } from "./theme/index.js";
 import { A as Fa, a as va, c as Oa, g as Ma } from "./Autocomplete-BG3jpE2X.js";
 import { AutocompleteControl as Ga } from "./components/AutocompleteControl/AutocompleteControl.js";
-import { c as Ea, a as Na, b as Va, D as Ka, L as za, M as Wa, P as Za, e as ja, d as Qa, f as qa, g as Ja, j as Xa, i as Ya, p as _a, h as $a } from "./Datepicker-ixcQBj5A.js";
+import { c as Ea, a as Na, b as Va, D as Ka, L as za, M as Wa, P as Za, e as ja, d as Qa, f as qa, g as Ja, j as Xa, i as Ya, p as _a, h as $a } from "./Datepicker-CE6vashk.js";
 import { DescriptionDetails as at } from "./components/DescriptionDetails/DescriptionDetails.js";
 import { DescriptionList as ot } from "./components/DescriptionList/DescriptionList.js";
 import { useDescriptionListContext as rt } from "./components/DescriptionList/DescriptionListContext.js";
@@ -137,7 +137,7 @@ import { Z as RC } from "./Zoom-Ia0xnNsL.js";
 import { a as HC, d as EC, e as NC, g as VC, b as KC, l as zC } from "./createTheme-Cr8frjQ0.js";
 import { u as ZC } from "./ThemeProviderWithVars-hLmfDgWo.js";
 import { C as QC } from "./ClickAwayListener-DwFm5IeK.js";
-import { A as JC } from "./AdapterDayjs-BKhf_aHy.js";
+import { A as JC } from "./AdapterDayjs-BkUCTS9t.js";
 export {
   g as AccessTimeIcon,
   Zt as Accordion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clearstory/drywall-react",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "license": "UNLICENSED",
   "description": "a Clearstory software design system",
   "type": "module",
@@ -37,7 +37,7 @@
     "@mui/material": "7.3.6",
     "@mui/system": "7.3.6",
     "@mui/utils": "7.3.6",
-    "@mui/x-date-pickers": "8.22.0",
+    "@mui/x-date-pickers": "8.23.0",
     "react-hot-toast": "2.6.0",
     "react-number-format": "^5.4.4"
   },