@clearstory/drywall-react 4.1.2 → 4.1.3

package/dist/{memoTheme-CCudmmpb.js → memoTheme-D_KVIx9Z.js}

@@ -1,4 +1,4 @@
-import { p as s } from "./styled-D8CtiDxW.js";
+import { p as s } from "./styled-SBTDGe0C.js";
 const l = {
   theme: void 0
 };

package/dist/mergeSlotProps-CbCv_7BY.js

@@ -0,0 +1,78 @@
+import { i as g } from "./isHostComponent-kiaBvYVo.js";
+import { c as m } from "./clsx-OuTLNxxd.js";
+function H(t, s, e) {
+  return t === void 0 || g(t) ? s : {
+    ...s,
+    ownerState: {
+      ...s.ownerState,
+      ...e
+    }
+  };
+}
+function x(t, s, e) {
+  return typeof t == "function" ? t(s, e) : t;
+}
+function p(t, s = []) {
+  if (t === void 0)
+    return {};
+  const e = {};
+  return Object.keys(t).filter((n) => n.match(/^on[A-Z]/) && typeof t[n] == "function" && !s.includes(n)).forEach((n) => {
+    e[n] = t[n];
+  }), e;
+}
+function y(t) {
+  if (t === void 0)
+    return {};
+  const s = {};
+  return Object.keys(t).filter((e) => !(e.match(/^on[A-Z]/) && typeof t[e] == "function")).forEach((e) => {
+    s[e] = t[e];
+  }), s;
+}
+function O(t) {
+  const {
+    getSlotProps: s,
+    additionalProps: e,
+    externalSlotProps: n,
+    externalForwardedProps: r,
+    className: i
+  } = t;
+  if (!s) {
+    const u = m(e?.className, i, r?.className, n?.className), d = {
+      ...e?.style,
+      ...r?.style,
+      ...n?.style
+    }, o = {
+      ...e,
+      ...r,
+      ...n
+    };
+    return u.length > 0 && (o.className = u), Object.keys(d).length > 0 && (o.style = d), {
+      props: o,
+      internalRef: void 0
+    };
+  }
+  const N = p({
+    ...r,
+    ...n
+  }), h = y(n), S = y(r), a = s(N), c = m(a?.className, e?.className, i, r?.className, n?.className), f = {
+    ...a?.style,
+    ...e?.style,
+    ...r?.style,
+    ...n?.style
+  }, l = {
+    ...a,
+    ...e,
+    ...S,
+    ...h
+  };
+  return c.length > 0 && (l.className = c), Object.keys(f).length > 0 && (l.style = f), {
+    props: l,
+    internalRef: a.ref
+  };
+}
+export {
+  H as a,
+  p as e,
+  O as m,
+  x as r
+};

package/dist/{stackClasses-BcAe238O.js → stackClasses-Byw0GYkA.js}

@@ -1,16 +1,17 @@
 import { P as e } from "./index-CyAhC1RZ.js";
-import { s as S } from "./styled-D8CtiDxW.js";
+import { s as S } from "./styled-SBTDGe0C.js";
 import * as f from "react";
 import { c as V } from "./clsx-OuTLNxxd.js";
 import { jsx as D } from "react/jsx-runtime";
-import { s as N } from "./styled-C1tcllXX.js";
-import { e as E } from "./extendSxProp-Cae9F896.js";
-import { u as F } from "./useThemeProps-BaZ_Jfig.js";
-import { p as O, q as m, t as M, u as R, v as w, c as B, n as G, w as b } from "./createTheme-B1FDFl52.js";
-import { c as U } from "./composeClasses-2Ou-RZJr.js";
+import { s as N } from "./styled-BH7aTmBf.js";
+import { e as E } from "./extendSxProp-DPJMnqJC.js";
+import { u as F } from "./useThemeProps-BXLYmQ1k.js";
+import { o as O, p as m, q as M, t as R, u as B, m as w, v as b } from "./createTheme-C8al1H6l.js";
+import { c as G } from "./composeClasses-2Ou-RZJr.js";
+import { g as U } from "./generateUtilityClass-BhfUaMgk.js";
 import { u as $ } from "./DefaultPropsProvider-Hks9kyHW.js";
