@clearstory/drywall-react 3.2.1 → 3.4.0

package/dist/{AdapterDayjs-C2OOePSw.js → AdapterDayjs-onBBJ8Hr.js}

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

package/dist/{Datepicker-u8DjTSV8.js → Datepicker-CJBEgBsm.js}

@@ -10420,40 +10420,51 @@ process.env.NODE_ENV !== "production" && (En.propTypes = {
 const dc = H("div", {
   name: "DateField",
   slot: "Root",
-  shouldForwardProp: (e) => e !== "error"
-})(({ theme: e, error: n, color: o = "primary" }) => {
-  const r = n ? e.vars?.palette.error.main : o && e.vars?.palette[o]?.main, s = n ? e.vars?.palette.error.light : o && e.vars?.palette[o]?.light;
+  shouldForwardProp: (e) => e !== "error" && e !== "disabled"
+})(({ theme: e, error: n, color: o = "primary", disabled: r }) => {
+  const s = n ? e.vars?.palette.error.main : o && e.vars?.palette[o]?.main, a = n ? e.vars?.palette.error.light : o && e.vars?.palette[o]?.light;
   return {
     display: "flex",
     alignItems: "center",
     backgroundColor: e.vars?.palette.background.surface,
-    borderColor: n ? e.vars?.palette.error.light : e.vars?.palette.divider,
+    borderColor: e.vars?.palette.divider,
     borderRadius: e.shape.borderRadius,
     borderStyle: "solid",
     borderWidth: "1px",
-    "&:hover": {
-      borderColor: n ? e.vars?.palette.error.dark : e.vars?.palette.text.secondary
-    },
     "&:focus-within": {
-      borderColor: r,
-      outlineColor: s,
+      borderColor: s,
+      outlineColor: a,
       outlineStyle: "solid",
       outlineWidth: "2px"
     },
+    ...!r && {
+      "&:hover": {
+        borderColor: n ? e.vars?.palette.error.dark : e.vars?.palette.text.secondary
+      }
+    },
+    ...r && {
+      borderColor: `color-mix(in srgb, ${e.vars?.palette.divider} 25%, transparent)`
+    },
+    ...n && {
+      borderColor: e.vars?.palette.error.main,
+      outlineColor: e.vars?.palette.error.light
+    },
     "& .MuiInputAdornment-root": {
       height: "auto"
     }
   };
 }), pc = H("div", {
   name: "DateField",
-  slot: "Content"
-})({
+  slot: "Content",
+  shouldForwardProp: (e) => e !== "disabled"
+})(({ theme: e, disabled: n }) => ({
   flexGrow: 1,
   fontSize: "0.875rem",
   lineHeight: "20px",
   padding: "6px 10px",
-  whiteSpace: "nowrap"
-}), fr = ao(
+  whiteSpace: "nowrap",
+  color: n ? e.vars?.palette.text.disabled : void 0
+})), fr = ao(
   (e, n) => {
     const o = er(e), {
       // Should be passed to the PickersSectionList component
@@ -10492,48 +10503,58 @@ const dc = H("div", {
       n,
       Ee(L.triggerRef, L.rootRef)
     );
-    return /* @__PURE__ */ be(dc, { ...T, ref: R, error: v, color: D, children: [
-      /* @__PURE__ */ w(pc, { children: /* @__PURE__ */ w(
-        Ht,
-        {
-          elements: r,
-          sectionListRef: s,
-          contentEditable: a,
-          onFocus: l,
-          onBlur: c,
-          tabIndex: i,
-          onInput: u,
-          onPaste: d,
-          onKeyDown: h
-        }
-      ) }),
-      C && typeof y == "function" && /* @__PURE__ */ w(
-        ht,
-        {
-          "aria-label": "Clear date",
-          disabled: !!m || !!P,
-          onClick: y,
-          onMouseDown: (V) => V.preventDefault(),
-          sx: { marginLeft: 1 },
-          tabIndex: -1,
-          children: /* @__PURE__ */ w(Wo, {})
-        }
-      ),
-      /* @__PURE__ */ w(
-        ht,
-        {
-          "aria-label": g || "Open date picker",
-          "aria-haspopup": "dialog",
-          "aria-expanded": L.open ? !0 : void 0,
-          disabled: !!m || !!P,
-          onClick: () => L.setOpen((V) => !V),
-          onMouseDown: (V) => V.preventDefault(),
-          sx: { marginLeft: 1 },
-          tabIndex: -1,
-          children: /* @__PURE__ */ w(_o, {})
-        }
-      )
-    ] });
+    return /* @__PURE__ */ be(
+      dc,
+      {
+        ...T,
+        ref: R,
+        error: v,
+        color: D,
+        disabled: m,
+        children: [
+          /* @__PURE__ */ w(pc, { disabled: m, children: /* @__PURE__ */ w(
+            Ht,
+            {
+              elements: r,
+              sectionListRef: s,
+              contentEditable: a,
+              onFocus: l,
+              onBlur: c,
+              tabIndex: i,
+              onInput: u,
+              onPaste: d,
+              onKeyDown: h
+            }
+          ) }),
+          C && typeof y == "function" && /* @__PURE__ */ w(
+            ht,
+            {
+              "aria-label": "Clear date",
+              disabled: !!m || !!P,
+              onClick: y,
+              onMouseDown: (V) => V.preventDefault(),
+              sx: { marginLeft: 1 },
+              tabIndex: -1,
+              children: /* @__PURE__ */ w(Wo, {})
+            }
+          ),
+          /* @__PURE__ */ w(
+            ht,
+            {
+              "aria-label": g || "Open date picker",
+              "aria-haspopup": "dialog",
+              "aria-expanded": L.open ? !0 : void 0,
+              disabled: !!m || !!P,
+              onClick: () => L.setOpen((V) => !V),
+              onMouseDown: (V) => V.preventDefault(),
+              sx: { marginLeft: 1 },
+              tabIndex: -1,
+              children: /* @__PURE__ */ w(_o, {})
+            }
+          )
+        ]
+      }
+    );
   }
 );
 fr.displayName = "DateField";

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

@@ -8,7 +8,11 @@ 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-u8DjTSV8.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";

package/dist/components/AutocompleteControl/AutocompleteControl.js

@@ -8,8 +8,12 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { A as v } from "../../SelectControl-in4PcK4c.js";
-import "../../Datepicker-u8DjTSV8.js";
+import { A as B } from "../../SelectControl-DEUgj2Ie.js";
+import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";
@@ -22,5 +26,5 @@ import "../../FormLabel-CgNd8XLN.js";
 import "../../Tooltip-BJmTHiZe.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  v as AutocompleteControl
+  B as AutocompleteControl
 };

package/dist/components/AutocompleteControl/index.js

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

package/dist/components/Datepicker/Datepicker.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { D as e, D } from "../../Datepicker-u8DjTSV8.js";
+import { D as e, D } from "../../Datepicker-CJBEgBsm.js";
 import "../../styled-fvngWWLy.js";
 import "../../useForkRef-9kN4DArm.js";
 import "../../IconButton-rSBl8wjc.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-u8DjTSV8.js";
-import { A as b } from "../../AdapterDayjs-C2OOePSw.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-CJBEgBsm.js";
+import { A as b } from "../../AdapterDayjs-onBBJ8Hr.js";
 export {
   b as AdapterDayjs,
   e as DateCalendar,

package/dist/components/DatepickerControl/DatepickerControl.js

@@ -8,8 +8,12 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { D as v } from "../../SelectControl-in4PcK4c.js";
-import "../../Datepicker-u8DjTSV8.js";
+import { D as A } from "../../SelectControl-DEUgj2Ie.js";
+import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";
@@ -22,5 +26,5 @@ import "../../FormLabel-CgNd8XLN.js";
 import "../../Tooltip-BJmTHiZe.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  v as DatepickerControl
+  A as DatepickerControl
 };

package/dist/components/DatepickerControl/index.js

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

package/dist/components/DescriptionDetails/DescriptionDetails.d.ts

@@ -0,0 +1,4 @@
+import { TypographyProps } from '../Typography';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type DescriptionDetailsProps = Omit<TypographyProps, "component">;
+export declare const DescriptionDetails: ForwardRefExoticComponent<Omit<DescriptionDetailsProps, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/DescriptionDetails/DescriptionDetails.js

@@ -0,0 +1,30 @@
+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-DnNWmNen.js";
+const c = s(({ variant: t = "body2", sx: o, ...i }, n) => {
+  const r = a()?.spacing;
+  return /* @__PURE__ */ p(
+    e,
+    {
+      component: "dd",
+      variant: t,
+      ref: n,
+      ...i,
+      sx: [
+        { border: "1px solid transparent", padding: "6px 10px" },
+        r && {
+          marginBlockEnd: r,
+          "&:last-child": {
+            marginBlockEnd: 0
+          }
+        },
+        ...Array.isArray(o) ? o : [o]
+      ]
+    }
+  );
+});
+c.displayName = "DescriptionDetails";
+export {
+  c as DescriptionDetails
+};

package/dist/components/DescriptionDetails/index.d.ts

@@ -0,0 +1 @@
+export * from './DescriptionDetails';

package/dist/components/DescriptionDetails/index.js

@@ -0,0 +1,4 @@
+import { DescriptionDetails as o } from "./DescriptionDetails.js";
+export {
+  o as DescriptionDetails
+};

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '../Box';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface DescriptionListProps extends Omit<BoxProps<"dl">, "component"> {
+    spacing?: string | number;
+}
+export declare const DescriptionList: ForwardRefExoticComponent<Omit<DescriptionListProps, "ref"> & RefAttributes<HTMLDListElement>>;

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,9 @@
+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-CKDKtm7F.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 {
+  n as DescriptionList
+};

package/dist/components/DescriptionList/DescriptionListContext.d.ts

@@ -0,0 +1,7 @@
+import { Context } from 'react';
+type DescriptionListContextValue = {
+    spacing?: string | number;
+};
+export declare const DescriptionListContext: Context<DescriptionListContextValue | null>;
+export declare const useDescriptionListContext: () => DescriptionListContextValue | null;
+export {};

package/dist/components/DescriptionList/DescriptionListContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+const o = t(null), r = () => e(o);
+export {
+  o as DescriptionListContext,
+  r as useDescriptionListContext
+};

package/dist/components/DescriptionList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DescriptionList';
+export { useDescriptionListContext } from './DescriptionListContext';

package/dist/components/DescriptionList/index.js

@@ -0,0 +1,6 @@
+import { DescriptionList as e } from "./DescriptionList.js";
+import { useDescriptionListContext as r } from "./DescriptionListContext.js";
+export {
+  e as DescriptionList,
+  r as useDescriptionListContext
+};

package/dist/components/DescriptionTerm/DescriptionTerm.d.ts

@@ -0,0 +1,4 @@
+import { TypographyProps } from '../Typography';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export type DescriptionTermProps = Omit<TypographyProps, "component">;
+export declare const DescriptionTerm: ForwardRefExoticComponent<Omit<DescriptionTermProps, "ref"> & RefAttributes<HTMLElement>>;

package/dist/components/DescriptionTerm/DescriptionTerm.js

@@ -0,0 +1,27 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { T as p } from "../../Typography-DnNWmNen.js";
+const n = m(
+  ({ sx: r, ...o }, e) => /* @__PURE__ */ i(
+    p,
+    {
+      component: "dt",
+      ref: e,
+      ...o,
+      sx: [
+        {
+          color: ({ vars: t }) => t?.palette.text.primary,
+          fontSize: "0.875rem",
+          fontWeight: "500",
+          lineHeight: "1.4375em",
+          marginBlockEnd: "3px"
+        },
+        ...Array.isArray(r) ? r : [r]
+      ]
+    }
+  )
+);
+n.displayName = "DescriptionTerm";
+export {
+  n as DescriptionTerm
+};

package/dist/components/DescriptionTerm/index.d.ts

@@ -0,0 +1 @@
+export * from './DescriptionTerm';

package/dist/components/DescriptionTerm/index.js

@@ -0,0 +1,4 @@
+import { DescriptionTerm as o } from "./DescriptionTerm.js";
+export {
+  o as DescriptionTerm
+};

package/dist/components/FormSublabel/FormSublabel.js

@@ -5,8 +5,12 @@ import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { F as h } from "../../SelectControl-in4PcK4c.js";
-import "../../Datepicker-u8DjTSV8.js";
+import { F as q } from "../../SelectControl-DEUgj2Ie.js";
+import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "react/jsx-runtime";
@@ -17,5 +21,5 @@ import "../../index-SzwnPTHF.js";
 import "../../styled-fvngWWLy.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  h as FormSublabel
+  q as FormSublabel
 };

package/dist/components/FormSublabel/index.js

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

package/dist/components/Input/Input.theme.js

@@ -1,10 +1,10 @@
-const d = {
+const l = {
   defaultProps: {
     size: "small"
   },
   styleOverrides: {
     root: ({ theme: r, ownerState: o }) => {
-      const e = o.color, i = o.error ? r.vars?.palette.error.main : e && r.vars?.palette[e]?.main, l = o.error ? r.vars?.palette.error.light : e && r.vars?.palette[e]?.light;
+      const e = o.color, i = o.error ? r.vars?.palette.error.main : e && r.vars?.palette[e]?.main, d = o.error ? r.vars?.palette.error.light : e && r.vars?.palette[e]?.light;
       return {
         backgroundColor: r.vars?.palette.background.surface,
         borderColor: r.vars?.palette.divider,
@@ -12,15 +12,20 @@ const d = {
         borderStyle: "solid",
         borderWidth: "1px",
         justifyContent: "space-between",
-        "&:hover": {
-          borderColor: o.error ? r.vars?.palette.error.dark : r.vars?.palette.text.secondary
-        },
         "&:focus-within": {
           borderColor: i,
-          outlineColor: l,
+          outlineColor: d,
           outlineStyle: "solid",
           outlineWidth: "2px"
         },
+        ...!o.disabled && {
+          "&:hover": {
+            borderColor: o.error ? r.vars?.palette.error.dark : r.vars?.palette.text.secondary
+          }
+        },
+        ...o.disabled && {
+          borderColor: `color-mix(in srgb, ${r.vars?.palette.divider} 25%, transparent)`
+        },
         ...o.error && {
           borderColor: r.vars?.palette.error.main,
           outlineColor: r.vars?.palette.error.light
@@ -43,5 +48,5 @@ const d = {
   }
 };
 export {
-  d as MuiInputBase
+  l as MuiInputBase
 };

package/dist/components/InputControl/InputControl.js

@@ -8,8 +8,12 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { I as v } from "../../SelectControl-in4PcK4c.js";
-import "../../Datepicker-u8DjTSV8.js";
+import { I as A } from "../../SelectControl-DEUgj2Ie.js";
+import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";
@@ -22,5 +26,5 @@ import "../../FormLabel-CgNd8XLN.js";
 import "../../Tooltip-BJmTHiZe.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  v as InputControl
+  A as InputControl
 };

package/dist/components/InputControl/index.js

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

package/dist/components/SelectControl/SelectControl.js

@@ -8,8 +8,12 @@ import "../../icons/MoreCircleOutlineIcon.js";
 import "../../Info-DtWHV9kz.js";
 import "../../theme/index.js";
 import "../../Autocomplete-CfXcTXLL.js";
-import { S as v } from "../../SelectControl-in4PcK4c.js";
-import "../../Datepicker-u8DjTSV8.js";
+import { S as A } from "../../SelectControl-DEUgj2Ie.js";
+import "../../Datepicker-CJBEgBsm.js";
+import "../DescriptionDetails/DescriptionDetails.js";
+import "../DescriptionList/DescriptionList.js";
+import "../DescriptionList/DescriptionListContext.js";
+import "../DescriptionTerm/DescriptionTerm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";
@@ -22,5 +26,5 @@ import "../../FormLabel-CgNd8XLN.js";
 import "../../Tooltip-BJmTHiZe.js";
 import "../../FormHelperText-wucHHOG8.js";
 export {
-  v as SelectControl
+  A as SelectControl
 };

package/dist/components/SelectControl/index.js

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

package/dist/components/ToastContainer/useToast.d.ts

@@ -7,5 +7,7 @@ type NotifyOptions = Omit<ToastOptions, "style" | "type" | "icon"> & {
 type Notify = (message: Toast["message"], options?: NotifyOptions) => void;
 export declare const useToast: () => {
     notify: Notify;
+    dismissNotification: (toastId?: string, toasterId?: string) => void;
+    removeNotifications: (toastId?: string, toasterId?: string) => void;
 };
 export {};