@clearstory/drywall-react 3.2.1 → 3.3.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-BWiB-iy9.js}

@@ -8,7 +8,7 @@ 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 { 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,8 @@ 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 v } from "../../SelectControl-BWiB-iy9.js";
+import "../../Datepicker-CJBEgBsm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";

package/dist/components/AutocompleteControl/index.js

@@ -1,4 +1,4 @@
-import { A as e } from "../../SelectControl-in4PcK4c.js";
+import { A as e } from "../../SelectControl-BWiB-iy9.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,8 @@ 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 v } from "../../SelectControl-BWiB-iy9.js";
+import "../../Datepicker-CJBEgBsm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";

package/dist/components/DatepickerControl/index.js

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

package/dist/components/FormSublabel/FormSublabel.js

@@ -5,8 +5,8 @@ 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 h } from "../../SelectControl-BWiB-iy9.js";
+import "../../Datepicker-CJBEgBsm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "react/jsx-runtime";

package/dist/components/FormSublabel/index.js

@@ -1,4 +1,4 @@
-import { F as a } from "../../SelectControl-in4PcK4c.js";
+import { F as a } from "../../SelectControl-BWiB-iy9.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,8 @@ 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 v } from "../../SelectControl-BWiB-iy9.js";
+import "../../Datepicker-CJBEgBsm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";

package/dist/components/InputControl/index.js

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

package/dist/components/SelectControl/SelectControl.js

@@ -8,8 +8,8 @@ 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 v } from "../../SelectControl-BWiB-iy9.js";
+import "../../Datepicker-CJBEgBsm.js";
 import "../Input/Input.js";
 import "../Select/Select.js";
 import "../../theme/internal.js";

package/dist/components/SelectControl/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../../SelectControl-in4PcK4c.js";
+import { S as r } from "../../SelectControl-BWiB-iy9.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 {};

package/dist/components/ToastContainer/useToast.js

@@ -1,124 +1,128 @@
 import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import { n as a, h } from "../../index-SzwnPTHF.js";
+import { n as i, h } from "../../index-SzwnPTHF.js";
 import { useContext as p, useCallback as b } from "react";
 import "../../icons/ClearstoryIcon.js";
 import "../../icons/InternalOnlyIcon.js";
 import "../../icons/MoneyBucketIcon.js";
 import "../../icons/MoreCircleOutlineIcon.js";
-import { a as w, I, E as R, W as v, C } from "../../WarningAmberOutlined-Bip82sqV.js";
+import { a as w, I, E as v, W as R, C } from "../../WarningAmberOutlined-Bip82sqV.js";
 import { ToastLabelContext as y } from "./ToastLabelContext.js";
 import { B as k } from "../../Box-CKDKtm7F.js";
-import { A as l } from "../../Alert-BAwPio4K.js";
+import { A as m } from "../../Alert-BAwPio4K.js";
 import { I as T } from "../../IconButton-rSBl8wjc.js";
