mada-design-system 0.2.8 → 0.3.0

package/index.es266.js

@@ -1,246 +1,29 @@
-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]
-  };
-}
-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);
+import r from "./index.es188.js";
+import * as i from "react";
+function f(t) {
+  if (typeof t != "object" || t === null)
+    return !1;
+  const n = Object.getPrototypeOf(t);
+  return (n === null || n === Object.prototype || Object.getPrototypeOf(n) === null) && !(Symbol.toStringTag in t) && !(Symbol.iterator in t);
+}
+function p(t) {
+  if (/* @__PURE__ */ i.isValidElement(t) || !f(t))
+    return t;
+  const n = {};
+  return Object.keys(t).forEach((o) => {
+    n[o] = p(t[o]);
+  }), n;
+}
+function b(t, n, o = {
+  clone: !0
+}) {
+  const e = o.clone ? r({}, t) : t;
+  return f(t) && f(n) && Object.keys(n).forEach((l) => {
+    /* @__PURE__ */ i.isValidElement(n[l]) ? e[l] = n[l] : f(n[l]) && // Avoid prototype pollution
+    Object.prototype.hasOwnProperty.call(t, l) && f(t[l]) ? e[l] = b(t[l], n[l], o) : o.clone ? e[l] = f(n[l]) ? p(n[l]) : n[l] : e[l] = n[l];
+  }), e;
 }
 export {
-  b as dark,
-  ar as default,
-  T as light
+  b as default,
+  f as isPlainObject
 };

package/index.es267.js

@@ -1,76 +1,293 @@
-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
-  });
-}
+import { padding as e, margin as t } from "./index.es313.js";
+import { borderTransform as r, borderRadius as s } from "./index.es309.js";
+import { gap as i, rowGap as n, columnGap as m } from "./index.es316.js";
+import { paletteTransform as l } from "./index.es317.js";
+import { sizingTransform as o, maxWidth as y } from "./index.es318.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
+      }
+    })
+  },
+  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"
+  }
+}, K = d;
 export {
-  A as default
+  K as default
 };