@hybridcore/ui 1.6.13 → 1.6.14

package/dist/ButtonBase-DObmf4Q_.js

@@ -0,0 +1,886 @@
+import { a as X, _ as ae } from "./extends-C3382pL0.js";
+import * as c from "react";
+import W, { Children as Ye, isValidElement as G, cloneElement as J } from "react";
+import { P as t } from "./index-CblbdqjE.js";
+import { c as v } from "./clsx-OuTLNxxd.js";
+import { g as Ee, s as ue, u as Ce, a as qe, c as We } from "./generateUtilityClasses-Cc-owZ4J.js";
+import { keyframes as le } from "@mui/system";
+import { jsx as U, jsxs as He } from "react/jsx-runtime";
+import { T as Ge, _ as Je, d as be, e as Qe, u as ge, b as H, r as Ze, f as et } from "./TransitionGroupContext-Ja2CgIob.js";
+import { _ as tt } from "./assertThisInitialized-C1dAyb4j.js";
+let Q = !0, ie = !1;
+const nt = new Ge(), ot = {
+  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 rt(e) {
+  const {
+    type: n,
+    tagName: i
+  } = e;
+  return !!(i === "INPUT" && ot[n] && !e.readOnly || i === "TEXTAREA" && !e.readOnly || e.isContentEditable);
+}
+function it(e) {
+  e.metaKey || e.altKey || e.ctrlKey || (Q = !0);
+}
+function re() {
+  Q = !1;
+}
+function st() {
+  this.visibilityState === "hidden" && ie && (Q = !0);
+}
+function at(e) {
+  e.addEventListener("keydown", it, !0), e.addEventListener("mousedown", re, !0), e.addEventListener("pointerdown", re, !0), e.addEventListener("touchstart", re, !0), e.addEventListener("visibilitychange", st, !0);
+}
+function ut(e) {
+  const {
+    target: n
+  } = e;
+  try {
+    return n.matches(":focus-visible");
+  } catch {
+  }
+  return Q || rt(n);
+}
+function lt() {
+  const e = c.useCallback((o) => {
+    o != null && at(o.ownerDocument);
+  }, []), n = c.useRef(!1);
+  function i() {
+    return n.current ? (ie = !0, nt.start(100, () => {
+      ie = !1;
+    }), n.current = !1, !0) : !1;
+  }
+  function u(o) {
+    return ut(o) ? (n.current = !0, !0) : !1;
+  }
+  return {
+    isFocusVisibleRef: n,
+    onFocus: u,
+    onBlur: i,
+    ref: e
+  };
+}
+function ce(e, n) {
+  var i = function(r) {
+    return n && G(r) ? n(r) : r;
+  }, u = /* @__PURE__ */ Object.create(null);
+  return e && Ye.map(e, function(o) {
+    return o;
+  }).forEach(function(o) {
+    u[o.key] = i(o);
+  }), u;
+}
+function ct(e, n) {
+  e = e || {}, n = n || {};
+  function i(h) {
+    return h in n ? n[h] : e[h];
+  }
+  var u = /* @__PURE__ */ Object.create(null), o = [];
+  for (var r in e)
+    r in n ? o.length && (u[r] = o, o = []) : o.push(r);
+  var s, p = {};
+  for (var l in n) {
+    if (u[l])
+      for (s = 0; s < u[l].length; s++) {
+        var f = u[l][s];
+        p[u[l][s]] = i(f);
+      }
+    p[l] = i(l);
+  }
+  for (s = 0; s < o.length; s++)
+    p[o[s]] = i(o[s]);
+  return p;
+}
+function S(e, n, i) {
+  return i[n] != null ? i[n] : e.props[n];
+}
+function pt(e, n) {
+  return ce(e.children, function(i) {
+    return J(i, {
+      onExited: n.bind(null, i),
+      in: !0,
+      appear: S(i, "appear", e),
+      enter: S(i, "enter", e),
+      exit: S(i, "exit", e)
+    });
+  });
+}
+function ft(e, n, i) {
+  var u = ce(e.children), o = ct(n, u);
+  return Object.keys(o).forEach(function(r) {
+    var s = o[r];
+    if (G(s)) {
+      var p = r in n, l = r in u, f = n[r], h = G(f) && !f.props.in;
+      l && (!p || h) ? o[r] = J(s, {
+        onExited: i.bind(null, s),
+        in: !0,
+        exit: S(s, "exit", e),
+        enter: S(s, "enter", e)
+      }) : !l && p && !h ? o[r] = J(s, {
+        in: !1
+      }) : l && p && G(f) && (o[r] = J(s, {
+        onExited: i.bind(null, s),
+        in: f.props.in,
+        exit: S(s, "exit", e),
+        enter: S(s, "enter", e)
+      }));
+    }
+  }), o;
+}
+var dt = Object.values || function(e) {
+  return Object.keys(e).map(function(n) {
+    return e[n];
+  });
+}, ht = {
+  component: "div",
+  childFactory: function(n) {
+    return n;
+  }
+}, pe = /* @__PURE__ */ function(e) {
+  Je(n, e);
+  function n(u, o) {
+    var r;
+    r = e.call(this, u, o) || this;
+    var s = r.handleExited.bind(tt(r));
+    return r.state = {
+      contextValue: {
+        isMounting: !0
+      },
+      handleExited: s,
+      firstRender: !0
+    }, r;
+  }
+  var i = n.prototype;
+  return i.componentDidMount = function() {
+    this.mounted = !0, this.setState({
+      contextValue: {
+        isMounting: !1
+      }
+    });
+  }, i.componentWillUnmount = function() {
+    this.mounted = !1;
+  }, n.getDerivedStateFromProps = function(o, r) {
+    var s = r.children, p = r.handleExited, l = r.firstRender;
+    return {
+      children: l ? pt(o, p) : ft(o, s, p),
+      firstRender: !1
+    };
+  }, i.handleExited = function(o, r) {
+    var s = ce(this.props.children);
+    o.key in s || (o.props.onExited && o.props.onExited(r), this.mounted && this.setState(function(p) {
+      var l = X({}, p.children);
+      return delete l[o.key], {
+        children: l
+      };
+    }));
+  }, i.render = function() {
+    var o = this.props, r = o.component, s = o.childFactory, p = ae(o, ["component", "childFactory"]), l = this.state.contextValue, f = dt(this.state.children).map(s);
+    return delete p.appear, delete p.enter, delete p.exit, r === null ? /* @__PURE__ */ W.createElement(be.Provider, {
+      value: l
+    }, f) : /* @__PURE__ */ W.createElement(be.Provider, {
+      value: l
+    }, /* @__PURE__ */ W.createElement(r, p, f));
+  }, n;
+}(W.Component);
+pe.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: t.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: t.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: t.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: t.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: t.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: t.func
+} : {};
+pe.defaultProps = ht;
+function ve(e) {
+  const {
+    className: n,
+    classes: i,
+    pulsate: u = !1,
+    rippleX: o,
+    rippleY: r,
+    rippleSize: s,
+    in: p,
+    onExited: l,
+    timeout: f
+  } = e, [h, R] = c.useState(!1), g = v(n, i.ripple, i.rippleVisible, u && i.ripplePulsate), x = {
+    width: s,
+    height: s,
+    top: -(s / 2) + r,
+    left: -(s / 2) + o
+  }, m = v(i.child, h && i.childLeaving, u && i.childPulsate);
+  return !p && !h && R(!0), c.useEffect(() => {
+    if (!p && l != null) {
+      const T = setTimeout(l, f);
+      return () => {
+        clearTimeout(T);
+      };
+    }
+  }, [l, p, f]), /* @__PURE__ */ U("span", {
+    className: g,
+    style: x,
+    children: /* @__PURE__ */ U("span", {
+      className: m
+    })
+  });
+}
+process.env.NODE_ENV !== "production" && (ve.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object.isRequired,
+  className: t.string,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  in: t.bool,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  onExited: t.func,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: t.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: t.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: t.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: t.number,
+  /**
+   * exit delay
+   */
+  timeout: t.number.isRequired
+});
+const b = Ee("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), mt = ["center", "classes", "className"];
+let Z = (e) => e, ye, Re, Te, Me;
+const se = 550, bt = 80, gt = le(ye || (ye = Z`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`)), yt = le(Re || (Re = Z`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`)), Rt = le(Te || (Te = Z`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`)), Tt = ue("span", {
+  name: "MuiTouchRipple",
+  slot: "Root"
+})({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: "inherit"
+}), Mt = ue(ve, {
+  name: "MuiTouchRipple",
+  slot: "Ripple"
+})(Me || (Me = Z`
+  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, gt, se, ({
+  theme: e
+}) => e.transitions.easing.easeInOut, b.ripplePulsate, ({
+  theme: e
+}) => e.transitions.duration.shorter, b.child, b.childLeaving, yt, se, ({
+  theme: e
+}) => e.transitions.easing.easeInOut, b.childPulsate, Rt, ({
+  theme: e
+}) => e.transitions.easing.easeInOut), xe = /* @__PURE__ */ c.forwardRef(function(n, i) {
+  const u = Ce({
+    props: n,
+    name: "MuiTouchRipple"
+  }), {
+    center: o = !1,
+    classes: r = {},
+    className: s
+  } = u, p = ae(u, mt), [l, f] = c.useState([]), h = c.useRef(0), R = c.useRef(null);
+  c.useEffect(() => {
+    R.current && (R.current(), R.current = null);
+  }, [l]);
+  const g = c.useRef(!1), x = Qe(), m = c.useRef(null), T = c.useRef(null), $ = c.useCallback((d) => {
+    const {
+      pulsate: M,
+      rippleX: E,
+      rippleY: L,
+      rippleSize: I,
+      cb: K
+    } = d;
+    f((C) => [...C, /* @__PURE__ */ U(Mt, {
+      classes: {
+        ripple: v(r.ripple, b.ripple),
+        rippleVisible: v(r.rippleVisible, b.rippleVisible),
+        ripplePulsate: v(r.ripplePulsate, b.ripplePulsate),
+        child: v(r.child, b.child),
+        childLeaving: v(r.childLeaving, b.childLeaving),
+        childPulsate: v(r.childPulsate, b.childPulsate)
+      },
+      timeout: se,
+      pulsate: M,
+      rippleX: E,
+      rippleY: L,
+      rippleSize: I
+    }, h.current)]), h.current += 1, R.current = K;
+  }, [r]), O = c.useCallback((d = {}, M = {}, E = () => {
+  }) => {
+    const {
+      pulsate: L = !1,
+      center: I = o || M.pulsate,
+      fakeElement: K = !1
+      // For test purposes
+    } = M;
+    if ((d == null ? void 0 : d.type) === "mousedown" && g.current) {
+      g.current = !1;
+      return;
+    }
+    (d == null ? void 0 : d.type) === "touchstart" && (g.current = !0);
+    const C = K ? null : T.current, P = C ? C.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+    let V, w, B;
+    if (I || d === void 0 || d.clientX === 0 && d.clientY === 0 || !d.clientX && !d.touches)
+      V = Math.round(P.width / 2), w = Math.round(P.height / 2);
+    else {
+      const {
+        clientX: F,
+        clientY: D
+      } = d.touches && d.touches.length > 0 ? d.touches[0] : d;
+      V = Math.round(F - P.left), w = Math.round(D - P.top);
+    }
+    if (I)
+      B = Math.sqrt((2 * P.width ** 2 + P.height ** 2) / 3), B % 2 === 0 && (B += 1);
+    else {
+      const F = Math.max(Math.abs((C ? C.clientWidth : 0) - V), V) * 2 + 2, D = Math.max(Math.abs((C ? C.clientHeight : 0) - w), w) * 2 + 2;
+      B = Math.sqrt(F ** 2 + D ** 2);
+    }
+    d != null && d.touches ? m.current === null && (m.current = () => {
+      $({
+        pulsate: L,
+        rippleX: V,
+        rippleY: w,
+        rippleSize: B,
+        cb: E
+      });
+    }, x.start(bt, () => {
+      m.current && (m.current(), m.current = null);
+    })) : $({
+      pulsate: L,
+      rippleX: V,
+      rippleY: w,
+      rippleSize: B,
+      cb: E
+    });
+  }, [o, $, x]), j = c.useCallback(() => {
+    O({}, {
+      pulsate: !0
+    });
+  }, [O]), _ = c.useCallback((d, M) => {
+    if (x.clear(), (d == null ? void 0 : d.type) === "touchend" && m.current) {
+      m.current(), m.current = null, x.start(0, () => {
+        _(d, M);
+      });
+      return;
+    }
+    m.current = null, f((E) => E.length > 0 ? E.slice(1) : E), R.current = M;
+  }, [x]);
+  return c.useImperativeHandle(i, () => ({
+    pulsate: j,
+    start: O,
+    stop: _
+  }), [j, O, _]), /* @__PURE__ */ U(Tt, X({
+    className: v(b.root, r.root, s),
+    ref: T
+  }, p, {
+    children: /* @__PURE__ */ U(pe, {
+      component: null,
+      exit: !0,
+      children: l
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" && (xe.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: t.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string
+});
+function Et(e) {
+  return qe("MuiButtonBase", e);
+}
+const Ct = Ee("MuiButtonBase", ["root", "disabled", "focusVisible"]), vt = ["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"], xt = (e) => {
+  const {
+    disabled: n,
+    focusVisible: i,
+    focusVisibleClassName: u,
+    classes: o
+  } = e, s = We({
+    root: ["root", n && "disabled", i && "focusVisible"]
+  }, Et, o);
+  return i && u && (s.root += ` ${u}`), s;
+}, Vt = ue("button", {
+  name: "MuiButtonBase",
+  slot: "Root",
+  overridesResolver: (e, n) => n.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.
+  },
+  [`&.${Ct.disabled}`]: {
+    pointerEvents: "none",
+    // Disable link interactions
+    cursor: "default"
+  },
+  "@media print": {
+    colorAdjust: "exact"
+  }
+}), Dt = /* @__PURE__ */ c.forwardRef(function(n, i) {
+  const u = Ce({
+    props: n,
+    name: "MuiButtonBase"
+  }), {
+    action: o,
+    centerRipple: r = !1,
+    children: s,
+    className: p,
+    component: l = "button",
+    disabled: f = !1,
+    disableRipple: h = !1,
+    disableTouchRipple: R = !1,
+    focusRipple: g = !1,
+    LinkComponent: x = "a",
+    onBlur: m,
+    onClick: T,
+    onContextMenu: $,
+    onDragLeave: O,
+    onFocus: j,
+    onFocusVisible: _,
+    onKeyDown: d,
+    onKeyUp: M,
+    onMouseDown: E,
+    onMouseLeave: L,
+    onMouseUp: I,
+    onTouchEnd: K,
+    onTouchMove: C,
+    onTouchStart: P,
+    tabIndex: V = 0,
+    TouchRippleProps: w,
+    touchRippleRef: B,
+    type: F
+  } = u, D = ae(u, vt), z = c.useRef(null), y = c.useRef(null), Ve = ge(y, B), {
+    isFocusVisibleRef: fe,
+    onFocus: De,
+    onBlur: Ne,
+    ref: Pe
+  } = lt(), [k, Y] = c.useState(!1);
+  f && k && Y(!1), c.useImperativeHandle(o, () => ({
+    focusVisible: () => {
+      Y(!0), z.current.focus();
+    }
+  }), []);
+  const [ee, we] = c.useState(!1);
+  c.useEffect(() => {
+    we(!0);
+  }, []);
+  const te = ee && !h && !f;
+  c.useEffect(() => {
+    k && g && !h && ee && y.current.pulsate();
+  }, [h, g, k, ee]);
+  function N(a, he, Xe = R) {
+    return H((me) => (he && he(me), !Xe && y.current && y.current[a](me), !0));
+  }
+  const Be = N("start", E), Le = N("stop", $), Fe = N("stop", O), ke = N("stop", I), Se = N("stop", (a) => {
+    k && a.preventDefault(), L && L(a);
+  }), Oe = N("start", P), _e = N("stop", K), Ie = N("stop", C), Ue = N("stop", (a) => {
+    Ne(a), fe.current === !1 && Y(!1), m && m(a);
+  }, !1), $e = H((a) => {
+    z.current || (z.current = a.currentTarget), De(a), fe.current === !0 && (Y(!0), _ && _(a)), j && j(a);
+  }), ne = () => {
+    const a = z.current;
+    return l && l !== "button" && !(a.tagName === "A" && a.href);
+  }, oe = c.useRef(!1), je = H((a) => {
+    g && !oe.current && k && y.current && a.key === " " && (oe.current = !0, y.current.stop(a, () => {
+      y.current.start(a);
+    })), a.target === a.currentTarget && ne() && a.key === " " && a.preventDefault(), d && d(a), a.target === a.currentTarget && ne() && a.key === "Enter" && !f && (a.preventDefault(), T && T(a));
+  }), Ke = H((a) => {
+    g && a.key === " " && y.current && k && !a.defaultPrevented && (oe.current = !1, y.current.stop(a, () => {
+      y.current.pulsate(a);
+    })), M && M(a), T && a.target === a.currentTarget && ne() && a.key === " " && !a.defaultPrevented && T(a);
+  });
+  let q = l;
+  q === "button" && (D.href || D.to) && (q = x);
+  const A = {};
+  q === "button" ? (A.type = F === void 0 ? "button" : F, A.disabled = f) : (!D.href && !D.to && (A.role = "button"), f && (A["aria-disabled"] = f));
+  const ze = ge(i, Pe, z);
+  process.env.NODE_ENV !== "production" && c.useEffect(() => {
+    te && !y.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(`
+`));
+  }, [te]);
+  const de = X({}, u, {
+    centerRipple: r,
+    component: l,
+    disabled: f,
+    disableRipple: h,
+    disableTouchRipple: R,
+    focusRipple: g,
+    tabIndex: V,
+    focusVisible: k
+  }), Ae = xt(de);
+  return /* @__PURE__ */ He(Vt, X({
+    as: q,
+    className: v(Ae.root, p),
+    ownerState: de,
+    onBlur: Ue,
+    onClick: T,
+    onContextMenu: Le,
+    onFocus: $e,
+    onKeyDown: je,
+    onKeyUp: Ke,
+    onMouseDown: Be,
+    onMouseLeave: Se,
+    onMouseUp: ke,
+    onDragLeave: Fe,
+    onTouchEnd: _e,
+    onTouchMove: Ie,
+    onTouchStart: Oe,
+    ref: ze,
+    tabIndex: f ? -1 : V,
+    type: F
+  }, A, D, {
+    children: [s, te ? (
+      /* TouchRipple is only needed client-side, x2 boost on the server. */
+      /* @__PURE__ */ U(xe, X({
+        ref: Ve,
+        center: r
+      }, w))
+    ) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (Dt.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: Ze,
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: t.bool,
+  /**
+   * The content of the component.
+   */
+  children: t.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: t.object,
+  /**
+   * @ignore
+   */
+  className: t.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: et,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: t.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: t.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: t.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: t.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: t.string,
+  /**
+   * @ignore
+   */
+  href: t.any,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: t.elementType,
+  /**
+   * @ignore
+   */
+  onBlur: t.func,
+  /**
+   * @ignore
+   */
+  onClick: t.func,
+  /**
+   * @ignore
+   */
+  onContextMenu: t.func,
+  /**
+   * @ignore
+   */
+  onDragLeave: t.func,
+  /**
+   * @ignore
+   */
+  onFocus: t.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: t.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: t.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: t.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: t.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: t.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: t.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: t.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: t.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: t.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: t.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: t.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: t.oneOfType([t.func, t.shape({
+    current: t.shape({
+      pulsate: t.func.isRequired,
+      start: t.func.isRequired,
+      stop: t.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  type: t.oneOfType([t.oneOf(["button", "reset", "submit"]), t.string])
+});
+export {
+  Dt as B,
+  lt as u
+};