@hybridcore/ui 1.0.2 → 1.1.2

package/dist/ButtonBase-BYmh3G5j.js

@@ -0,0 +1,967 @@
+import { a as Y, _ as ae } from "./extends-C3382pL0.js";
+import * as l from "react";
+import X, { Children as We, isValidElement as G, cloneElement as Z } from "react";
+import { P as n } from "./createTheme-agWfFD64.js";
+import { b as He, c as v, g as ve, u as xe, a as Ge } from "./chainPropTypes-DtBfUj5o.js";
+import { s as le, g as Ze } from "./styled-Iq9jsO4F.js";
+import { jsx as $, jsxs as Je } from "react/jsx-runtime";
+import { _ as Qe, a as et } from "./assertThisInitialized-BUtkG-md.js";
+import { keyframes as ce } from "@emotion/react";
+const tt = typeof window < "u" ? l.useLayoutEffect : l.useEffect;
+function nt(e) {
+  const {
+    prototype: t = {}
+  } = e;
+  return !!t.isReactComponent;
+}
+function ot(e, t, o, a, r) {
+  const i = e[t], s = r || t;
+  if (i == 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 c;
+  return typeof i == "function" && !nt(i) && (c = "Did you accidentally provide a plain function component instead?"), c !== void 0 ? new Error(`Invalid ${a} \`${s}\` supplied to \`${o}\`. Expected an element type that can hold a ref. ${c} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
+}
+const rt = He(n.elementType, ot), it = n.oneOfType([n.func, n.object]);
+function st(e, t) {
+  typeof e == "function" ? e(t) : e && (e.current = t);
+}
+function H(e) {
+  const t = l.useRef(e);
+  return tt(() => {
+    t.current = e;
+  }), l.useRef((...o) => (
+    // @ts-expect-error hide `this`
+    (0, t.current)(...o)
+  )).current;
+}
+function ye(...e) {
+  return l.useMemo(() => e.every((t) => t == null) ? null : (t) => {
+    e.forEach((o) => {
+      st(o, t);
+    });
+  }, e);
+}
+const ge = {};
+function ut(e, t) {
+  const o = l.useRef(ge);
+  return o.current === ge && (o.current = e(t)), o;
+}
+const at = [];
+function lt(e) {
+  l.useEffect(e, at);
+}
+class J {
+  constructor() {
+    this.currentId = null, this.clear = () => {
+      this.currentId !== null && (clearTimeout(this.currentId), this.currentId = null);
+    }, this.disposeEffect = () => this.clear;
+  }
+  static create() {
+    return new J();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(t, o) {
+    this.clear(), this.currentId = setTimeout(() => {
+      this.currentId = null, o();
+    }, t);
+  }
+}
+function ct() {
+  const e = ut(J.create).current;
+  return lt(e.disposeEffect), e;
+}
+let Q = !0, se = !1;
+const pt = new J(), ft = {
+  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 dt(e) {
+  const {
+    type: t,
+    tagName: o
+  } = e;
+  return !!(o === "INPUT" && ft[t] && !e.readOnly || o === "TEXTAREA" && !e.readOnly || e.isContentEditable);
+}
+function ht(e) {
+  e.metaKey || e.altKey || e.ctrlKey || (Q = !0);
+}
+function ie() {
+  Q = !1;
+}
+function mt() {
+  this.visibilityState === "hidden" && se && (Q = !0);
+}
+function bt(e) {
+  e.addEventListener("keydown", ht, !0), e.addEventListener("mousedown", ie, !0), e.addEventListener("pointerdown", ie, !0), e.addEventListener("touchstart", ie, !0), e.addEventListener("visibilitychange", mt, !0);
+}
+function yt(e) {
+  const {
+    target: t
+  } = e;
+  try {
+    return t.matches(":focus-visible");
+  } catch {
+  }
+  return Q || dt(t);
+}
+function gt() {
+  const e = l.useCallback((r) => {
+    r != null && bt(r.ownerDocument);
+  }, []), t = l.useRef(!1);
+  function o() {
+    return t.current ? (se = !0, pt.start(100, () => {
+      se = !1;
+    }), t.current = !1, !0) : !1;
+  }
+  function a(r) {
+    return yt(r) ? (t.current = !0, !0) : !1;
+  }
+  return {
+    isFocusVisibleRef: t,
+    onFocus: a,
+    onBlur: o,
+    ref: e
+  };
+}
+function Rt(e, t) {
+  e.prototype = Object.create(t.prototype), e.prototype.constructor = e, Qe(e, t);
+}
+const Re = X.createContext(null);
+function pe(e, t) {
+  var o = function(i) {
+    return t && G(i) ? t(i) : i;
+  }, a = /* @__PURE__ */ Object.create(null);
+  return e && We.map(e, function(r) {
+    return r;
+  }).forEach(function(r) {
+    a[r.key] = o(r);
+  }), a;
+}
+function Tt(e, t) {
+  e = e || {}, t = t || {};
+  function o(h) {
+    return h in t ? t[h] : e[h];
+  }
+  var a = /* @__PURE__ */ Object.create(null), r = [];
+  for (var i in e)
+    i in t ? r.length && (a[i] = r, r = []) : r.push(i);
+  var s, c = {};
+  for (var p in t) {
+    if (a[p])
+      for (s = 0; s < a[p].length; s++) {
+        var f = a[p][s];
+        c[a[p][s]] = o(f);
+      }
+    c[p] = o(p);
+  }
+  for (s = 0; s < r.length; s++)
+    c[r[s]] = o(r[s]);
+  return c;
+}
+function k(e, t, o) {
+  return o[t] != null ? o[t] : e.props[t];
+}
+function Et(e, t) {
+  return pe(e.children, function(o) {
+    return Z(o, {
+      onExited: t.bind(null, o),
+      in: !0,
+      appear: k(o, "appear", e),
+      enter: k(o, "enter", e),
+      exit: k(o, "exit", e)
+    });
+  });
+}
+function Mt(e, t, o) {
+  var a = pe(e.children), r = Tt(t, a);
+  return Object.keys(r).forEach(function(i) {
+    var s = r[i];
+    if (G(s)) {
+      var c = i in t, p = i in a, f = t[i], h = G(f) && !f.props.in;
+      p && (!c || h) ? r[i] = Z(s, {
+        onExited: o.bind(null, s),
+        in: !0,
+        exit: k(s, "exit", e),
+        enter: k(s, "enter", e)
+      }) : !p && c && !h ? r[i] = Z(s, {
+        in: !1
+      }) : p && c && G(f) && (r[i] = Z(s, {
+        onExited: o.bind(null, s),
+        in: f.props.in,
+        exit: k(s, "exit", e),
+        enter: k(s, "enter", e)
+      }));
+    }
+  }), r;
+}
+var Ct = Object.values || function(e) {
+  return Object.keys(e).map(function(t) {
+    return e[t];
+  });
+}, vt = {
+  component: "div",
+  childFactory: function(t) {
+    return t;
+  }
+}, fe = /* @__PURE__ */ function(e) {
+  Rt(t, e);
+  function t(a, r) {
+    var i;
+    i = e.call(this, a, r) || this;
+    var s = i.handleExited.bind(et(i));
+    return i.state = {
+      contextValue: {
+        isMounting: !0
+      },
+      handleExited: s,
+      firstRender: !0
+    }, i;
+  }
+  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(r, i) {
+    var s = i.children, c = i.handleExited, p = i.firstRender;
+    return {
+      children: p ? Et(r, c) : Mt(r, s, c),
+      firstRender: !1
+    };
+  }, o.handleExited = function(r, i) {
+    var s = pe(this.props.children);
+    r.key in s || (r.props.onExited && r.props.onExited(i), this.mounted && this.setState(function(c) {
+      var p = Y({}, c.children);
+      return delete p[r.key], {
+        children: p
+      };
+    }));
+  }, o.render = function() {
+    var r = this.props, i = r.component, s = r.childFactory, c = ae(r, ["component", "childFactory"]), p = this.state.contextValue, f = Ct(this.state.children).map(s);
+    return delete c.appear, delete c.enter, delete c.exit, i === null ? /* @__PURE__ */ X.createElement(Re.Provider, {
+      value: p
+    }, f) : /* @__PURE__ */ X.createElement(Re.Provider, {
+      value: p
+    }, /* @__PURE__ */ X.createElement(i, c, f));
+  }, t;
+}(X.Component);
+fe.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
+} : {};
+fe.defaultProps = vt;
+function Ve(e) {
+  const {
+    className: t,
+    classes: o,
+    pulsate: a = !1,
+    rippleX: r,
+    rippleY: i,
+    rippleSize: s,
+    in: c,
+    onExited: p,
+    timeout: f
+  } = e, [h, R] = l.useState(!1), y = v(t, o.ripple, o.rippleVisible, a && o.ripplePulsate), x = {
+    width: s,
+    height: s,
+    top: -(s / 2) + i,
+    left: -(s / 2) + r
+  }, m = v(o.child, h && o.childLeaving, a && o.childPulsate);
+  return !c && !h && R(!0), l.useEffect(() => {
+    if (!c && p != null) {
+      const T = setTimeout(p, f);
+      return () => {
+        clearTimeout(T);
+      };
+    }
+  }, [p, c, f]), /* @__PURE__ */ $("span", {
+    className: y,
+    style: x,
+    children: /* @__PURE__ */ $("span", {
+      className: m
+    })
+  });
+}
+process.env.NODE_ENV !== "production" && (Ve.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 b = ve("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), xt = ["center", "classes", "className"];
+let ee = (e) => e, Te, Ee, Me, Ce;
+const ue = 550, Vt = 80, wt = ce(Te || (Te = ee`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`)), Pt = ce(Ee || (Ee = ee`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`)), Dt = ce(Me || (Me = ee`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`)), Nt = le("span", {
+  name: "MuiTouchRipple",
+  slot: "Root"
+})({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: "inherit"
+}), Lt = le(Ve, {
+  name: "MuiTouchRipple",
+  slot: "Ripple"
+})(Ce || (Ce = ee`
+  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;
+  }
+`), b.rippleVisible, wt, ue, ({
+  theme: e
+}) => e.transitions.easing.easeInOut, b.ripplePulsate, ({
+  theme: e
+}) => e.transitions.duration.shorter, b.child, b.childLeaving, Pt, ue, ({
+  theme: e
+}) => e.transitions.easing.easeInOut, b.childPulsate, Dt, ({
+  theme: e
+}) => e.transitions.easing.easeInOut), we = /* @__PURE__ */ l.forwardRef(function(t, o) {
+  const a = xe({
+    props: t,
+    name: "MuiTouchRipple"
+  }), {
+    center: r = !1,
+    classes: i = {},
+    className: s
+  } = a, c = ae(a, xt), [p, f] = l.useState([]), h = l.useRef(0), R = l.useRef(null);
+  l.useEffect(() => {
+    R.current && (R.current(), R.current = null);
+  }, [p]);
+  const y = l.useRef(!1), x = ct(), m = l.useRef(null), T = l.useRef(null), U = l.useCallback((d) => {
+    const {
+      pulsate: E,
+      rippleX: M,
+      rippleY: B,
+      rippleSize: _,
+      cb: K
+    } = d;
+    f((C) => [...C, /* @__PURE__ */ $(Lt, {
+      classes: {
+        ripple: v(i.ripple, b.ripple),
+        rippleVisible: v(i.rippleVisible, b.rippleVisible),
+        ripplePulsate: v(i.ripplePulsate, b.ripplePulsate),
+        child: v(i.child, b.child),
+        childLeaving: v(i.childLeaving, b.childLeaving),
+        childPulsate: v(i.childPulsate, b.childPulsate)
+      },
+      timeout: ue,
+      pulsate: E,
+      rippleX: M,
+      rippleY: B,
+      rippleSize: _
+    }, h.current)]), h.current += 1, R.current = K;
+  }, [i]), S = l.useCallback((d = {}, E = {}, M = () => {
+  }) => {
+    const {
+      pulsate: B = !1,
+      center: _ = r || E.pulsate,
+      fakeElement: K = !1
+      // For test purposes
+    } = E;
+    if ((d == null ? void 0 : d.type) === "mousedown" && y.current) {
+      y.current = !1;
+      return;
+    }
+    (d == null ? void 0 : d.type) === "touchstart" && (y.current = !0);
+    const C = K ? null : T.current, D = C ? C.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+    let V, N, L;
+    if (_ || d === void 0 || d.clientX === 0 && d.clientY === 0 || !d.clientX && !d.touches)
+      V = Math.round(D.width / 2), N = Math.round(D.height / 2);
+    else {
+      const {
+        clientX: I,
+        clientY: w
+      } = d.touches && d.touches.length > 0 ? d.touches[0] : d;
+      V = Math.round(I - D.left), N = Math.round(w - D.top);
+    }
+    if (_)
+      L = Math.sqrt((2 * D.width ** 2 + D.height ** 2) / 3), L % 2 === 0 && (L += 1);
+    else {
+      const I = Math.max(Math.abs((C ? C.clientWidth : 0) - V), V) * 2 + 2, w = Math.max(Math.abs((C ? C.clientHeight : 0) - N), N) * 2 + 2;
+      L = Math.sqrt(I ** 2 + w ** 2);
+    }
+    d != null && d.touches ? m.current === null && (m.current = () => {
+      U({
+        pulsate: B,
+        rippleX: V,
+        rippleY: N,
+        rippleSize: L,
+        cb: M
+      });
+    }, x.start(Vt, () => {
+      m.current && (m.current(), m.current = null);
+    })) : U({
+      pulsate: B,
+      rippleX: V,
+      rippleY: N,
+      rippleSize: L,
+      cb: M
+    });
+  }, [r, U, x]), j = l.useCallback(() => {
+    S({}, {
+      pulsate: !0
+    });
+  }, [S]), O = l.useCallback((d, E) => {
+    if (x.clear(), (d == null ? void 0 : d.type) === "touchend" && m.current) {
+      m.current(), m.current = null, x.start(0, () => {
+        O(d, E);
+      });
+      return;
+    }
+    m.current = null, f((M) => M.length > 0 ? M.slice(1) : M), R.current = E;
+  }, [x]);
+  return l.useImperativeHandle(o, () => ({
+    pulsate: j,
+    start: S,
+    stop: O
+  }), [j, S, O]), /* @__PURE__ */ $(Nt, Y({
+    className: v(b.root, i.root, s),
+    ref: T
+  }, c, {
+    children: /* @__PURE__ */ $(fe, {
+      component: null,
+      exit: !0,
+      children: p
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" && (we.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 Bt(e) {
+  return Ze("MuiButtonBase", e);
+}
+const It = ve("MuiButtonBase", ["root", "disabled", "focusVisible"]), Ft = ["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: r
+  } = e, s = Ge({
+    root: ["root", t && "disabled", o && "focusVisible"]
+  }, Bt, r);
+  return o && a && (s.root += ` ${a}`), s;
+}, St = le("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.
+  },
+  [`&.${It.disabled}`]: {
+    pointerEvents: "none",
+    // Disable link interactions
+    cursor: "default"
+  },
+  "@media print": {
+    colorAdjust: "exact"
+  }
+}), Ot = /* @__PURE__ */ l.forwardRef(function(t, o) {
+  const a = xe({
+    props: t,
+    name: "MuiButtonBase"
+  }), {
+    action: r,
+    centerRipple: i = !1,
+    children: s,
+    className: c,
+    component: p = "button",
+    disabled: f = !1,
+    disableRipple: h = !1,
+    disableTouchRipple: R = !1,
+    focusRipple: y = !1,
+    LinkComponent: x = "a",
+    onBlur: m,
+    onClick: T,
+    onContextMenu: U,
+    onDragLeave: S,
+    onFocus: j,
+    onFocusVisible: O,
+    onKeyDown: d,
+    onKeyUp: E,
+    onMouseDown: M,
+    onMouseLeave: B,
+    onMouseUp: _,
+    onTouchEnd: K,
+    onTouchMove: C,
+    onTouchStart: D,
+    tabIndex: V = 0,
+    TouchRippleProps: N,
+    touchRippleRef: L,
+    type: I
+  } = a, w = ae(a, Ft), z = l.useRef(null), g = l.useRef(null), Pe = ye(g, L), {
+    isFocusVisibleRef: de,
+    onFocus: De,
+    onBlur: Ne,
+    ref: Le
+  } = gt(), [F, q] = l.useState(!1);
+  f && F && q(!1), l.useImperativeHandle(r, () => ({
+    focusVisible: () => {
+      q(!0), z.current.focus();
+    }
+  }), []);
+  const [te, Be] = l.useState(!1);
+  l.useEffect(() => {
+    Be(!0);
+  }, []);
+  const ne = te && !h && !f;
+  l.useEffect(() => {
+    F && y && !h && te && g.current.pulsate();
+  }, [h, y, F, te]);
+  function P(u, me, qe = R) {
+    return H((be) => (me && me(be), !qe && g.current && g.current[u](be), !0));
+  }
+  const Ie = P("start", M), Fe = P("stop", U), ke = P("stop", S), Se = P("stop", _), Oe = P("stop", (u) => {
+    F && u.preventDefault(), B && B(u);
+  }), _e = P("start", D), $e = P("stop", K), Ue = P("stop", C), je = P("stop", (u) => {
+    Ne(u), de.current === !1 && q(!1), m && m(u);
+  }, !1), Ke = H((u) => {
+    z.current || (z.current = u.currentTarget), De(u), de.current === !0 && (q(!0), O && O(u)), j && j(u);
+  }), oe = () => {
+    const u = z.current;
+    return p && p !== "button" && !(u.tagName === "A" && u.href);
+  }, re = l.useRef(!1), ze = H((u) => {
+    y && !re.current && F && g.current && u.key === " " && (re.current = !0, g.current.stop(u, () => {
+      g.current.start(u);
+    })), u.target === u.currentTarget && oe() && u.key === " " && u.preventDefault(), d && d(u), u.target === u.currentTarget && oe() && u.key === "Enter" && !f && (u.preventDefault(), T && T(u));
+  }), Ae = H((u) => {
+    y && u.key === " " && g.current && F && !u.defaultPrevented && (re.current = !1, g.current.stop(u, () => {
+      g.current.pulsate(u);
+    })), E && E(u), T && u.target === u.currentTarget && oe() && u.key === " " && !u.defaultPrevented && T(u);
+  });
+  let W = p;
+  W === "button" && (w.href || w.to) && (W = x);
+  const A = {};
+  W === "button" ? (A.type = I === void 0 ? "button" : I, A.disabled = f) : (!w.href && !w.to && (A.role = "button"), f && (A["aria-disabled"] = f));
+  const Xe = ye(o, Le, z);
+  process.env.NODE_ENV !== "production" && l.useEffect(() => {
+    ne && !g.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(`
+`));
+  }, [ne]);
+  const he = Y({}, a, {
+    centerRipple: i,
+    component: p,
+    disabled: f,
+    disableRipple: h,
+    disableTouchRipple: R,
+    focusRipple: y,
+    tabIndex: V,
+    focusVisible: F
+  }), Ye = kt(he);
+  return /* @__PURE__ */ Je(St, Y({
+    as: W,
+    className: v(Ye.root, c),
+    ownerState: he,
+    onBlur: je,
+    onClick: T,
+    onContextMenu: Fe,
+    onFocus: Ke,
+    onKeyDown: ze,
+    onKeyUp: Ae,
+    onMouseDown: Ie,
+    onMouseLeave: Oe,
+    onMouseUp: Se,
+    onDragLeave: ke,
+    onTouchEnd: $e,
+    onTouchMove: Ue,
+    onTouchStart: _e,
+    ref: Xe,
+    tabIndex: f ? -1 : V,
+    type: I
+  }, A, w, {
+    children: [s, ne ? (
+      /* TouchRipple is only needed client-side, x2 boost on the server. */
+      /* @__PURE__ */ $(we, Y({
+        ref: Pe,
+        center: i
+      }, N))
+    ) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (Ot.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: it,
+  /**
+   * 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: rt,
+  /**
+   * 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])
+});
+export {
+  Ot as B,
+  Re as T,
+  Rt as _,
+  ye as a,
+  H as b,
+  gt as c,
+  ct as d,
+  rt as e,
+  it as r,
+  st as s,
+  tt as u
+};