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

package/dist/components/CustomButton/index.js

@@ -1,1316 +1,19 @@
-import { jsx as k, jsxs as Ne } from "react/jsx-runtime";
-import { a as m, _ as ne } from "../../index-kNWC7pFF.js";
-import * as c from "react";
-import G, { Children as rt, isValidElement as ee, cloneElement as te } from "react";
-import { P as n, n as st, b as M, g as fe, u as he, k as A, m as be, h as $e, j as Ve, r as at, i as B, o as lt, p as Z } from "../../generateUtilityClasses-BjilB7Gl.js";
-import { _ as ct, a as ut } from "../../assertThisInitialized-BUtkG-md.js";
-const pt = n.oneOfType([n.func, n.object]);
-function dt(e) {
-  const {
-    prototype: t = {}
-  } = e;
-  return !!t.isReactComponent;
-}
-function ft(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" && !dt(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 ht = st(n.elementType, ft);
-function bt(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) => {
-      bt(o, t);
-    });
-  }, e);
-}
-const mt = typeof window < "u" ? c.useLayoutEffect : c.useEffect;
-function J(e) {
-  const t = c.useRef(e);
-  return mt(() => {
-    t.current = e;
-  }), c.useRef((...o) => (
-    // @ts-expect-error hide `this`
-    (0, t.current)(...o)
-  )).current;
-}
-const Ee = {};
-function gt(e, t) {
-  const o = c.useRef(Ee);
-  return o.current === Ee && (o.current = e(t)), o;
-}
-const vt = [];
-function yt(e) {
-  c.useEffect(e, vt);
-}
-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 xt() {
-  const e = gt(oe.create).current;
-  return yt(e.disposeEffect), e;
-}
-let ie = !0, pe = !1;
-const Rt = new oe(), Ct = {
-  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 Et(e) {
-  const {
-    type: t,
-    tagName: o
-  } = e;
-  return !!(o === "INPUT" && Ct[t] && !e.readOnly || o === "TEXTAREA" && !e.readOnly || e.isContentEditable);
-}
-function Tt(e) {
-  e.metaKey || e.altKey || e.ctrlKey || (ie = !0);
-}
-function ue() {
-  ie = !1;
-}
-function Mt() {
-  this.visibilityState === "hidden" && pe && (ie = !0);
-}
-function It(e) {
-  e.addEventListener("keydown", Tt, !0), e.addEventListener("mousedown", ue, !0), e.addEventListener("pointerdown", ue, !0), e.addEventListener("touchstart", ue, !0), e.addEventListener("visibilitychange", Mt, !0);
-}
-function zt(e) {
-  const {
-    target: t
-  } = e;
-  try {
-    return t.matches(":focus-visible");
-  } catch {
-  }
-  return ie || Et(t);
-}
-function Bt() {
-  const e = c.useCallback((i) => {
-    i != null && It(i.ownerDocument);
-  }, []), t = c.useRef(!1);
-  function o() {
-    return t.current ? (pe = !0, Rt.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 Nt(e, t) {
-  e.prototype = Object.create(t.prototype), e.prototype.constructor = e, ct(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 && rt.map(e, function(i) {
-    return i;
-  }).forEach(function(i) {
-    a[i.key] = o(i);
-  }), a;
-}
-function $t(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 Vt(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 Pt(e, t, o) {
-  var a = me(e.children), i = $t(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 kt = Object.values || function(e) {
-  return Object.keys(e).map(function(t) {
-    return e[t];
-  });
-}, Ot = {
-  component: "div",
-  childFactory: function(t) {
-    return t;
-  }
-}, ge = /* @__PURE__ */ function(e) {
-  Nt(t, e);
-  function t(a, i) {
-    var r;
-    r = e.call(this, a, i) || this;
-    var s = r.handleExited.bind(ut(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 ? Vt(i, u) : Pt(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 = kt(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 = Ot;
-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__ */ k("span", {
-    className: y,
-    style: R,
-    children: /* @__PURE__ */ k("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 I = fe("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), Dt = ["center", "classes", "className"];
-let re = (e) => e, Me, Ie, ze, Be;
-const de = 550, Lt = 80, St = be(Me || (Me = re`
-  0% {
-    transform: scale(0);
-    opacity: 0.1;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 0.3;
-  }
-`)), Ft = be(Ie || (Ie = re`
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-`)), _t = be(ze || (ze = re`
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.92);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-`)), jt = A("span", {
-  name: "MuiTouchRipple",
-  slot: "Root"
-})({
-  overflow: "hidden",
-  pointerEvents: "none",
-  position: "absolute",
-  zIndex: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  borderRadius: "inherit"
-}), Ut = 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;
-  }
-`), I.rippleVisible, St, de, ({
-  theme: e
-}) => e.transitions.easing.easeInOut, I.ripplePulsate, ({
-  theme: e
-}) => e.transitions.duration.shorter, I.child, I.childLeaving, Ft, de, ({
-  theme: e
-}) => e.transitions.easing.easeInOut, I.childPulsate, _t, ({
-  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, Dt), [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 = xt(), b = c.useRef(null), C = c.useRef(null), j = c.useCallback((f) => {
-    const {
-      pulsate: E,
-      rippleX: g,
-      rippleY: x,
-      rippleSize: L,
-      cb: U
-    } = f;
-    d((T) => [...T, /* @__PURE__ */ k(Ut, {
-      classes: {
-        ripple: M(r.ripple, I.ripple),
-        rippleVisible: M(r.rippleVisible, I.rippleVisible),
-        ripplePulsate: M(r.ripplePulsate, I.ripplePulsate),
-        child: M(r.child, I.child),
-        childLeaving: M(r.childLeaving, I.childLeaving),
-        childPulsate: M(r.childPulsate, I.childPulsate)
-      },
-      timeout: de,
-      pulsate: E,
-      rippleX: g,
-      rippleY: x,
-      rippleSize: L
-    }, h.current)]), h.current += 1, v.current = U;
-  }, [r]), O = c.useCallback((f = {}, E = {}, g = () => {
-  }) => {
-    const {
-      pulsate: x = !1,
-      center: L = 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, S = T ? T.getBoundingClientRect() : {
-      width: 0,
-      height: 0,
-      left: 0,
-      top: 0
-    };
-    let $, F, _;
-    if (L || f === void 0 || f.clientX === 0 && f.clientY === 0 || !f.clientX && !f.touches)
-      $ = Math.round(S.width / 2), F = Math.round(S.height / 2);
-    else {
-      const {
-        clientX: W,
-        clientY: V
-      } = f.touches && f.touches.length > 0 ? f.touches[0] : f;
-      $ = Math.round(W - S.left), F = Math.round(V - S.top);
-    }
-    if (L)
-      _ = Math.sqrt((2 * S.width ** 2 + S.height ** 2) / 3), _ % 2 === 0 && (_ += 1);
-    else {
-      const W = Math.max(Math.abs((T ? T.clientWidth : 0) - $), $) * 2 + 2, V = Math.max(Math.abs((T ? T.clientHeight : 0) - F), F) * 2 + 2;
-      _ = Math.sqrt(W ** 2 + V ** 2);
-    }
-    f != null && f.touches ? b.current === null && (b.current = () => {
-      j({
-        pulsate: x,
-        rippleX: $,
-        rippleY: F,
-        rippleSize: _,
-        cb: g
-      });
-    }, R.start(Lt, () => {
-      b.current && (b.current(), b.current = null);
-    })) : j({
-      pulsate: x,
-      rippleX: $,
-      rippleY: F,
-      rippleSize: _,
-      cb: g
-    });
-  }, [i, j, R]), D = c.useCallback(() => {
-    O({}, {
-      pulsate: !0
-    });
-  }, [O]), 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: D,
-    start: O,
-    stop: N
-  }), [D, O, N]), /* @__PURE__ */ k(jt, m({
-    className: M(I.root, r.root, s),
-    ref: C
-  }, u, {
-    children: /* @__PURE__ */ k(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 Wt(e) {
-  return $e("MuiButtonBase", e);
-}
-const wt = fe("MuiButtonBase", ["root", "disabled", "focusVisible"]), Kt = ["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"], At = (e) => {
-  const {
-    disabled: t,
-    focusVisible: o,
-    focusVisibleClassName: a,
-    classes: i
-  } = e, s = Ve({
-    root: ["root", t && "disabled", o && "focusVisible"]
-  }, Wt, i);
-  return o && a && (s.root += ` ${a}`), s;
-}, Xt = 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: O,
-    onFocus: D,
-    onFocusVisible: N,
-    onKeyDown: f,
-    onKeyUp: E,
-    onMouseDown: g,
-    onMouseLeave: x,
-    onMouseUp: L,
-    onTouchEnd: U,
-    onTouchMove: T,
-    onTouchStart: S,
-    tabIndex: $ = 0,
-    TouchRippleProps: F,
-    touchRippleRef: _,
-    type: W
-  } = a, V = ne(a, Kt), X = c.useRef(null), z = c.useRef(null), _e = Ce(z, _), {
-    isFocusVisibleRef: ve,
-    onFocus: je,
-    onBlur: Ue,
-    ref: We
-  } = Bt(), [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 && z.current.pulsate();
-  }, [h, y, w, se]);
-  function P(l, xe, it = v) {
-    return J((Re) => (xe && xe(Re), !it && z.current && z.current[l](Re), !0));
-  }
-  const Ke = P("start", g), Ae = P("stop", j), Xe = P("stop", O), Ye = P("stop", L), Ge = P("stop", (l) => {
-    w && l.preventDefault(), x && x(l);
-  }), He = P("start", S), qe = P("stop", U), Ze = P("stop", T), Je = P("stop", (l) => {
-    Ue(l), ve.current === !1 && H(!1), b && b(l);
-  }, !1), Qe = J((l) => {
-    X.current || (X.current = l.currentTarget), je(l), ve.current === !0 && (H(!0), N && N(l)), D && D(l);
-  }), le = () => {
-    const l = X.current;
-    return p && p !== "button" && !(l.tagName === "A" && l.href);
-  }, ce = c.useRef(!1), et = J((l) => {
-    y && !ce.current && w && z.current && l.key === " " && (ce.current = !0, z.current.stop(l, () => {
-      z.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));
-  }), tt = J((l) => {
-    y && l.key === " " && z.current && w && !l.defaultPrevented && (ce.current = !1, z.current.stop(l, () => {
-      z.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 nt = Ce(o, We, X);
-  process.env.NODE_ENV !== "production" && c.useEffect(() => {
-    ae && !z.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
-  }), ot = At(ye);
-  return /* @__PURE__ */ Ne(Xt, m({
-    as: q,
-    className: M(ot.root, u),
-    ownerState: ye,
-    onBlur: Je,
-    onClick: C,
-    onContextMenu: Ae,
-    onFocus: Qe,
-    onKeyDown: et,
-    onKeyUp: tt,
-    onMouseDown: Ke,
-    onMouseLeave: Ge,
-    onMouseUp: Ye,
-    onDragLeave: Xe,
-    onTouchEnd: qe,
-    onTouchMove: Ze,
-    onTouchStart: He,
-    ref: nt,
-    tabIndex: d ? -1 : $,
-    type: W
-  }, Y, V, {
-    children: [s, ae ? (
-      /* TouchRipple is only needed client-side, x2 boost on the server. */
-      /* @__PURE__ */ k(ke, m({
-        ref: _e,
-        center: r
-      }, F))
-    ) : 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: pt,
-  /**
-   * 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: ht,
-  /**
-   * 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 Yt(e) {
-  return $e("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 Gt = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"], Ht = (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 = Ve(u, Yt, 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
-  }
-}), qt = A(Oe, {
-  shouldForwardProp: (e) => lt(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"
-  }
-}), Zt = 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))), Jt = 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))), Fe = /* @__PURE__ */ c.forwardRef(function(t, o) {
-  const a = c.useContext(De), i = c.useContext(Le), r = at(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: O = "medium",
-    startIcon: D,
-    type: N,
-    variant: f = "text"
-  } = s, E = ne(s, Gt), g = m({}, s, {
-    color: p,
-    component: d,
-    disabled: v,
-    disableElevation: y,
-    disableFocusRipple: R,
-    fullWidth: j,
-    size: O,
-    type: N,
-    variant: f
-  }), x = Ht(g), L = D && /* @__PURE__ */ k(Zt, {
-    className: x.startIcon,
-    ownerState: g,
-    children: D
-  }), U = b && /* @__PURE__ */ k(Jt, {
-    className: x.endIcon,
-    ownerState: g,
-    children: b
-  }), T = i || "";
-  return /* @__PURE__ */ Ne(qt, 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: [L, u, U]
-  }));
-});
-process.env.NODE_ENV !== "production" && (Fe.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])
-});
-const sn = ({ content: e, height: t = "40px", width: o = "120px", direction: a = "left", ...i }) => /* @__PURE__ */ k(
-  Fe,
+import { jsx as i } from "react/jsx-runtime";
+import { B as a } from "../../Button-BgbkoKxR.js";
+const d = ({ content: o, height: r = "40px", width: t = "120px", direction: n = "left", ...e }) => /* @__PURE__ */ i(
+  a,
   {
     variant: "outlined",
     disableElevation: !0,
     color: "primary",
     sx: {
-      float: a,
-      height: t,
+      float: n,
+      height: r,
       borderRadius: 2,
       border: "1px solid #E0E0E0",
       color: "#48464A",
       fontWeight: "400",
-      width: o,
+      width: t,
       textTransform: "none",
       // '& .MuiButton-endIcon': {
       //   marginInlineStart: '10px',
@@ -1323,10 +26,10 @@ const sn = ({ content: e, height: t = "40px", width: o = "120px", direction: a =
         border: "1px solid #E0E0E0"
       }
     },
-    ...i,
-    children: e
+    ...e,
+    children: o
   }
 );
 export {
-  sn as CustomButton
+  d as CustomButton
 };