-const Y = () => {
-  const n = p(y);
-  if (!n)
+const X = () => {
+  const t = p(y);
+  if (!t)
     throw new Error(
       'useToast must be used within a ToastProvider. Make sure to wrap your component with <ToastProvider closeAriaLabel="...">'
     );
-  const { closeAriaLabel: t } = n;
-  return { notify: b(
-    (m, c = {}) => {
-      const { type: r = "info", details: e, ...d } = c, i = {
-        success: "success",
-        warning: "warning",
-        error: "error",
-        info: "info"
-      }, u = {
-        success: /* @__PURE__ */ o(C, { sx: { marginRight: 0.5 } }),
-        warning: /* @__PURE__ */ o(v, { sx: { marginRight: 0.5 } }),
-        error: /* @__PURE__ */ o(R, { sx: { marginRight: 0.5 } }),
-        info: /* @__PURE__ */ o(I, { sx: { marginRight: 0.5 } })
-      };
-      a(
-        (s) => {
-          const f = h(m, s);
-          return /* @__PURE__ */ x(
-            k,
-            {
-              sx: {
-                minWidth: { xs: "auto", sm: "18rem" },
-                maxWidth: "18rem"
-              },
-              children: [
-                /* @__PURE__ */ o(
-                  l,
-                  {
-                    role: "none",
-                    severity: i[r],
-                    variant: "filled",
-                    icon: u[r],
-                    action: /* @__PURE__ */ o(
-                      T,
-                      {
-                        color: "inherit",
-                        size: "small",
-                        onClick: () => a.dismiss(s.id),
-                        "aria-label": t,
-                        sx: {
-                          marginLeft: 0.5
+  const { closeAriaLabel: n } = t;
+  return {
+    notify: b(
+      (c, l = {}) => {
+        const { type: r = "info", details: e, ...d } = l, s = {
+          success: "success",
+          warning: "warning",
+          error: "error",
+          info: "info"
+        }, u = {
+          success: /* @__PURE__ */ o(C, { sx: { marginRight: 0.5 } }),
+          warning: /* @__PURE__ */ o(R, { sx: { marginRight: 0.5 } }),
+          error: /* @__PURE__ */ o(v, { sx: { marginRight: 0.5 } }),
+          info: /* @__PURE__ */ o(I, { sx: { marginRight: 0.5 } })
+        };
+        return i(
+          (a) => {
+            const f = h(c, a);
+            return /* @__PURE__ */ x(
+              k,
+              {
+                sx: {
+                  minWidth: { xs: "auto", sm: "18rem" },
+                  maxWidth: "18rem"
+                },
+                children: [
+                  /* @__PURE__ */ o(
+                    m,
+                    {
+                      role: "none",
+                      severity: s[r],
+                      variant: "filled",
+                      icon: u[r],
+                      action: /* @__PURE__ */ o(
+                        T,
+                        {
+                          color: "inherit",
+                          size: "small",
+                          onClick: () => i.dismiss(a.id),
+                          "aria-label": n,
+                          sx: {
+                            marginLeft: 0.5
+                          },
+                          children: /* @__PURE__ */ o(w, { fontSize: "small" })
+                        }
+                      ),
+                      sx: [
+                        {
+                          boxShadow: 2,
+                          fontSize: "0.875rem",
+                          zIndex: 2
                         },
-                        children: /* @__PURE__ */ o(w, { fontSize: "small" })
-                      }
-                    ),
-                    sx: [
-                      {
+                        !!e && {
+                          borderBottomLeftRadius: 0,
+                          borderBottomRightRadius: 0
+                        }
+                      ],
+                      children: f
+                    }
+                  ),
+                  e && /* @__PURE__ */ o(
+                    m,
+                    {
+                      role: "none",
+                      icon: !1,
+                      severity: s[r],
+                      variant: "outlined",
+                      sx: ({ vars: g }) => ({
+                        backgroundColor: g?.palette.background.surface,
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: 0,
                         boxShadow: 2,
-                        fontSize: "0.875rem",
-                        zIndex: 2
-                      },
-                      !!e && {
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: 0
-                      }
-                    ],
-                    children: f
-                  }
-                ),
-                e && /* @__PURE__ */ o(
-                  l,
-                  {
-                    role: "none",
-                    icon: !1,
-                    severity: i[r],
-                    variant: "outlined",
-                    sx: ({ vars: g }) => ({
-                      backgroundColor: g?.palette.background.surface,
-                      borderTopLeftRadius: 0,
-                      borderTopRightRadius: 0,
-                      boxShadow: 2,
-                      fontSize: "0.75rem",
-                      alignItems: "flex-start",
-                      fontWeight: "normal",
-                      maxHeight: "7rem",
-                      overflowX: "auto",
-                      overflowY: "auto",
-                      zIndex: 1
-                    }),
-                    children: e
-                  }
-                )
-              ]
-            }
-          );
-        },
-        {
-          style: {
-            padding: 0,
-            margin: 0,
-            border: 0,
-            background: "none",
-            boxShadow: "none"
+                        fontSize: "0.75rem",
+                        alignItems: "flex-start",
+                        fontWeight: "normal",
+                        maxHeight: "7rem",
+                        overflowX: "auto",
+                        overflowY: "auto",
+                        zIndex: 1
+                      }),
+                      children: e
+                    }
+                  )
+                ]
+              }
+            );
           },
-          duration: r === "error" || r === "warning" ? 1 / 0 : 5e3,
-          icon: null,
-          ...d
-        }
-      );
-    },
-    [t]
-  ) };
+          {
+            style: {
+              padding: 0,
+              margin: 0,
+              border: 0,
+              background: "none",
+              boxShadow: "none"
+            },
+            duration: r === "error" || r === "warning" ? 1 / 0 : 5e3,
+            icon: null,
+            ...d
+          }
+        );
+      },
+      [n]
+    ),
+    dismissNotification: i.dismiss,
+    removeNotifications: i.remove
+  };
 };
 export {
-  Y as useToast
+  X as useToast
 };

package/dist/main.js

@@ -9,8 +9,8 @@ import { C as Ua, a as ba, E as Sa, I as La, W as Da } from "./WarningAmberOutli
 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-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 { A as Ra, D as Ga, F as Ha, I as Ea, S as Na } from "./SelectControl-BWiB-iy9.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 { Input as eo } from "./components/Input/Input.js";
 import { Select as lo } from "./components/Select/Select.js";
 import { ThemeProvider as no } from "./components/ThemeProvider/ThemeProvider.js";
@@ -107,7 +107,7 @@ import { T as gn, g as mn, t as In } from "./Typography-DnNWmNen.js";
 import { a as fn, d as xn, e as un, g as yn, b as An, l as Un } from "./createTheme-BnGUhbht.js";
 import { u as Sn } from "./ThemeProviderWithVars-Cd9Vwf-U.js";
 import { C as Dn } from "./ClickAwayListener-BhNP8Zmy.js";
-import { A as Tn } from "./AdapterDayjs-C2OOePSw.js";
+import { A as Tn } from "./AdapterDayjs-onBBJ8Hr.js";
 export {
   g as AccessTimeIcon,
   So as Accordion,

package/package.json

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