@clearstory/drywall-react 7.2.0 → 7.3.0

package/dist/defaultTheme-Cd478y90.js

@@ -0,0 +1,5 @@
+import { c as e } from "./createTheme-PiEw_V9m.js";
+const a = e();
+export {
+  a as d
+};

package/dist/eslint-config/index.js

@@ -1,13 +1,15 @@
-import e from "./no-shorthand-spacing.js";
-import l from "./no-system-props.js";
-import a from "./prefer-logical-properties.js";
-import o from "./prefer-vars-palette.js";
+import e from "./no-palette-grey.js";
+import l from "./no-shorthand-spacing.js";
+import a from "./no-system-props.js";
+import o from "./prefer-logical-properties.js";
+import t from "./prefer-vars-palette.js";
 const r = {
   rules: {
-    "no-shorthand-spacing": e,
-    "no-system-props": l,
-    "prefer-logical-properties": a,
-    "prefer-vars-palette": o
+    "no-palette-grey": e,
+    "no-shorthand-spacing": l,
+    "no-system-props": a,
+    "prefer-logical-properties": o,
+    "prefer-vars-palette": t
   },
   configs: {}
 };
@@ -17,18 +19,20 @@ r.configs.recommended = {
     "@clearstory/drywall-react": r
   },
   rules: {
+    "@clearstory/drywall-react/no-palette-grey": "error",
     "@clearstory/drywall-react/no-shorthand-spacing": "error",
     "@clearstory/drywall-react/no-system-props": "error",
     "@clearstory/drywall-react/prefer-logical-properties": "error",
     "@clearstory/drywall-react/prefer-vars-palette": "error"
   }
 };
-const y = {
+const d = {
   name: "@clearstory/drywall-react",
   plugins: {
     "@clearstory/drywall-react": r
   },
   rules: {
+    "@clearstory/drywall-react/no-palette-grey": "error",
     "@clearstory/drywall-react/no-shorthand-spacing": "error",
     "@clearstory/drywall-react/no-system-props": "error",
     "@clearstory/drywall-react/prefer-logical-properties": "error",
@@ -36,6 +40,6 @@ const y = {
   }
 };
 export {
-  y as default,
+  d as default,
   r as plugin
 };

package/dist/eslint-config/no-palette-grey.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/eslint-config/no-palette-grey.js

@@ -0,0 +1,121 @@
+import { createSxVisitor as l } from "./sx-utils.js";
+const y = /* @__PURE__ */ new Set([
+  "color",
+  "backgroundColor",
+  "bgcolor",
+  "background",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "outlineColor",
+  "fill",
+  "stroke",
+  "caretColor",
+  "textDecorationColor",
+  "columnRuleColor"
+]), u = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Disallow usage of palette.grey in sx props. Use semantic colors instead.",
+      category: "Best Practices",
+      recommended: !0
+    },
+    messages: {
+      greyMemberAccess: "Avoid using palette.grey. Use a semantic color instead (e.g. vars.palette.text.secondary, vars.palette.action.disabled, vars.palette.divider).",
+      greyStringLiteral: 'Avoid using "{{value}}" in sx. Use a semantic color instead (e.g. vars.palette.text.secondary, vars.palette.action.disabled, vars.palette.divider).'
+    },
+    schema: []
+  },
+  create(t) {
+    return l({
+      onProperty(e, r, o) {
+        y.has(e) && i(t, o);
+      },
+      onCallback(e) {
+        a(t, e);
+      }
+    });
+  }
+};
+function i(t, e) {
+  if (e.type === "ObjectExpression") {
+    const r = e.properties;
+    for (const o of r) {
+      if (o.type === "SpreadElement" || o.type !== "Property") continue;
+      i(t, o.value);
+    }
+    return;
+  }
+  if (e.type === "ArrowFunctionExpression" || e.type === "FunctionExpression") {
+    a(t, e);
+    return;
+  }
+  if (e.type === "Literal") {
+    const r = e.value;
+    typeof r == "string" && /^grey\./i.test(r) && t.report({
+      node: e,
+      messageId: "greyStringLiteral",
+      data: { value: r }
+    });
+    return;
+  }
+  if (e.type === "TemplateLiteral") {
+    const r = e;
+    if (r.expressions.length === 0) {
+      const o = r.quasis[0]?.value.raw;
+      o && /^grey\./i.test(o) && t.report({
+        node: e,
+        messageId: "greyStringLiteral",
+        data: { value: o }
+      });
+    }
+    return;
+  }
+  if (e.type === "ConditionalExpression") {
+    const r = e;
+    i(t, r.consequent), i(t, r.alternate);
+  }
+}
+function a(t, e) {
+  const r = e.body;
+  r && n(t, r);
+}
+function n(t, e) {
+  if (!(!e || typeof e != "object")) {
+    if (e.type === "MemberExpression") {
+      const r = e.property;
+      if ((!e.computed && r.name ? r.name : r.type === "Literal" && typeof r.value == "string" ? r.value : null) === "grey") {
+        const c = e.object;
+        if (p(c)) {
+          t.report({
+            node: e,
+            messageId: "greyMemberAccess"
+          });
+          return;
+        }
+      }
+    }
+    for (const r of Object.keys(e)) {
+      if (r === "parent") continue;
+      const o = e[r];
+      o && typeof o == "object" && (Array.isArray(o) ? o.forEach((s) => {
+        s && typeof s == "object" && "type" in s && n(t, s);
+      }) : "type" in o && n(t, o));
+    }
+  }
+}
+function p(t) {
+  if (t.type === "Identifier" && t.name === "palette" || t.type === "MemberExpression" && t.property.name === "palette")
+    return !0;
+  if (t.type === "ChainExpression") {
+    const e = t.expression;
+    return p(e);
+  }
+  return !1;
+}
+export {
+  u as default
+};

