mada-design-system 0.5.12 → 0.6.0

package/index.es282.js

@@ -1,293 +1,62 @@
-import { padding as e, margin as t } from "./index.es328.js";
-import { borderTransform as r, borderRadius as s } from "./index.es324.js";
-import { gap as i, rowGap as n, columnGap as m } from "./index.es331.js";
-import { paletteTransform as l } from "./index.es332.js";
-import { sizingTransform as o, maxWidth as y } from "./index.es333.js";
-const d = {
-  // borders
-  border: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderTop: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderRight: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderBottom: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderLeft: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderColor: {
-    themeKey: "palette"
-  },
-  borderTopColor: {
-    themeKey: "palette"
-  },
-  borderRightColor: {
-    themeKey: "palette"
-  },
-  borderBottomColor: {
-    themeKey: "palette"
-  },
-  borderLeftColor: {
-    themeKey: "palette"
-  },
-  outline: {
-    themeKey: "borders",
-    transform: r
-  },
-  outlineColor: {
-    themeKey: "palette"
-  },
-  borderRadius: {
-    themeKey: "shape.borderRadius",
-    style: s
-  },
-  // palette
-  color: {
-    themeKey: "palette",
-    transform: l
-  },
-  bgcolor: {
-    themeKey: "palette",
-    cssProperty: "backgroundColor",
-    transform: l
-  },
-  backgroundColor: {
-    themeKey: "palette",
-    transform: l
-  },
-  // spacing
-  p: {
-    style: e
-  },
-  pt: {
-    style: e
-  },
-  pr: {
-    style: e
-  },
-  pb: {
-    style: e
-  },
-  pl: {
-    style: e
-  },
-  px: {
-    style: e
-  },
-  py: {
-    style: e
-  },
-  padding: {
-    style: e
-  },
-  paddingTop: {
-    style: e
-  },
-  paddingRight: {
-    style: e
-  },
-  paddingBottom: {
-    style: e
-  },
-  paddingLeft: {
-    style: e
-  },
-  paddingX: {
-    style: e
-  },
-  paddingY: {
-    style: e
-  },
-  paddingInline: {
-    style: e
-  },
-  paddingInlineStart: {
-    style: e
-  },
-  paddingInlineEnd: {
-    style: e
-  },
-  paddingBlock: {
-    style: e
-  },
-  paddingBlockStart: {
-    style: e
-  },
-  paddingBlockEnd: {
-    style: e
-  },
-  m: {
-    style: t
-  },
-  mt: {
-    style: t
-  },
-  mr: {
-    style: t
-  },
-  mb: {
-    style: t
-  },
-  ml: {
-    style: t
-  },
-  mx: {
-    style: t
-  },
-  my: {
-    style: t
-  },
-  margin: {
-    style: t
-  },
-  marginTop: {
-    style: t
-  },
-  marginRight: {
-    style: t
-  },
-  marginBottom: {
-    style: t
-  },
-  marginLeft: {
-    style: t
-  },
-  marginX: {
-    style: t
-  },
-  marginY: {
-    style: t
-  },
-  marginInline: {
-    style: t
-  },
-  marginInlineStart: {
-    style: t
-  },
-  marginInlineEnd: {
-    style: t
-  },
-  marginBlock: {
-    style: t
-  },
-  marginBlockStart: {
-    style: t
-  },
-  marginBlockEnd: {
-    style: t
-  },
-  // display
-  displayPrint: {
-    cssProperty: !1,
-    transform: (a) => ({
-      "@media print": {
-        display: a
+import l from "./index.es199.js";
+import g from "./index.es200.js";
+import v from "./index.es283.js";
+import b from "./index.es284.js";
+import O from "./index.es285.js";
+import C from "./index.es286.js";
+import E from "./index.es287.js";
+import I from "./index.es288.js";
+import _ from "./index.es289.js";
+import k from "./index.es290.js";
+import p from "./index.es291.js";
+import N from "./index.es292.js";
+import S from "./index.es293.js";
+import T from "./index.es223.js";
+const M = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+function B(o = {}, ...f) {
+  const {
+    mixins: u = {},
+    palette: d = {},
+    transitions: h = {},
+    typography: y = {}
+  } = o, n = g(o, M);
+  if (o.vars)
+    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `vars` is a private field used for CSS variables support.\nPlease use another name." : _(18));
+  const c = b(d), m = k(o);
+  let e = p(m, {
+    mixins: v(m.breakpoints, u),
+    palette: c,
+    // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
+    shadows: C.slice(),
+    typography: O(c, y),
+    transitions: E(h),
+    zIndex: l({}, I)
+  });
+  if (e = p(e, n), e = f.reduce((i, s) => p(i, s), e), process.env.NODE_ENV !== "production") {
+    const i = ["active", "checked", "completed", "disabled", "error", "expanded", "focused", "focusVisible", "required", "selected"], s = (t, a) => {
+      let r;
+      for (r in t) {
+        const x = t[r];
+        if (i.indexOf(r) !== -1 && Object.keys(x).length > 0) {
+          if (process.env.NODE_ENV !== "production") {
+            const $ = T("", r);
+          }
+          t[r] = {};
+        }
       }
-    })
-  },
-  display: {},
-  overflow: {},
-  textOverflow: {},
-  visibility: {},
-  whiteSpace: {},
-  // flexbox
-  flexBasis: {},
-  flexDirection: {},
-  flexWrap: {},
-  justifyContent: {},
-  alignItems: {},
-  alignContent: {},
-  order: {},
-  flex: {},
-  flexGrow: {},
-  flexShrink: {},
-  alignSelf: {},
-  justifyItems: {},
-  justifySelf: {},
-  // grid
-  gap: {
-    style: i
-  },
-  rowGap: {
-    style: n
-  },
-  columnGap: {
-    style: m
-  },
-  gridColumn: {},
-  gridRow: {},
-  gridAutoFlow: {},
-  gridAutoColumns: {},
-  gridAutoRows: {},
-  gridTemplateColumns: {},
-  gridTemplateRows: {},
-  gridTemplateAreas: {},
-  gridArea: {},
-  // positions
-  position: {},
-  zIndex: {
-    themeKey: "zIndex"
-  },
-  top: {},
-  right: {},
-  bottom: {},
-  left: {},
-  // shadows
-  boxShadow: {
-    themeKey: "shadows"
-  },
-  // sizing
-  width: {
-    transform: o
-  },
-  maxWidth: {
-    style: y
-  },
-  minWidth: {
-    transform: o
-  },
-  height: {
-    transform: o
-  },
-  maxHeight: {
-    transform: o
-  },
-  minHeight: {
-    transform: o
-  },
-  boxSizing: {},
-  // typography
-  fontFamily: {
-    themeKey: "typography"
-  },
-  fontSize: {
-    themeKey: "typography"
-  },
-  fontStyle: {
-    themeKey: "typography"
-  },
-  fontWeight: {
-    themeKey: "typography"
-  },
-  letterSpacing: {},
-  textTransform: {},
-  lineHeight: {},
-  textAlign: {},
-  typography: {
-    cssProperty: !1,
-    themeKey: "typography"
+    };
+    Object.keys(e.components).forEach((t) => {
+      const a = e.components[t].styleOverrides;
+      a && t.indexOf("Mui") === 0 && s(a, t);
+    });
   }
-}, K = d;
+  return e.unstable_sxConfig = l({}, N, n == null ? void 0 : n.unstable_sxConfig), e.unstable_sx = function(s) {
+    return S({
+      sx: s,
+      theme: this
+    });
+  }, e;
+}
 export {
-  K as default
+  B as default
 };

package/index.es283.js

@@ -1,93 +1,19 @@
-import k from "./index.es330.js";
-import { getPath as j, getStyleValue as h } from "./index.es326.js";
-import { createEmptyBreakpointObject as x, handleBreakpoints as p, removeUnusedBreakpoints as O } from "./index.es329.js";
-import P from "./index.es282.js";
-import B from "./index.es335.js";
-function _(...s) {
-  const a = s.reduce((t, i) => t.concat(Object.keys(i)), []), r = new Set(a);
-  return s.every((t) => r.size === Object.keys(t).length);
-}
-function $(s, a) {
-  return typeof s == "function" ? s(a) : s;
-}
-function C() {
-  function s(r, t, i, o) {
-    const m = {
-      [r]: t,
-      theme: i
-    }, y = o[r];
-    if (!y)
-      return {
-        [r]: t
-      };
-    const {
-      cssProperty: c = r,
-      themeKey: f,
-      transform: b,
-      style: g
-    } = y;
-    if (t == null)
-      return null;
-    if (f === "typography" && t === "inherit")
-      return {
-        [r]: t
-      };
-    const n = j(i, f) || {};
-    return g ? g(m) : p(m, t, (e) => {
-      let l = h(n, b, e);
-      return e === l && typeof e == "string" && (l = h(n, b, `${r}${e === "default" ? "" : B(e)}`, e)), c === !1 ? l : {
-        [c]: l
-      };
-    });
-  }
-  function a(r) {
-    var t;
-    const {
-      sx: i,
-      theme: o = {}
-    } = r || {};
-    if (!i)
-      return null;
-    const m = (t = o.unstable_sxConfig) != null ? t : P;
-    function y(c) {
-      let f = c;
-      if (typeof c == "function")
-        f = c(o);
-      else if (typeof c != "object")
-        return c;
-      if (!f)
-        return null;
-      const b = x(o.breakpoints), g = Object.keys(b);
-      let n = b;
-      return Object.keys(f).forEach((u) => {
-        const e = $(f[u], o);
-        if (e != null)
-          if (typeof e == "object")
-            if (m[u])
-              n = k(n, s(u, e, o, m));
-            else {
-              const l = p({
-                theme: o
-              }, e, (d) => ({
-                [u]: d
-              }));
-              _(l, e) ? n[u] = a({
-                sx: e,
-                theme: o
-              }) : n = k(n, l);
-            }
-          else
-            n = k(n, s(u, e, o, m));
-      }), O(g, n);
+import t from "./index.es199.js";
+function a(e, i) {
+  return t({
+    toolbar: {
+      minHeight: 56,
+      [e.up("xs")]: {
+        "@media (orientation: landscape)": {
+          minHeight: 48
+        }
+      },
+      [e.up("sm")]: {
+        minHeight: 64
+      }
     }
-    return Array.isArray(i) ? i.map(y) : y(i);
-  }
-  return a;
+  }, i);
 }
-const S = C();
-S.filterProps = ["sx"];
-const H = S;
 export {
-  H as default,
-  C as unstable_createStyleFunctionSx
+  a as default
 };

package/index.es284.js

@@ -1,5 +1,246 @@
-import e from "./index.es272.js";
-const t = e(), m = t;
+import y from "./index.es199.js";
+import A from "./index.es200.js";
+import l from "./index.es348.js";
+import I from "./index.es349.js";
+import n from "./index.es350.js";
+import s from "./index.es351.js";
+import f from "./index.es352.js";
+import c from "./index.es353.js";
+import d from "./index.es354.js";
+import m from "./index.es355.js";
+import P from "./index.es291.js";
+import { getContrastRatio as v, lighten as S, darken as U } from "./index.es234.js";
+import w from "./index.es289.js";
+const V = ["mode", "contrastThreshold", "tonalOffset"], T = {
+  // The colors used to style the text.
+  text: {
+    // The most important text.
+    primary: "rgba(0, 0, 0, 0.87)",
+    // Secondary text.
+    secondary: "rgba(0, 0, 0, 0.6)",
+    // Disabled text have even lower visual prominence.
+    disabled: "rgba(0, 0, 0, 0.38)"
+  },
+  // The color used to divide different elements.
+  divider: "rgba(0, 0, 0, 0.12)",
+  // The background colors used to style the surfaces.
+  // Consistency between these values is important.
+  background: {
+    paper: l.white,
+    default: l.white
+  },
+  // The colors used to style the action elements.
+  action: {
+    // The color of an active action like an icon button.
+    active: "rgba(0, 0, 0, 0.54)",
+    // The color of an hovered action.
+    hover: "rgba(0, 0, 0, 0.04)",
+    hoverOpacity: 0.04,
+    // The color of a selected action.
+    selected: "rgba(0, 0, 0, 0.08)",
+    selectedOpacity: 0.08,
+    // The color of a disabled action.
+    disabled: "rgba(0, 0, 0, 0.26)",
+    // The background color of a disabled action.
+    disabledBackground: "rgba(0, 0, 0, 0.12)",
+    disabledOpacity: 0.38,
+    focus: "rgba(0, 0, 0, 0.12)",
+    focusOpacity: 0.12,
+    activatedOpacity: 0.12
+  }
+}, b = {
+  text: {
+    primary: l.white,
+    secondary: "rgba(255, 255, 255, 0.7)",
+    disabled: "rgba(255, 255, 255, 0.5)",
+    icon: "rgba(255, 255, 255, 0.5)"
+  },
+  divider: "rgba(255, 255, 255, 0.12)",
+  background: {
+    paper: "#121212",
+    default: "#121212"
+  },
+  action: {
+    active: l.white,
+    hover: "rgba(255, 255, 255, 0.08)",
+    hoverOpacity: 0.08,
+    selected: "rgba(255, 255, 255, 0.16)",
+    selectedOpacity: 0.16,
+    disabled: "rgba(255, 255, 255, 0.3)",
+    disabledBackground: "rgba(255, 255, 255, 0.12)",
+    disabledOpacity: 0.38,
+    focus: "rgba(255, 255, 255, 0.12)",
+    focusOpacity: 0.12,
+    activatedOpacity: 0.24
+  }
+};
+function x(r, e, g, a) {
+  const p = a.light || a, h = a.dark || a * 1.5;
+  r[e] || (r.hasOwnProperty(g) ? r[e] = r[g] : e === "light" ? r.light = S(r.main, p) : e === "dark" && (r.dark = U(r.main, h)));
+}
+function W(r = "light") {
+  return r === "dark" ? {
+    main: c[200],
+    light: c[50],
+    dark: c[400]
+  } : {
+    main: c[700],
+    light: c[400],
+    dark: c[800]
+  };
+}
+function j(r = "light") {
+  return r === "dark" ? {
+    main: n[200],
+    light: n[50],
+    dark: n[400]
+  } : {
+    main: n[500],
+    light: n[300],
+    dark: n[700]
+  };
+}
+function B(r = "light") {
+  return r === "dark" ? {
+    main: s[500],
+    light: s[300],
+    dark: s[700]
+  } : {
+    main: s[700],
+    light: s[400],
+    dark: s[800]
+  };
+}
+function L(r = "light") {
+  return r === "dark" ? {
+    main: d[400],
+    light: d[300],
+    dark: d[700]
+  } : {
+    main: d[700],
+    light: d[500],
+    dark: d[900]
+  };
+}
+function R(r = "light") {
+  return r === "dark" ? {
+    main: m[400],
+    light: m[300],
+    dark: m[700]
+  } : {
+    main: m[800],
+    light: m[500],
+    dark: m[900]
+  };
+}
+function G(r = "light") {
+  return r === "dark" ? {
+    main: f[400],
+    light: f[300],
+    dark: f[700]
+  } : {
+    main: "#ed6c02",
+    // closest to orange[800] that pass 3:1.
+    light: f[500],
+    dark: f[900]
+  };
+}
+function ar(r) {
+  const {
+    mode: e = "light",
+    contrastThreshold: g = 3,
+    tonalOffset: a = 0.2
+  } = r, p = A(r, V), h = r.primary || W(e), D = r.secondary || j(e), E = r.error || B(e), $ = r.info || L(e), N = r.success || R(e), C = r.warning || G(e);
+  function k(t) {
+    const o = v(t, b.text.primary) >= g ? b.text.primary : T.text.primary;
+    return process.env.NODE_ENV !== "production" && v(t, o) < 3, o;
+  }
+  const i = ({
+    color: t,
+    name: o,
+    mainShade: u = 500,
+    lightShade: _ = 300,
+    darkShade: M = 700
+  }) => {
+    if (t = y({}, t), !t.main && t[u] && (t.main = t[u]), !t.hasOwnProperty("main"))
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${o ? ` (${o})` : ""} provided to augmentColor(color) is invalid.
+The color object needs to have a \`main\` property or a \`${u}\` property.` : w(11, o ? ` (${o})` : "", u));
+    if (typeof t.main != "string")
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${o ? ` (${o})` : ""} provided to augmentColor(color) is invalid.
+\`color.main\` should be a string, but \`${JSON.stringify(t.main)}\` was provided instead.
+
+Did you intend to use one of the following approaches?
+
+import { green } from "@mui/material/colors";
+
+const theme1 = createTheme({ palette: {
+  primary: green,
+} });
+
+const theme2 = createTheme({ palette: {
+  primary: { main: green[500] },
+} });` : w(12, o ? ` (${o})` : "", JSON.stringify(t.main)));
+    return x(t, "light", _, a), x(t, "dark", M, a), t.contrastText || (t.contrastText = k(t.main)), t;
+  }, O = {
+    dark: b,
+    light: T
+  };
+  return process.env.NODE_ENV !== "production" && O[e], P(y({
+    // A collection of common colors.
+    common: y({}, l),
+    // prevent mutable object.
+    // The palette mode, can be light or dark.
+    mode: e,
+    // The colors used to represent primary interface elements for a user.
+    primary: i({
+      color: h,
+      name: "primary"
+    }),
+    // The colors used to represent secondary interface elements for a user.
+    secondary: i({
+      color: D,
+      name: "secondary",
+      mainShade: "A400",
+      lightShade: "A200",
+      darkShade: "A700"
+    }),
+    // The colors used to represent interface elements that the user should be made aware of.
+    error: i({
+      color: E,
+      name: "error"
+    }),
+    // The colors used to represent potentially dangerous actions or important messages.
+    warning: i({
+      color: C,
+      name: "warning"
+    }),
+    // The colors used to present information to the user that is neutral and not necessarily important.
+    info: i({
+      color: $,
+      name: "info"
+    }),
+    // The colors used to indicate the successful completion of an action that user triggered.
+    success: i({
+      color: N,
+      name: "success"
+    }),
+    // The grey colors.
+    grey: I,
+    // Used by `getContrastText()` to maximize the contrast between
+    // the background and the text.
+    contrastThreshold: g,
+    // Takes a background color and returns the text color that maximizes the contrast.
+    getContrastText: k,
+    // Generate a rich color object.
+    augmentColor: i,
+    // Used by the functions below to shift a color's luminance by approximately
+    // two indexes within its tonal palette.
+    // E.g., shift from Red 500 to Red 300 or Red 700.
+    tonalOffset: a
+  }, O[e]), p);
+}
 export {
-  m as default
+  b as dark,
+  ar as default,
+  T as light
 };