mada-design-system 0.2.6 → 0.2.8

package/index.es266.js

@@ -1,76 +1,246 @@
-import c from "./index.es186.js";
-import T from "./index.es187.js";
-import M from "./index.es272.js";
-const _ = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
-function v(i) {
-  return Math.round(i * 1e5) / 1e5;
+import y from "./index.es201.js";
+import A from "./index.es202.js";
+import l from "./index.es301.js";
+import I from "./index.es302.js";
+import n from "./index.es303.js";
+import s from "./index.es304.js";
+import f from "./index.es305.js";
+import c from "./index.es306.js";
+import d from "./index.es307.js";
+import m from "./index.es308.js";
+import P from "./index.es273.js";
+import { getContrastRatio as v, lighten as S, darken as U } from "./index.es292.js";
+import w from "./index.es271.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]
+  };
 }
-const p = {
-  textTransform: "uppercase"
-}, d = '"Roboto", "Helvetica", "Arial", sans-serif';
-function A(i, n) {
-  const h = typeof n == "function" ? n(i) : n, {
-    fontFamily: r = d,
-    // The default font size of the Material Specification.
-    fontSize: f = 14,
-    // px
-    fontWeightLight: a = 300,
-    fontWeightRegular: t = 400,
-    fontWeightMedium: o = 500,
-    fontWeightBold: g = 700,
-    // Tell MUI what's the font-size on the html element.
-    // 16px is the default font-size used by browsers.
-    htmlFontSize: l = 16,
-    // Apply the CSS properties to all the variants.
-    allVariants: b,
-    pxToRem: S
-  } = h, W = T(h, _);
-  process.env.NODE_ENV;
-  const x = f / 14, m = S || ((s) => `${s / l * x}rem`), e = (s, u, y, z, R) => c({
-    fontFamily: r,
-    fontWeight: s,
-    fontSize: m(u),
-    // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight: y
-  }, r === d ? {
-    letterSpacing: `${v(z / u)}em`
-  } : {}, R, b), F = {
-    h1: e(a, 96, 1.167, -1.5),
-    h2: e(a, 60, 1.2, -0.5),
-    h3: e(t, 48, 1.167, 0),
-    h4: e(t, 34, 1.235, 0.25),
-    h5: e(t, 24, 1.334, 0),
-    h6: e(o, 20, 1.6, 0.15),
-    subtitle1: e(t, 16, 1.75, 0.15),
-    subtitle2: e(o, 14, 1.57, 0.1),
-    body1: e(t, 16, 1.5, 0.15),
-    body2: e(t, 14, 1.43, 0.15),
-    button: e(o, 14, 1.75, 0.4, p),
-    caption: e(t, 12, 1.66, 0.4),
-    overline: e(t, 12, 2.66, 1, p),
-    // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
-    inherit: {
-      fontFamily: "inherit",
-      fontWeight: "inherit",
-      fontSize: "inherit",
-      lineHeight: "inherit",
-      letterSpacing: "inherit"
-    }
+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 M(c({
-    htmlFontSize: l,
-    pxToRem: m,
-    fontFamily: r,
-    fontSize: f,
-    fontWeightLight: a,
-    fontWeightRegular: t,
-    fontWeightMedium: o,
-    fontWeightBold: g
-  }, F), W, {
-    clone: !1
-    // No need to clone deep
-  });
+  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 {
-  A as default
+  b as dark,
+  ar as default,
+  T as light
 };

package/index.es267.js

@@ -1,7 +1,76 @@
-function a(...o) {
-  return [`${o[0]}px ${o[1]}px ${o[2]}px ${o[3]}px rgba(0,0,0,${0.2})`, `${o[4]}px ${o[5]}px ${o[6]}px ${o[7]}px rgba(0,0,0,${0.14})`, `${o[8]}px ${o[9]}px ${o[10]}px ${o[11]}px rgba(0,0,0,${0.12})`].join(",");
+import c from "./index.es201.js";
+import T from "./index.es202.js";
+import M from "./index.es273.js";
+const _ = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+function v(i) {
+  return Math.round(i * 1e5) / 1e5;
+}
+const p = {
+  textTransform: "uppercase"
+}, d = '"Roboto", "Helvetica", "Arial", sans-serif';
+function A(i, n) {
+  const h = typeof n == "function" ? n(i) : n, {
+    fontFamily: r = d,
+    // The default font size of the Material Specification.
+    fontSize: f = 14,
+    // px
+    fontWeightLight: a = 300,
+    fontWeightRegular: t = 400,
+    fontWeightMedium: o = 500,
+    fontWeightBold: g = 700,
+    // Tell MUI what's the font-size on the html element.
+    // 16px is the default font-size used by browsers.
+    htmlFontSize: l = 16,
+    // Apply the CSS properties to all the variants.
+    allVariants: b,
+    pxToRem: S
+  } = h, W = T(h, _);
+  process.env.NODE_ENV;
+  const x = f / 14, m = S || ((s) => `${s / l * x}rem`), e = (s, u, y, z, R) => c({
+    fontFamily: r,
+    fontWeight: s,
+    fontSize: m(u),
+    // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
+    lineHeight: y
+  }, r === d ? {
+    letterSpacing: `${v(z / u)}em`
+  } : {}, R, b), F = {
+    h1: e(a, 96, 1.167, -1.5),
+    h2: e(a, 60, 1.2, -0.5),
+    h3: e(t, 48, 1.167, 0),
+    h4: e(t, 34, 1.235, 0.25),
+    h5: e(t, 24, 1.334, 0),
+    h6: e(o, 20, 1.6, 0.15),
+    subtitle1: e(t, 16, 1.75, 0.15),
+    subtitle2: e(o, 14, 1.57, 0.1),
+    body1: e(t, 16, 1.5, 0.15),
+    body2: e(t, 14, 1.43, 0.15),
+    button: e(o, 14, 1.75, 0.4, p),
+    caption: e(t, 12, 1.66, 0.4),
+    overline: e(t, 12, 2.66, 1, p),
+    // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
+    inherit: {
+      fontFamily: "inherit",
+      fontWeight: "inherit",
+      fontSize: "inherit",
+      lineHeight: "inherit",
+      letterSpacing: "inherit"
+    }
+  };
+  return M(c({
+    htmlFontSize: l,
+    pxToRem: m,
+    fontFamily: r,
+    fontSize: f,
+    fontWeightLight: a,
+    fontWeightRegular: t,
+    fontWeightMedium: o,
+    fontWeightBold: g
+  }, F), W, {
+    clone: !1
+    // No need to clone deep
+  });
 }
-const t = ["none", a(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), a(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), a(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), a(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), a(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), a(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), a(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), a(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), a(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), a(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), a(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), a(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), a(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), a(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), a(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), a(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), a(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), a(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), a(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), a(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), a(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), a(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), a(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), a(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)], s = t;
 export {
-  s as default
+  A as default
 };

package/index.es268.js

@@ -1,60 +1,7 @@
-import f from "./index.es187.js";
-import u from "./index.es186.js";
-const l = ["duration", "easing", "delay"], p = {
-  // This is the most common easing curve.
-  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
-  // Objects enter the screen at full velocity from off-screen and
-  // slowly decelerate to a resting point.
-  easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
-  // Objects leave the screen at full velocity. They do not decelerate when off-screen.
-  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
-  // The sharp curve is used by objects that may return to the screen at any time.
-  sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
-}, y = {
-  shortest: 150,
-  shorter: 200,
-  short: 250,
-  // most basic recommended timing
-  standard: 300,
-  // this is to be used in complex animations
-  complex: 375,
-  // recommended when something is entering screen
-  enteringScreen: 225,
-  // recommended when something is leaving screen
-  leavingScreen: 195
-};
-function m(e) {
-  return `${Math.round(e)}ms`;
-}
-function h(e) {
-  if (!e)
-    return 0;
-  const t = e / 36;
-  return Math.round((4 + 15 * t ** 0.25 + t / 5) * 10);
-}
-function O(e) {
-  const t = u({}, p, e.easing), c = u({}, y, e.duration);
-  return u({
-    getAutoHeightDuration: h,
-    create: (n = ["all"], s = {}) => {
-      const {
-        duration: o = c.standard,
-        easing: g = t.easeInOut,
-        delay: i = 0
-      } = s, b = f(s, l);
-      if (process.env.NODE_ENV !== "production") {
-        const r = (a) => typeof a == "string", d = (a) => !isNaN(parseFloat(a));
-        !r(n) && Array.isArray(n), !d(o) && r(o), r(g), !d(i) && r(i), Object.keys(b).length;
-      }
-      return (Array.isArray(n) ? n : [n]).map((r) => `${r} ${typeof o == "string" ? o : m(o)} ${g} ${typeof i == "string" ? i : m(i)}`).join(",");
-    }
-  }, e, {
-    easing: t,
-    duration: c
-  });
+function a(...o) {
+  return [`${o[0]}px ${o[1]}px ${o[2]}px ${o[3]}px rgba(0,0,0,${0.2})`, `${o[4]}px ${o[5]}px ${o[6]}px ${o[7]}px rgba(0,0,0,${0.14})`, `${o[8]}px ${o[9]}px ${o[10]}px ${o[11]}px rgba(0,0,0,${0.12})`].join(",");
 }
+const t = ["none", a(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), a(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), a(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), a(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), a(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), a(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), a(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), a(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), a(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), a(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), a(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), a(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), a(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), a(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), a(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), a(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), a(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), a(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), a(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), a(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), a(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), a(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), a(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), a(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)], s = t;
 export {
-  O as default,
-  y as duration,
-  p as easing
+  s as default
 };

package/index.es269.js

@@ -1,13 +1,60 @@
-const a = {
-  mobileStepper: 1e3,
-  fab: 1050,
-  speedDial: 1050,
-  appBar: 1100,
-  drawer: 1200,
-  modal: 1300,
-  snackbar: 1400,
-  tooltip: 1500
-}, e = a;
+import f from "./index.es202.js";
+import u from "./index.es201.js";
+const l = ["duration", "easing", "delay"], p = {
+  // This is the most common easing curve.
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Objects enter the screen at full velocity from off-screen and
+  // slowly decelerate to a resting point.
+  easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+  // Objects leave the screen at full velocity. They do not decelerate when off-screen.
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  // The sharp curve is used by objects that may return to the screen at any time.
+  sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
+}, y = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  // most basic recommended timing
+  standard: 300,
+  // this is to be used in complex animations
+  complex: 375,
+  // recommended when something is entering screen
+  enteringScreen: 225,
+  // recommended when something is leaving screen
+  leavingScreen: 195
+};
+function m(e) {
+  return `${Math.round(e)}ms`;
+}
+function h(e) {
+  if (!e)
+    return 0;
+  const t = e / 36;
+  return Math.round((4 + 15 * t ** 0.25 + t / 5) * 10);
+}
+function O(e) {
+  const t = u({}, p, e.easing), c = u({}, y, e.duration);
+  return u({
+    getAutoHeightDuration: h,
+    create: (n = ["all"], s = {}) => {
+      const {
+        duration: o = c.standard,
+        easing: g = t.easeInOut,
+        delay: i = 0
+      } = s, b = f(s, l);
+      if (process.env.NODE_ENV !== "production") {
+        const r = (a) => typeof a == "string", d = (a) => !isNaN(parseFloat(a));
+        !r(n) && Array.isArray(n), !d(o) && r(o), r(g), !d(i) && r(i), Object.keys(b).length;
+      }
+      return (Array.isArray(n) ? n : [n]).map((r) => `${r} ${typeof o == "string" ? o : m(o)} ${g} ${typeof i == "string" ? i : m(i)}`).join(",");
+    }
+  }, e, {
+    easing: t,
+    duration: c
+  });
+}
 export {
-  e as default
+  O as default,
+  y as duration,
+  p as easing
 };