@amateescu/portal-ui-components 0.0.6 → 0.0.7-beta1

package/dist/Button-DL5BII6f.js

@@ -0,0 +1,1315 @@
+import { a as m, _ as ne } from "./index-kNWC7pFF.js";
+import * as c from "react";
+import G, { Children as it, isValidElement as ee, cloneElement as te } from "react";
+import { P as n, k as rt, c as M, g as fe, u as he, j as A, f as Ne, i as $e, r as st, h as B, l as at, m as Z } from "./generateUtilityClasses-yRWzVVZS.js";
+import { jsx as _, jsxs as Ve } from "react/jsx-runtime";
+import { _ as lt, a as ct } from "./assertThisInitialized-BUtkG-md.js";
+import { keyframes as be } from "@emotion/react";
+const ut = n.oneOfType([n.func, n.object]);
+function pt(e) {
+  const {
+    prototype: t = {}
+  } = e;
+  return !!t.isReactComponent;
+}
+function dt(e, t, o, a, i) {
+  const r = e[t], s = i || t;
+  if (r == null || // When server-side rendering React doesn't warn either.
+  // This is not an accurate check for SSR.
+  // This is only in place for emotion compat.
+  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
+  typeof window > "u")
+    return null;
+  let u;
+  return typeof r == "function" && !pt(r) && (u = "Did you accidentally provide a plain function component instead?"), u !== void 0 ? new Error(`Invalid ${a} \`${s}\` supplied to \`${o}\`. Expected an element type that can hold a ref. ${u} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
+}
+const ft = rt(n.elementType, dt);
+function ht(e, t) {
+  typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function Ce(...e) {
+  return c.useMemo(() => e.every((t) => t == null) ? null : (t) => {
+    e.forEach((o) => {
+      ht(o, t);
+    });
+  }, e);
+}
+const bt = typeof window < "u" ? c.useLayoutEffect : c.useEffect;
+function J(e) {
+  const t = c.useRef(e);
+  return bt(() => {
+    t.current = e;
+  }), c.useRef((...o) => (
+    // @ts-expect-error hide `this`
+    (0, t.current)(...o)
+  )).current;
+}
+const Ee = {};
+function mt(e, t) {
+  const o = c.useRef(Ee);
+  return o.current === Ee && (o.current = e(t)), o;
+}
+const gt = [];
+function vt(e) {
+  c.useEffect(e, gt);
+}
+class oe {
+  constructor() {
+    this.currentId = null, this.clear = () => {
+      this.currentId !== null && (clearTimeout(this.currentId), this.currentId = null);
+    }, this.disposeEffect = () => this.clear;
+  }
+  static create() {
+    return new oe();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(t, o) {
+    this.clear(), this.currentId = setTimeout(() => {
+      this.currentId = null, o();
+    }, t);
+  }
+}
+function yt() {
+  const e = mt(oe.create).current;
+  return vt(e.disposeEffect), e;
+}
+let ie = !0, pe = !1;
+const xt = new oe(), Rt = {
+  text: !0,
+  search: !0,
+  url: !0,
+  tel: !0,
+  email: !0,
+  password: !0,
+  number: !0,
+  date: !0,
+  month: !0,
+  week: !0,
+  time: !0,
+  datetime: !0,
+  "datetime-local": !0
+};
+function Ct(e) {
+  const {
+    type: t,
+    tagName: o
+  } = e;
+  return !!(o === "INPUT" && Rt[t] && !e.readOnly || o === "TEXTAREA" && !e.readOnly || e.isContentEditable);
+}
+function Et(e) {
+  e.metaKey || e.altKey || e.ctrlKey || (ie = !0);
+}
+function ue() {
+  ie = !1;
+}
+function Tt() {
+  this.visibilityState === "hidden" && pe && (ie = !0);
+}
+function Mt(e) {
+  e.addEventListener("keydown", Et, !0), e.addEventListener("mousedown", ue, !0), e.addEventListener("pointerdown", ue, !0), e.addEventListener("touchstart", ue, !0), e.addEventListener("visibilitychange", Tt, !0);
+}
+function zt(e) {
+  const {
+    target: t
+  } = e;
+  try {
+    return t.matches(":focus-visible");
+  } catch {
+  }
+  return ie || Ct(t);
+}
+function It() {
+  const e = c.useCallback((i) => {
+    i != null && Mt(i.ownerDocument);
+  }, []), t = c.useRef(!1);
+  function o() {
+    return t.current ? (pe = !0, xt.start(100, () => {
+      pe = !1;
+    }), t.current = !1, !0) : !1;
+  }
+  function a(i) {
+    return zt(i) ? (t.current = !0, !0) : !1;
+  }
+  return {
+    isFocusVisibleRef: t,
+    onFocus: a,
+    onBlur: o,
+    ref: e
+  };
+}
+function Bt(e, t) {
+  e.prototype = Object.create(t.prototype), e.prototype.constructor = e, lt(e, t);
+}
+const Te = G.createContext(null);
+function me(e, t) {
+  var o = function(r) {
+    return t && ee(r) ? t(r) : r;
+  }, a = /* @__PURE__ */ Object.create(null);
+  return e && it.map(e, function(i) {
+    return i;
+  }).forEach(function(i) {
+    a[i.key] = o(i);
+  }), a;
+}
+function Nt(e, t) {
+  e = e || {}, t = t || {};
+  function o(h) {
+    return h in t ? t[h] : e[h];
+  }
+  var a = /* @__PURE__ */ Object.create(null), i = [];
+  for (var r in e)
+    r in t ? i.length && (a[r] = i, i = []) : i.push(r);
+  var s, u = {};
+  for (var p in t) {
+    if (a[p])
+      for (s = 0; s < a[p].length; s++) {
+        var d = a[p][s];
+        u[a[p][s]] = o(d);
+      }
+    u[p] = o(p);
+  }
+  for (s = 0; s < i.length; s++)
+    u[i[s]] = o(i[s]);
+  return u;
+}
+function K(e, t, o) {
+  return o[t] != null ? o[t] : e.props[t];
+}
+function $t(e, t) {
+  return me(e.children, function(o) {
+    return te(o, {
+      onExited: t.bind(null, o),
+      in: !0,
+      appear: K(o, "appear", e),
+      enter: K(o, "enter", e),
+      exit: K(o, "exit", e)
+    });
+  });
+}
+function Vt(e, t, o) {
+  var a = me(e.children), i = Nt(t, a);
+  return Object.keys(i).forEach(function(r) {
+    var s = i[r];
+    if (ee(s)) {
+      var u = r in t, p = r in a, d = t[r], h = ee(d) && !d.props.in;
+      p && (!u || h) ? i[r] = te(s, {
+        onExited: o.bind(null, s),
+        in: !0,
+        exit: K(s, "exit", e),
+        enter: K(s, "enter", e)
+      }) : !p && u && !h ? i[r] = te(s, {
+        in: !1
+      }) : p && u && ee(d) && (i[r] = te(s, {
+        onExited: o.bind(null, s),
+        in: d.props.in,
+        exit: K(s, "exit", e),
+        enter: K(s, "enter", e)
+      }));
+    }
+  }), i;
+}
+var Pt = Object.values || function(e) {
+  return Object.keys(e).map(function(t) {
+    return e[t];
+  });
+}, kt = {
+  component: "div",
+  childFactory: function(t) {
+    return t;
+  }
+}, ge = /* @__PURE__ */ function(e) {
+  Bt(t, e);
+  function t(a, i) {
+    var r;
+    r = e.call(this, a, i) || this;
+    var s = r.handleExited.bind(ct(r));
+    return r.state = {
+      contextValue: {
+        isMounting: !0
+      },
+      handleExited: s,
+      firstRender: !0
+    }, r;
+  }
+  var o = t.prototype;
+  return o.componentDidMount = function() {
+    this.mounted = !0, this.setState({
+      contextValue: {
+        isMounting: !1
+      }
+    });
+  }, o.componentWillUnmount = function() {
+    this.mounted = !1;
+  }, t.getDerivedStateFromProps = function(i, r) {
+    var s = r.children, u = r.handleExited, p = r.firstRender;
+    return {
+      children: p ? $t(i, u) : Vt(i, s, u),
+      firstRender: !1
+    };
+  }, o.handleExited = function(i, r) {
+    var s = me(this.props.children);
+    i.key in s || (i.props.onExited && i.props.onExited(r), this.mounted && this.setState(function(u) {
+      var p = m({}, u.children);
+      return delete p[i.key], {
+        children: p
+      };
+    }));
+  }, o.render = function() {
+    var i = this.props, r = i.component, s = i.childFactory, u = ne(i, ["component", "childFactory"]), p = this.state.contextValue, d = Pt(this.state.children).map(s);
+    return delete u.appear, delete u.enter, delete u.exit, r === null ? /* @__PURE__ */ G.createElement(Te.Provider, {
+      value: p
+    }, d) : /* @__PURE__ */ G.createElement(Te.Provider, {
+      value: p
+    }, /* @__PURE__ */ G.createElement(r, u, d));
+  }, t;
+}(G.Component);
+ge.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * `<TransitionGroup>` renders a `<div>` by default. You can change this
+   * behavior by providing a `component` prop.
+   * If you use React v16+ and would like to avoid a wrapping `<div>` element
+   * you can pass in `component={null}`. This is useful if the wrapping div
+   * borks your css styles.
+   */
+  component: n.any,
+  /**
+   * A set of `<Transition>` components, that are toggled `in` and out as they
+   * leave. the `<TransitionGroup>` will inject specific transition props, so
+   * remember to spread them through if you are wrapping the `<Transition>` as
+   * with our `<Fade>` example.
+   *
+   * While this component is meant for multiple `Transition` or `CSSTransition`
+   * children, sometimes you may want to have a single transition child with
+   * content that you want to be transitioned out and in when you change it
+   * (e.g. routes, images etc.) In that case you can change the `key` prop of
+   * the transition child as you change its content, this will cause
+   * `TransitionGroup` to transition the child out and back in.
+   */
+  children: n.node,
+  /**
+   * A convenience prop that enables or disables appear animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  appear: n.bool,
+  /**
+   * A convenience prop that enables or disables enter animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  enter: n.bool,
+  /**
+   * A convenience prop that enables or disables exit animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  exit: n.bool,
+  /**
+   * You may need to apply reactive updates to a child as it is exiting.
+   * This is generally done by using `cloneElement` however in the case of an exiting
+   * child the element has already been removed and not accessible to the consumer.
+   *
+   * If you do need to update a child as it leaves you can provide a `childFactory`
+   * to wrap every child, even the ones that are leaving.
+   *
+   * @type Function(child: ReactElement) -> ReactElement
+   */
+  childFactory: n.func
+} : {};
+ge.defaultProps = kt;
+function Pe(e) {
+  const {
+    className: t,
+    classes: o,
+    pulsate: a = !1,
+    rippleX: i,
+    rippleY: r,
+    rippleSize: s,
+    in: u,
+    onExited: p,
+    timeout: d
+  } = e, [h, v] = c.useState(!1), y = M(t, o.ripple, o.rippleVisible, a && o.ripplePulsate), R = {
+    width: s,
+    height: s,
+    top: -(s / 2) + r,
+    left: -(s / 2) + i
+  }, b = M(o.child, h && o.childLeaving, a && o.childPulsate);
+  return !u && !h && v(!0), c.useEffect(() => {
+    if (!u && p != null) {
+      const C = setTimeout(p, d);
+      return () => {
+        clearTimeout(C);
+      };
+    }
+  }, [p, u, d]), /* @__PURE__ */ _("span", {
+    className: y,
+    style: R,
+    children: /* @__PURE__ */ _("span", {
+      className: b
+    })
+  });
+}
+process.env.NODE_ENV !== "production" && (Pe.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object.isRequired,
+  className: n.string,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  in: n.bool,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  onExited: n.func,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: n.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: n.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: n.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: n.number,
+  /**
+   * exit delay
+   */
+  timeout: n.number.isRequired
+});
+const z = fe("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), Ot = ["center", "classes", "className"];
+let re = (e) => e, Me, ze, Ie, Be;
+const de = 550, Dt = 80, Lt = be(Me || (Me = re`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`)), St = be(ze || (ze = re`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`)), Ft = be(Ie || (Ie = re`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`)), _t = A("span", {
+  name: "MuiTouchRipple",
+  slot: "Root"
+})({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: "inherit"
+}), jt = A(Pe, {
+  name: "MuiTouchRipple",
+  slot: "Ripple"
+})(Be || (Be = re`
+  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;
+  }
+`), z.rippleVisible, Lt, de, ({
+  theme: e
+}) => e.transitions.easing.easeInOut, z.ripplePulsate, ({
+  theme: e
+}) => e.transitions.duration.shorter, z.child, z.childLeaving, St, de, ({
+  theme: e
+}) => e.transitions.easing.easeInOut, z.childPulsate, Ft, ({
+  theme: e
+}) => e.transitions.easing.easeInOut), ke = /* @__PURE__ */ c.forwardRef(function(t, o) {
+  const a = he({
+    props: t,
+    name: "MuiTouchRipple"
+  }), {
+    center: i = !1,
+    classes: r = {},
+    className: s
+  } = a, u = ne(a, Ot), [p, d] = c.useState([]), h = c.useRef(0), v = c.useRef(null);
+  c.useEffect(() => {
+    v.current && (v.current(), v.current = null);
+  }, [p]);
+  const y = c.useRef(!1), R = yt(), b = c.useRef(null), C = c.useRef(null), j = c.useCallback((f) => {
+    const {
+      pulsate: E,
+      rippleX: g,
+      rippleY: x,
+      rippleSize: D,
+      cb: U
+    } = f;
+    d((T) => [...T, /* @__PURE__ */ _(jt, {
+      classes: {
+        ripple: M(r.ripple, z.ripple),
+        rippleVisible: M(r.rippleVisible, z.rippleVisible),
+        ripplePulsate: M(r.ripplePulsate, z.ripplePulsate),
+        child: M(r.child, z.child),
+        childLeaving: M(r.childLeaving, z.childLeaving),
+        childPulsate: M(r.childPulsate, z.childPulsate)
+      },
+      timeout: de,
+      pulsate: E,
+      rippleX: g,
+      rippleY: x,
+      rippleSize: D
+    }, h.current)]), h.current += 1, v.current = U;
+  }, [r]), k = c.useCallback((f = {}, E = {}, g = () => {
+  }) => {
+    const {
+      pulsate: x = !1,
+      center: D = i || E.pulsate,
+      fakeElement: U = !1
+      // For test purposes
+    } = E;
+    if ((f == null ? void 0 : f.type) === "mousedown" && y.current) {
+      y.current = !1;
+      return;
+    }
+    (f == null ? void 0 : f.type) === "touchstart" && (y.current = !0);
+    const T = U ? null : C.current, L = T ? T.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+    let $, S, F;
+    if (D || f === void 0 || f.clientX === 0 && f.clientY === 0 || !f.clientX && !f.touches)
+      $ = Math.round(L.width / 2), S = Math.round(L.height / 2);
+    else {
+      const {
+        clientX: W,
+        clientY: V
+      } = f.touches && f.touches.length > 0 ? f.touches[0] : f;
+      $ = Math.round(W - L.left), S = Math.round(V - L.top);
+    }
+    if (D)
+      F = Math.sqrt((2 * L.width ** 2 + L.height ** 2) / 3), F % 2 === 0 && (F += 1);
+    else {
+      const W = Math.max(Math.abs((T ? T.clientWidth : 0) - $), $) * 2 + 2, V = Math.max(Math.abs((T ? T.clientHeight : 0) - S), S) * 2 + 2;
+      F = Math.sqrt(W ** 2 + V ** 2);
+    }
+    f != null && f.touches ? b.current === null && (b.current = () => {
+      j({
+        pulsate: x,
+        rippleX: $,
+        rippleY: S,
+        rippleSize: F,
+        cb: g
+      });
+    }, R.start(Dt, () => {
+      b.current && (b.current(), b.current = null);
+    })) : j({
+      pulsate: x,
+      rippleX: $,
+      rippleY: S,
+      rippleSize: F,
+      cb: g
+    });
+  }, [i, j, R]), O = c.useCallback(() => {
+    k({}, {
+      pulsate: !0
+    });
+  }, [k]), N = c.useCallback((f, E) => {
+    if (R.clear(), (f == null ? void 0 : f.type) === "touchend" && b.current) {
+      b.current(), b.current = null, R.start(0, () => {
+        N(f, E);
+      });
+      return;
+    }
+    b.current = null, d((g) => g.length > 0 ? g.slice(1) : g), v.current = E;
+  }, [R]);
+  return c.useImperativeHandle(o, () => ({
+    pulsate: O,
+    start: k,
+    stop: N
+  }), [O, k, N]), /* @__PURE__ */ _(_t, m({
+    className: M(z.root, r.root, s),
+    ref: C
+  }, u, {
+    children: /* @__PURE__ */ _(ge, {
+      component: null,
+      exit: !0,
+      children: p
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" && (ke.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: n.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object,
+  /**
+   * @ignore
+   */
+  className: n.string
+});
+function Ut(e) {
+  return Ne("MuiButtonBase", e);
+}
+const Wt = fe("MuiButtonBase", ["root", "disabled", "focusVisible"]), wt = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"], Kt = (e) => {
+  const {
+    disabled: t,
+    focusVisible: o,
+    focusVisibleClassName: a,
+    classes: i
+  } = e, s = $e({
+    root: ["root", t && "disabled", o && "focusVisible"]
+  }, Ut, i);
+  return o && a && (s.root += ` ${a}`), s;
+}, At = A("button", {
+  name: "MuiButtonBase",
+  slot: "Root",
+  overridesResolver: (e, t) => t.root
+})({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  WebkitTapHighlightColor: "transparent",
+  backgroundColor: "transparent",
+  // Reset default value
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+  border: 0,
+  margin: 0,
+  // Remove the margin in Safari
+  borderRadius: 0,
+  padding: 0,
+  // Remove the padding in Firefox
+  cursor: "pointer",
+  userSelect: "none",
+  verticalAlign: "middle",
+  MozAppearance: "none",
+  // Reset
+  WebkitAppearance: "none",
+  // Reset
+  textDecoration: "none",
+  // So we take precedent over the style of a native <a /> element.
+  color: "inherit",
+  "&::-moz-focus-inner": {
+    borderStyle: "none"
+    // Remove Firefox dotted outline.
+  },
+  [`&.${Wt.disabled}`]: {
+    pointerEvents: "none",
+    // Disable link interactions
+    cursor: "default"
+  },
+  "@media print": {
+    colorAdjust: "exact"
+  }
+}), Oe = /* @__PURE__ */ c.forwardRef(function(t, o) {
+  const a = he({
+    props: t,
+    name: "MuiButtonBase"
+  }), {
+    action: i,
+    centerRipple: r = !1,
+    children: s,
+    className: u,
+    component: p = "button",
+    disabled: d = !1,
+    disableRipple: h = !1,
+    disableTouchRipple: v = !1,
+    focusRipple: y = !1,
+    LinkComponent: R = "a",
+    onBlur: b,
+    onClick: C,
+    onContextMenu: j,
+    onDragLeave: k,
+    onFocus: O,
+    onFocusVisible: N,
+    onKeyDown: f,
+    onKeyUp: E,
+    onMouseDown: g,
+    onMouseLeave: x,
+    onMouseUp: D,
+    onTouchEnd: U,
+    onTouchMove: T,
+    onTouchStart: L,
+    tabIndex: $ = 0,
+    TouchRippleProps: S,
+    touchRippleRef: F,
+    type: W
+  } = a, V = ne(a, wt), X = c.useRef(null), I = c.useRef(null), Fe = Ce(I, F), {
+    isFocusVisibleRef: ve,
+    onFocus: _e,
+    onBlur: je,
+    ref: Ue
+  } = It(), [w, H] = c.useState(!1);
+  d && w && H(!1), c.useImperativeHandle(i, () => ({
+    focusVisible: () => {
+      H(!0), X.current.focus();
+    }
+  }), []);
+  const [se, We] = c.useState(!1);
+  c.useEffect(() => {
+    We(!0);
+  }, []);
+  const ae = se && !h && !d;
+  c.useEffect(() => {
+    w && y && !h && se && I.current.pulsate();
+  }, [h, y, w, se]);
+  function P(l, xe, ot = v) {
+    return J((Re) => (xe && xe(Re), !ot && I.current && I.current[l](Re), !0));
+  }
+  const we = P("start", g), Ke = P("stop", j), Ae = P("stop", k), Xe = P("stop", D), Ye = P("stop", (l) => {
+    w && l.preventDefault(), x && x(l);
+  }), Ge = P("start", L), He = P("stop", U), qe = P("stop", T), Ze = P("stop", (l) => {
+    je(l), ve.current === !1 && H(!1), b && b(l);
+  }, !1), Je = J((l) => {
+    X.current || (X.current = l.currentTarget), _e(l), ve.current === !0 && (H(!0), N && N(l)), O && O(l);
+  }), le = () => {
+    const l = X.current;
+    return p && p !== "button" && !(l.tagName === "A" && l.href);
+  }, ce = c.useRef(!1), Qe = J((l) => {
+    y && !ce.current && w && I.current && l.key === " " && (ce.current = !0, I.current.stop(l, () => {
+      I.current.start(l);
+    })), l.target === l.currentTarget && le() && l.key === " " && l.preventDefault(), f && f(l), l.target === l.currentTarget && le() && l.key === "Enter" && !d && (l.preventDefault(), C && C(l));
+  }), et = J((l) => {
+    y && l.key === " " && I.current && w && !l.defaultPrevented && (ce.current = !1, I.current.stop(l, () => {
+      I.current.pulsate(l);
+    })), E && E(l), C && l.target === l.currentTarget && le() && l.key === " " && !l.defaultPrevented && C(l);
+  });
+  let q = p;
+  q === "button" && (V.href || V.to) && (q = R);
+  const Y = {};
+  q === "button" ? (Y.type = W === void 0 ? "button" : W, Y.disabled = d) : (!V.href && !V.to && (Y.role = "button"), d && (Y["aria-disabled"] = d));
+  const tt = Ce(o, Ue, X);
+  process.env.NODE_ENV !== "production" && c.useEffect(() => {
+    ae && !I.current && console.error(["MUI: The `component` prop provided to ButtonBase is invalid.", "Please make sure the children prop is rendered in this custom component."].join(`
+`));
+  }, [ae]);
+  const ye = m({}, a, {
+    centerRipple: r,
+    component: p,
+    disabled: d,
+    disableRipple: h,
+    disableTouchRipple: v,
+    focusRipple: y,
+    tabIndex: $,
+    focusVisible: w
+  }), nt = Kt(ye);
+  return /* @__PURE__ */ Ve(At, m({
+    as: q,
+    className: M(nt.root, u),
+    ownerState: ye,
+    onBlur: Ze,
+    onClick: C,
+    onContextMenu: Ke,
+    onFocus: Je,
+    onKeyDown: Qe,
+    onKeyUp: et,
+    onMouseDown: we,
+    onMouseLeave: Ye,
+    onMouseUp: Xe,
+    onDragLeave: Ae,
+    onTouchEnd: He,
+    onTouchMove: qe,
+    onTouchStart: Ge,
+    ref: tt,
+    tabIndex: d ? -1 : $,
+    type: W
+  }, Y, V, {
+    children: [s, ae ? (
+      /* TouchRipple is only needed client-side, x2 boost on the server. */
+      /* @__PURE__ */ _(ke, m({
+        ref: Fe,
+        center: r
+      }, S))
+    ) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (Oe.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: ut,
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: n.bool,
+  /**
+   * The content of the component.
+   */
+  children: n.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object,
+  /**
+   * @ignore
+   */
+  className: n.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: ft,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: n.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: n.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: n.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: n.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: n.string,
+  /**
+   * @ignore
+   */
+  href: n.any,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: n.elementType,
+  /**
+   * @ignore
+   */
+  onBlur: n.func,
+  /**
+   * @ignore
+   */
+  onClick: n.func,
+  /**
+   * @ignore
+   */
+  onContextMenu: n.func,
+  /**
+   * @ignore
+   */
+  onDragLeave: n.func,
+  /**
+   * @ignore
+   */
+  onFocus: n.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: n.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: n.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: n.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: n.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: n.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: n.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: n.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: n.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: n.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: n.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: n.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: n.oneOfType([n.func, n.shape({
+    current: n.shape({
+      pulsate: n.func.isRequired,
+      start: n.func.isRequired,
+      stop: n.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  type: n.oneOfType([n.oneOf(["button", "reset", "submit"]), n.string])
+});
+function Xt(e) {
+  return Ne("MuiButton", e);
+}
+const Q = fe("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), De = /* @__PURE__ */ c.createContext({});
+process.env.NODE_ENV !== "production" && (De.displayName = "ButtonGroupContext");
+const Le = /* @__PURE__ */ c.createContext(void 0);
+process.env.NODE_ENV !== "production" && (Le.displayName = "ButtonGroupButtonContext");
+const Yt = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], Gt = (e) => {
+  const {
+    color: t,
+    disableElevation: o,
+    fullWidth: a,
+    size: i,
+    variant: r,
+    classes: s
+  } = e, u = {
+    root: ["root", r, `${r}${B(t)}`, `size${B(i)}`, `${r}Size${B(i)}`, `color${B(t)}`, o && "disableElevation", a && "fullWidth"],
+    label: ["label"],
+    startIcon: ["icon", "startIcon", `iconSize${B(i)}`],
+    endIcon: ["icon", "endIcon", `iconSize${B(i)}`]
+  }, p = $e(u, Xt, s);
+  return m({}, s, p);
+}, Se = (e) => m({}, e.size === "small" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 18
+  }
+}, e.size === "medium" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 20
+  }
+}, e.size === "large" && {
+  "& > *:nth-of-type(1)": {
+    fontSize: 22
+  }
+}), Ht = A(Oe, {
+  shouldForwardProp: (e) => at(e) || e === "classes",
+  name: "MuiButton",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: o
+    } = e;
+    return [t.root, t[o.variant], t[`${o.variant}${B(o.color)}`], t[`size${B(o.size)}`], t[`${o.variant}Size${B(o.size)}`], o.color === "inherit" && t.colorInherit, o.disableElevation && t.disableElevation, o.fullWidth && t.fullWidth];
+  }
+})(({
+  theme: e,
+  ownerState: t
+}) => {
+  var o, a;
+  const i = e.palette.mode === "light" ? e.palette.grey[300] : e.palette.grey[800], r = e.palette.mode === "light" ? e.palette.grey.A100 : e.palette.grey[700];
+  return m({}, e.typography.button, {
+    minWidth: 64,
+    padding: "6px 16px",
+    borderRadius: (e.vars || e).shape.borderRadius,
+    transition: e.transitions.create(["background-color", "box-shadow", "border-color", "color"], {
+      duration: e.transitions.duration.short
+    }),
+    "&:hover": m({
+      textDecoration: "none",
+      backgroundColor: e.vars ? `rgba(${e.vars.palette.text.primaryChannel} / ${e.vars.palette.action.hoverOpacity})` : Z(e.palette.text.primary, e.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, t.variant === "text" && t.color !== "inherit" && {
+      backgroundColor: e.vars ? `rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})` : Z(e.palette[t.color].main, e.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, t.variant === "outlined" && t.color !== "inherit" && {
+      border: `1px solid ${(e.vars || e).palette[t.color].main}`,
+      backgroundColor: e.vars ? `rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})` : Z(e.palette[t.color].main, e.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: "transparent"
+      }
+    }, t.variant === "contained" && {
+      backgroundColor: e.vars ? e.vars.palette.Button.inheritContainedHoverBg : r,
+      boxShadow: (e.vars || e).shadows[4],
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        boxShadow: (e.vars || e).shadows[2],
+        backgroundColor: (e.vars || e).palette.grey[300]
+      }
+    }, t.variant === "contained" && t.color !== "inherit" && {
+      backgroundColor: (e.vars || e).palette[t.color].dark,
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: (e.vars || e).palette[t.color].main
+      }
+    }),
+    "&:active": m({}, t.variant === "contained" && {
+      boxShadow: (e.vars || e).shadows[8]
+    }),
+    [`&.${Q.focusVisible}`]: m({}, t.variant === "contained" && {
+      boxShadow: (e.vars || e).shadows[6]
+    }),
+    [`&.${Q.disabled}`]: m({
+      color: (e.vars || e).palette.action.disabled
+    }, t.variant === "outlined" && {
+      border: `1px solid ${(e.vars || e).palette.action.disabledBackground}`
+    }, t.variant === "contained" && {
+      color: (e.vars || e).palette.action.disabled,
+      boxShadow: (e.vars || e).shadows[0],
+      backgroundColor: (e.vars || e).palette.action.disabledBackground
+    })
+  }, t.variant === "text" && {
+    padding: "6px 8px"
+  }, t.variant === "text" && t.color !== "inherit" && {
+    color: (e.vars || e).palette[t.color].main
+  }, t.variant === "outlined" && {
+    padding: "5px 15px",
+    border: "1px solid currentColor"
+  }, t.variant === "outlined" && t.color !== "inherit" && {
+    color: (e.vars || e).palette[t.color].main,
+    border: e.vars ? `1px solid rgba(${e.vars.palette[t.color].mainChannel} / 0.5)` : `1px solid ${Z(e.palette[t.color].main, 0.5)}`
+  }, t.variant === "contained" && {
+    color: e.vars ? (
+      // this is safe because grey does not change between default light/dark mode
+      e.vars.palette.text.primary
+    ) : (o = (a = e.palette).getContrastText) == null ? void 0 : o.call(a, e.palette.grey[300]),
+    backgroundColor: e.vars ? e.vars.palette.Button.inheritContainedBg : i,
+    boxShadow: (e.vars || e).shadows[2]
+  }, t.variant === "contained" && t.color !== "inherit" && {
+    color: (e.vars || e).palette[t.color].contrastText,
+    backgroundColor: (e.vars || e).palette[t.color].main
+  }, t.color === "inherit" && {
+    color: "inherit",
+    borderColor: "currentColor"
+  }, t.size === "small" && t.variant === "text" && {
+    padding: "4px 5px",
+    fontSize: e.typography.pxToRem(13)
+  }, t.size === "large" && t.variant === "text" && {
+    padding: "8px 11px",
+    fontSize: e.typography.pxToRem(15)
+  }, t.size === "small" && t.variant === "outlined" && {
+    padding: "3px 9px",
+    fontSize: e.typography.pxToRem(13)
+  }, t.size === "large" && t.variant === "outlined" && {
+    padding: "7px 21px",
+    fontSize: e.typography.pxToRem(15)
+  }, t.size === "small" && t.variant === "contained" && {
+    padding: "4px 10px",
+    fontSize: e.typography.pxToRem(13)
+  }, t.size === "large" && t.variant === "contained" && {
+    padding: "8px 22px",
+    fontSize: e.typography.pxToRem(15)
+  }, t.fullWidth && {
+    width: "100%"
+  });
+}, ({
+  ownerState: e
+}) => e.disableElevation && {
+  boxShadow: "none",
+  "&:hover": {
+    boxShadow: "none"
+  },
+  [`&.${Q.focusVisible}`]: {
+    boxShadow: "none"
+  },
+  "&:active": {
+    boxShadow: "none"
+  },
+  [`&.${Q.disabled}`]: {
+    boxShadow: "none"
+  }
+}), qt = A("span", {
+  name: "MuiButton",
+  slot: "StartIcon",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: o
+    } = e;
+    return [t.startIcon, t[`iconSize${B(o.size)}`]];
+  }
+})(({
+  ownerState: e
+}) => m({
+  display: "inherit",
+  marginRight: 8,
+  marginLeft: -4
+}, e.size === "small" && {
+  marginLeft: -2
+}, Se(e))), Zt = A("span", {
+  name: "MuiButton",
+  slot: "EndIcon",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: o
+    } = e;
+    return [t.endIcon, t[`iconSize${B(o.size)}`]];
+  }
+})(({
+  ownerState: e
+}) => m({
+  display: "inherit",
+  marginRight: -4,
+  marginLeft: 8
+}, e.size === "small" && {
+  marginRight: -2
+}, Se(e))), Jt = /* @__PURE__ */ c.forwardRef(function(t, o) {
+  const a = c.useContext(De), i = c.useContext(Le), r = st(a, t), s = he({
+    props: r,
+    name: "MuiButton"
+  }), {
+    children: u,
+    color: p = "primary",
+    component: d = "button",
+    className: h,
+    disabled: v = !1,
+    disableElevation: y = !1,
+    disableFocusRipple: R = !1,
+    endIcon: b,
+    focusVisibleClassName: C,
+    fullWidth: j = !1,
+    size: k = "medium",
+    startIcon: O,
+    type: N,
+    variant: f = "text"
+  } = s, E = ne(s, Yt), g = m({}, s, {
+    color: p,
+    component: d,
+    disabled: v,
+    disableElevation: y,
+    disableFocusRipple: R,
+    fullWidth: j,
+    size: k,
+    type: N,
+    variant: f
+  }), x = Gt(g), D = O && /* @__PURE__ */ _(qt, {
+    className: x.startIcon,
+    ownerState: g,
+    children: O
+  }), U = b && /* @__PURE__ */ _(Zt, {
+    className: x.endIcon,
+    ownerState: g,
+    children: b
+  }), T = i || "";
+  return /* @__PURE__ */ Ve(Ht, m({
+    ownerState: g,
+    className: M(a.className, x.root, h, T),
+    component: d,
+    disabled: v,
+    focusRipple: !R,
+    focusVisibleClassName: M(x.focusVisible, C),
+    ref: o,
+    type: N
+  }, E, {
+    classes: x,
+    children: [D, u, U]
+  }));
+});
+process.env.NODE_ENV !== "production" && (Jt.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: n.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object,
+  /**
+   * @ignore
+   */
+  className: n.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).
+   * @default 'primary'
+   */
+  color: n.oneOfType([n.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), n.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: n.elementType,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: n.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: n.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: n.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: n.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: n.node,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: n.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: n.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: n.string,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: n.oneOfType([n.oneOf(["small", "medium", "large"]), n.string]),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: n.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  /**
+   * @ignore
+   */
+  type: n.oneOfType([n.oneOf(["button", "reset", "submit"]), n.string]),
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: n.oneOfType([n.oneOf(["contained", "outlined", "text"]), n.string])
+});
+export {
+  Jt as B,
+  Te as T,
+  Bt as _,
+  bt as a,
+  J as b,
+  yt as c,
+  Oe as d,
+  ft as e,
+  oe as f,
+  It as g,
+  ut as r,
+  ht as s,
+  Ce as u
+};