mada-design-system 0.8.3 → 0.8.4

package/index.es48.js

@@ -1,16 +1,16 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import x from "./index.es154.js";
-import b from "./index.es155.js";
-import v from "./index.es156.js";
-import N from "./index.es157.js";
-import w from "./index.es158.js";
-import y from "./index.es159.js";
+import x from "./index.es162.js";
+import b from "./index.es163.js";
+import v from "./index.es164.js";
+import N from "./index.es165.js";
+import w from "./index.es166.js";
+import y from "./index.es167.js";
 import "./index.es2.js";
 import k from "./index.es90.js";
-import F from "./index.es160.js";
-import z from "./index.es161.js";
-import C from "./index.es162.js";
-import S from "./index.es163.js";
+import F from "./index.es168.js";
+import z from "./index.es169.js";
+import C from "./index.es170.js";
+import S from "./index.es171.js";
 import { Link as u } from "./index.es52.js";
 import { cn as f } from "./index.es89.js";
 import { ShouldRender as d } from "./index.es15.js";

package/index.es480.js

@@ -1,5 +1,253 @@
-import e from "./index.es232.js";
-const l = e("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), s = l;
+import G from "./index.es220.js";
+import U from "./index.es221.js";
+import * as e from "react";
+import _ from "./index.es222.js";
+import { clsx as c } from "./index.es106.js";
+import j from "./index.es234.js";
+import F from "./index.es243.js";
+import J from "./index.es501.js";
+import i from "./index.es482.js";
+import { jsx as k } from "react/jsx-runtime";
+import { keyframes as E } from "./index.es467.js";
+import Q from "./index.es305.js";
+const Z = ["center", "classes", "className"];
+let y = (r) => r, V, D, K, S;
+const w = 550, v = 80, tt = E(V || (V = y`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`)), et = E(D || (D = y`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`)), it = E(K || (K = y`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`)), rt = j("span", {
+  name: "MuiTouchRipple",
+  slot: "Root"
+})({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: "inherit"
+}), ot = j(J, {
+  name: "MuiTouchRipple",
+  slot: "Ripple"
+})(S || (S = y`
+  opacity: 0;
+  position: absolute;
+
+  &.${0} {
+    opacity: 0.3;
+    transform: scale(1);
+    animation-name: ${0};
+    animation-duration: ${0}ms;
+    animation-timing-function: ${0};
+  }
+
+  &.${0} {
+    animation-duration: ${0}ms;
+  }
+
+  & .${0} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  & .${0} {
+    opacity: 0;
+    animation-name: ${0};
+    animation-duration: ${0}ms;
+    animation-timing-function: ${0};
+  }
+
+  & .${0} {
+    position: absolute;
+    /* @noflip */
+    left: 0px;
+    top: 0;
+    animation-name: ${0};
+    animation-duration: 2500ms;
+    animation-timing-function: ${0};
+    animation-iteration-count: infinite;
+    animation-delay: 200ms;
+  }
+`), i.rippleVisible, tt, w, ({
+  theme: r
+}) => r.transitions.easing.easeInOut, i.ripplePulsate, ({
+  theme: r
+}) => r.transitions.duration.shorter, i.child, i.childLeaving, et, w, ({
+  theme: r
+}) => r.transitions.easing.easeInOut, i.childPulsate, it, ({
+  theme: r
+}) => r.transitions.easing.easeInOut), q = /* @__PURE__ */ e.forwardRef(function(A, H) {
+  const I = F({
+    props: A,
+    name: "MuiTouchRipple"
+  }), {
+    center: L = !1,
+    classes: n = {},
+    className: W
+  } = I, B = U(I, Z), [N, X] = e.useState([]), Y = e.useRef(0), h = e.useRef(null);
+  e.useEffect(() => {
+    h.current && (h.current(), h.current = null);
+  }, [N]);
+  const T = e.useRef(!1), d = e.useRef(0), o = e.useRef(null), z = e.useRef(null);
+  e.useEffect(() => () => {
+    d.current && clearTimeout(d.current);
+  }, []);
+  const $ = e.useCallback((t) => {
+    const {
+      pulsate: a,
+      rippleX: s,
+      rippleY: g,
+      rippleSize: b,
+      cb: P
+    } = t;
+    X((l) => [...l, /* @__PURE__ */ k(ot, {
+      classes: {
+        ripple: c(n.ripple, i.ripple),
+        rippleVisible: c(n.rippleVisible, i.rippleVisible),
+        ripplePulsate: c(n.ripplePulsate, i.ripplePulsate),
+        child: c(n.child, i.child),
+        childLeaving: c(n.childLeaving, i.childLeaving),
+        childPulsate: c(n.childPulsate, i.childPulsate)
+      },
+      timeout: w,
+      pulsate: a,
+      rippleX: s,
+      rippleY: g,
+      rippleSize: b
+    }, Y.current)]), Y.current += 1, h.current = P;
+  }, [n]), R = e.useCallback((t = {}, a = {}, s = () => {
+  }) => {
+    const {
+      pulsate: g = !1,
+      center: b = L || a.pulsate,
+      fakeElement: P = !1
+      // For test purposes
+    } = a;
+    if ((t == null ? void 0 : t.type) === "mousedown" && T.current) {
+      T.current = !1;
+      return;
+    }
+    (t == null ? void 0 : t.type) === "touchstart" && (T.current = !0);
+    const l = P ? null : z.current, u = l ? l.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+    let p, m, f;
+    if (b || t === void 0 || t.clientX === 0 && t.clientY === 0 || !t.clientX && !t.touches)
+      p = Math.round(u.width / 2), m = Math.round(u.height / 2);
+    else {
+      const {
+        clientX: x,
+        clientY: C
+      } = t.touches && t.touches.length > 0 ? t.touches[0] : t;
+      p = Math.round(x - u.left), m = Math.round(C - u.top);
+    }
+    if (b)
+      f = Math.sqrt((2 * u.width ** 2 + u.height ** 2) / 3), f % 2 === 0 && (f += 1);
+    else {
+      const x = Math.max(Math.abs((l ? l.clientWidth : 0) - p), p) * 2 + 2, C = Math.max(Math.abs((l ? l.clientHeight : 0) - m), m) * 2 + 2;
+      f = Math.sqrt(x ** 2 + C ** 2);
+    }
+    t != null && t.touches ? o.current === null && (o.current = () => {
+      $({
+        pulsate: g,
+        rippleX: p,
+        rippleY: m,
+        rippleSize: f,
+        cb: s
+      });
+    }, d.current = setTimeout(() => {
+      o.current && (o.current(), o.current = null);
+    }, v)) : $({
+      pulsate: g,
+      rippleX: p,
+      rippleY: m,
+      rippleSize: f,
+      cb: s
+    });
+  }, [L, $]), O = e.useCallback(() => {
+    R({}, {
+      pulsate: !0
+    });
+  }, [R]), M = e.useCallback((t, a) => {
+    if (clearTimeout(d.current), (t == null ? void 0 : t.type) === "touchend" && o.current) {
+      o.current(), o.current = null, d.current = setTimeout(() => {
+        M(t, a);
+      });
+      return;
+    }
+    o.current = null, X((s) => s.length > 0 ? s.slice(1) : s), h.current = a;
+  }, []);
+  return e.useImperativeHandle(H, () => ({
+    pulsate: O,
+    start: R,
+    stop: M
+  }), [O, R, M]), /* @__PURE__ */ k(rt, G({
+    className: c(i.root, n.root, W),
+    ref: z
+  }, B, {
+    children: /* @__PURE__ */ k(Q, {
+      component: null,
+      exit: !0,
+      children: N
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" && (q.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: _.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: _.object,
+  /**
+   * @ignore
+   */
+  className: _.string
+});
+const Rt = q;
 export {
-  s as default
+  v as DELAY_RIPPLE,
+  ot as TouchRippleRipple,
+  rt as TouchRippleRoot,
+  Rt as default
 };

package/index.es481.js

@@ -1,4 +1,10 @@
-import o from "./index.es388.js";
+import s from "./index.es245.js";
+import e from "./index.es244.js";
+function n(t) {
+  return e("MuiButtonBase", t);
+}
+const o = s("MuiButtonBase", ["root", "disabled", "focusVisible"]), l = o;
 export {
-  o as default
+  l as default,
+  n as getButtonBaseUtilityClass
 };

package/index.es482.js

@@ -1,4 +1,5 @@
-import t from "./index.es407.js";
+import e from "./index.es245.js";
+const l = e("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), s = l;
 export {
-  t as default
+  s as default
 };

package/index.es483.js

@@ -1,4 +1,176 @@
-import f from "./index.es389.js";
+import x from "./index.es220.js";
+import z from "./index.es221.js";
+import * as $ from "react";
+import o from "./index.es222.js";
+import { clsx as T } from "./index.es106.js";
+import b from "./index.es243.js";
+import w from "./index.es234.js";
+import { getSvgIconUtilityClass as C } from "./index.es503.js";
+import { jsxs as R, jsx as I } from "react/jsx-runtime";
+import g from "./index.es426.js";
+import O from "./index.es242.js";
+const B = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], N = (e) => {
+  const {
+    color: t,
+    fontSize: i,
+    classes: r
+  } = e, n = {
+    root: ["root", t !== "inherit" && `color${g(t)}`, `fontSize${g(i)}`]
+  };
+  return O(n, C, r);
+}, j = w("svg", {
+  name: "MuiSvgIcon",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: i
+    } = e;
+    return [t.root, i.color !== "inherit" && t[`color${g(i.color)}`], t[`fontSize${g(i.fontSize)}`]];
+  }
+})(({
+  theme: e,
+  ownerState: t
+}) => {
+  var i, r, n, m, f, a, h, d, u, s, c, p, l;
+  return {
+    userSelect: "none",
+    width: "1em",
+    height: "1em",
+    display: "inline-block",
+    // the <svg> will define the property that has `currentColor`
+    // e.g. heroicons uses fill="none" and stroke="currentColor"
+    fill: t.hasSvgAsChild ? void 0 : "currentColor",
+    flexShrink: 0,
+    transition: (i = e.transitions) == null || (r = i.create) == null ? void 0 : r.call(i, "fill", {
+      duration: (n = e.transitions) == null || (n = n.duration) == null ? void 0 : n.shorter
+    }),
+    fontSize: {
+      inherit: "inherit",
+      small: ((m = e.typography) == null || (f = m.pxToRem) == null ? void 0 : f.call(m, 20)) || "1.25rem",
+      medium: ((a = e.typography) == null || (h = a.pxToRem) == null ? void 0 : h.call(a, 24)) || "1.5rem",
+      large: ((d = e.typography) == null || (u = d.pxToRem) == null ? void 0 : u.call(d, 35)) || "2.1875rem"
+    }[t.fontSize],
+    // TODO v5 deprecate, v6 remove for sx
+    color: (s = (c = (e.vars || e).palette) == null || (c = c[t.color]) == null ? void 0 : c.main) != null ? s : {
+      action: (p = (e.vars || e).palette) == null || (p = p.action) == null ? void 0 : p.active,
+      disabled: (l = (e.vars || e).palette) == null || (l = l.action) == null ? void 0 : l.disabled,
+      inherit: void 0
+    }[t.color]
+  };
+}), v = /* @__PURE__ */ $.forwardRef(function(t, i) {
+  const r = b({
+    props: t,
+    name: "MuiSvgIcon"
+  }), {
+    children: n,
+    className: m,
+    color: f = "inherit",
+    component: a = "svg",
+    fontSize: h = "medium",
+    htmlColor: d,
+    inheritViewBox: u = !1,
+    titleAccess: s,
+    viewBox: c = "0 0 24 24"
+  } = r, p = z(r, B), l = /* @__PURE__ */ $.isValidElement(n) && n.type === "svg", y = x({}, r, {
+    color: f,
+    component: a,
+    fontSize: h,
+    instanceFontSize: t.fontSize,
+    inheritViewBox: u,
+    viewBox: c,
+    hasSvgAsChild: l
+  }), S = {};
+  u || (S.viewBox = c);
+  const _ = N(y);
+  return /* @__PURE__ */ R(j, x({
+    as: a,
+    className: T(_.root, m),
+    focusable: "false",
+    color: d,
+    "aria-hidden": s ? void 0 : !0,
+    role: s ? "img" : void 0,
+    ref: i
+  }, S, p, l && n.props, {
+    ownerState: y,
+    children: [l ? n.props.children : n, s ? /* @__PURE__ */ I("title", {
+      children: s
+    }) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (v.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Node passed into the SVG element.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color: o.oneOfType([o.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize: o.oneOfType([o.oneOf(["inherit", "large", "medium", "small"]), o.string]),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor: o.string,
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox: o.bool,
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering: o.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: o.string,
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox: o.string
+});
+v.muiName = "SvgIcon";
+const W = v;
 export {
-  f as default
+  W as default
 };

package/index.es484.js

@@ -1,176 +1,4 @@
-import x from "./index.es207.js";
-import z from "./index.es208.js";
-import * as $ from "react";
-import o from "./index.es209.js";
-import { clsx as T } from "./index.es133.js";
-import b from "./index.es230.js";
-import w from "./index.es221.js";
-import { getSvgIconUtilityClass as C } from "./index.es503.js";
-import { jsxs as R, jsx as I } from "react/jsx-runtime";
-import g from "./index.es407.js";
-import O from "./index.es229.js";
-const B = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"], N = (e) => {
-  const {
-    color: t,
-    fontSize: i,
-    classes: r
-  } = e, n = {
-    root: ["root", t !== "inherit" && `color${g(t)}`, `fontSize${g(i)}`]
-  };
-  return O(n, C, r);
-}, j = w("svg", {
-  name: "MuiSvgIcon",
-  slot: "Root",
-  overridesResolver: (e, t) => {
-    const {
-      ownerState: i
-    } = e;
-    return [t.root, i.color !== "inherit" && t[`color${g(i.color)}`], t[`fontSize${g(i.fontSize)}`]];
-  }
-})(({
-  theme: e,
-  ownerState: t
-}) => {
-  var i, r, n, m, f, a, h, d, u, s, c, p, l;
-  return {
-    userSelect: "none",
-    width: "1em",
-    height: "1em",
-    display: "inline-block",
-    // the <svg> will define the property that has `currentColor`
-    // e.g. heroicons uses fill="none" and stroke="currentColor"
-    fill: t.hasSvgAsChild ? void 0 : "currentColor",
-    flexShrink: 0,
-    transition: (i = e.transitions) == null || (r = i.create) == null ? void 0 : r.call(i, "fill", {
-      duration: (n = e.transitions) == null || (n = n.duration) == null ? void 0 : n.shorter
-    }),
-    fontSize: {
-      inherit: "inherit",
-      small: ((m = e.typography) == null || (f = m.pxToRem) == null ? void 0 : f.call(m, 20)) || "1.25rem",
-      medium: ((a = e.typography) == null || (h = a.pxToRem) == null ? void 0 : h.call(a, 24)) || "1.5rem",
-      large: ((d = e.typography) == null || (u = d.pxToRem) == null ? void 0 : u.call(d, 35)) || "2.1875rem"
-    }[t.fontSize],
-    // TODO v5 deprecate, v6 remove for sx
-    color: (s = (c = (e.vars || e).palette) == null || (c = c[t.color]) == null ? void 0 : c.main) != null ? s : {
-      action: (p = (e.vars || e).palette) == null || (p = p.action) == null ? void 0 : p.active,
-      disabled: (l = (e.vars || e).palette) == null || (l = l.action) == null ? void 0 : l.disabled,
-      inherit: void 0
-    }[t.color]
-  };
-}), v = /* @__PURE__ */ $.forwardRef(function(t, i) {
-  const r = b({
-    props: t,
-    name: "MuiSvgIcon"
-  }), {
-    children: n,
-    className: m,
-    color: f = "inherit",
-    component: a = "svg",
-    fontSize: h = "medium",
-    htmlColor: d,
-    inheritViewBox: u = !1,
-    titleAccess: s,
-    viewBox: c = "0 0 24 24"
-  } = r, p = z(r, B), l = /* @__PURE__ */ $.isValidElement(n) && n.type === "svg", y = x({}, r, {
-    color: f,
-    component: a,
-    fontSize: h,
-    instanceFontSize: t.fontSize,
-    inheritViewBox: u,
-    viewBox: c,
-    hasSvgAsChild: l
-  }), S = {};
-  u || (S.viewBox = c);
-  const _ = N(y);
-  return /* @__PURE__ */ R(j, x({
-    as: a,
-    className: T(_.root, m),
-    focusable: "false",
-    color: d,
-    "aria-hidden": s ? void 0 : !0,
-    role: s ? "img" : void 0,
-    ref: i
-  }, S, p, l && n.props, {
-    ownerState: y,
-    children: [l ? n.props.children : n, s ? /* @__PURE__ */ I("title", {
-      children: s
-    }) : null]
-  }));
-});
-process.env.NODE_ENV !== "production" && (v.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * Node passed into the SVG element.
-   */
-  children: o.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: o.object,
-  /**
-   * @ignore
-   */
-  className: o.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
-   * @default 'inherit'
-   */
-  color: o.oneOfType([o.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: o.elementType,
-  /**
-   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   * @default 'medium'
-   */
-  fontSize: o.oneOfType([o.oneOf(["inherit", "large", "medium", "small"]), o.string]),
-  /**
-   * Applies a color attribute to the SVG element.
-   */
-  htmlColor: o.string,
-  /**
-   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
-   * prop will be ignored.
-   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
-   * `component`'s viewBox to the root node.
-   * @default false
-   */
-  inheritViewBox: o.bool,
-  /**
-   * The shape-rendering attribute. The behavior of the different options is described on the
-   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
-   * If you are having issues with blurry icons you should investigate this prop.
-   */
-  shapeRendering: o.string,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
-  /**
-   * Provides a human-readable title for the element that contains it.
-   * https://www.w3.org/TR/SVG-access/#Equivalent
-   */
-  titleAccess: o.string,
-  /**
-   * Allows you to redefine what the coordinates without units mean inside an SVG element.
-   * For example, if the SVG element is 500 (width) by 200 (height),
-   * and you pass viewBox="0 0 50 20",
-   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
-   * to bottom right (50,20) and each unit will be worth 10px.
-   * @default '0 0 24 24'
-   */
-  viewBox: o.string
-});
-v.muiName = "SvgIcon";
-const W = v;
+import f from "./index.es392.js";
 export {
-  W as default
+  f as default
 };

package/index.es485.js

@@ -1,4 +1,4 @@
-import e from "./index.es226.js";
+import e from "./index.es239.js";
 export {
   e as default
 };

package/index.es486.js

@@ -1,4 +1,4 @@
-import e from "./index.es410.js";
+import e from "./index.es441.js";
 export {
   e as default
 };