package/dist/eslint-config/no-system-props.js

@@ -14,7 +14,6 @@ const g = [
   "outlineColor",
   "borderRadius",
   // colors
-  "color",
   "bgcolor",
   "backgroundColor",
   // spacing
@@ -122,29 +121,12 @@ const g = [
   "typography",
   // other common system props
   "spacing"
-], u = {
-  // color: semantic theme colors (primary, secondary, error, etc.)
-  Typography: ["color"],
-  Link: ["color"],
-  Button: ["color"],
-  ButtonGroup: ["color"],
-  IconButton: ["color"],
-  Chip: ["color"],
-  Badge: ["color"],
-  Alert: ["color"],
-  CircularProgress: ["color"],
-  LinearProgress: ["color"],
-  Radio: ["color"],
-  Checkbox: ["color"],
-  Switch: ["color"],
-  SvgIcon: ["color"],
-  FormLabel: ["color"],
-  FormControl: ["color"],
-  ToggleButton: ["color"],
-  ToggleButtonGroup: ["color"],
-  // Container: maxWidth accepts breakpoint values (xs, sm, md, lg, xl), not CSS values
-  Container: ["maxWidth"]
-}, h = {
+], c = {
+  Container: ["maxWidth"],
+  Dialog: ["maxWidth"],
+  InputAdornment: ["position"],
+  TableCell: ["padding"]
+}, f = {
   meta: {
     type: "problem",
     docs: {
@@ -157,55 +139,45 @@ const g = [
     },
     schema: []
   },
-  create(t) {
-    const o = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Set();
+  create(l) {
+    const r = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Set();
     return {
-      ImportDeclaration(l) {
-        const r = l;
-        r.source.value === "@clearstory/drywall-react" && r.specifiers.forEach((e) => {
-          e.type === "ImportSpecifier" && e.imported ? o.set(e.local.name, e.imported.name) : e.type === "ImportNamespaceSpecifier" && p.add(e.local.name);
+      ImportDeclaration(i) {
+        const o = i;
+        o.source.value === "@clearstory/drywall-react" && o.specifiers.forEach((e) => {
+          e.type === "ImportSpecifier" && e.imported ? r.set(e.local.name, e.imported.name) : e.type === "ImportNamespaceSpecifier" && m.add(e.local.name);
         });
       },
-      JSXOpeningElement(l) {
-        const r = l;
-        let e, s;
-        if ("name" in r.name) {
-          if (e = r.name.name, !o.has(e))
+      JSXOpeningElement(i) {
+        const o = i;
+        let e;
+        if ("name" in o.name) {
+          if (e = o.name.name, !r.has(e))
             return;
-          s = o.get(e);
-        } else if (r.name.type === "JSXMemberExpression") {
-          const n = r.name.object.name;
-          if (e = r.name.property.name, s = e, !p.has(n))
+        } else if (o.name.type === "JSXMemberExpression") {
+          const t = o.name.object.name;
+          if (e = o.name.property.name, !m.has(t))
             return;
         } else
           return;
-        const m = [];
-        r.attributes.forEach((n) => {
-          const i = n;
-          if (i.type !== "JSXAttribute" || !i.name)
+        const p = [];
+        o.attributes.forEach((t) => {
+          const n = t;
+          if (n.type !== "JSXAttribute" || !n.name)
             return;
-          const a = i.name.name;
+          const a = n.name.name;
           if (a === "sx" || !g.includes(a))
             return;
-          const d = u[s];
-          if (d && d.includes(a))
-            if (a === "color") {
-              if (i.value) {
-                const c = f(i.value);
-                if (y(c))
-                  return;
-              }
-            } else
-              return;
-          m.push(
-            i
+          const s = r.get(e) ?? e, d = c[s];
+          d && d.includes(a) || p.push(
+            n
           );
-        }), m.forEach((n) => {
-          t.report({
-            node: n,
+        }), p.forEach((t) => {
+          l.report({
+            node: t,
             messageId: "systemProp",
             data: {
-              prop: n.name.name,
+              prop: t.name.name,
               component: e
             }
           });
@@ -214,38 +186,6 @@ const g = [
     };
   }
 };
-function f(t) {
-  if (!t) return null;
-  const o = t;
-  if (o.type === "Literal")
-    return String(o.value);
-  if (o.type === "JSXExpressionContainer" && o.expression) {
-    if (o.expression.type === "Literal")
-      return String(o.expression.value);
-    if (o.expression.type === "Identifier")
-      return o.expression.name || null;
-  }
-  return null;
-}
-function y(t) {
-  return [
-    "inherit",
-    "primary",
-    "secondary",
-    "error",
-    "warning",
-    "info",
-    "success",
-    "default",
-    // Badge, Radio, Checkbox, Switch
-    "action",
-    // SvgIcon
-    "disabled",
-    // SvgIcon
-    "standard"
-    // ToggleButton, ToggleButtonGroup
-  ].includes(t || "");
-}
 export {
-  h as default
+  f as default
 };

package/dist/{extendSxProp-DsZikgKo.js → extendSxProp-DFDhj_4Z.js}

@@ -1,4 +1,4 @@
-import { i as c, f as l } from "./createTheme-BFWMvXRe.js";
+import { i as c, f as l } from "./createTheme-PiEw_V9m.js";
 const a = (t) => {
   const s = {
     systemProps: {},

package/dist/icons/ClearstoryIcon.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { c as o } from "../createSvgIcon-BXROV6bT.js";
+import { c as o } from "../createSvgIcon-DULirWwm.js";
 const c = o(
   /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ r("path", { d: "M11.105 22.206H3.011L3 15.177l8.115-7.884-.01 14.913ZM21 22.207h-7.878V1.793L21 9.678v12.529Z" }) }),
   "Clearstory"

package/dist/icons/InternalOnlyIcon.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as C } from "react/jsx-runtime";
-import { c as l } from "../createSvgIcon-BXROV6bT.js";
+import { c as l } from "../createSvgIcon-DULirWwm.js";
 const t = l(
   /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: [
     /* @__PURE__ */ C(

package/dist/icons/MoneyBucketIcon.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as c } from "react/jsx-runtime";
-import { c as v } from "../createSvgIcon-BXROV6bT.js";
+import { c as v } from "../createSvgIcon-DULirWwm.js";
 const o = v(
   /* @__PURE__ */ a("svg", { viewBox: "0 0 24 24", children: [
     /* @__PURE__ */ c(

package/dist/icons/MoreCircleOutlineIcon.js

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { c as r } from "../createSvgIcon-BXROV6bT.js";
+import { c as r } from "../createSvgIcon-DULirWwm.js";
 const n = r(
   /* @__PURE__ */ o(
     "svg",

package/dist/icons/SparkleIcon.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { c as o } from "../createSvgIcon-BXROV6bT.js";
+import { c as o } from "../createSvgIcon-DULirWwm.js";
 const c = o(
   /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ r("path", { d: "M15.4375 8.5625L12 1L8.5625 8.5625L1 12L8.5625 15.4375L12 23L15.4375 15.4375L23 12L15.4375 8.5625Z" }) }),
   "Sparkle"

package/dist/icons/index.js

@@ -3,11 +3,11 @@ import { InternalOnlyIcon as c } from "./InternalOnlyIcon.js";
 import { MoneyBucketIcon as I } from "./MoneyBucketIcon.js";
 import { MoreCircleOutlineIcon as t } from "./MoreCircleOutlineIcon.js";
 import { SparkleIcon as l } from "./SparkleIcon.js";
-import { A as u, a as C, b as p, c as A, d as w, e as f, f as m, h as O, g as h, i as y, j as k, k as g, l as x, m as D, n as b, o as B, B as M, p as P, q as R, r as L, C as T, s as v, t as F, u as S, v as E, w as U, x as N, y as V, z as H, D as K, E as W, F as z, G, H as Z, I as j, J as q, K as J, L as Q, M as X, N as Y, O as _, P as $, Q as aa, R as oa, S as na, T as sa, U as ca, V as ea, W as Ia, X as ra, Y as ta, Z as ia, _ as la, $ as da, a0 as ua, a1 as Ca, a2 as pa, a3 as Aa, a4 as wa, a5 as fa, a6 as ma, a7 as Oa, a8 as ha, a9 as ya, aa as ka, ac as ga, ab as xa, ad as Da, ae as ba, af as Ba, ag as Ma, ah as Pa, ai as Ra, aj as La, ak as Ta, al as va, am as Fa, an as Sa, ao as Ea, ap as Ua, aq as Na, ar as Va, as as Ha, at as Ka, au as Wa, av as za, aw as Ga, ax as Za, ay as ja, az as qa, aA as Ja, aB as Qa, aC as Xa, aD as Ya, aE as _a, aF as $a, aG as ao, aJ as oo, aI as no, aH as so, aK as co, aL as eo, aM as Io, aN as ro, aO as to, aP as io, aQ as lo, aR as uo, aS as Co, aT as po, aU as Ao, aV as wo, aW as fo } from "../ZoomOut-CSnKUaeV.js";
-import { A as Oo, C as ho } from "../Clear-CFMBhrck.js";
-import { C as ko, E as go, I as xo, W as Do } from "../WarningAmberOutlined-YFF6FFJ9.js";
-import { C as Bo } from "../Close-CaDQwoD1.js";
-import { I as Po } from "../Info-B3KWVOXO.js";
+import { A as u, a as C, b as p, c as A, d as w, e as f, f as m, h as O, g as h, i as y, j as k, k as g, l as x, m as D, n as b, o as B, B as M, p as P, q as R, r as L, C as T, s as v, t as F, u as S, v as E, w as U, x as N, y as V, z as H, D as K, E as W, F as z, G, H as Z, I as j, J as q, K as J, L as Q, M as X, N as Y, O as _, P as $, Q as aa, R as oa, S as na, T as sa, U as ca, V as ea, W as Ia, X as ra, Y as ta, Z as ia, _ as la, $ as da, a0 as ua, a1 as Ca, a2 as pa, a3 as Aa, a4 as wa, a5 as fa, a6 as ma, a7 as Oa, a8 as ha, a9 as ya, aa as ka, ac as ga, ab as xa, ad as Da, ae as ba, af as Ba, ag as Ma, ah as Pa, ai as Ra, aj as La, ak as Ta, al as va, am as Fa, an as Sa, ao as Ea, ap as Ua, aq as Na, ar as Va, as as Ha, at as Ka, au as Wa, av as za, aw as Ga, ax as Za, ay as ja, az as qa, aA as Ja, aB as Qa, aC as Xa, aD as Ya, aE as _a, aF as $a, aG as ao, aJ as oo, aI as no, aH as so, aK as co, aL as eo, aM as Io, aN as ro, aO as to, aP as io, aQ as lo, aR as uo, aS as Co, aT as po, aU as Ao, aV as wo, aW as fo } from "../ZoomOut-CCdLSR93.js";
+import { A as Oo, C as ho } from "../Clear-Dvmnc6Px.js";
+import { C as ko, E as go, I as xo, W as Do } from "../WarningAmberOutlined-DMySBPYG.js";
+import { C as Bo } from "../Close-DFkW1yae.js";
+import { I as Po } from "../Info-Dmczo2E6.js";
 export {
   u as AccessTimeIcon,
   C as AccountCircleIcon,

package/dist/{index-iKRLpQIf.js → index-Db3avKaK.js}

@@ -1,9 +1,9 @@
 import { jsx as e } from "react/jsx-runtime";
 import { P as o } from "./index-B5q5ym9h.js";
-import { d as a } from "./defaultTheme-s7mxt8ja.js";
+import { d as a } from "./defaultTheme-Cd478y90.js";
 import { T as s } from "./emotion-element-f0de968e.browser.esm-CX7iy5u6.js";
-import { G as f } from "./GlobalStyles-BqCTWHBT.js";
-import { e as i } from "./extendSxProp-DsZikgKo.js";
+import { G as f } from "./GlobalStyles-C081E6-3.js";
+import { e as i } from "./extendSxProp-DFDhj_4Z.js";
 function t(r) {
   return /* @__PURE__ */ e(f, {
     ...r,

package/dist/{index-DtVyyURM.js → index-DrR6lRMV.js}

@@ -1,6 +1,6 @@
 import { T as y } from "./emotion-element-f0de968e.browser.esm-CX7iy5u6.js";
 import * as d from "react";
-import { a as v } from "./useTheme-DFnskFLF.js";
+import { a as v } from "./useTheme-DJ2s8uyO.js";
 import { g } from "./getThemeProps-DD5fEXGs.js";
 import { u as E } from "./useEnhancedEffect-CJGo-L3B.js";
 function M(n, s, t, o, c) {