@clearstory/drywall-react 3.2.0 → 3.3.0

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-CdviGNA_.js → SelectControl-BWiB-iy9.js}

@@ -7,8 +7,8 @@ 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 { D as M } from "./Datepicker-u8DjTSV8.js";
+import { A as K } from "./Autocomplete-CfXcTXLL.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/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,9 +7,9 @@ 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 "../../Datepicker-u8DjTSV8.js";
+import "../../Autocomplete-CfXcTXLL.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-CdviGNA_.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

@@ -7,9 +7,9 @@ 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 "../../Datepicker-u8DjTSV8.js";
+import "../../Autocomplete-CfXcTXLL.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-CdviGNA_.js";
+import { D as e } from "../../SelectControl-BWiB-iy9.js";
 export {
   e as DatepickerControl
 };

package/dist/components/FormSublabel/FormSublabel.js

@@ -4,9 +4,9 @@ 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 "../../Datepicker-u8DjTSV8.js";
+import "../../Autocomplete-CfXcTXLL.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-CdviGNA_.js";
+import { F as a } from "../../SelectControl-BWiB-iy9.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/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

@@ -7,9 +7,9 @@ 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 "../../Datepicker-u8DjTSV8.js";
+import "../../Autocomplete-CfXcTXLL.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-CdviGNA_.js";
+import { I as t } from "../../SelectControl-BWiB-iy9.js";
 export {
   t as InputControl
 };

package/dist/components/SelectControl/SelectControl.js

@@ -7,9 +7,9 @@ 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 "../../Datepicker-u8DjTSV8.js";
+import "../../Autocomplete-CfXcTXLL.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-CdviGNA_.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 {};