-import { g as A } from "./generateUtilityClasses-CIjBDg4V.js";
-const _ = G(), q = N("div", {
+import { g as A } from "./generateUtilityClasses-E9gROIFd.js";
+const _ = w(), q = N("div", {
   name: "MuiStack",
   slot: "Root"
 });
@@ -21,9 +22,9 @@ function I(o) {
     defaultTheme: _
   });
 }
-function L(o, t) {
+function L(o, n) {
   const c = f.Children.toArray(o).filter(Boolean);
-  return c.reduce((a, i, s) => (a.push(i), s < c.length - 1 && a.push(/* @__PURE__ */ f.cloneElement(t, {
+  return c.reduce((a, i, s) => (a.push(i), s < c.length - 1 && a.push(/* @__PURE__ */ f.cloneElement(n, {
     key: `separator-${s}`
   })), a), []);
 }
@@ -34,36 +35,36 @@ const z = (o) => ({
   "column-reverse": "Bottom"
 })[o], H = ({
   ownerState: o,
-  theme: t
+  theme: n
 }) => {
   let c = {
     display: "flex",
     flexDirection: "column",
     ...O({
-      theme: t
+      theme: n
     }, m({
       values: o.direction,
-      breakpoints: t.breakpoints.values
+      breakpoints: n.breakpoints.values
     }), (a) => ({
       flexDirection: a
     }))
   };
   if (o.spacing) {
-    const a = M(t), i = Object.keys(t.breakpoints.values).reduce((r, n) => ((typeof o.spacing == "object" && o.spacing[n] != null || typeof o.direction == "object" && o.direction[n] != null) && (r[n] = !0), r), {}), s = m({
+    const a = M(n), i = Object.keys(n.breakpoints.values).reduce((r, t) => ((typeof o.spacing == "object" && o.spacing[t] != null || typeof o.direction == "object" && o.direction[t] != null) && (r[t] = !0), r), {}), s = m({
       values: o.direction,
       base: i
     }), l = m({
       values: o.spacing,
       base: i
     });
-    typeof s == "object" && Object.keys(s).forEach((r, n, p) => {
+    typeof s == "object" && Object.keys(s).forEach((r, t, p) => {
       if (!s[r]) {
-        const u = n > 0 ? s[p[n - 1]] : "column";
+        const u = t > 0 ? s[p[t - 1]] : "column";
         s[r] = u;
       }
     }), c = R(c, O({
-      theme: t
-    }, l, (r, n) => o.useFlexGap ? {
+      theme: n
+    }, l, (r, t) => o.useFlexGap ? {
       gap: b(a, r)
     } : {
       // The useFlexGap={false} implement relies on each child to give up control of the margin.
@@ -72,21 +73,21 @@ const z = (o) => ({
         margin: 0
       },
       "& > :not(style) ~ :not(style)": {
-        [`margin${z(n ? s[n] : o.direction)}`]: b(a, r)
+        [`margin${z(t ? s[t] : o.direction)}`]: b(a, r)
       }
     }));
   }
-  return c = w(t.breakpoints, c), c;
+  return c = B(n.breakpoints, c), c;
 };
 function J(o = {}) {
   const {
     // This will allow adding custom styled fn (for example for custom sx style function)
-    createStyledComponent: t = q,
+    createStyledComponent: n = q,
     useThemeProps: c = I,
     componentName: a = "MuiStack"
-  } = o, i = () => U({
+  } = o, i = () => G({
     root: ["root"]
-  }, (r) => B(a, r), {}), s = t(H), l = /* @__PURE__ */ f.forwardRef(function(r, n) {
+  }, (r) => U(a, r), {}), s = n(H), l = /* @__PURE__ */ f.forwardRef(function(r, t) {
     const p = c(r), y = E(p), {
       component: u = "div",
       direction: T = "column",
@@ -104,7 +105,7 @@ function J(o = {}) {
     return /* @__PURE__ */ D(s, {
       as: u,
       ownerState: C,
-      ref: n,
+      ref: t,
       className: V(P.root, h),
       ...x,
       children: v ? L(g, v) : g
@@ -172,8 +173,8 @@ process.env.NODE_ENV !== "production" && (K.propTypes = {
    */
   useFlexGap: e.bool
 });
-const ce = A("MuiStack", ["root"]);
+const ae = A("MuiStack", ["root"]);
 export {
   K as S,
-  ce as s
+  ae as s
 };

package/dist/styled-BH7aTmBf.js

@@ -0,0 +1,5 @@
+import { c as t } from "./styled-SBTDGe0C.js";
+const s = t();
+export {
+  s
+};

package/dist/{styled-D8CtiDxW.js → styled-SBTDGe0C.js}

@@ -1,7 +1,7 @@
-import { d as N } from "./defaultTheme-BSvUK9rJ.js";
+import { d as N } from "./defaultTheme-DDzCZLdJ.js";
 import { T as q } from "./emotion-element-f0de968e.browser.esm-CX7iy5u6.js";
-import { i as S, a as G, s as J } from "./index-Dt2kGIWG.js";
-import { r as E, n as Q, s as L, i as U, j as X } from "./createTheme-B1FDFl52.js";
+import { i as S, a as G, s as J } from "./index-CFunVsti.js";
+import { r as E, m as Q, s as L, i as U, c as X } from "./createTheme-C8al1H6l.js";
 function k(e, n = "") {
   return e.displayName || e.name || n;
 }
@@ -67,11 +67,11 @@ function P(e, n, t) {
       } = r;
       s = t ? m(S(o), t) : o;
     }
-    return j(e, r.variants, [s], t);
+    return D(e, r.variants, [s], t);
   }
   return r?.isProcessed ? t ? m(S(r.style), t) : r.style : t ? m(S(r), t) : r;
 }
-function j(e, n, t = [], r = void 0) {
+function D(e, n, t = [], r = void 0) {
   let s;
   e: for (let w = 0; w < n.length; w += 1) {
     const o = n[w];
@@ -113,7 +113,7 @@ function ne(e = {}) {
       skipSx: M,
       // TODO v6: remove `lowercaseFirstLetter()` in the next major release
       // For more details: https://github.com/mui/material-ui/pull/37908
-      overridesResolver: O = ee(D(l)),
+      overridesResolver: O = ee(j(l)),
       ...H
     } = I, T = y && y.startsWith("Mui") || l ? "components" : "custom", W = A !== void 0 ? A : (
       // TODO v6: remove `Root` in the next major release
@@ -152,7 +152,7 @@ function ne(e = {}) {
         return O(a, _);
       }), y && !W && d.push(function(a) {
         const c = a.theme?.components?.[y]?.variants;
-        return c ? j(a, c, [], a.theme.modularCssLayers ? "theme" : void 0) : null;
+        return c ? D(a, c, [], a.theme.modularCssLayers ? "theme" : void 0) : null;
       }), C || d.push(L), Array.isArray(h[0])) {
         const p = h.shift(), a = new Array(f.length).fill(""), F = new Array(d.length).fill("");
         let c;
@@ -169,7 +169,7 @@ function re(e, n, t) {
 }
 function se(e, n) {
   let t;
-  return process.env.NODE_ENV !== "production" && e && (t = `${e}-${D(n || "Root")}`), t;
+  return process.env.NODE_ENV !== "production" && e && (t = `${e}-${j(n || "Root")}`), t;
 }
 function oe(e) {
   for (const n in e)
@@ -182,7 +182,7 @@ function ie(e) {
   // it's a lowercase character
   e.charCodeAt(0) > 96;
 }
-function D(e) {
+function j(e) {
   return e && e.charAt(0).toLowerCase() + e.slice(1);
 }
 function ue(e) {

package/dist/theme/colorSchemes.js

@@ -1,12 +1,11 @@
-import { gray as r, honoluluBlue as i, indiaGreen as a } from "./colors.js";
-import { o as d, r as e } from "../orange-DJwLWzIS.js";
+import { gray as r, orangePeel as i, vermilion as e, honoluluBlue as n, indiaGreen as a } from "./colors.js";
 const g = {
   light: {
     palette: {
       common: {
-        ai: "#cb02cc",
-        black: "#0f131c",
-        brand: "#02cd0d"
+        ai: "#CB02CC",
+        black: "#0F131C",
+        brand: "#02CD0D"
       },
       primary: {
         main: a[500],
@@ -24,9 +23,9 @@ const g = {
         dark: a[700]
       },
       info: {
-        main: i[500],
-        light: i[300],
-        dark: i[700]
+        main: n[500],
+        light: n[300],
+        dark: n[700]
       },
       error: {
         main: e[700],
@@ -34,15 +33,15 @@ const g = {
         dark: e[900]
       },
       warning: {
-        main: d[700],
-        light: d[500],
-        dark: d[900]
+        main: i[700],
+        light: i[500],
+        dark: i[900]
       },
       grey: r,
       background: {
         default: r[50],
-        paper: "#ffffff",
-        surface: "#f6f8f9"
+        paper: "#FFFFFF",
+        surface: "#F7F9FA"
         // halfway between white and gray[50]
       },
       action: {
@@ -64,9 +63,9 @@ const g = {
   dark: {
     palette: {
       common: {
-        ai: "#cb02cc",
-        black: "#0f131c",
-        brand: "#02cd0d"
+        ai: "#CB02CC",
+        black: "#0F131C",
+        brand: "#02CD0D"
       },
       primary: {
         main: a[200],
@@ -84,9 +83,9 @@ const g = {
         dark: a[100]
       },
       info: {
-        main: i[200],
-        light: i[600],
-        dark: i[50]
+        main: n[200],
+        light: n[600],
+        dark: n[50]
       },
       error: {
         main: e[300],
@@ -94,15 +93,15 @@ const g = {
         dark: e[100]
       },
       warning: {
-        main: d[300],
-        light: d[700],
-        dark: d[100]
+        main: i[300],
+        light: i[700],
+        dark: i[100]
       },
       grey: r,
       background: {
         default: r[800],
         paper: r[900],
-        surface: "#1d2527"
+        surface: "#1C2427"
         // halfway between gray[800] and gray[900]
       }
     }

package/dist/theme/colors.d.ts

@@ -1,4 +1,3 @@
-export { red, orange } from '@mui/material/colors';
 export declare const indiaGreen: {
     50: string;
     100: string;
@@ -35,3 +34,27 @@ export declare const gray: {
     800: string;
     900: string;
 };
+export declare const orangePeel: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};
+export declare const vermilion: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};

package/dist/theme/colors.js

@@ -1,42 +1,63 @@
-import { o, r as c } from "../orange-DJwLWzIS.js";
-const e = {
-  50: "#d6eed2",
-  100: "#b6e0a8",
-  200: "#8fcc7a",
-  300: "#72ba4a",
-  400: "#37a000",
-  500: "#2e8700",
-  600: "#2f730b",
-  700: "#23610e",
-  800: "#1f4d0f",
-  900: "#123b0b"
-}, a = {
-  50: "#d7e7f5",
-  100: "#b2d6ed",
-  200: "#82b8d9",
-  300: "#4a8fba",
-  400: "#2275ab",
-  500: "#0062a1",
+const F = {
+  50: "#EAFAE1",
+  100: "#CEEDBE",
+  200: "#9CD47F",
+  300: "#72BA4A",
+  400: "#37A000",
+  500: "#2F8700",
+  600: "#266E00",
+  700: "#1D5400",
+  800: "#153B00",
+  900: "#0D2600"
+}, E = {
+  50: "#E3F1FC",
+  100: "#C2E0F2",
+  200: "#82B8D9",
+  300: "#4A8FBA",
+  400: "#2275AB",
+  500: "#0062A1",
   600: "#005380",
   700: "#004266",
   800: "#003852",
   900: "#103442"
-}, d = {
-  50: "#edf1f2",
-  100: "#dfe4e5",
-  200: "#c6cbcc",
-  300: "#adb1b2",
+}, C = {
+  50: "#EDF1F2",
+  100: "#E0E4E5",
+  200: "#C6CBCC",
+  300: "#ABB0B2",
   400: "#919799",
-  500: "#737d80",
-  600: "#576366",
-  700: "#3d494d",
+  500: "#737D80",
+  600: "#576266",
+  700: "#3E494D",
   800: "#263033",
-  900: "#14191a"
+  900: "#12181A"
+}, B = {
+  50: "#FFF3E0",
+  100: "#FFE0B2",
+  200: "#FFCC80",
+  300: "#FFB74D",
+  400: "#FFA726",
+  500: "#FF9800",
+  600: "#FB8C00",
+  700: "#F57C00",
+  800: "#EF6C00",
+  900: "#E65100"
+}, A = {
+  50: "#FFEBEE",
+  100: "#FFCDD2",
+  200: "#EF9A9A",
+  300: "#E57373",
+  400: "#EF5350",
+  500: "#F44336",
+  600: "#E53935",
+  700: "#D32F2F",
+  800: "#C62828",
+  900: "#B71C1C"
 };
 export {
-  d as gray,
-  a as honoluluBlue,
-  e as indiaGreen,
-  o as orange,
-  c as red
+  C as gray,
+  E as honoluluBlue,
+  F as indiaGreen,
+  B as orangePeel,
+  A as vermilion
 };

package/dist/theme/index.js

@@ -1,13 +1,13 @@
-import { C as m } from "../createTheme-B1FDFl52.js";
-import { a as M, d as E, e as j, g as $, b as w, l as N } from "../createTheme-B1FDFl52.js";
-import { s as q } from "../styled-D8CtiDxW.js";
+import { C as m } from "../generateUtilityClass-BhfUaMgk.js";
+import { s as M } from "../styled-SBTDGe0C.js";
 import * as u from "react";
 import { P as c } from "../index-CyAhC1RZ.js";
 import { C as h, c as d, S as l } from "../emotion-element-f0de968e.browser.esm-CX7iy5u6.js";
 import { jsx as f } from "react/jsx-runtime";
-import { u as D } from "../useTheme-DAG00iEG.js";
-import { u as R } from "../index-ChmGGOCR.js";
-import { u as F } from "../ThemeProviderWithVars-Dkq81Wx8.js";
+import { u as j } from "../useTheme-BRcg8wFh.js";
+import { u as w } from "../index-DKMUcCLE.js";
+import { a as T, d as q, e as A, g as D, b as L, l as R } from "../createTheme-C8al1H6l.js";
+import { u as F } from "../ThemeProviderWithVars-5x9PPela.js";
 const p = /* @__PURE__ */ new Map(), y = (t, o) => {
   const e = d(t);
   return e.sheet = new o({
@@ -82,14 +82,14 @@ m.configure(
 );
 export {
   b as StyledEngineProvider,
-  M as alpha,
-  E as darken,
-  j as emphasize,
-  $ as getContrastRatio,
-  w as getLuminance,
-  N as lighten,
-  q as styled,
+  T as alpha,
+  q as darken,
+  A as emphasize,
+  D as getContrastRatio,
+  L as getLuminance,
+  R as lighten,
+  M as styled,
   F as useColorScheme,
-  R as useMediaQuery,
-  D as useTheme
+  w as useMediaQuery,
+  j as useTheme
 };

package/dist/theme/internal.js

@@ -1,7 +1,7 @@
 import { colorSchemes as o } from "./colorSchemes.js";
 import { components as r } from "./components.js";
 import { typography as e } from "./typography.js";
-import { f as m } from "../createTheme-B1FDFl52.js";
+import { f as m } from "../createTheme-C8al1H6l.js";
 const l = m({
   colorSchemes: o,
   components: r,

package/dist/toggleButtonGroupClasses-BomKNKPA.js

@@ -0,0 +1,10 @@
+import { g as o } from "./generateUtilityClasses-E9gROIFd.js";
+import { g as e } from "./generateUtilityClass-BhfUaMgk.js";
+function i(t) {
+  return e("MuiToggleButtonGroup", t);
+}
+const s = o("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]);
+export {
+  i as g,
+  s as t
+};

package/dist/{useControlled-nm4pBabJ.js → useControlled-D1L5tREc.js}

@@ -1,31 +1,31 @@
 import * as t from "react";
-function f(c) {
+function d(i) {
   const {
-    controlled: n,
+    controlled: o,
     default: r,
-    name: o,
+    name: n,
     state: l = "value"
-  } = c, {
+  } = i, {
     current: e
-  } = t.useRef(n !== void 0), [i, u] = t.useState(r), a = e ? n : i;
+  } = t.useRef(o !== void 0), [c, u] = t.useState(r), f = e ? o : c;
   if (process.env.NODE_ENV !== "production") {
     t.useEffect(() => {
-      e !== (n !== void 0) && console.error([`MUI: A component is changing the ${e ? "" : "un"}controlled ${l} state of ${o} to be ${e ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${o} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
+      e !== (o !== void 0) && console.error([`MUI: A component is changing the ${e ? "" : "un"}controlled ${l} state of ${n} to be ${e ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${n} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
 `));
-    }, [l, o, n]);
+    }, [l, n, o]);
     const {
       current: s
     } = t.useRef(r);
     t.useEffect(() => {
-      !e && !Object.is(s, r) && console.error([`MUI: A component is changing the default ${l} state of an uncontrolled ${o} after being initialized. To suppress this warning opt to use a controlled ${o}.`].join(`
+      !e && JSON.stringify(r) !== JSON.stringify(s) && console.error([`MUI: A component is changing the default ${l} state of an uncontrolled ${n} after being initialized. To suppress this warning opt to use a controlled ${n}.`].join(`
 `));
     }, [JSON.stringify(r)]);
   }
-  const d = t.useCallback((s) => {
+  const a = t.useCallback((s) => {
     e || u(s);
   }, []);
-  return [a, d];
+  return [f, a];
 }
 export {
-  f as u
+  d as u
 };

package/dist/{usePreviousProps-ByGlbpJ6.js → usePreviousProps-7NDRTUOj.js}

@@ -1,10 +1,10 @@
 import * as r from "react";
-const t = (s) => {
+function u(t) {
   const e = r.useRef({});
   return r.useEffect(() => {
-    e.current = s;
+    e.current = t;
   }), e.current;
-};
+}
 export {
-  t as u
+  u
 };

package/dist/{useSlot-BVGwJA4b.js → useSlot-CoTIuujp.js}

@@ -1,4 +1,4 @@
-import { r as y, m as T, a as g } from "./mergeSlotProps-6s0dXxkk.js";
+import { r as y, m as T, a as g } from "./mergeSlotProps-CbCv_7BY.js";
 import { u as h } from "./useForkRef-9kN4DArm.js";
 function k(o, t) {
   const {

package/dist/{useSlotProps-D0I_wOtk.js → useSlotProps-DzlqyROF.js}

@@ -1,4 +1,4 @@
-import { r as m, m as P, a as i } from "./mergeSlotProps-6s0dXxkk.js";
+import { r as m, m as P, a as i } from "./mergeSlotProps-CbCv_7BY.js";
 import { u as S } from "./useForkRef-9kN4DArm.js";
 function g(o) {
   const {

package/dist/{useTheme-DAG00iEG.js → useTheme-BRcg8wFh.js}

@@ -1,7 +1,7 @@
 import * as o from "react";
-import { d as r } from "./defaultTheme-BSvUK9rJ.js";
+import { d as r } from "./defaultTheme-DDzCZLdJ.js";
 import { T as m } from "./emotion-element-f0de968e.browser.esm-CX7iy5u6.js";
-import { u as t } from "./useTheme-zuIKvOcV.js";
+import { u as t } from "./useTheme-Ixs7c498.js";
 function f() {
   const e = t(r);
   return process.env.NODE_ENV !== "production" && o.useDebugValue(e), e[m] || e;