@clearstory/drywall-react 4.3.0 → 5.0.0

package/dist/components/DatepickerControl/DatepickerControl.js

@@ -1,59 +1,45 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { D as R } from "../../Datepicker-BaoVwYUL.js";
-import { FormSublabel as S } from "../FormSublabel/FormSublabel.js";
-import { useId as q } from "../../hooks/useId.js";
+import { forwardRef as g } from "react";
+import { D as y } from "../../Datepicker-DD9e0ctT.js";
+import { FormSublabel as D } from "../FormSublabel/FormSublabel.js";
+import { useId as b } from "../../hooks/useId.js";
 import "../../icons/ClearstoryIcon.js";
 import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
-import { I as z } from "../../Info-BJQ9wuGi.js";
-import { F as A } from "../../FormControl-DGDyZWmP.js";
-import { B as G } from "../../Box-ofHJnHkX.js";
-import { F as J } from "../../FormLabel-CD8GLPIn.js";
-import { T as K } from "../../Tooltip-lmU5jPqX.js";
-import { F as M } from "../../FormHelperText-XGRtUL8k.js";
-const O = N(
+import { I as w } from "../../Info-DYeQDm-h.js";
+import { F as u } from "../../FormControl-BDhAmhH5.js";
+import { B } from "../../Box-D994ipAZ.js";
+import { F as C } from "../../FormLabel-IN8pc15T.js";
+import { T as $ } from "../../Tooltip-CZJgBQSd.js";
+import { F as j } from "../../FormHelperText-DkPKXA6k.js";
+const T = g(
   ({
     disabled: m = !1,
     error: a = !1,
     fullWidth: p,
     helperText: i,
     label: t,
-    required: f = !1,
+    name: f,
+    required: s = !1,
     slotProps: e = {},
     sublabel: n,
+    sx: h,
     tooltip: d,
-    name: s,
-    value: h,
-    onChange: x,
-    onAccept: F,
-    onClose: I,
-    onOpen: k,
-    format: g,
-    views: y,
-    openTo: D,
-    disableFuture: b,
-    disablePast: w,
-    minDate: u,
-    maxDate: B,
-    closeOnSelect: C,
-    readOnly: $,
-    clearable: j,
-    reduceAnimations: T,
-    ...v
-  }, E) => {
-    const H = q("datepicker"), o = s || H, c = i ? `${o}-helper` : void 0;
+    ...x
+  }, F) => {
+    const I = b("datepicker"), o = f || I, c = i ? `${o}-helper` : void 0;
     return /* @__PURE__ */ l(
-      A,
+      u,
       {
         disabled: m,
         error: a,
         fullWidth: p,
+        sx: h,
         ...e.root,
         children: [
           /* @__PURE__ */ l(
-            G,
+            B,
             {
               sx: {
                 alignItems: "center",
@@ -61,12 +47,12 @@ const O = N(
                 gap: "0.25rem"
               },
               children: [
-                /* @__PURE__ */ r(J, { htmlFor: o, required: f, ...e.label, children: t }),
-                d && /* @__PURE__ */ r(K, { title: d, arrow: !0, children: /* @__PURE__ */ r(
-                  z,
+                /* @__PURE__ */ r(C, { htmlFor: o, required: s, ...e.label, children: t }),
+                d && /* @__PURE__ */ r($, { title: d, arrow: !0, children: /* @__PURE__ */ r(
+                  w,
                   {
-                    sx: ({ vars: L }) => ({
-                      color: L?.palette.text.secondary,
+                    sx: ({ vars: k }) => ({
+                      color: k?.palette.text.secondary,
                       marginBlockEnd: "3px",
                       height: "1rem",
                       width: "1rem"
@@ -76,29 +62,13 @@ const O = N(
               ]
             }
           ),
-          n && /* @__PURE__ */ r(S, { ...e.sublabel, children: n }),
+          n && /* @__PURE__ */ r(D, { ...e.sublabel, children: n }),
           /* @__PURE__ */ r(
-            R,
+            y,
             {
-              ref: E,
+              ref: F,
               disabled: m,
               name: o,
-              value: h,
-              onChange: x,
-              onAccept: F,
-              onClose: I,
-              onOpen: k,
-              format: g,
-              views: y,
-              openTo: D,
-              disableFuture: b,
-              disablePast: w,
-              minDate: u,
-              maxDate: B,
-              closeOnSelect: C,
-              readOnly: $,
-              clearable: j,
-              reduceAnimations: T,
               error: a,
               slotProps: {
                 field: {
@@ -111,16 +81,16 @@ const O = N(
                 },
                 ...e?.datepicker
               },
-              ...v
+              ...x
             }
           ),
-          i && /* @__PURE__ */ r(M, { id: c, ...e.helperText, children: i })
+          i && /* @__PURE__ */ r(j, { id: c, ...e.helperText, children: i })
         ]
       }
     );
   }
 );
-O.displayName = "DatepickerControl";
+T.displayName = "DatepickerControl";
 export {
-  O as DatepickerControl
+  T as DatepickerControl
 };

package/dist/components/DescriptionDetails/DescriptionDetails.js

@@ -1,7 +1,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { useDescriptionListContext as a } from "../DescriptionList/DescriptionListContext.js";
-import { T as e } from "../../Typography--7tWeGoH.js";
+import { T as e } from "../../Typography-7XxDpBjP.js";
 const c = s(({ variant: t = "body2", sx: o, ...i }, n) => {
   const r = a()?.spacing;
   return /* @__PURE__ */ p(

package/dist/components/DescriptionList/DescriptionList.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import { DescriptionListContext as p } from "./DescriptionListContext.js";
-import { B as s } from "../../Box-ofHJnHkX.js";
+import { B as s } from "../../Box-D994ipAZ.js";
 const n = m(({ spacing: r, children: i, ...t }, e) => /* @__PURE__ */ o(p.Provider, { value: { spacing: r }, children: /* @__PURE__ */ o(s, { component: "dl", ref: e, ...t, children: i }) }));
 n.displayName = "DescriptionList";
 export {

package/dist/components/DescriptionTerm/DescriptionTerm.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { T as p } from "../../Typography--7tWeGoH.js";
+import { T as p } from "../../Typography-7XxDpBjP.js";
 const n = m(
   ({ sx: r, ...o }, e) => /* @__PURE__ */ i(
     p,

package/dist/components/Dialog/index.js

@@ -1,4 +1,4 @@
-import { D as l, d as g, g as i } from "../../Dialog-CWkRRLYB.js";
+import { D as l, d as g, g as i } from "../../Dialog-BMkdvBHA.js";
 export {
   l as Dialog,
   g as dialogClasses,

package/dist/components/DialogActions/index.js

@@ -1,4 +1,4 @@
-import { D as i, d as o, g as t } from "../../DialogActions-HyvruXJm.js";
+import { D as i, d as o, g as t } from "../../DialogActions-DwqbdYeY.js";
 export {
   i as DialogActions,
   o as dialogActionsClasses,

package/dist/components/DialogClose/DialogClose.js

@@ -3,8 +3,8 @@ import "../../icons/ClearstoryIcon.js";
 import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
-import { C as i } from "../../Close-DkPIVjsJ.js";
-import { I as m } from "../../IconButton-MVzChLzw.js";
+import { C as i } from "../../Close-28GNVfyf.js";
+import { I as m } from "../../IconButton-BAxK7-IJ.js";
 const f = ({ sx: o, ...t }) => /* @__PURE__ */ r(
   m,
   {

package/dist/components/DialogContent/index.js

@@ -1,4 +1,4 @@
-import { D as o, d as s, g as e } from "../../DialogContent-C3Iw89yZ.js";
+import { D as o, d as s, g as e } from "../../DialogContent-DbeYeFlD.js";
 export {
   o as DialogContent,
   s as dialogContentClasses,

package/dist/components/DialogContentText/index.js

@@ -1,4 +1,4 @@
-import { D as a, d as o, g as s } from "../../DialogContentText-CqtHzKJG.js";
+import { D as a, d as o, g as s } from "../../DialogContentText-Cu3XFvLA.js";
 export {
   a as DialogContentText,
   o as dialogContentTextClasses,

package/dist/components/DialogTitle/index.js

@@ -1,4 +1,4 @@
-import { D as i } from "../../DialogTitle-B0wo1Nee.js";
+import { D as i } from "../../DialogTitle-Caqzbzj_.js";
 import { d as t, g as e } from "../../dialogTitleClasses-CLoIlOgg.js";
 export {
   i as DialogTitle,

package/dist/components/Divider/index.js

@@ -1,4 +1,4 @@
-import { D as e } from "../../Divider-CRp6DYDo.js";
+import { D as e } from "../../Divider-B9H6iIxz.js";
 import { d as a, g as d } from "../../dividerClasses-pnfF5xNS.js";
 export {
   e as Divider,

package/dist/components/Drawer/index.js

@@ -1,4 +1,4 @@
-import { D as s, d as e, g as t } from "../../Drawer--mikgVAA.js";
+import { D as s, d as e, g as t } from "../../Drawer-CAv9o3tm.js";
 export {
   s as Drawer,
   e as drawerClasses,

package/dist/components/FormControl/index.js

@@ -1,4 +1,4 @@
-import { F as s, f as t, g as l } from "../../FormControl-DGDyZWmP.js";
+import { F as s, f as t, g as l } from "../../FormControl-BDhAmhH5.js";
 import { u as e } from "../../useFormControl-CatNKXAi.js";
 export {
   s as FormControl,

package/dist/components/FormControlLabel/index.js

@@ -1,4 +1,4 @@
-import { F as s, f as a, g as r } from "../../FormControlLabel-BHsU9-2v.js";
+import { F as s, f as a, g as r } from "../../FormControlLabel-ByTbrCD5.js";
 export {
   s as FormControlLabel,
   a as formControlLabelClasses,

package/dist/components/FormGroup/index.js

@@ -1,4 +1,4 @@
-import { F as s, f as a, g as m } from "../../FormGroup-n8mW1ikh.js";
+import { F as s, f as a, g as m } from "../../FormGroup-C9hwav--.js";
 export {
   s as FormGroup,
   a as formGroupClasses,

package/dist/components/FormHelperText/index.js

@@ -1,4 +1,4 @@
-import { F as r, f as t, g as l } from "../../FormHelperText-XGRtUL8k.js";
+import { F as r, f as t, g as l } from "../../FormHelperText-DkPKXA6k.js";
 export {
   r as FormHelperText,
   t as formHelperTextClasses,

package/dist/components/FormLabel/index.js

@@ -1,4 +1,4 @@
-import { F as e, a as o, f as l, g as r } from "../../FormLabel-CD8GLPIn.js";
+import { F as e, a as o, f as l, g as r } from "../../FormLabel-IN8pc15T.js";
 export {
   e as FormLabel,
   o as FormLabelRoot,

package/dist/components/FormSublabel/FormSublabel.js

@@ -1,5 +1,5 @@
-import { s as r } from "../../styled-DeKjjxu7.js";
-import { F as o } from "../../FormHelperText-XGRtUL8k.js";
+import { s as r } from "../../styled-BGhco0UA.js";
+import { F as o } from "../../FormHelperText-DkPKXA6k.js";
 const a = r(o)(() => ({
   marginBlockStart: 0,
   marginBlockEnd: "3px",

package/dist/components/IconButton/index.js

@@ -1,4 +1,4 @@
-import { I as s, g as n, i as a } from "../../IconButton-MVzChLzw.js";
+import { I as s, g as n, i as a } from "../../IconButton-BAxK7-IJ.js";
 export {
   s as IconButton,
   n as getIconButtonUtilityClass,

package/dist/components/Input/Input.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { I as i } from "../../InputBase-BSTVzjZo.js";
+import { I as i } from "../../InputBase-CK6qEkFU.js";
 const l = f((r, o) => {
   const {
     color: t = "primary",

package/dist/components/InputAdornment/index.js

@@ -1,4 +1,4 @@
-import { I as s, g as e, i as a } from "../../InputAdornment-Brkig0oR.js";
+import { I as s, g as e, i as a } from "../../InputAdornment-C0-tBzhV.js";
 export {
   s as InputAdornment,
   e as getInputAdornmentUtilityClass,

package/dist/components/InputControl/InputControl.d.ts

@@ -5,17 +5,18 @@ import { FormLabelProps } from '../FormLabel';
 import { FormSublabelProps } from '../FormSublabel';
 import { InputProps } from '../Input';
 type DOMEventHandlers = keyof DOMAttributes<HTMLElement>;
-export interface InputControlProps extends Omit<InputProps, "ref" | "slotProps"> {
+export interface InputControlProps extends Omit<InputProps, "ref" | "slotProps" | "sx"> {
     helperText?: ReactNode;
     label: ReactNode;
     slotProps?: {
-        root?: Partial<Omit<FormControlProps, DOMEventHandlers>>;
-        label?: Partial<Omit<FormLabelProps, "children" | DOMEventHandlers>>;
-        sublabel?: Partial<Omit<FormSublabelProps, "children" | DOMEventHandlers>>;
         helperText?: Partial<Omit<FormHelperTextProps, "children" | DOMEventHandlers>>;
         input?: InputProps["slotProps"];
+        label?: Partial<Omit<FormLabelProps, "children" | DOMEventHandlers>>;
+        root?: Partial<Omit<FormControlProps, DOMEventHandlers>>;
+        sublabel?: Partial<Omit<FormSublabelProps, "children" | DOMEventHandlers>>;
     };
     sublabel?: ReactNode;
+    sx?: FormControlProps["sx"];
     tooltip?: ReactNode;
 }
 export declare const InputControl: ForwardRefExoticComponent<InputControlProps & RefAttributes<HTMLInputElement>>;

package/dist/components/InputControl/InputControl.js

@@ -1,19 +1,19 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { FormSublabel as F } from "../FormSublabel/FormSublabel.js";
-import { Input as y } from "../Input/Input.js";
-import { useId as g } from "../../hooks/useId.js";
+import { forwardRef as F } from "react";
+import { FormSublabel as y } from "../FormSublabel/FormSublabel.js";
+import { Input as g } from "../Input/Input.js";
+import { useId as w } from "../../hooks/useId.js";
 import "../../icons/ClearstoryIcon.js";
 import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
-import { I as w } from "../../Info-BJQ9wuGi.js";
-import { F as B } from "../../FormControl-DGDyZWmP.js";
-import { B as C } from "../../Box-ofHJnHkX.js";
-import { F as $ } from "../../FormLabel-CD8GLPIn.js";
-import { T as j } from "../../Tooltip-lmU5jPqX.js";
-import { F as T } from "../../FormHelperText-XGRtUL8k.js";
-const k = u(
+import { I as B } from "../../Info-DYeQDm-h.js";
+import { F as C } from "../../FormControl-BDhAmhH5.js";
+import { B as $ } from "../../Box-D994ipAZ.js";
+import { F as j } from "../../FormLabel-IN8pc15T.js";
+import { T } from "../../Tooltip-CZJgBQSd.js";
+import { F as k } from "../../FormHelperText-DkPKXA6k.js";
+const v = F(
   ({
     disabled: a,
     error: n,
@@ -24,20 +24,22 @@ const k = u(
     required: b,
     slotProps: o,
     sublabel: p,
+    sx: I,
     tooltip: l,
     ...i
-  }, I) => {
-    const h = g("input"), t = f || h, e = m ? `${t}-helper` : void 0;
+  }, h) => {
+    const x = w("input"), t = f || x, e = m ? `${t}-helper` : void 0;
     return /* @__PURE__ */ c(
-      B,
+      C,
       {
         disabled: a,
         error: n,
         fullWidth: d,
+        sx: I,
         ...o?.root,
         children: [
           /* @__PURE__ */ c(
-            C,
+            $,
             {
               sx: {
                 alignItems: "center",
@@ -46,7 +48,7 @@ const k = u(
               },
               children: [
                 /* @__PURE__ */ r(
-                  $,
+                  j,
                   {
                     htmlFor: t,
                     required: b,
@@ -54,11 +56,11 @@ const k = u(
                     children: s
                   }
                 ),
-                l && /* @__PURE__ */ r(j, { title: l, arrow: !0, children: /* @__PURE__ */ r(
-                  w,
+                l && /* @__PURE__ */ r(T, { title: l, arrow: !0, children: /* @__PURE__ */ r(
+                  B,
                   {
-                    sx: ({ vars: x }) => ({
-                      color: x?.palette.text.secondary,
+                    sx: ({ vars: u }) => ({
+                      color: u?.palette.text.secondary,
                       marginBlockEnd: "3px",
                       height: "1rem",
                       width: "1rem"
@@ -68,11 +70,11 @@ const k = u(
               ]
             }
           ),
-          p && /* @__PURE__ */ r(F, { ...o?.sublabel, children: p }),
+          p && /* @__PURE__ */ r(y, { ...o?.sublabel, children: p }),
           /* @__PURE__ */ r(
-            y,
+            g,
             {
-              ref: I,
+              ref: h,
               disabled: a,
               error: n,
               fullWidth: d,
@@ -82,13 +84,13 @@ const k = u(
               ...i
             }
           ),
-          m && /* @__PURE__ */ r(T, { id: e, ...o?.helperText, children: m })
+          m && /* @__PURE__ */ r(k, { id: e, ...o?.helperText, children: m })
         ]
       }
     );
   }
 );
-k.displayName = "InputControl";
+v.displayName = "InputControl";
 export {
-  k as InputControl
+  v as InputControl
 };

package/dist/components/LinearProgress/index.js

@@ -1,4 +1,4 @@
-import { L as e, g as a, l as g } from "../../LinearProgress-BT1YkV7a.js";
+import { L as e, g as a, l as g } from "../../LinearProgress-BW1D3S4o.js";
 export {
   e as LinearProgress,
   a as getLinearProgressUtilityClass,

package/dist/components/Link/index.js

@@ -1,4 +1,4 @@
-import { L as i, g as l, l as t } from "../../Link-C3teKpnQ.js";
+import { L as i, g as l, l as t } from "../../Link-Dj1oW_B_.js";
 export {
   i as Link,
   l as getLinkUtilityClass,

package/dist/components/List/index.js

@@ -1,4 +1,4 @@
-import { L as a, g as i, l } from "../../List-CiAWVw0m.js";
+import { L as a, g as i, l } from "../../List-BQBC5UAt.js";
 export {
   a as List,
   i as getListUtilityClass,

package/dist/components/ListItem/index.js

@@ -1,4 +1,4 @@
-import { L as e, g as a, l as i } from "../../ListItem-5PtJ2I6A.js";
+import { L as e, g as a, l as i } from "../../ListItem-BHstsn6H.js";
 export {
   e as ListItem,
   a as getListItemUtilityClass,

package/dist/components/ListItemAvatar/index.js

@@ -1,4 +1,4 @@
-import { L as s, g as e, l as i } from "../../ListItemAvatar-Wo31xwLj.js";
+import { L as s, g as e, l as i } from "../../ListItemAvatar-DsPxxokd.js";
 export {
   s as ListItemAvatar,
   e as getListItemAvatarUtilityClass,

package/dist/components/ListItemButton/index.js

@@ -1,4 +1,4 @@
-import { L as e } from "../../ListItemButton-DbQjmJRg.js";
+import { L as e } from "../../ListItemButton-DhvvOROc.js";
 import { g as a, l as i } from "../../listItemButtonClasses-BNj44uhi.js";
 export {
   e as ListItemButton,

package/dist/components/ListItemIcon/index.js

@@ -1,4 +1,4 @@
-import { L as e } from "../../ListItemIcon-C7PQ3Itp.js";
+import { L as e } from "../../ListItemIcon-COLCfa5I.js";
 import { g as I, l as a } from "../../listItemIconClasses-LHpZGozK.js";
 export {
   e as ListItemIcon,

package/dist/components/ListItemText/index.js

@@ -1,4 +1,4 @@
-import { L as e } from "../../ListItemText-DzL5Tz1i.js";
+import { L as e } from "../../ListItemText-CVpaCuRU.js";
 import { g as i, l } from "../../listItemTextClasses-BIe1gxVs.js";
 export {
   e as ListItemText,

package/dist/components/ListSubheader/index.js

@@ -1,4 +1,4 @@
-import { L as a, g as t, l as i } from "../../ListSubheader-B89d0LHx.js";
+import { L as a, g as t, l as i } from "../../ListSubheader-ZfVZwpBt.js";
 export {
   a as ListSubheader,
   t as getListSubheaderUtilityClass,

package/dist/components/Menu/index.js

@@ -1,4 +1,4 @@
-import { M as a, g as t, m as l } from "../../Menu-vY_gThtK.js";
+import { M as a, g as t, m as l } from "../../Menu-QIR9I0fi.js";
 export {
   a as Menu,
   t as getMenuUtilityClass,

package/dist/components/MenuItem/index.js

@@ -1,4 +1,4 @@
-import { M as t, g as m, m as a } from "../../MenuItem-C77PRnO4.js";
+import { M as t, g as m, m as a } from "../../MenuItem-zOWqJfh9.js";
 export {
   t as MenuItem,
   m as getMenuItemUtilityClass,

package/dist/components/MenuList/index.js

@@ -1,4 +1,4 @@
-import { M as r } from "../../MenuList-w-HYxks2.js";
+import { M as r } from "../../MenuList-Bp48Ab5F.js";
 export {
   r as MenuList
 };

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,4 +1,5 @@
 import { NumberFormatValues, SourceInfo } from 'react-number-format';
+import { SxProps, Theme } from '@mui/material';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface NumberInputProps {
     defaultValue?: string | number | null;
@@ -18,6 +19,7 @@ export interface NumberInputProps {
     error?: boolean;
     fullWidth?: boolean;
     size?: "small" | "medium";
+    sx?: SxProps<Theme>;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;