@clearstory/drywall-react 3.2.0 → 3.2.1

package/dist/{Autocomplete-tzEooGdJ.js → Autocomplete-CfXcTXLL.js}

@@ -22,7 +22,7 @@ import { u as ut } from "./useControlled-nm4pBabJ.js";
 import { u as Kt } from "./usePreviousProps-ByGlbpJ6.js";
 import { u as Ge } from "./useEventCallback-BAQJJ3ye.js";
 import { s as qt } from "./Portal-BD1qgEF2.js";
-import { s as j } from "./styled-fvngWWLy.js";
+import { s as B } from "./styled-fvngWWLy.js";
 import { P as Dt } from "./Paper-DpGDlTnE.js";
 import { P as Rt } from "./Popper-CEmc3hgj.js";
 import { C as _t } from "./Chip-BzXGbbX1.js";
@@ -36,9 +36,9 @@ function At({
   array2: p,
   parser: g = (f) => f
 }) {
-  return n && p && n.length === p.length && n.every((f, w) => g(f) === g(p[w]));
+  return n && p && n.length === p.length && n.every((f, T) => g(f) === g(p[T]));
 }
-function Tt(n) {
+function wt(n) {
   return n.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
 }
 function Qt(n = {}) {
@@ -46,29 +46,29 @@ function Qt(n = {}) {
     ignoreAccents: p = !0,
     ignoreCase: g = !0,
     limit: f,
-    matchFrom: w = "any",
+    matchFrom: T = "any",
     stringify: V,
     trim: N = !1
   } = n;
   return (D, {
-    inputValue: B,
+    inputValue: U,
     getOptionLabel: O
   }) => {
-    let T = N ? B.trim() : B;
-    g && (T = T.toLowerCase()), p && (T = Tt(T));
-    const U = T ? D.filter((ue) => {
+    let A = N ? U.trim() : U;
+    g && (A = A.toLowerCase()), p && (A = wt(A));
+    const F = A ? D.filter((ue) => {
       let S = (V || O)(ue);
-      return g && (S = S.toLowerCase()), p && (S = Tt(S)), w === "start" ? S.startsWith(T) : S.includes(T);
+      return g && (S = S.toLowerCase()), p && (S = wt(S)), T === "start" ? S.startsWith(A) : S.includes(A);
     }) : D;
-    return typeof f == "number" ? U.slice(0, f) : U;
+    return typeof f == "number" ? F.slice(0, f) : F;
   };
 }
-const Zt = Qt(), wt = 5, eo = (n) => n.current !== null && n.current.parentElement?.contains(document.activeElement), to = [];
+const Zt = Qt(), Tt = 5, eo = (n) => n.current !== null && n.current.parentElement?.contains(document.activeElement), to = [];
 function St(n, p, g, f) {
   if (p || n == null || f)
     return "";
-  const w = g(n);
-  return typeof w == "string" ? w : "";
+  const T = g(n);
+  return typeof T == "string" ? T : "";
 }
 function oo(n) {
   const {
@@ -77,14 +77,14 @@ function oo(n) {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     unstable_classNamePrefix: g = "Mui",
     autoComplete: f = !1,
-    autoHighlight: w = !1,
+    autoHighlight: T = !1,
     autoSelect: V = !1,
     blurOnSelect: N = !1,
     clearOnBlur: D = !n.freeSolo,
-    clearOnEscape: B = !1,
+    clearOnEscape: U = !1,
     componentName: O = "useAutocomplete",
-    defaultValue: T = n.multiple ? to : null,
-    disableClearable: U = !1,
+    defaultValue: A = n.multiple ? to : null,
+    disableClearable: F = !1,
     disableCloseOnSelect: ue = !1,
     disabled: S,
     disabledItemsFocusable: Le = !1,
@@ -127,9 +127,9 @@ function oo(n) {
     }
     return e;
   };
-  const Oe = y.useRef(!1), Pe = y.useRef(!0), b = y.useRef(null), M = y.useRef(null), [Ce, bt] = y.useState(null), [E, Ve] = y.useState(-1), Ye = w ? 0 : -1, A = y.useRef(Ye), It = y.useRef(St(T ?? Me, u, P)).current, [i, $e] = ut({
+  const Oe = y.useRef(!1), Pe = y.useRef(!0), b = y.useRef(null), M = y.useRef(null), [Ce, bt] = y.useState(null), [E, Ve] = y.useState(-1), Ye = T ? 0 : -1, w = y.useRef(Ye), It = y.useRef(St(A ?? Me, u, P)).current, [i, $e] = ut({
     controlled: Me,
-    default: T,
+    default: A,
     name: O
   }), [d, ae] = ut({
     controlled: Re,
@@ -154,16 +154,16 @@ function oo(n) {
       inputValue: He && xt ? "" : d,
       getOptionLabel: P
     }
-  ) : [], F = Kt({
+  ) : [], H = Kt({
     filteredOptions: m,
     value: i,
     inputValue: d
   });
   y.useEffect(() => {
-    const t = i !== F.value;
+    const t = i !== H.value;
     de && !t || ce && !t || fe(null, i, "reset");
-  }, [i, fe, de, F.value, ce]);
-  const ze = K && m.length > 0 && !G, H = Ge((t) => {
+  }, [i, fe, de, H.value, ce]);
+  const ze = K && m.length > 0 && !G, z = Ge((t) => {
     if (t === -1)
       b.current.focus();
     else {
@@ -172,8 +172,8 @@ function oo(n) {
     }
   });
   y.useEffect(() => {
-    u && E > i.length - 1 && (Ve(-1), H(-1));
-  }, [i, u, E, H]);
+    u && E > i.length - 1 && (Ve(-1), z(-1));
+  }, [i, u, E, z]);
   function Qe(t, e) {
     if (!M.current || t < 0 || t >= m.length)
       return -1;
@@ -191,7 +191,7 @@ function oo(n) {
     index: e,
     reason: r
   }) => {
-    if (A.current = e, e === -1 ? b.current.removeAttribute("aria-activedescendant") : b.current.setAttribute("aria-activedescendant", `${R}-option-${e}`), Ee && ["mouse", "keyboard", "touch"].includes(r) && Ee(t, e === -1 ? null : m[e], r), !M.current)
+    if (w.current = e, e === -1 ? b.current.removeAttribute("aria-activedescendant") : b.current.setAttribute("aria-activedescendant", `${R}-option-${e}`), Ee && ["mouse", "keyboard", "touch"].includes(r) && Ee(t, e === -1 ? null : m[e], r), !M.current)
       return;
     const a = M.current.querySelector(`[role="option"].${g}-focused`);
     a && (a.classList.remove(`${g}-focused`), a.classList.remove(`${g}-focusVisible`));
@@ -207,7 +207,7 @@ function oo(n) {
       const I = h, k = l.clientHeight + l.scrollTop, be = I.offsetTop + I.offsetHeight;
       be > k ? l.scrollTop = be - l.clientHeight : I.offsetTop - I.offsetHeight * (re ? 1.3 : 0) < l.scrollTop && (l.scrollTop = I.offsetTop - I.offsetHeight * (re ? 1.3 : 0));
     }
-  }), z = Ge(({
+  }), j = Ge(({
     event: t,
     diff: e,
     direction: r = "next",
@@ -223,8 +223,8 @@ function oo(n) {
         return 0;
       if (e === "end")
         return I;
-      const k = A.current + e;
-      return k < 0 ? k === -1 && ye ? -1 : ke && A.current !== -1 || Math.abs(e) > 1 ? 0 : I : k > I ? k === I + 1 && ye ? -1 : ke || Math.abs(e) > 1 ? I : 0 : k;
+      const k = w.current + e;
+      return k < 0 ? k === -1 && ye ? -1 : ke && w.current !== -1 || Math.abs(e) > 1 ? 0 : I : k > I ? k === I + 1 && ye ? -1 : ke || Math.abs(e) > 1 ? I : 0 : k;
     })(), r);
     if (q({
       index: h,
@@ -238,7 +238,7 @@ function oo(n) {
         b.current.value = I, I.toLowerCase().indexOf(d.toLowerCase()) === 0 && d.length > 0 && b.current.setSelectionRange(d.length, I.length);
       }
   }), je = !At({
-    array1: F.filteredOptions,
+    array1: H.filteredOptions,
     array2: m,
     parser: P
   }), Ze = () => {
@@ -246,12 +246,12 @@ function oo(n) {
       const a = e ? P(e) : "", l = r ? P(r) : "";
       return a === l;
     };
-    if (A.current !== -1 && !At({
-      array1: F.filteredOptions,
+    if (w.current !== -1 && !At({
+      array1: H.filteredOptions,
       array2: m,
       parser: P
-    }) && F.inputValue === d && (u ? i.length === F.value.length && F.value.every((e, r) => P(i[r]) === P(e)) : t(F.value, i))) {
-      const e = F.filteredOptions[A.current];
+    }) && H.inputValue === d && (u ? i.length === H.value.length && H.value.every((e, r) => P(i[r]) === P(e)) : t(H.value, i))) {
+      const e = H.filteredOptions[w.current];
       if (e)
         return m.findIndex((r) => P(r) === P(e));
     }
@@ -261,37 +261,37 @@ function oo(n) {
       return;
     const t = Ze();
     if (t !== -1) {
-      A.current = t;
+      w.current = t;
       return;
     }
     const e = u ? i[0] : i;
     if (m.length === 0 || e == null) {
-      z({
+      j({
         diff: "reset"
       });
       return;
     }
     if (M.current) {
       if (e != null) {
-        const r = m[A.current];
+        const r = m[w.current];
         if (u && r && i.findIndex((l) => Y(r, l)) !== -1)
           return;
         const a = m.findIndex((l) => Y(l, e));
-        a === -1 ? z({
+        a === -1 ? j({
           diff: "reset"
         }) : q({
           index: a
         });
         return;
       }
-      if (A.current >= m.length - 1) {
+      if (w.current >= m.length - 1) {
         q({
           index: m.length - 1
         });
         return;
       }
       q({
-        index: A.current
+        index: w.current
       });
     }
   }, [
@@ -301,7 +301,7 @@ function oo(n) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     u ? !1 : i,
     De,
-    z,
+    j,
     q,
     L,
     d,
@@ -361,14 +361,14 @@ function oo(n) {
       return;
     d === "" && ie(t, "toggleInput");
     let r = E;
-    E === -1 ? d === "" && e === "previous" && (r = i.length - 1) : (r += e === "next" ? 1 : -1, r < 0 && (r = 0), r === i.length && (r = -1)), r = et(r, e), Ve(r), H(r);
+    E === -1 ? d === "" && e === "previous" && (r = i.length - 1) : (r += e === "next" ? 1 : -1, r < 0 && (r = 0), r === i.length && (r = -1)), r = et(r, e), Ve(r), z(r);
   }, Be = (t) => {
     Oe.current = !0, ae(""), Q && Q(t, "", "clear"), J(t, u ? [] : null, "clear");
   }, tt = (t) => (e) => {
-    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (E !== -1 && !["ArrowLeft", "ArrowRight"].includes(e.key) && (Ve(-1), H(-1)), e.which !== 229))
+    if (t.onKeyDown && t.onKeyDown(e), !e.defaultMuiPrevented && (E !== -1 && !["ArrowLeft", "ArrowRight"].includes(e.key) && (Ve(-1), z(-1)), e.which !== 229))
       switch (e.key) {
         case "Home":
-          L && qe && (e.preventDefault(), z({
+          L && qe && (e.preventDefault(), j({
             diff: "start",
             direction: "next",
             reason: "keyboard",
@@ -376,7 +376,7 @@ function oo(n) {
           }));
           break;
         case "End":
-          L && qe && (e.preventDefault(), z({
+          L && qe && (e.preventDefault(), j({
             diff: "end",
             direction: "previous",
             reason: "keyboard",
@@ -384,23 +384,23 @@ function oo(n) {
           }));
           break;
         case "PageUp":
-          e.preventDefault(), z({
-            diff: -wt,
+          e.preventDefault(), j({
+            diff: -Tt,
             direction: "previous",
             reason: "keyboard",
             event: e
           }), _(e);
           break;
         case "PageDown":
-          e.preventDefault(), z({
-            diff: wt,
+          e.preventDefault(), j({
+            diff: Tt,
             direction: "next",
             reason: "keyboard",
             event: e
           }), _(e);
           break;
         case "ArrowDown":
-          e.preventDefault(), z({
+          e.preventDefault(), j({
             diff: 1,
             direction: "next",
             reason: "keyboard",
@@ -408,7 +408,7 @@ function oo(n) {
           }), _(e);
           break;
         case "ArrowUp":
-          e.preventDefault(), z({
+          e.preventDefault(), j({
             diff: -1,
             direction: "previous",
             reason: "keyboard",
@@ -416,21 +416,21 @@ function oo(n) {
           }), _(e);
           break;
         case "ArrowLeft":
-          !u && v ? H(0) : se(e, "previous");
+          !u && v ? z(0) : se(e, "previous");
           break;
         case "ArrowRight":
-          !u && v ? H(-1) : se(e, "next");
+          !u && v ? z(-1) : se(e, "next");
           break;
         case "Enter":
-          if (A.current !== -1 && L) {
-            const r = m[A.current], a = W ? W(r) : !1;
+          if (w.current !== -1 && L) {
+            const r = m[w.current], a = W ? W(r) : !1;
             if (e.preventDefault(), a)
               return;
             ee(e, r, "selectOption"), f && b.current.setSelectionRange(b.current.value.length, b.current.value.length);
           } else ce && d !== "" && He === !1 && (u && e.preventDefault(), ee(e, d, "createOption", "freeSolo"));
           break;
         case "Escape":
-          L ? (e.preventDefault(), e.stopPropagation(), ie(e, "escape")) : B && (d !== "" || u && i.length > 0 || v) && (e.preventDefault(), e.stopPropagation(), Be(e));
+          L ? (e.preventDefault(), e.stopPropagation(), ie(e, "escape")) : U && (d !== "" || u && i.length > 0 || v) && (e.preventDefault(), e.stopPropagation(), Be(e));
           break;
         case "Backspace":
           if (u && !G && d === "" && i.length > 0) {
@@ -439,7 +439,7 @@ function oo(n) {
               option: i[r]
             });
           }
-          !u && v && !G && ($e(null), H(-1));
+          !u && v && !G && ($e(null), z(-1));
           break;
         case "Delete":
           if (u && !G && d === "" && i.length > 0 && E !== -1) {
@@ -448,7 +448,7 @@ function oo(n) {
               option: i[r]
             });
           }
-          !u && v && !G && ($e(null), H(-1));
+          !u && v && !G && ($e(null), z(-1));
           break;
       }
   }, me = (t) => {
@@ -458,13 +458,13 @@ function oo(n) {
       b.current.focus();
       return;
     }
-    Fe(!1), Pe.current = !0, Oe.current = !1, V && A.current !== -1 && L ? ee(t, m[A.current], "blur") : V && ce && d !== "" ? ee(t, d, "blur", "freeSolo") : D && fe(t, i, "blur"), ie(t, "blur");
-  }, Te = (t) => {
+    Fe(!1), Pe.current = !0, Oe.current = !1, V && w.current !== -1 && L ? ee(t, m[w.current], "blur") : V && ce && d !== "" ? ee(t, d, "blur", "freeSolo") : D && fe(t, i, "blur"), ie(t, "blur");
+  }, we = (t) => {
     const e = t.target.value;
-    d !== e && (ae(e), ge(!1), Q && Q(t, e, "input")), e === "" ? !U && !u && J(t, null, "clear") : _(t);
+    d !== e && (ae(e), ge(!1), Q && Q(t, e, "input")), e === "" ? !F && !u && J(t, null, "clear") : _(t);
   }, ot = (t) => {
     const e = Number(t.currentTarget.getAttribute("data-option-index"));
-    A.current !== e && q({
+    w.current !== e && q({
       event: t,
       index: e,
       reason: "mouse"
@@ -483,7 +483,7 @@ function oo(n) {
     r.splice(t, 1), J(e, r, "removeOption", {
       option: i[t]
     });
-  }, we = (t) => {
+  }, Te = (t) => {
     J(t, null, "removeOption", {
       option: i
     });
@@ -528,7 +528,7 @@ function oo(n) {
       value: d,
       onBlur: he,
       onFocus: me,
-      onChange: Te,
+      onChange: we,
       onMouseDown: lt,
       // if open then this is handled imperatively so don't let react override
       // only have an opinion about this when closed
@@ -563,7 +563,7 @@ function oo(n) {
       },
       tabIndex: -1,
       ...!G && {
-        onDelete: u ? at(t) : we
+        onDelete: u ? at(t) : Te
       }
     }),
     getPopupIndicatorProps: () => ({
@@ -634,18 +634,18 @@ const ro = (n) => {
     classes: p,
     disablePortal: g,
     expanded: f,
-    focused: w,
+    focused: T,
     fullWidth: V,
     hasClearIcon: N,
     hasPopupIcon: D,
-    inputFocused: B,
+    inputFocused: U,
     popupOpen: O,
-    size: T
-  } = n, U = {
-    root: ["root", f && "expanded", w && "focused", V && "fullWidth", N && "hasClearIcon", D && "hasPopupIcon"],
+    size: A
+  } = n, F = {
+    root: ["root", f && "expanded", T && "focused", V && "fullWidth", N && "hasClearIcon", D && "hasPopupIcon"],
     inputRoot: ["inputRoot"],
-    input: ["input", B && "inputFocused"],
-    tag: ["tag", `tagSize${kt(T)}`],
+    input: ["input", U && "inputFocused"],
+    tag: ["tag", `tagSize${kt(A)}`],
     endAdornment: ["endAdornment"],
     clearIndicator: ["clearIndicator"],
     popupIndicator: ["popupIndicator", O && "popupIndicatorOpen"],
@@ -658,8 +658,8 @@ const ro = (n) => {
     groupLabel: ["groupLabel"],
     groupUl: ["groupUl"]
   };
-  return Jt(U, no, p);
-}, ao = j("div", {
+  return Jt(F, no, p);
+}, ao = B("div", {
   name: "MuiAutocomplete",
   slot: "Root",
   overridesResolver: (n, p) => {
@@ -667,7 +667,7 @@ const ro = (n) => {
       ownerState: g
     } = n, {
       fullWidth: f,
-      hasClearIcon: w,
+      hasClearIcon: T,
       hasPopupIcon: V,
       inputFocused: N,
       size: D
@@ -682,7 +682,7 @@ const ro = (n) => {
       [`& .${s.input}`]: p.input
     }, {
       [`& .${s.input}`]: N && p.inputFocused
-    }, p.root, f && p.fullWidth, V && p.hasPopupIcon, w && p.hasClearIcon];
+    }, p.root, f && p.fullWidth, V && p.hasPopupIcon, T && p.hasClearIcon];
   }
 })({
   [`&.${s.focused} .${s.clearIndicator}`]: {
@@ -826,7 +826,7 @@ const ro = (n) => {
       }
     }
   }]
-}), lo = j("div", {
+}), lo = B("div", {
   name: "MuiAutocomplete",
   slot: "EndAdornment"
 })({
@@ -835,14 +835,14 @@ const ro = (n) => {
   right: 0,
   top: "50%",
   transform: "translate(0, -50%)"
-}), io = j(Et, {
+}), io = B(Et, {
   name: "MuiAutocomplete",
   slot: "ClearIndicator"
 })({
   marginRight: -2,
   padding: 4,
   visibility: "hidden"
-}), so = j(Et, {
+}), so = B(Et, {
   name: "MuiAutocomplete",
   slot: "PopupIndicator",
   overridesResolver: (n, p) => {
@@ -862,7 +862,7 @@ const ro = (n) => {
       transform: "rotate(180deg)"
     }
   }]
-}), po = j(Rt, {
+}), po = B(Rt, {
   name: "MuiAutocomplete",
   slot: "Popper",
   overridesResolver: (n, p) => {
@@ -885,7 +885,7 @@ const ro = (n) => {
       position: "absolute"
     }
   }]
-}))), uo = j(Dt, {
+}))), uo = B(Dt, {
   name: "MuiAutocomplete",
   slot: "Paper"
 })(xe(({
@@ -893,7 +893,7 @@ const ro = (n) => {
 }) => ({
   ...n.typography.body1,
   overflow: "auto"
-}))), co = j("div", {
+}))), co = B("div", {
   name: "MuiAutocomplete",
   slot: "Loading"
 })(xe(({
@@ -901,7 +901,7 @@ const ro = (n) => {
 }) => ({
   color: (n.vars || n).palette.text.secondary,
   padding: "14px 16px"
-}))), fo = j("div", {
+}))), fo = B("div", {
   name: "MuiAutocomplete",
   slot: "NoOptions"
 })(xe(({
@@ -909,7 +909,7 @@ const ro = (n) => {
 }) => ({
   color: (n.vars || n).palette.text.secondary,
   padding: "14px 16px"
-}))), go = j("ul", {
+}))), go = B("ul", {
   name: "MuiAutocomplete",
   slot: "Listbox"
 })(xe(({
@@ -966,7 +966,7 @@ const ro = (n) => {
       }
     }
   }
-}))), mo = j(Xt, {
+}))), mo = B(Xt, {
   name: "MuiAutocomplete",
   slot: "GroupLabel"
 })(xe(({
@@ -974,7 +974,7 @@ const ro = (n) => {
 }) => ({
   backgroundColor: (n.vars || n).palette.background.paper,
   top: -8
-}))), ho = j("ul", {
+}))), ho = B("ul", {
   name: "MuiAutocomplete",
   slot: "GroupUl"
 })({
@@ -987,16 +987,16 @@ const ro = (n) => {
     props: p,
     name: "MuiAutocomplete"
   }), {
-    autoComplete: w = !1,
+    autoComplete: T = !1,
     autoHighlight: V = !1,
     autoSelect: N = !1,
     blurOnSelect: D = !1,
-    ChipProps: B,
+    ChipProps: U,
     className: O,
-    clearIcon: T = vt || (vt = /* @__PURE__ */ $(jt, {
+    clearIcon: A = vt || (vt = /* @__PURE__ */ $(jt, {
       fontSize: "small"
     })),
-    clearOnBlur: U = !f.freeSolo,
+    clearOnBlur: F = !f.freeSolo,
     clearOnEscape: ue = !1,
     clearText: S = "Clear",
     closeText: Le = "Close",
@@ -1037,7 +1037,7 @@ const ro = (n) => {
     onOpen: E,
     open: Ve,
     openOnFocus: Ye = !1,
-    openText: A = "Open",
+    openText: w = "Open",
     options: It,
     PaperComponent: i,
     PopperComponent: $e,
@@ -1053,13 +1053,13 @@ const ro = (n) => {
     slots: He = {},
     slotProps: L = {},
     value: m,
-    ...F
+    ...H
   } = f, {
     getRootProps: ze,
-    getInputProps: H,
+    getInputProps: z,
     getInputLabelProps: Qe,
     getPopupIndicatorProps: q,
-    getClearProps: z,
+    getClearProps: j,
     getItemProps: je,
     getListboxProps: Ze,
     getOptionProps: Ae,
@@ -1077,20 +1077,20 @@ const ro = (n) => {
   } = oo({
     ...f,
     componentName: "Autocomplete"
-  }), he = !De && !W && _ && !ae, Te = (!Re || ye === !0) && ye !== !1, {
+  }), he = !De && !W && _ && !ae, we = (!Re || ye === !0) && ye !== !1, {
     onMouseDown: ot
-  } = H(), {
+  } = z(), {
     ref: nt,
     ...rt
-  } = Ze(), we = Ee || ((c) => c.label ?? c), x = {
+  } = Ze(), Te = Ee || ((c) => c.label ?? c), x = {
     ...f,
     disablePortal: re,
     expanded: ie,
     focused: ee,
     fullWidth: Y,
-    getOptionLabel: we,
+    getOptionLabel: Te,
     hasClearIcon: he,
-    hasPopupIcon: Te,
+    hasPopupIcon: we,
     inputFocused: et === -1,
     popupOpen: X,
     size: ge
@@ -1101,7 +1101,7 @@ const ro = (n) => {
       ...He
     },
     slotProps: {
-      chip: B,
+      chip: U,
       listbox: Me,
       ...ke,
       ...L
@@ -1147,7 +1147,7 @@ const ro = (n) => {
       index: oe
     });
     return /* @__PURE__ */ $(_t, {
-      label: we(c),
+      label: Te(c),
       size: ge,
       ...ve,
       ...te.slotProps.chip
@@ -1177,7 +1177,7 @@ const ro = (n) => {
     } = c;
     return /* @__PURE__ */ $("li", {
       ...ve,
-      children: we(oe)
+      children: Te(oe)
     }, ne);
   }), yt = (c, oe) => {
     const ne = Ae({
@@ -1198,7 +1198,7 @@ const ro = (n) => {
       ref: g,
       className: it(C.root, O),
       ownerState: x,
-      ...ze(F),
+      ...ze(H),
       children: Fe({
         id: J,
         disabled: W,
@@ -1212,23 +1212,23 @@ const ro = (n) => {
           onMouseDown: (c) => {
             c.target === c.currentTarget && ot(c);
           },
-          ...(he || Te) && {
+          ...(he || we) && {
             endAdornment: /* @__PURE__ */ We(lo, {
               className: C.endAdornment,
               ownerState: x,
               children: [he ? /* @__PURE__ */ $(io, {
-                ...z(),
+                ...j(),
                 "aria-label": S,
                 title: S,
                 ownerState: x,
                 ...Ot,
                 className: it(C.clearIndicator, Ot?.className),
-                children: T
-              }) : null, Te ? /* @__PURE__ */ $(so, {
+                children: A
+              }) : null, we ? /* @__PURE__ */ $(so, {
                 ...q(),
                 disabled: W,
-                "aria-label": X ? Le : A,
-                title: X ? Le : A,
+                "aria-label": X ? Le : w,
+                title: X ? Le : w,
                 ownerState: x,
                 ...Pt,
                 className: it(C.popupIndicator, Pt?.className),
@@ -1241,7 +1241,7 @@ const ro = (n) => {
           className: C.input,
           disabled: W,
           readOnly: ae,
-          ...H()
+          ...z()
         }
       })
     }), se ? /* @__PURE__ */ $(po, {
@@ -1733,36 +1733,49 @@ function bo(n, p) {
   const {
     color: g = "primary",
     size: f = "small",
-    placeholder: w,
+    placeholder: T,
     error: V,
     name: N,
-    renderInput: D = (U) => {
-      const { ref: ue, ...S } = U.InputProps;
+    renderInput: D = (F) => {
+      const { ref: ue, ...S } = F.InputProps;
       return /* @__PURE__ */ $(
         Vt,
         {
           ref: ue,
           ...S,
-          inputProps: U.inputProps,
-          placeholder: w,
+          inputProps: F.inputProps,
+          inputRef: F.inputProps.ref,
+          placeholder: T,
           color: g,
           size: f,
           error: V,
-          name: N
+          name: N,
+          sx: {
+            ...A.multiple && {
+              flexWrap: "wrap",
+              justifyContent: "flex-start",
+              input: {
+                width: "auto"
+              },
+              ".DrywallAutocomplete-tag": {
+                margin: 0.5
+              }
+            }
+          }
         }
       );
     },
-    popupIcon: B = /* @__PURE__ */ $(Ft, {}),
+    popupIcon: U = /* @__PURE__ */ $(Ft, {}),
     clearIcon: O = /* @__PURE__ */ $(Ht, {}),
-    ...T
+    ...A
   } = n;
   return /* @__PURE__ */ $(
     Nt,
     {
       ref: p,
-      ...T,
+      ...A,
       renderInput: D,
-      popupIcon: B,
+      popupIcon: U,
       clearIcon: O
     }
   );

package/dist/{SelectControl-CdviGNA_.js → SelectControl-in4PcK4c.js}

@@ -7,7 +7,7 @@ import "./icons/MoneyBucketIcon.js";
 import "./icons/MoreCircleOutlineIcon.js";
 import { I as $ } from "./Info-DtWHV9kz.js";
 import "./theme/index.js";
-import { A as K } from "./Autocomplete-tzEooGdJ.js";
+import { A as K } from "./Autocomplete-CfXcTXLL.js";
 import { D as M } from "./Datepicker-u8DjTSV8.js";
 import { Input as O } from "./components/Input/Input.js";
 import { Select as Q } from "./components/Select/Select.js";

package/dist/components/Autocomplete/Autocomplete.js

@@ -6,7 +6,7 @@ import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Clear-ABzw_mBN.js";
-import { A as l, A as s } from "../../Autocomplete-tzEooGdJ.js";
+import { A as l, A as s } from "../../Autocomplete-CfXcTXLL.js";
 export {
   l as Autocomplete,
   s as default

package/dist/components/Autocomplete/Autocomplete.theme.js

@@ -7,7 +7,7 @@ const r = {
   },
   styleOverrides: {
     listbox: ({ theme: o }) => ({
-      li: {
+      '[role="option"]': {
         cursor: "pointer",
         fontSize: "0.875rem",
         paddingBlock: o.spacing(1),

package/dist/components/Autocomplete/index.js

@@ -1,4 +1,4 @@
-import { A as a, a as s, c as o, A as l, g as c } from "../../Autocomplete-tzEooGdJ.js";
+import { A as a, a as s, c as o, A as l, g as c } from "../../Autocomplete-CfXcTXLL.js";
 export {
   a as Autocomplete,
   s as autocompleteClasses,

package/dist/components/AutocompleteControl/AutocompleteControl.js

@@ -7,8 +7,8 @@ import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
-import "../../Autocomplete-tzEooGdJ.js";
-import { A as v } from "../../SelectControl-CdviGNA_.js";
+import "../../Autocomplete-CfXcTXLL.js";
+import { A as v } from "../../SelectControl-in4PcK4c.js";
 import "../../Datepicker-u8DjTSV8.js";
 import "../Input/Input.js";
 import "../Select/Select.js";

package/dist/components/AutocompleteControl/index.js

@@ -1,4 +1,4 @@
-import { A as e } from "../../SelectControl-CdviGNA_.js";
+import { A as e } from "../../SelectControl-in4PcK4c.js";
 export {
   e as AutocompleteControl
 };

package/dist/components/DatepickerControl/DatepickerControl.js

@@ -7,8 +7,8 @@ import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
-import "../../Autocomplete-tzEooGdJ.js";
-import { D as v } from "../../SelectControl-CdviGNA_.js";
+import "../../Autocomplete-CfXcTXLL.js";
+import { D as v } from "../../SelectControl-in4PcK4c.js";
 import "../../Datepicker-u8DjTSV8.js";
 import "../Input/Input.js";
 import "../Select/Select.js";

package/dist/components/DatepickerControl/index.js

@@ -1,4 +1,4 @@
-import { D as e } from "../../SelectControl-CdviGNA_.js";
+import { D as e } from "../../SelectControl-in4PcK4c.js";
 export {
   e as DatepickerControl
 };

package/dist/components/FormSublabel/FormSublabel.js

@@ -4,8 +4,8 @@ import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../theme/index.js";
-import "../../Autocomplete-tzEooGdJ.js";
-import { F as h } from "../../SelectControl-CdviGNA_.js";
+import "../../Autocomplete-CfXcTXLL.js";
+import { F as h } from "../../SelectControl-in4PcK4c.js";
 import "../../Datepicker-u8DjTSV8.js";
 import "../Input/Input.js";
 import "../Select/Select.js";

package/dist/components/FormSublabel/index.js

@@ -1,4 +1,4 @@
-import { F as a } from "../../SelectControl-CdviGNA_.js";
+import { F as a } from "../../SelectControl-in4PcK4c.js";
 export {
   a as FormSublabel
 };

package/dist/components/Input/Input.d.ts

@@ -6,5 +6,5 @@ export interface InputProps extends InputBaseProps {
     fullWidth?: boolean;
     notched?: boolean;
 }
-export declare const Input: ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLInputElement>>;
+export declare const Input: ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export default Input;

package/dist/components/Input/Input.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
 import { I as i } from "../../InputBase-CfVedJZK.js";
-const n = f((r, o) => {
+const l = f((r, o) => {
   const {
     color: t = "primary",
     size: e = "small",
@@ -12,13 +12,13 @@ const n = f((r, o) => {
      * Select passes it too eagerly, so we need to explicitly ignore it
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    notched: u,
+    notched: n,
     ...a
   } = r;
   return /* @__PURE__ */ m(
     i,
     {
-      inputRef: o,
+      ref: o,
       error: s,
       color: t,
       size: e,
@@ -27,8 +27,8 @@ const n = f((r, o) => {
     }
   );
 });
-n.displayName = "Input";
+l.displayName = "Input";
 export {
-  n as Input,
-  n as default
+  l as Input,
+  l as default
 };

package/dist/components/InputControl/InputControl.js

@@ -7,8 +7,8 @@ import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
-import "../../Autocomplete-tzEooGdJ.js";
-import { I as v } from "../../SelectControl-CdviGNA_.js";
+import "../../Autocomplete-CfXcTXLL.js";
+import { I as v } from "../../SelectControl-in4PcK4c.js";
 import "../../Datepicker-u8DjTSV8.js";
 import "../Input/Input.js";
 import "../Select/Select.js";

package/dist/components/InputControl/index.js

@@ -1,4 +1,4 @@
-import { I as t } from "../../SelectControl-CdviGNA_.js";
+import { I as t } from "../../SelectControl-in4PcK4c.js";
 export {
   t as InputControl
 };

package/dist/components/SelectControl/SelectControl.js

@@ -7,8 +7,8 @@ import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
-import "../../Autocomplete-tzEooGdJ.js";
-import { S as v } from "../../SelectControl-CdviGNA_.js";
+import "../../Autocomplete-CfXcTXLL.js";
+import { S as v } from "../../SelectControl-in4PcK4c.js";
 import "../../Datepicker-u8DjTSV8.js";
 import "../Input/Input.js";
 import "../Select/Select.js";

package/dist/components/SelectControl/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../../SelectControl-CdviGNA_.js";
+import { S as r } from "../../SelectControl-in4PcK4c.js";
 export {
   r as SelectControl
 };

package/dist/main.js

@@ -8,8 +8,8 @@ import { A as ua, C as ya } from "./Clear-ABzw_mBN.js";
 import { C as Ua, a as ba, E as Sa, I as La, W as Da } from "./WarningAmberOutlined-Bip82sqV.js";
 import { I as Ta } from "./Info-DtWHV9kz.js";
 import { StyledEngineProvider as ka } from "./theme/index.js";
-import { A as wa, a as va, c as Fa, g as Oa } from "./Autocomplete-tzEooGdJ.js";
-import { A as Ra, D as Ga, F as Ha, I as Ea, S as Na } from "./SelectControl-CdviGNA_.js";
+import { A as wa, a as va, c as Fa, g as Oa } from "./Autocomplete-CfXcTXLL.js";
+import { A as Ra, D as Ga, F as Ha, I as Ea, S as Na } from "./SelectControl-in4PcK4c.js";
 import { c as Ka, a as za, b as Wa, D as ja, L as Qa, M as Za, P as qa, e as Ja, d as Xa, f as Ya, g as _a, j as $a, i as so, p as ao, h as oo } from "./Datepicker-u8DjTSV8.js";
 import { Input as eo } from "./components/Input/Input.js";
 import { Select as lo } from "./components/Select/Select.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clearstory/drywall-react",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "license": "UNLICENSED",
   "description": "a Clearstory software design system",
   "type": "module",