@m4l/base 1.5.0 → 1.5.1-beta-chore-764-remove-s3-assets.1

package/components/Icon/Icon.d.ts

@@ -2,6 +2,9 @@ import { IconProps } from './types';
 /**
  * Render the base Icon primitive with URL-mask and SVG-component support.
  */
-declare const Icon: (props: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Icon: {
+    (props: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    isM4LIconComponent: boolean;
+};
 export { Icon };
 //# sourceMappingURL=Icon.d.ts.map

package/components/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,SAAS,EAA0C,MAAM,SAAS,CAAC;AAgC5F;;GAEG;AACH,QAAA,MAAM,IAAI,GAAI,OAAO,SAAS,qDAoH7B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkB,SAAS,EAA0C,MAAM,SAAS,CAAC;AAgC5F;;GAEG;AACH,QAAA,MAAM,IAAI;YAAW,SAAS;;CAqH7B,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/components/Icon/Icon.js

@@ -1,101 +1,103 @@
 import { jsxs as P, Fragment as j, jsx as n } from "@emotion/react/jsx-runtime";
-import m from "clsx";
-import { isValidElement as u, cloneElement as A } from "react";
-import { useModuleSkeleton as F } from "@m4l/core";
-import { getPropDataTestId as r } from "../../utils/getNameDataTestId.js";
-import { ICON_CLASSES as o, normalizeIconSize as L, ICON_PREFIX as a } from "./constants.js";
-import { TooltipStyled as M, RootStyled as k, IconSkeletonStyled as O, IconStyled as _ } from "./slots/IconSlots.js";
+import u from "clsx";
+import { isValidElement as S, cloneElement as A } from "react";
+import { useModuleSkeleton as L } from "@m4l/core";
+import { getPropDataTestId as s } from "../../utils/getNameDataTestId.js";
+import { ICON_CLASSES as o, normalizeIconSize as M, ICON_PREFIX as a } from "./constants.js";
+import { TooltipStyled as F, RootStyled as k, IconSkeletonStyled as O, IconStyled as _ } from "./slots/IconSlots.js";
 function B(t) {
   return "src" in t && typeof t.src == "string" || "icon" in t && typeof t.icon == "string";
 }
 function V(t) {
-  return "src" in t && t.src !== void 0 && u(t.src) || "icon" in t && t.icon !== void 0 && u(t.icon);
+  return "src" in t && t.src !== void 0 && S(t.src) || "icon" in t && t.icon !== void 0 && S(t.icon);
 }
 function X(t) {
   if (B(t) || V(t))
     return "src" in t ? t.src : t.icon;
 }
-const W = (t) => {
+const $ = (t) => {
   const {
-    size: x = "medium",
-    rotationAngle: s,
-    tooltipContent: S,
-    color: C = "text.primary",
-    className: f,
+    size: C = "medium",
+    rotationAngle: l,
+    tooltipContent: f,
+    color: x = "text.primary",
+    className: I,
     placement: N = "bottom",
     instaceDataTestId: w,
     instanceDataTestId: R,
-    disabled: l,
+    disabled: d,
     selected: T,
     enabledSelected: D,
-    onClick: I,
-    ariaLabel: g
-  } = t, y = F(), i = R ?? w, e = X(t), d = L(x), E = e !== void 0 ? typeof e == "string" : void 0, h = g ? {
+    onClick: g,
+    ariaLabel: i
+  } = t, y = L(), c = R ?? w, e = X(t), m = M(C), E = e !== void 0 ? typeof e == "string" : void 0, h = i ? {
     role: "img",
-    "aria-label": g
+    "aria-label": i
   } : {
     "aria-hidden": !0
-  }, c = {
-    size: d,
-    color: C,
+  }, r = {
+    size: m,
+    color: x,
     src: e,
-    disabled: l,
-    rotationAngle: s,
+    disabled: d,
+    rotationAngle: l,
     selected: T,
     enabledSelected: D,
     isSkeleton: y,
     isMaskStrategy: E
-  }, v = typeof I == "function" && !l, z = {
-    className: m(f, o.root),
-    ownerState: { ...c },
-    onClick: v ? I : void 0,
+  }, v = typeof g == "function" && !d, z = {
+    className: u(I, o.root),
+    ownerState: { ...r },
+    onClick: v ? g : void 0,
     tabIndex: v ? 0 : -1,
-    "aria-disabled": l,
-    ...r(a, "root", i)
+    "aria-disabled": d,
+    ...s(a, "root", c)
   }, b = () => e && typeof e == "string" ? /* @__PURE__ */ n(
     _,
     {
-      className: m(o.icon, o.root),
-      ownerState: { ...c },
-      ...r(a, "icon", i),
+      className: u(o.icon, o.root),
+      ownerState: { ...r },
+      ...s(a, "icon", c),
       ...h
     }
-  ) : e && u(e) ? A(e, {
+  ) : e && S(e) ? A(e, {
     sx: {
-      fontSize: d === "small" ? "small" : "medium",
-      ...s && {
-        transform: `rotate(${s}deg)`
+      fontSize: m === "small" ? "small" : "medium",
+      ...l && {
+        transform: `rotate(${l}deg)`
       },
       width: "100%",
       height: "100%"
     },
-    ...h
+    ...h,
+    ...i ? { titleAccess: i } : {}
   }) : null;
   return /* @__PURE__ */ P(j, { children: [
-    S ? /* @__PURE__ */ n(
-      M,
+    f ? /* @__PURE__ */ n(
+      F,
       {
-        className: f || o.tooltip,
-        title: S,
-        ownerState: { ...c },
+        className: I || o.tooltip,
+        title: f,
+        ownerState: { ...r },
         placement: N,
-        size: d,
-        ...r(a, "tooltip", i),
+        size: m,
+        ...s(a, "tooltip", c),
         children: /* @__PURE__ */ n(k, { ...z, children: b() })
       }
     ) : /* @__PURE__ */ n(k, { ...z, children: b() }),
     y && /* @__PURE__ */ n(
       O,
       {
-        className: m(o.iconSkeleton, o.root),
+        className: u(o.iconSkeleton, o.root),
         variant: "rectangular",
-        ownerState: { ...c },
+        ownerState: { ...r },
         "aria-hidden": "true",
-        ...r(a, "iconSkeleton", i)
+        ...s(a, "iconSkeleton", c)
       }
     )
   ] });
 };
+$.isM4LIconComponent = !0;
 export {
-  W as Icon
+  $ as Icon
 };

package/components/Icon/Icon.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/components/Icon/Icon.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAkB,UAAU,EAAE,MAAM,SAAS,CAAC;AAiD1D,eAAO,MAAM,UAAU,EAAE,UAgExB,CAAC"}
+{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/components/Icon/Icon.styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAkB,UAAU,EAAE,MAAM,SAAS,CAAC;AAkD1D,eAAO,MAAM,UAAU,EAAE,UAgExB,CAAC"}

package/components/Icon/Icon.styles.js

@@ -1,41 +1,42 @@
 import { getSizeStyles as o } from "../../utils/getSizeStyles/getSizeStyles.js";
 import { ICON_CLASSES as l } from "./constants.js";
-const a = {
+import { ICON_SVG_SHAPE_SELECTOR as d } from "../../utils/getIconPaintStyles/getIconPaintStyles.js";
+const c = {
   small: 16,
   medium: 24
 };
-function c(i, e) {
-  const t = i.vars?.palette ?? i.palette;
-  return e.split(".").reduce((s, r) => {
-    if (s && typeof s == "object" && r in s)
-      return s[r];
-  }, t) ?? t.text.primary;
+function p(t, e) {
+  const i = t.vars?.palette ?? t.palette;
+  return e.split(".").reduce((s, n) => {
+    if (s && typeof s == "object" && n in s)
+      return s[n];
+  }, i) ?? (e.includes(".") ? i.text.primary : e);
 }
-function n(i, e = "medium") {
-  if (i.vars?.size && i.generalSettings)
-    return o(i, e, "base", (s) => ({
-      width: s,
-      height: s
+function a(t, e = "medium") {
+  if (t.vars?.size && t.generalSettings)
+    return o(t, e, "base", (r) => ({
+      width: r,
+      height: r
     }));
-  const t = a[e];
+  const i = c[e];
   return {
-    width: t,
-    height: t
+    width: i,
+    height: i
   };
 }
-const u = {
+const m = {
   /**
    * Root styles for the Icon component, handling both mask and non-mask strategies, as well as disabled and selected states.
    */
-  root: ({ theme: i, ownerState: e }) => {
-    const t = e?.disabled ? (i.vars?.palette ?? i.palette).text.disabled : e?.selected && e?.enabledSelected ? (i.vars?.palette ?? i.palette).primary.enabled : c(i, String(e?.color));
+  root: ({ theme: t, ownerState: e }) => {
+    const i = e?.disabled ? (t.vars?.palette ?? t.palette).text.disabled : e?.selected && e?.enabledSelected ? (t.vars?.palette ?? t.palette).primary.enabled : p(t, String(e?.color));
     return {
       display: e?.isSkeleton ? "none" : "flex",
       justifyContent: "center",
       alignItems: "center",
       width: "fit-content",
       transition: "transform 0.5s ease-in-out",
-      ...n(i, e?.size ?? "medium"),
+      ...a(t, e?.size ?? "medium"),
       ...e?.isMaskStrategy === !1 && {
         "& .MuiSvgIcon-root": {
           width: "inherit",
@@ -43,8 +44,8 @@ const u = {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use": {
-            fill: t
+          [d]: {
+            fill: i
           }
         }
       },
@@ -60,7 +61,7 @@ const u = {
           ...e?.rotationAngle && {
             transform: `rotate(${e.rotationAngle}deg)`
           },
-          backgroundColor: t
+          backgroundColor: i
         }
       }
     };
@@ -75,14 +76,14 @@ const u = {
   /**
    * Skeleton styles for the icon element when in loading state.
    */
-  iconSkeleton: ({ theme: i, ownerState: e }) => ({
+  iconSkeleton: ({ theme: t, ownerState: e }) => ({
     "&": {
-      borderRadius: i.size?.borderRadius?.r1 ?? i.shape.borderRadius,
-      ...n(i, e?.size ?? "medium")
+      borderRadius: t.size?.borderRadius?.r1 ?? t.shape.borderRadius,
+      ...a(t, e?.size ?? "medium")
     }
   }),
   tooltip: {}
 };
 export {
-  u as iconStyles
+  m as iconStyles
 };

package/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
 export * from './extended';
 export * from './@types/types.d';
+export * from './utils/getIconPaintStyles';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/base/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/base/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AAGjC,cAAc,4BAA4B,CAAC"}

package/index.js

@@ -1,32 +1,35 @@
 import { Icon as O } from "./components/Icon/Icon.js";
-import { ICON_CLASSES as T, ICON_KEY_COMPONENT as S, ICON_PREFIX as e } from "./components/Icon/constants.js";
+import { ICON_CLASSES as S, ICON_KEY_COMPONENT as e, ICON_PREFIX as T } from "./components/Icon/constants.js";
 import { ButtonBase as E } from "./extended/mui/ButtonBase/ButtonBase.js";
 import { buttonBaseStyles as p } from "./extended/mui/ButtonBase/ButtonBase.styles.js";
-import { BUTTON_BASE_KEY_COMPONENT as Y } from "./extended/mui/ButtonBase/constants.js";
+import { BUTTON_BASE_KEY_COMPONENT as C } from "./extended/mui/ButtonBase/constants.js";
 import { ButtonBaseSlots as f } from "./extended/mui/ButtonBase/slots/ButtonBaseEnum.js";
 import { RootStyled as x, SkeletonStyled as A } from "./extended/mui/ButtonBase/slots/ButtonBaseSlots.js";
 import { Tooltip as L } from "./extended/mui/Tooltip/Tooltip.js";
-import { DEFAULT_TOOLTIP_OFFSET as l, TOOLTIP_CLASSES as F, TOOLTIP_KEY_COMPONENT as R } from "./extended/mui/Tooltip/constants.js";
-import { Typography as s } from "./extended/mui/Typography/Typography.js";
-import { TYPOGRAPHY_CLASSES as M, TYPOGRAPHY_CLASS_NAME_SPECIFY as a, TYPOGRAPHY_FONTS as G, TYPOGRAPHY_KEY_COMPONENT as H } from "./extended/mui/Typography/constants.js";
+import { DEFAULT_TOOLTIP_OFFSET as n, TOOLTIP_CLASSES as B, TOOLTIP_KEY_COMPONENT as R } from "./extended/mui/Tooltip/constants.js";
+import { Typography as y } from "./extended/mui/Typography/Typography.js";
+import { TYPOGRAPHY_CLASSES as a, TYPOGRAPHY_CLASS_NAME_SPECIFY as G, TYPOGRAPHY_FONTS as H, TYPOGRAPHY_KEY_COMPONENT as M } from "./extended/mui/Typography/constants.js";
+import { ICON_SVG_SHAPE_SELECTOR as u, getIconPaintStyles as c } from "./utils/getIconPaintStyles/getIconPaintStyles.js";
 export {
-  Y as BUTTON_BASE_KEY_COMPONENT,
+  C as BUTTON_BASE_KEY_COMPONENT,
   E as ButtonBase,
   f as ButtonBaseSlots,
-  l as DEFAULT_TOOLTIP_OFFSET,
-  T as ICON_CLASSES,
-  S as ICON_KEY_COMPONENT,
-  e as ICON_PREFIX,
+  n as DEFAULT_TOOLTIP_OFFSET,
+  S as ICON_CLASSES,
+  e as ICON_KEY_COMPONENT,
+  T as ICON_PREFIX,
+  u as ICON_SVG_SHAPE_SELECTOR,
   O as Icon,
   x as RootStyled,
   A as SkeletonStyled,
-  F as TOOLTIP_CLASSES,
+  B as TOOLTIP_CLASSES,
   R as TOOLTIP_KEY_COMPONENT,
-  M as TYPOGRAPHY_CLASSES,
-  a as TYPOGRAPHY_CLASS_NAME_SPECIFY,
-  G as TYPOGRAPHY_FONTS,
-  H as TYPOGRAPHY_KEY_COMPONENT,
+  a as TYPOGRAPHY_CLASSES,
+  G as TYPOGRAPHY_CLASS_NAME_SPECIFY,
+  H as TYPOGRAPHY_FONTS,
+  M as TYPOGRAPHY_KEY_COMPONENT,
   L as Tooltip,
-  s as Typography,
-  p as buttonBaseStyles
+  y as Typography,
+  p as buttonBaseStyles,
+  c as getIconPaintStyles
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/base",
-  "version": "1.5.0",
+  "version": "1.5.1-beta-chore-764-remove-s3-assets.1",
   "publishConfig": {
     "access": "public"
   },
@@ -30,10 +30,11 @@
   },
   "dependencies": {
     "@m4l/core": "^2.0.33",
+    "@m4l/icons": "^1.0.0",
     "@m4l/styles": "^7.1.48",
     "@emotion/react": "11.14.0",
     "clsx": "2.1.1",
-    "react": "19.2.4",
+    "react": "19.1.0",
     "@mui/material": "5.16.7"
   }
 }

package/utils/getIconPaintStyles/getIconPaintStyles.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Shape elements MUI's `createSvgIcon` renders inside `.MuiSvgIcon-root`.
+ *
+ * `Icon` switches DOM strategy based on its source: a URL string renders the
+ * `.M4LIcon-icon` mask element painted with `background-color`, while a React
+ * element (the `@m4l/icons` case) renders an `.MuiSvgIcon-root` painted with
+ * `fill` on these shapes. A recoloring rule that targets only the mask class
+ * silently misses every SVG icon, so both branches must always be declared.
+ */
+export declare const ICON_SVG_SHAPE_SELECTOR = "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use";
+export interface IconPaintOptions {
+    /**
+     * Selector inserted between the rule root and the icon nodes, for call sites
+     * that must reach a nested icon without repainting sibling content.
+     * Example: `'.M4LIcon-root'` yields `'& .M4LIcon-root .M4LIcon-icon'`.
+     */
+    scope?: string;
+    /**
+     * Whether the paint declarations carry `!important`. Defaults to `true`
+     * because `Icon` and `IconButton` both paint icons from rules with very high
+     * specificity, so a plain declaration usually loses.
+     */
+    important?: boolean;
+}
+/**
+ * Paint an M4L icon across both `Icon` rendering strategies, mask and SVG.
+ *
+ * `stroke: 'none'` is always emitted: some system icons ship stroke geometry
+ * that renders as an outline artifact once the fill is recolored.
+ */
+export declare function getIconPaintStyles(color: string, options?: IconPaintOptions): {
+    [x: string]: {
+        backgroundColor: string;
+        "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use"?: undefined;
+    } | {
+        "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use": {
+            fill: string;
+            stroke: string;
+        };
+        backgroundColor?: undefined;
+    };
+};
+//# sourceMappingURL=getIconPaintStyles.d.ts.map

package/utils/getIconPaintStyles/getIconPaintStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getIconPaintStyles.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/utils/getIconPaintStyles/getIconPaintStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,2GACsE,CAAC;AAE3G,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB;;;;;;;;;;;EAgB3E"}

package/utils/getIconPaintStyles/getIconPaintStyles.js

@@ -0,0 +1,19 @@
+const r = "& svg, & path, & rect, & circle, & ellipse, & polygon, & polyline, & line, & g, & text, & tspan, & use";
+function l(t, c) {
+  const { scope: n, important: i = !0 } = c ?? {}, o = n ? `& ${n} ` : "& ", e = i ? `${t} !important` : t;
+  return {
+    [`${o}.M4LIcon-icon`]: {
+      backgroundColor: e
+    },
+    [`${o}.MuiSvgIcon-root`]: {
+      [r]: {
+        fill: e,
+        stroke: "none"
+      }
+    }
+  };
+}
+export {
+  r as ICON_SVG_SHAPE_SELECTOR,
+  l as getIconPaintStyles
+};

package/utils/getIconPaintStyles/index.d.ts

@@ -0,0 +1,2 @@
+export * from './getIconPaintStyles';
+//# sourceMappingURL=index.d.ts.map

package/utils/getIconPaintStyles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/base/src/utils/getIconPaintStyles/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}