@clearstory/drywall-react 3.4.0 → 3.4.1

package/dist/SelectControl-BmDx8v5U.js

@@ -0,0 +1,354 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { useId as $ } from "./hooks/useId.js";
+import "./icons/ClearstoryIcon.js";
+import "./icons/InternalOnlyIcon.js";
+import "./icons/MoneyBucketIcon.js";
+import "./icons/MoreCircleOutlineIcon.js";
+import { I as F } from "./Info-DtWHV9kz.js";
+import "./theme/index.js";
+import { A as M } from "./Autocomplete-CfXcTXLL.js";
+import { D as O } from "./Datepicker-CJBEgBsm.js";
+import "./components/DescriptionDetails/DescriptionDetails.js";
+import "./components/DescriptionList/DescriptionList.js";
+import "./components/DescriptionList/DescriptionListContext.js";
+import "./components/DescriptionTerm/DescriptionTerm.js";
+import { Input as Q } from "./components/Input/Input.js";
+import { Select as U } from "./components/Select/Select.js";
+import "./theme/internal.js";
+import "./components/ToastContainer/ToastContainer.js";
+import "./components/ToastContainer/ToastLabelContext.js";
+import "./index-SzwnPTHF.js";
+import { F as k } from "./FormControl-CuHXXTcL.js";
+import { B as C } from "./Box-CKDKtm7F.js";
+import { F as w } from "./FormLabel-CgNd8XLN.js";
+import { T as B } from "./Tooltip-BJmTHiZe.js";
+import { F as I } from "./FormHelperText-wucHHOG8.js";
+import { s as V } from "./styled-fvngWWLy.js";
+function X(c, m) {
+  const {
+    disabled: d,
+    error: t,
+    helperText: n,
+    id: f,
+    label: p,
+    required: o,
+    slotProps: l,
+    sublabel: s,
+    tooltip: a,
+    ...h
+  } = c, y = $("autocomplete"), i = f || y, r = n ? `${i}-helper` : void 0;
+  return /* @__PURE__ */ b(k, { disabled: d, error: t, ...l?.root, children: [
+    /* @__PURE__ */ b(
+      C,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          gap: "0.25rem"
+        },
+        children: [
+          /* @__PURE__ */ e(w, { htmlFor: i, required: o, ...l?.label, children: p }),
+          a && /* @__PURE__ */ e(B, { title: a, arrow: !0, children: /* @__PURE__ */ e(
+            F,
+            {
+              sx: ({ vars: x }) => ({
+                color: x?.palette.text.secondary,
+                marginBlockEnd: "3px",
+                height: "1rem",
+                width: "1rem"
+              })
+            }
+          ) })
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ e(A, { ...l?.sublabel, children: s }),
+    /* @__PURE__ */ e(
+      M,
+      {
+        disabled: d,
+        ref: m,
+        error: t,
+        id: i,
+        "aria-describedby": r ? h["aria-describedby"] ? `${h["aria-describedby"]} ${r}` : r : h["aria-describedby"],
+        ...h
+      }
+    ),
+    n && /* @__PURE__ */ e(I, { id: r, ...l?.helperText, children: n })
+  ] });
+}
+const Y = u(
+  X
+);
+Y.displayName = "AutocompleteControl";
+const Z = u(
+  ({
+    disabled: c = !1,
+    error: m = !1,
+    fullWidth: d,
+    helperText: t,
+    label: n,
+    required: f = !1,
+    slotProps: p = {},
+    sublabel: o,
+    tooltip: l,
+    name: s,
+    value: a,
+    onChange: h,
+    onAccept: y,
+    onClose: i,
+    onOpen: r,
+    format: x,
+    views: S,
+    openTo: E,
+    disableFuture: v,
+    disablePast: N,
+    minDate: j,
+    maxDate: T,
+    closeOnSelect: q,
+    readOnly: H,
+    clearable: L,
+    reduceAnimations: R,
+    ...z
+  }, G) => {
+    const J = $("datepicker"), g = s || J, D = t ? `${g}-helper` : void 0;
+    return /* @__PURE__ */ b(
+      k,
+      {
+        disabled: c,
+        error: m,
+        fullWidth: d,
+        ...p.root,
+        children: [
+          /* @__PURE__ */ b(
+            C,
+            {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ e(w, { htmlFor: g, required: f, ...p.label, children: n }),
+                l && /* @__PURE__ */ e(B, { title: l, arrow: !0, children: /* @__PURE__ */ e(
+                  F,
+                  {
+                    sx: ({ vars: K }) => ({
+                      color: K?.palette.text.secondary,
+                      marginBlockEnd: "3px",
+                      height: "1rem",
+                      width: "1rem"
+                    })
+                  }
+                ) })
+              ]
+            }
+          ),
+          o && /* @__PURE__ */ e(A, { ...p.sublabel, children: o }),
+          /* @__PURE__ */ e(
+            O,
+            {
+              ref: G,
+              disabled: c,
+              name: g,
+              value: a,
+              onChange: h,
+              onAccept: y,
+              onClose: i,
+              onOpen: r,
+              format: x,
+              views: S,
+              openTo: E,
+              disableFuture: v,
+              disablePast: N,
+              minDate: j,
+              maxDate: T,
+              closeOnSelect: q,
+              readOnly: H,
+              clearable: L,
+              reduceAnimations: R,
+              error: m,
+              slotProps: {
+                field: {
+                  id: g,
+                  "aria-describedby": D,
+                  ...d && { sx: { width: "100%" } }
+                },
+                popper: {
+                  "aria-label": `Date picker${typeof n == "string" && ` for ${n}`}`
+                }
+              },
+              ...z
+            }
+          ),
+          t && /* @__PURE__ */ e(I, { id: D, ...p.helperText, children: t })
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "DatepickerControl";
+const A = V(I)(() => ({
+  marginBlockStart: 0,
+  marginBlockEnd: "3px",
+  marginInline: 0
+})), _ = u(
+  ({
+    disabled: c,
+    error: m,
+    fullWidth: d,
+    helperText: t,
+    id: n,
+    label: f,
+    required: p,
+    slotProps: o,
+    sublabel: l,
+    tooltip: s,
+    ...a
+  }, h) => {
+    const y = $("input"), i = n || y, r = t ? `${i}-helper` : void 0;
+    return /* @__PURE__ */ b(
+      k,
+      {
+        disabled: c,
+        error: m,
+        fullWidth: d,
+        ...o?.root,
+        children: [
+          /* @__PURE__ */ b(
+            C,
+            {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  w,
+                  {
+                    htmlFor: i,
+                    required: p,
+                    ...o?.label,
+                    children: f
+                  }
+                ),
+                s && /* @__PURE__ */ e(B, { title: s, arrow: !0, children: /* @__PURE__ */ e(
+                  F,
+                  {
+                    sx: ({ vars: x }) => ({
+                      color: x?.palette.text.secondary,
+                      marginBlockEnd: "3px",
+                      height: "1rem",
+                      width: "1rem"
+                    })
+                  }
+                ) })
+              ]
+            }
+          ),
+          l && /* @__PURE__ */ e(A, { ...o?.sublabel, children: l }),
+          /* @__PURE__ */ e(
+            Q,
+            {
+              ref: h,
+              disabled: c,
+              error: m,
+              fullWidth: d,
+              id: i,
+              "aria-describedby": r ? a["aria-describedby"] ? `${a["aria-describedby"]} ${r}` : r : a["aria-describedby"],
+              ...a
+            }
+          ),
+          t && /* @__PURE__ */ e(I, { id: r, ...o?.helperText, children: t })
+        ]
+      }
+    );
+  }
+);
+_.displayName = "InputControl";
+const W = u(
+  ({
+    disabled: c,
+    error: m,
+    fullWidth: d,
+    helperText: t,
+    id: n,
+    label: f,
+    required: p,
+    slotProps: o,
+    sublabel: l,
+    tooltip: s,
+    ...a
+  }, h) => {
+    const y = $("select"), i = n || y, r = t ? `${i}-helper` : void 0;
+    return /* @__PURE__ */ b(
+      k,
+      {
+        disabled: c,
+        error: m,
+        fullWidth: d,
+        ...o?.root,
+        children: [
+          /* @__PURE__ */ b(
+            C,
+            {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  w,
+                  {
+                    id: `${i}-label`,
+                    htmlFor: i,
+                    required: p,
+                    ...o?.label,
+                    children: f
+                  }
+                ),
+                s && /* @__PURE__ */ e(B, { title: s, arrow: !0, children: /* @__PURE__ */ e(
+                  F,
+                  {
+                    sx: ({ vars: x }) => ({
+                      color: x?.palette.text.secondary,
+                      marginBlockEnd: "3px",
+                      height: "1rem",
+                      width: "1rem"
+                    })
+                  }
+                ) })
+              ]
+            }
+          ),
+          l && /* @__PURE__ */ e(A, { ...o?.sublabel, children: l }),
+          /* @__PURE__ */ e(
+            U,
+            {
+              ref: h,
+              disabled: c,
+              error: m,
+              fullWidth: d,
+              labelId: `${i}-label`,
+              id: i,
+              "aria-describedby": r ? a["aria-describedby"] ? `${a["aria-describedby"]} ${r}` : r : a["aria-describedby"],
+              ...a
+            }
+          ),
+          t && /* @__PURE__ */ e(I, { id: r, ...o?.helperText, children: t })
+        ]
+      }
+    );
+  }
+);
+W.displayName = "SelectControl";
+export {
+  Y as A,
+  Z as D,
+  A as F,
+  _ as I,
+  W as S
+};

package/dist/components/AutocompleteControl/AutocompleteControl.js

@@ -8,7 +8,7 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { A as B } from "../../SelectControl-DEUgj2Ie.js";
+import { A as B } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
 import "../DescriptionDetails/DescriptionDetails.js";
 import "../DescriptionList/DescriptionList.js";

package/dist/components/AutocompleteControl/index.js

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

package/dist/components/DatepickerControl/DatepickerControl.d.ts

@@ -13,6 +13,7 @@ export interface DatepickerControlProps {
     required?: boolean;
     error?: boolean;
     disabled?: boolean;
+    fullWidth?: boolean;
     format?: string;
     views?: ("year" | "month" | "day")[];
     openTo?: "year" | "month" | "day";

package/dist/components/DatepickerControl/DatepickerControl.js

@@ -8,7 +8,7 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { D as A } from "../../SelectControl-DEUgj2Ie.js";
+import { D as A } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
 import "../DescriptionDetails/DescriptionDetails.js";
 import "../DescriptionList/DescriptionList.js";

package/dist/components/DatepickerControl/index.js

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

package/dist/components/FormSublabel/FormSublabel.js

@@ -5,7 +5,7 @@ import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { F as q } from "../../SelectControl-DEUgj2Ie.js";
+import { F as q } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
 import "../DescriptionDetails/DescriptionDetails.js";
 import "../DescriptionList/DescriptionList.js";

package/dist/components/FormSublabel/index.js

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

package/dist/components/InputControl/InputControl.js

@@ -8,7 +8,7 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { I as A } from "../../SelectControl-DEUgj2Ie.js";
+import { I as A } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
 import "../DescriptionDetails/DescriptionDetails.js";
 import "../DescriptionList/DescriptionList.js";

package/dist/components/InputControl/index.js

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

package/dist/components/SelectControl/SelectControl.js

@@ -8,7 +8,7 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { S as A } from "../../SelectControl-DEUgj2Ie.js";
+import { S as A } from "../../SelectControl-BmDx8v5U.js";
 import "../../Datepicker-CJBEgBsm.js";
 import "../DescriptionDetails/DescriptionDetails.js";
 import "../DescriptionList/DescriptionList.js";

package/dist/components/SelectControl/index.js

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

package/dist/main.js

@@ -9,7 +9,7 @@ import { C as Ua, a as ba, E as Sa, I as Da, W as La } from "./WarningAmberOutli
 import { I as Ba } 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-CfXcTXLL.js";
-import { A as Ra, D as Ga, F as Ha, I as Ea, S as Na } from "./SelectControl-DEUgj2Ie.js";
+import { A as Ra, D as Ga, F as Ha, I as Ea, S as Na } from "./SelectControl-BmDx8v5U.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-CJBEgBsm.js";
 import { DescriptionDetails as eo } from "./components/DescriptionDetails/DescriptionDetails.js";
 import { DescriptionList as lo } from "./components/DescriptionList/DescriptionList.js";

package/package.json

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

package/dist/SelectControl-DEUgj2Ie.js

@@ -1,321 +0,0 @@
-import { jsxs as y, jsx as e } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { useId as u } from "./hooks/useId.js";
-import "./icons/ClearstoryIcon.js";
-import "./icons/InternalOnlyIcon.js";
-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-CfXcTXLL.js";
-import { D as M } from "./Datepicker-CJBEgBsm.js";
-import "./components/DescriptionDetails/DescriptionDetails.js";
-import "./components/DescriptionList/DescriptionList.js";
-import "./components/DescriptionList/DescriptionListContext.js";
-import "./components/DescriptionTerm/DescriptionTerm.js";
-import { Input as O } from "./components/Input/Input.js";
-import { Select as Q } from "./components/Select/Select.js";
-import "./theme/internal.js";
-import "./components/ToastContainer/ToastContainer.js";
-import "./components/ToastContainer/ToastLabelContext.js";
-import "./index-SzwnPTHF.js";
-import { F } from "./FormControl-CuHXXTcL.js";
-import { B as k } from "./Box-CKDKtm7F.js";
-import { F as C } from "./FormLabel-CgNd8XLN.js";
-import { T as w } from "./Tooltip-BJmTHiZe.js";
-import { F as I } from "./FormHelperText-wucHHOG8.js";
-import { s as U } from "./styled-fvngWWLy.js";
-function V(d, n) {
-  const {
-    disabled: i,
-    error: c,
-    helperText: b,
-    id: m,
-    label: t,
-    required: p,
-    slotProps: l,
-    sublabel: o,
-    tooltip: f,
-    ...s
-  } = d, a = u("autocomplete"), r = m || a, h = b ? `${r}-helper` : void 0;
-  return /* @__PURE__ */ y(F, { disabled: i, error: c, ...l?.root, children: [
-    /* @__PURE__ */ y(
-      k,
-      {
-        sx: {
-          alignItems: "center",
-          display: "flex",
-          gap: "0.25rem"
-        },
-        children: [
-          /* @__PURE__ */ e(C, { htmlFor: r, required: p, ...l?.label, children: t }),
-          f && /* @__PURE__ */ e(w, { title: f, arrow: !0, children: /* @__PURE__ */ e(
-            $,
-            {
-              sx: ({ vars: A }) => ({
-                color: A?.palette.text.secondary,
-                marginBlockEnd: "3px",
-                height: "1rem",
-                width: "1rem"
-              })
-            }
-          ) })
-        ]
-      }
-    ),
-    o && /* @__PURE__ */ e(B, { ...l?.sublabel, children: o }),
-    /* @__PURE__ */ e(
-      K,
-      {
-        disabled: i,
-        ref: n,
-        error: c,
-        id: r,
-        "aria-describedby": h ? s["aria-describedby"] ? `${s["aria-describedby"]} ${h}` : h : s["aria-describedby"],
-        ...s
-      }
-    ),
-    b && /* @__PURE__ */ e(I, { id: h, ...l?.helperText, children: b })
-  ] });
-}
-const W = g(
-  V
-);
-W.displayName = "AutocompleteControl";
-const X = g(
-  ({
-    disabled: d = !1,
-    error: n = !1,
-    helperText: i,
-    label: c,
-    required: b = !1,
-    slotProps: m = {},
-    sublabel: t,
-    tooltip: p,
-    name: l,
-    value: o,
-    onChange: f,
-    onAccept: s,
-    onClose: a,
-    onOpen: r,
-    format: h,
-    views: A,
-    openTo: S,
-    disableFuture: E,
-    disablePast: v,
-    minDate: N,
-    maxDate: j,
-    closeOnSelect: T,
-    readOnly: q,
-    clearable: H,
-    reduceAnimations: L,
-    ...R
-  }, z) => {
-    const G = u("datepicker"), x = l || G, D = i ? `${x}-helper` : void 0;
-    return /* @__PURE__ */ y(F, { disabled: d, error: n, ...m.root, children: [
-      /* @__PURE__ */ y(
-        k,
-        {
-          sx: {
-            alignItems: "center",
-            display: "flex",
-            gap: "0.25rem"
-          },
-          children: [
-            /* @__PURE__ */ e(C, { htmlFor: x, required: b, ...m.label, children: c }),
-            p && /* @__PURE__ */ e(w, { title: p, arrow: !0, children: /* @__PURE__ */ e(
-              $,
-              {
-                sx: ({ vars: J }) => ({
-                  color: J?.palette.text.secondary,
-                  marginBlockEnd: "3px",
-                  height: "1rem",
-                  width: "1rem"
-                })
-              }
-            ) })
-          ]
-        }
-      ),
-      t && /* @__PURE__ */ e(B, { ...m.sublabel, children: t }),
-      /* @__PURE__ */ e(
-        M,
-        {
-          ref: z,
-          disabled: d,
-          name: x,
-          value: o,
-          onChange: f,
-          onAccept: s,
-          onClose: a,
-          onOpen: r,
-          format: h,
-          views: A,
-          openTo: S,
-          disableFuture: E,
-          disablePast: v,
-          minDate: N,
-          maxDate: j,
-          closeOnSelect: T,
-          readOnly: q,
-          clearable: H,
-          reduceAnimations: L,
-          error: n,
-          slotProps: {
-            field: {
-              id: x,
-              "aria-describedby": D
-            },
-            popper: {
-              "aria-label": `Date picker${typeof c == "string" && ` for ${c}`}`
-            }
-          },
-          ...R
-        }
-      ),
-      i && /* @__PURE__ */ e(I, { id: D, ...m.helperText, children: i })
-    ] });
-  }
-);
-X.displayName = "DatepickerControl";
-const B = U(I)(() => ({
-  marginBlockStart: 0,
-  marginBlockEnd: "3px",
-  marginInline: 0
-})), Y = g(
-  ({
-    disabled: d,
-    error: n,
-    helperText: i,
-    id: c,
-    label: b,
-    required: m,
-    slotProps: t,
-    sublabel: p,
-    tooltip: l,
-    ...o
-  }, f) => {
-    const s = u("input"), a = c || s, r = i ? `${a}-helper` : void 0;
-    return /* @__PURE__ */ y(F, { disabled: d, error: n, ...t?.root, children: [
-      /* @__PURE__ */ y(
-        k,
-        {
-          sx: {
-            alignItems: "center",
-            display: "flex",
-            gap: "0.25rem"
-          },
-          children: [
-            /* @__PURE__ */ e(
-              C,
-              {
-                htmlFor: a,
-                required: m,
-                ...t?.label,
-                children: b
-              }
-            ),
-            l && /* @__PURE__ */ e(w, { title: l, arrow: !0, children: /* @__PURE__ */ e(
-              $,
-              {
-                sx: ({ vars: h }) => ({
-                  color: h?.palette.text.secondary,
-                  marginBlockEnd: "3px",
-                  height: "1rem",
-                  width: "1rem"
-                })
-              }
-            ) })
-          ]
-        }
-      ),
-      p && /* @__PURE__ */ e(B, { ...t?.sublabel, children: p }),
-      /* @__PURE__ */ e(
-        O,
-        {
-          ref: f,
-          disabled: d,
-          error: n,
-          id: a,
-          "aria-describedby": r ? o["aria-describedby"] ? `${o["aria-describedby"]} ${r}` : r : o["aria-describedby"],
-          ...o
-        }
-      ),
-      i && /* @__PURE__ */ e(I, { id: r, ...t?.helperText, children: i })
-    ] });
-  }
-);
-Y.displayName = "InputControl";
-const Z = g(
-  ({
-    disabled: d,
-    error: n,
-    helperText: i,
-    id: c,
-    label: b,
-    required: m,
-    slotProps: t,
-    sublabel: p,
-    tooltip: l,
-    ...o
-  }, f) => {
-    const s = u("select"), a = c || s, r = i ? `${a}-helper` : void 0;
-    return /* @__PURE__ */ y(F, { disabled: d, error: n, ...t?.root, children: [
-      /* @__PURE__ */ y(
-        k,
-        {
-          sx: {
-            alignItems: "center",
-            display: "flex",
-            gap: "0.25rem"
-          },
-          children: [
-            /* @__PURE__ */ e(
-              C,
-              {
-                id: `${a}-label`,
-                htmlFor: a,
-                required: m,
-                ...t?.label,
-                children: b
-              }
-            ),
-            l && /* @__PURE__ */ e(w, { title: l, arrow: !0, children: /* @__PURE__ */ e(
-              $,
-              {
-                sx: ({ vars: h }) => ({
-                  color: h?.palette.text.secondary,
-                  marginBlockEnd: "3px",
-                  height: "1rem",
-                  width: "1rem"
-                })
-              }
-            ) })
-          ]
-        }
-      ),
-      p && /* @__PURE__ */ e(B, { ...t?.sublabel, children: p }),
-      /* @__PURE__ */ e(
-        Q,
-        {
-          ref: f,
-          disabled: d,
-          error: n,
-          labelId: `${a}-label`,
-          id: a,
-          "aria-describedby": r ? o["aria-describedby"] ? `${o["aria-describedby"]} ${r}` : r : o["aria-describedby"],
-          ...o
-        }
-      ),
-      i && /* @__PURE__ */ e(I, { id: r, ...t?.helperText, children: i })
-    ] });
-  }
-);
-Z.displayName = "SelectControl";
-export {
-  W as A,
-  X as D,
-  B as F,
-  Y as I,
-  Z as S
-};