@solostylist/ui-kit 1.0.21 → 1.0.24

package/dist/useSlot-CUlGPdMt.js

@@ -0,0 +1,969 @@
+var Ie = Object.defineProperty;
+var ke = (e, n, t) => n in e ? Ie(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t;
+var W = (e, n, t) => ke(e, typeof n != "symbol" ? n + "" : n, t);
+import { c as M } from "./identifier-C1jBtHV2.js";
+import * as h from "react";
+import { P as o } from "./createTheme-DwCHEbMU.js";
+import { j as x } from "./jsx-runtime-C5mzlN2N.js";
+import { g as je } from "./generateUtilityClasses-BHlV34bM.js";
+import { u as re, s as P, c as Oe } from "./DefaultPropsProvider-Doz-fKTH.js";
+import { T as Ae } from "./TransitionGroup-C2C7KNye.js";
+import { keyframes as ee } from "@emotion/react";
+import { g as De, b as Le } from "./buttonBaseClasses-C7kEMnpC.js";
+import { u as $e } from "./useEnhancedEffect-CJGo-L3B.js";
+function _(e) {
+  const n = h.useRef(e);
+  return $e(() => {
+    n.current = e;
+  }), h.useRef((...t) => (
+    // @ts-expect-error hide `this`
+    (0, n.current)(...t)
+  )).current;
+}
+function Q(...e) {
+  const n = h.useRef(void 0), t = h.useCallback((s) => {
+    const c = e.map((u) => {
+      if (u == null)
+        return null;
+      if (typeof u == "function") {
+        const f = u, i = f(s);
+        return typeof i == "function" ? i : () => {
+          f(null);
+        };
+      }
+      return u.current = s, () => {
+        u.current = null;
+      };
+    });
+    return () => {
+      c.forEach((u) => u == null ? void 0 : u());
+    };
+  }, e);
+  return h.useMemo(() => e.every((s) => s == null) ? null : (s) => {
+    n.current && (n.current(), n.current = void 0), s != null && (n.current = t(s));
+  }, e);
+}
+function Be(e, n) {
+  const t = e.charCodeAt(2);
+  return e[0] === "o" && e[1] === "n" && t >= 65 && t <= 90 && typeof n == "function";
+}
+function mt(e, n) {
+  if (!e)
+    return n;
+  function t(f, i) {
+    const l = {};
+    return Object.keys(i).forEach((a) => {
+      Be(a, i[a]) && typeof f[a] == "function" && (l[a] = (...d) => {
+        f[a](...d), i[a](...d);
+      });
+    }), l;
+  }
+  if (typeof e == "function" || typeof n == "function")
+    return (f) => {
+      const i = typeof n == "function" ? n(f) : n, l = typeof e == "function" ? e({
+        ...f,
+        ...i
+      }) : e, a = M(f == null ? void 0 : f.className, i == null ? void 0 : i.className, l == null ? void 0 : l.className), d = t(l, i);
+      return {
+        ...i,
+        ...l,
+        ...d,
+        ...!!a && {
+          className: a
+        },
+        ...(i == null ? void 0 : i.style) && (l == null ? void 0 : l.style) && {
+          style: {
+            ...i.style,
+            ...l.style
+          }
+        },
+        ...(i == null ? void 0 : i.sx) && (l == null ? void 0 : l.sx) && {
+          sx: [...Array.isArray(i.sx) ? i.sx : [i.sx], ...Array.isArray(l.sx) ? l.sx : [l.sx]]
+        }
+      };
+    };
+  const s = n, c = t(e, s), u = M(s == null ? void 0 : s.className, e == null ? void 0 : e.className);
+  return {
+    ...n,
+    ...e,
+    ...c,
+    ...!!u && {
+      className: u
+    },
+    ...(s == null ? void 0 : s.style) && (e == null ? void 0 : e.style) && {
+      style: {
+        ...s.style,
+        ...e.style
+      }
+    },
+    ...(s == null ? void 0 : s.sx) && (e == null ? void 0 : e.sx) && {
+      sx: [...Array.isArray(s.sx) ? s.sx : [s.sx], ...Array.isArray(e.sx) ? e.sx : [e.sx]]
+    }
+  };
+}
+function He(e, n) {
+  return process.env.NODE_ENV === "production" ? () => null : function(...s) {
+    return e(...s) || n(...s);
+  };
+}
+const Ue = o.oneOfType([o.func, o.object]);
+function xe(e) {
+  const {
+    prototype: n = {}
+  } = e;
+  return !!n.isReactComponent;
+}
+function ze(e, n, t, s, c) {
+  const u = e[n], f = c || n;
+  if (u == 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 i;
+  return typeof u == "function" && !xe(u) && (i = "Did you accidentally provide a plain function component instead?"), i !== void 0 ? new Error(`Invalid ${s} \`${f}\` supplied to \`${t}\`. Expected an element type that can hold a ref. ${i} For more information see https://mui.com/r/caveat-with-refs-guide`) : null;
+}
+const Ke = He(o.elementType, ze);
+function se(e) {
+  try {
+    return e.matches(":focus-visible");
+  } catch {
+    process.env.NODE_ENV !== "production" && !/jsdom/.test(window.navigator.userAgent) && console.warn(["MUI: The `:focus-visible` pseudo class is not supported in this browser.", "Some components rely on this feature to work properly."].join(`
+`));
+  }
+  return !1;
+}
+const oe = {};
+function ce(e, n) {
+  const t = h.useRef(oe);
+  return t.current === oe && (t.current = e(n)), t;
+}
+class G {
+  constructor() {
+    W(this, "mountEffect", () => {
+      this.shouldMount && !this.didMount && this.ref.current !== null && (this.didMount = !0, this.mounted.resolve());
+    });
+    this.ref = {
+      current: null
+    }, this.mounted = null, this.didMount = !1, this.shouldMount = !1, this.setShouldMount = null;
+  }
+  /** React ref to the ripple instance */
+  /** If the ripple component should be mounted */
+  /** Promise that resolves when the ripple component is mounted */
+  /** If the ripple component has been mounted */
+  /** React state hook setter */
+  static create() {
+    return new G();
+  }
+  static use() {
+    const n = ce(G.create).current, [t, s] = h.useState(!1);
+    return n.shouldMount = t, n.setShouldMount = s, h.useEffect(n.mountEffect, [t]), n;
+  }
+  mount() {
+    return this.mounted || (this.mounted = Ye(), this.shouldMount = !0, this.setShouldMount(this.shouldMount)), this.mounted;
+  }
+  /* Ripple API */
+  start(...n) {
+    this.mount().then(() => {
+      var t;
+      return (t = this.ref.current) == null ? void 0 : t.start(...n);
+    });
+  }
+  stop(...n) {
+    this.mount().then(() => {
+      var t;
+      return (t = this.ref.current) == null ? void 0 : t.stop(...n);
+    });
+  }
+  pulsate(...n) {
+    this.mount().then(() => {
+      var t;
+      return (t = this.ref.current) == null ? void 0 : t.pulsate(...n);
+    });
+  }
+}
+function Ve() {
+  return G.use();
+}
+function Ye() {
+  let e, n;
+  const t = new Promise((s, c) => {
+    e = s, n = c;
+  });
+  return t.resolve = e, t.reject = n, t;
+}
+const Xe = [];
+function qe(e) {
+  h.useEffect(e, Xe);
+}
+class te {
+  constructor() {
+    W(this, "currentId", null);
+    W(this, "clear", () => {
+      this.currentId !== null && (clearTimeout(this.currentId), this.currentId = null);
+    });
+    W(this, "disposeEffect", () => this.clear);
+  }
+  static create() {
+    return new te();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(n, t) {
+    this.clear(), this.currentId = setTimeout(() => {
+      this.currentId = null, t();
+    }, n);
+  }
+}
+function Fe() {
+  const e = ce(te.create).current;
+  return qe(e.disposeEffect), e;
+}
+function ue(e) {
+  const {
+    className: n,
+    classes: t,
+    pulsate: s = !1,
+    rippleX: c,
+    rippleY: u,
+    rippleSize: f,
+    in: i,
+    onExited: l,
+    timeout: a
+  } = e, [d, m] = h.useState(!1), b = M(n, t.ripple, t.rippleVisible, s && t.ripplePulsate), R = {
+    width: f,
+    height: f,
+    top: -(f / 2) + u,
+    left: -(f / 2) + c
+  }, y = M(t.child, d && t.childLeaving, s && t.childPulsate);
+  return !i && !d && m(!0), h.useEffect(() => {
+    if (!i && l != null) {
+      const T = setTimeout(l, a);
+      return () => {
+        clearTimeout(T);
+      };
+    }
+  }, [l, i, a]), /* @__PURE__ */ x.jsx("span", {
+    className: b,
+    style: R,
+    children: /* @__PURE__ */ x.jsx("span", {
+      className: y
+    })
+  });
+}
+process.env.NODE_ENV !== "production" && (ue.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object.isRequired,
+  className: o.string,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  in: o.bool,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  onExited: o.func,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: o.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: o.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: o.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: o.number,
+  /**
+   * exit delay
+   */
+  timeout: o.number.isRequired
+});
+const E = je("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), S = 550, We = 80, ve = ee`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`, Ze = ee`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`, _e = ee`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`, Ge = P("span", {
+  name: "MuiTouchRipple",
+  slot: "Root"
+})({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: "inherit"
+}), Je = P(ue, {
+  name: "MuiTouchRipple",
+  slot: "Ripple"
+})`
+  opacity: 0;
+  position: absolute;
+
+  &.${E.rippleVisible} {
+    opacity: 0.3;
+    transform: scale(1);
+    animation-name: ${ve};
+    animation-duration: ${S}ms;
+    animation-timing-function: ${({
+  theme: e
+}) => e.transitions.easing.easeInOut};
+  }
+
+  &.${E.ripplePulsate} {
+    animation-duration: ${({
+  theme: e
+}) => e.transitions.duration.shorter}ms;
+  }
+
+  & .${E.child} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  & .${E.childLeaving} {
+    opacity: 0;
+    animation-name: ${Ze};
+    animation-duration: ${S}ms;
+    animation-timing-function: ${({
+  theme: e
+}) => e.transitions.easing.easeInOut};
+  }
+
+  & .${E.childPulsate} {
+    position: absolute;
+    /* @noflip */
+    left: 0px;
+    top: 0;
+    animation-name: ${_e};
+    animation-duration: 2500ms;
+    animation-timing-function: ${({
+  theme: e
+}) => e.transitions.easing.easeInOut};
+    animation-iteration-count: infinite;
+    animation-delay: 200ms;
+  }
+`, ae = /* @__PURE__ */ h.forwardRef(function(n, t) {
+  const s = re({
+    props: n,
+    name: "MuiTouchRipple"
+  }), {
+    center: c = !1,
+    classes: u = {},
+    className: f,
+    ...i
+  } = s, [l, a] = h.useState([]), d = h.useRef(0), m = h.useRef(null);
+  h.useEffect(() => {
+    m.current && (m.current(), m.current = null);
+  }, [l]);
+  const b = h.useRef(!1), R = Fe(), y = h.useRef(null), T = h.useRef(null), N = h.useCallback((p) => {
+    const {
+      pulsate: I,
+      rippleX: w,
+      rippleY: K,
+      rippleSize: B,
+      cb: V
+    } = p;
+    a((k) => [...k, /* @__PURE__ */ x.jsx(Je, {
+      classes: {
+        ripple: M(u.ripple, E.ripple),
+        rippleVisible: M(u.rippleVisible, E.rippleVisible),
+        ripplePulsate: M(u.ripplePulsate, E.ripplePulsate),
+        child: M(u.child, E.child),
+        childLeaving: M(u.childLeaving, E.childLeaving),
+        childPulsate: M(u.childPulsate, E.childPulsate)
+      },
+      timeout: S,
+      pulsate: I,
+      rippleX: w,
+      rippleY: K,
+      rippleSize: B
+    }, d.current)]), d.current += 1, m.current = V;
+  }, [u]), A = h.useCallback((p = {}, I = {}, w = () => {
+  }) => {
+    const {
+      pulsate: K = !1,
+      center: B = c || I.pulsate,
+      fakeElement: V = !1
+      // For test purposes
+    } = I;
+    if ((p == null ? void 0 : p.type) === "mousedown" && b.current) {
+      b.current = !1;
+      return;
+    }
+    (p == null ? void 0 : p.type) === "touchstart" && (b.current = !0);
+    const k = V ? null : T.current, D = k ? k.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+    let L, j, $;
+    if (B || p === void 0 || p.clientX === 0 && p.clientY === 0 || !p.clientX && !p.touches)
+      L = Math.round(D.width / 2), j = Math.round(D.height / 2);
+    else {
+      const {
+        clientX: Y,
+        clientY: H
+      } = p.touches && p.touches.length > 0 ? p.touches[0] : p;
+      L = Math.round(Y - D.left), j = Math.round(H - D.top);
+    }
+    if (B)
+      $ = Math.sqrt((2 * D.width ** 2 + D.height ** 2) / 3), $ % 2 === 0 && ($ += 1);
+    else {
+      const Y = Math.max(Math.abs((k ? k.clientWidth : 0) - L), L) * 2 + 2, H = Math.max(Math.abs((k ? k.clientHeight : 0) - j), j) * 2 + 2;
+      $ = Math.sqrt(Y ** 2 + H ** 2);
+    }
+    p != null && p.touches ? y.current === null && (y.current = () => {
+      N({
+        pulsate: K,
+        rippleX: L,
+        rippleY: j,
+        rippleSize: $,
+        cb: w
+      });
+    }, R.start(We, () => {
+      y.current && (y.current(), y.current = null);
+    })) : N({
+      pulsate: K,
+      rippleX: L,
+      rippleY: j,
+      rippleSize: $,
+      cb: w
+    });
+  }, [c, N, R]), z = h.useCallback(() => {
+    A({}, {
+      pulsate: !0
+    });
+  }, [A]), C = h.useCallback((p, I) => {
+    if (R.clear(), (p == null ? void 0 : p.type) === "touchend" && y.current) {
+      y.current(), y.current = null, R.start(0, () => {
+        C(p, I);
+      });
+      return;
+    }
+    y.current = null, a((w) => w.length > 0 ? w.slice(1) : w), m.current = I;
+  }, [R]);
+  return h.useImperativeHandle(t, () => ({
+    pulsate: z,
+    start: A,
+    stop: C
+  }), [z, A, C]), /* @__PURE__ */ x.jsx(Ge, {
+    className: M(E.root, u.root, f),
+    ref: T,
+    ...i,
+    children: /* @__PURE__ */ x.jsx(Ae, {
+      component: null,
+      exit: !0,
+      children: l
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (ae.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: o.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string
+});
+const Qe = (e) => {
+  const {
+    disabled: n,
+    focusVisible: t,
+    focusVisibleClassName: s,
+    classes: c
+  } = e, f = Oe({
+    root: ["root", n && "disabled", t && "focusVisible"]
+  }, De, c);
+  return t && s && (f.root += ` ${s}`), f;
+}, Se = P("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.
+  },
+  [`&.${Le.disabled}`]: {
+    pointerEvents: "none",
+    // Disable link interactions
+    cursor: "default"
+  },
+  "@media print": {
+    colorAdjust: "exact"
+  }
+}), Pe = /* @__PURE__ */ h.forwardRef(function(n, t) {
+  const s = re({
+    props: n,
+    name: "MuiButtonBase"
+  }), {
+    action: c,
+    centerRipple: u = !1,
+    children: f,
+    className: i,
+    component: l = "button",
+    disabled: a = !1,
+    disableRipple: d = !1,
+    disableTouchRipple: m = !1,
+    focusRipple: b = !1,
+    focusVisibleClassName: R,
+    LinkComponent: y = "a",
+    onBlur: T,
+    onClick: N,
+    onContextMenu: A,
+    onDragLeave: z,
+    onFocus: C,
+    onFocusVisible: p,
+    onKeyDown: I,
+    onKeyUp: w,
+    onMouseDown: K,
+    onMouseLeave: B,
+    onMouseUp: V,
+    onTouchEnd: k,
+    onTouchMove: D,
+    onTouchStart: L,
+    tabIndex: j = 0,
+    TouchRippleProps: $,
+    touchRippleRef: Y,
+    type: H,
+    ...X
+  } = s, q = h.useRef(null), g = Ve(), le = Q(g.ref, Y), [U, v] = h.useState(!1);
+  a && U && v(!1), h.useImperativeHandle(c, () => ({
+    focusVisible: () => {
+      v(!0), q.current.focus();
+    }
+  }), []);
+  const fe = g.shouldMount && !d && !a;
+  h.useEffect(() => {
+    U && b && !d && g.pulsate();
+  }, [d, b, U, g]);
+  const pe = O(g, "start", K, m), he = O(g, "stop", A, m), de = O(g, "stop", z, m), me = O(g, "stop", V, m), ye = O(g, "stop", (r) => {
+    U && r.preventDefault(), B && B(r);
+  }, m), be = O(g, "start", L, m), ge = O(g, "stop", k, m), Re = O(g, "stop", D, m), Te = O(g, "stop", (r) => {
+    se(r.target) || v(!1), T && T(r);
+  }, !1), Me = _((r) => {
+    q.current || (q.current = r.currentTarget), se(r.target) && (v(!0), p && p(r)), C && C(r);
+  }), J = () => {
+    const r = q.current;
+    return l && l !== "button" && !(r.tagName === "A" && r.href);
+  }, Ee = _((r) => {
+    b && !r.repeat && U && r.key === " " && g.stop(r, () => {
+      g.start(r);
+    }), r.target === r.currentTarget && J() && r.key === " " && r.preventDefault(), I && I(r), r.target === r.currentTarget && J() && r.key === "Enter" && !a && (r.preventDefault(), N && N(r));
+  }), Ne = _((r) => {
+    b && r.key === " " && U && !r.defaultPrevented && g.stop(r, () => {
+      g.pulsate(r);
+    }), w && w(r), N && r.target === r.currentTarget && J() && r.key === " " && !r.defaultPrevented && N(r);
+  });
+  let Z = l;
+  Z === "button" && (X.href || X.to) && (Z = y);
+  const F = {};
+  Z === "button" ? (F.type = H === void 0 ? "button" : H, F.disabled = a) : (!X.href && !X.to && (F.role = "button"), a && (F["aria-disabled"] = a));
+  const Ce = Q(t, q), ne = {
+    ...s,
+    centerRipple: u,
+    component: l,
+    disabled: a,
+    disableRipple: d,
+    disableTouchRipple: m,
+    focusRipple: b,
+    tabIndex: j,
+    focusVisible: U
+  }, we = Qe(ne);
+  return /* @__PURE__ */ x.jsxs(Se, {
+    as: Z,
+    className: M(we.root, i),
+    ownerState: ne,
+    onBlur: Te,
+    onClick: N,
+    onContextMenu: he,
+    onFocus: Me,
+    onKeyDown: Ee,
+    onKeyUp: Ne,
+    onMouseDown: pe,
+    onMouseLeave: ye,
+    onMouseUp: me,
+    onDragLeave: de,
+    onTouchEnd: ge,
+    onTouchMove: Re,
+    onTouchStart: be,
+    ref: Ce,
+    tabIndex: a ? -1 : j,
+    type: H,
+    ...F,
+    ...X,
+    children: [f, fe ? /* @__PURE__ */ x.jsx(ae, {
+      ref: le,
+      center: u,
+      ...$
+    }) : null]
+  });
+});
+function O(e, n, t, s = !1) {
+  return _((c) => (t && t(c), s || e[n](c), !0));
+}
+process.env.NODE_ENV !== "production" && (Pe.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: Ue,
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: o.bool,
+  /**
+   * The content of the component.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: Ke,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: o.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: o.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: o.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: o.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: o.string,
+  /**
+   * @ignore
+   */
+  href: o.any,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: o.elementType,
+  /**
+   * @ignore
+   */
+  onBlur: o.func,
+  /**
+   * @ignore
+   */
+  onClick: o.func,
+  /**
+   * @ignore
+   */
+  onContextMenu: o.func,
+  /**
+   * @ignore
+   */
+  onDragLeave: o.func,
+  /**
+   * @ignore
+   */
+  onFocus: o.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: o.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: o.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: o.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: o.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: o.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: o.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: o.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: o.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: o.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: o.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: o.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: o.oneOfType([o.func, o.shape({
+    current: o.shape({
+      pulsate: o.func.isRequired,
+      start: o.func.isRequired,
+      stop: o.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  type: o.oneOfType([o.oneOf(["button", "reset", "submit"]), o.string])
+});
+function et(e) {
+  return typeof e == "string";
+}
+function tt(e, n, t) {
+  return e === void 0 || et(e) ? n : {
+    ...n,
+    ownerState: {
+      ...n.ownerState,
+      ...t
+    }
+  };
+}
+function nt(e, n, t) {
+  return typeof e == "function" ? e(n, t) : e;
+}
+function st(e, n = []) {
+  if (e === void 0)
+    return {};
+  const t = {};
+  return Object.keys(e).filter((s) => s.match(/^on[A-Z]/) && typeof e[s] == "function" && !n.includes(s)).forEach((s) => {
+    t[s] = e[s];
+  }), t;
+}
+function ie(e) {
+  if (e === void 0)
+    return {};
+  const n = {};
+  return Object.keys(e).filter((t) => !(t.match(/^on[A-Z]/) && typeof e[t] == "function")).forEach((t) => {
+    n[t] = e[t];
+  }), n;
+}
+function ot(e) {
+  const {
+    getSlotProps: n,
+    additionalProps: t,
+    externalSlotProps: s,
+    externalForwardedProps: c,
+    className: u
+  } = e;
+  if (!n) {
+    const R = M(t == null ? void 0 : t.className, u, c == null ? void 0 : c.className, s == null ? void 0 : s.className), y = {
+      ...t == null ? void 0 : t.style,
+      ...c == null ? void 0 : c.style,
+      ...s == null ? void 0 : s.style
+    }, T = {
+      ...t,
+      ...c,
+      ...s
+    };
+    return R.length > 0 && (T.className = R), Object.keys(y).length > 0 && (T.style = y), {
+      props: T,
+      internalRef: void 0
+    };
+  }
+  const f = st({
+    ...c,
+    ...s
+  }), i = ie(s), l = ie(c), a = n(f), d = M(a == null ? void 0 : a.className, t == null ? void 0 : t.className, u, c == null ? void 0 : c.className, s == null ? void 0 : s.className), m = {
+    ...a == null ? void 0 : a.style,
+    ...t == null ? void 0 : t.style,
+    ...c == null ? void 0 : c.style,
+    ...s == null ? void 0 : s.style
+  }, b = {
+    ...a,
+    ...t,
+    ...l,
+    ...i
+  };
+  return d.length > 0 && (b.className = d), Object.keys(m).length > 0 && (b.style = m), {
+    props: b,
+    internalRef: a.ref
+  };
+}
+function yt(e, n) {
+  const {
+    className: t,
+    elementType: s,
+    ownerState: c,
+    externalForwardedProps: u,
+    internalForwardedProps: f,
+    shouldForwardComponentProp: i = !1,
+    ...l
+  } = n, {
+    component: a,
+    slots: d = {
+      [e]: void 0
+    },
+    slotProps: m = {
+      [e]: void 0
+    },
+    ...b
+  } = u, R = d[e] || s, y = nt(m[e], c), {
+    props: {
+      component: T,
+      ...N
+    },
+    internalRef: A
+  } = ot({
+    className: t,
+    ...l,
+    externalForwardedProps: e === "root" ? b : void 0,
+    externalSlotProps: y
+  }), z = Q(A, y == null ? void 0 : y.ref, n.ref), C = e === "root" ? T || a : T, p = tt(R, {
+    ...e === "root" && !a && !d[e] && f,
+    ...e !== "root" && !d[e] && f,
+    ...N,
+    ...C && !i && {
+      as: C
+    },
+    ...C && i && {
+      component: C
+    },
+    ref: z
+  }, c);
+  return [R, p];
+}
+export {
+  Pe as B,
+  yt as a,
+  Fe as b,
+  He as c,
+  Ke as d,
+  st as e,
+  nt as f,
+  ot as g,
+  tt as h,
+  mt as m,
+  Ue as r,
+  Q as u
+};