@pismo/marola 0.0.1-alpha.31 → 0.0.1-alpha.4

package/dist/components/Snackbar/Snackbar.js

@@ -1,639 +0,0 @@
-import '../../assets/Snackbar.css';
-import { jsx as E, jsxs as Y } from "react/jsx-runtime";
-import * as S from "react";
-import C, { useState as V, useRef as X } from "react";
-import { c as N } from "../../clsx-DB4S2d7J.js";
-import { Icon as K } from "../Icon/Icon.js";
-import { g as $, a as z, b as R, f as H, _ as j, c as U, P as n, d as J, e as Q } from "../../index-CH45lKw7.js";
-import { u as Z } from "../../useTimeout-DxF9kiZL.js";
-import { u as I } from "../../useEventCallback-xTG9piMa.js";
-import { C as B } from "../../ClickAwayListener-BSW-Nd-y.js";
-import { R as P } from "../../index-CjW42-M-.js";
-const W = "Snackbar";
-function ee(u) {
-  return $(W, u);
-}
-z(W, ["root"]);
-function te(u = {}) {
-  const {
-    autoHideDuration: s = null,
-    disableWindowBlurListener: i = !1,
-    onClose: r,
-    open: t,
-    resumeHideDuration: e
-  } = u, o = Z();
-  S.useEffect(() => {
-    if (!t)
-      return;
-    function l(c) {
-      c.defaultPrevented || (c.key === "Escape" || c.key === "Esc") && (r == null || r(c, "escapeKeyDown"));
-    }
-    return document.addEventListener("keydown", l), () => {
-      document.removeEventListener("keydown", l);
-    };
-  }, [t, r]);
-  const a = I((l, c) => {
-    r == null || r(l, c);
-  }), p = I((l) => {
-    !r || l == null || o.start(l, () => {
-      a(null, "timeout");
-    });
-  });
-  S.useEffect(() => (t && p(s), o.clear), [t, s, p, o]);
-  const h = (l) => {
-    r == null || r(l, "clickaway");
-  }, d = o.clear, m = S.useCallback(() => {
-    s != null && p(e ?? s * 0.5);
-  }, [s, e, p]), y = (l) => (c) => {
-    const f = l.onBlur;
-    f == null || f(c), m();
-  }, T = (l) => (c) => {
-    const f = l.onFocus;
-    f == null || f(c), d();
-  }, k = (l) => (c) => {
-    const f = l.onMouseEnter;
-    f == null || f(c), d();
-  }, O = (l) => (c) => {
-    const f = l.onMouseLeave;
-    f == null || f(c), m();
-  };
-  return S.useEffect(() => {
-    if (!i && t)
-      return window.addEventListener("focus", m), window.addEventListener("blur", d), () => {
-        window.removeEventListener("focus", m), window.removeEventListener("blur", d);
-      };
-  }, [i, t, m, d]), {
-    getRootProps: (l = {}) => {
-      const c = R({}, H(u), H(l));
-      return R({
-        // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
-        // See https://github.com/mui/material-ui/issues/29080
-        role: "presentation"
-      }, l, c, {
-        onBlur: y(c),
-        onFocus: T(c),
-        onMouseEnter: k(c),
-        onMouseLeave: O(c)
-      });
-    },
-    onClickAway: h
-  };
-}
-const ne = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"], oe = () => J({
-  root: ["root"]
-}, Q(ee)), q = /* @__PURE__ */ S.forwardRef(function(s, i) {
-  const {
-    autoHideDuration: r = null,
-    children: t,
-    disableWindowBlurListener: e = !1,
-    exited: o = !0,
-    onClose: a,
-    open: p,
-    resumeHideDuration: h,
-    slotProps: d = {},
-    slots: m = {}
-  } = s, y = j(s, ne), T = oe(), {
-    getRootProps: k,
-    onClickAway: O
-  } = te(R({}, s, {
-    autoHideDuration: r,
-    disableWindowBlurListener: e,
-    onClose: a,
-    open: p,
-    resumeHideDuration: h
-  })), L = s, l = m.root || "div", c = U({
-    elementType: l,
-    getSlotProps: k,
-    externalForwardedProps: y,
-    externalSlotProps: d.root,
-    additionalProps: {
-      ref: i
-    },
-    ownerState: L,
-    className: T.root
-  }), f = U({
-    elementType: B,
-    externalSlotProps: d.clickAwayListener,
-    additionalProps: {
-      onClickAway: O
-    },
-    ownerState: L
-  });
-  return delete f.ownerState, !p && o ? null : /* @__PURE__ */ E(B, R({}, f, {
-    children: /* @__PURE__ */ E(l, R({}, c, {
-      children: t
-    }))
-  }));
-});
-process.env.NODE_ENV !== "production" && (q.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The number of milliseconds to wait before automatically calling the
-   * `onClose` function. `onClose` should then set the state of the `open`
-   * prop to hide the Snackbar. This behavior is disabled by default with
-   * the `null` value.
-   * @default null
-   */
-  autoHideDuration: n.number,
-  /**
-   * @ignore
-   */
-  children: n.node,
-  /**
-   * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
-   * @default false
-   */
-  disableWindowBlurListener: n.bool,
-  /**
-   * The prop used to handle exited transition and unmount the component.
-   * @default true
-   */
-  exited: n.bool,
-  /**
-   * Callback fired when the component requests to be closed.
-   * Typically `onClose` is used to set state in the parent component,
-   * which is used to control the `Snackbar` `open` prop.
-   * The `reason` parameter can optionally be used to control the response to `onClose`,
-   * for example ignoring `clickaway`.
-   *
-   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
-   * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
-   */
-  onClose: n.func,
-  /**
-   * If `true`, the component is shown.
-   */
-  open: n.bool,
-  /**
-   * The number of milliseconds to wait before dismissing after user interaction.
-   * If `autoHideDuration` prop isn't specified, it does nothing.
-   * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
-   * we default to `autoHideDuration / 2` ms.
-   */
-  resumeHideDuration: n.number,
-  /**
-   * The props used for each slot inside the Snackbar.
-   * @default {}
-   */
-  slotProps: n.shape({
-    clickAwayListener: n.oneOfType([n.func, n.shape({
-      children: n.element.isRequired,
-      disableReactTree: n.bool,
-      mouseEvent: n.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
-      onClickAway: n.func,
-      touchEvent: n.oneOf(["onTouchEnd", "onTouchStart", !1])
-    })]),
-    root: n.oneOfType([n.func, n.object])
-  }),
-  /**
-   * The components used for each slot inside the Snackbar.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: n.shape({
-    root: n.elementType
-  })
-});
-function M(u, s) {
-  return M = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(r, t) {
-    return r.__proto__ = t, r;
-  }, M(u, s);
-}
-function re(u, s) {
-  u.prototype = Object.create(s.prototype), u.prototype.constructor = u, M(u, s);
-}
-const F = {
-  disabled: !1
-};
-var se = process.env.NODE_ENV !== "production" ? n.oneOfType([n.number, n.shape({
-  enter: n.number,
-  exit: n.number,
-  appear: n.number
-}).isRequired]) : null;
-process.env.NODE_ENV !== "production" && n.oneOfType([n.string, n.shape({
-  enter: n.string,
-  exit: n.string,
-  active: n.string
-}), n.shape({
-  enter: n.string,
-  enterDone: n.string,
-  enterActive: n.string,
-  exit: n.string,
-  exitDone: n.string,
-  exitActive: n.string
-})]);
-const G = C.createContext(null);
-var ae = function(s) {
-  return s.scrollTop;
-}, D = "unmounted", g = "exited", x = "entering", w = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
-  re(s, u);
-  function s(r, t) {
-    var e;
-    e = u.call(this, r, t) || this;
-    var o = t, a = o && !o.isMounting ? r.enter : r.appear, p;
-    return e.appearStatus = null, r.in ? a ? (p = g, e.appearStatus = x) : p = w : r.unmountOnExit || r.mountOnEnter ? p = D : p = g, e.state = {
-      status: p
-    }, e.nextCallback = null, e;
-  }
-  s.getDerivedStateFromProps = function(t, e) {
-    var o = t.in;
-    return o && e.status === D ? {
-      status: g
-    } : null;
-  };
-  var i = s.prototype;
-  return i.componentDidMount = function() {
-    this.updateStatus(!0, this.appearStatus);
-  }, i.componentDidUpdate = function(t) {
-    var e = null;
-    if (t !== this.props) {
-      var o = this.state.status;
-      this.props.in ? o !== x && o !== w && (e = x) : (o === x || o === w) && (e = A);
-    }
-    this.updateStatus(!1, e);
-  }, i.componentWillUnmount = function() {
-    this.cancelNextCallback();
-  }, i.getTimeouts = function() {
-    var t = this.props.timeout, e, o, a;
-    return e = o = a = t, t != null && typeof t != "number" && (e = t.exit, o = t.enter, a = t.appear !== void 0 ? t.appear : o), {
-      exit: e,
-      enter: o,
-      appear: a
-    };
-  }, i.updateStatus = function(t, e) {
-    if (t === void 0 && (t = !1), e !== null)
-      if (this.cancelNextCallback(), e === x) {
-        if (this.props.unmountOnExit || this.props.mountOnEnter) {
-          var o = this.props.nodeRef ? this.props.nodeRef.current : P.findDOMNode(this);
-          o && ae(o);
-        }
-        this.performEnter(t);
-      } else
-        this.performExit();
-    else
-      this.props.unmountOnExit && this.state.status === g && this.setState({
-        status: D
-      });
-  }, i.performEnter = function(t) {
-    var e = this, o = this.props.enter, a = this.context ? this.context.isMounting : t, p = this.props.nodeRef ? [a] : [P.findDOMNode(this), a], h = p[0], d = p[1], m = this.getTimeouts(), y = a ? m.appear : m.enter;
-    if (!t && !o || F.disabled) {
-      this.safeSetState({
-        status: w
-      }, function() {
-        e.props.onEntered(h);
-      });
-      return;
-    }
-    this.props.onEnter(h, d), this.safeSetState({
-      status: x
-    }, function() {
-      e.props.onEntering(h, d), e.onTransitionEnd(y, function() {
-        e.safeSetState({
-          status: w
-        }, function() {
-          e.props.onEntered(h, d);
-        });
-      });
-    });
-  }, i.performExit = function() {
-    var t = this, e = this.props.exit, o = this.getTimeouts(), a = this.props.nodeRef ? void 0 : P.findDOMNode(this);
-    if (!e || F.disabled) {
-      this.safeSetState({
-        status: g
-      }, function() {
-        t.props.onExited(a);
-      });
-      return;
-    }
-    this.props.onExit(a), this.safeSetState({
-      status: A
-    }, function() {
-      t.props.onExiting(a), t.onTransitionEnd(o.exit, function() {
-        t.safeSetState({
-          status: g
-        }, function() {
-          t.props.onExited(a);
-        });
-      });
-    });
-  }, i.cancelNextCallback = function() {
-    this.nextCallback !== null && (this.nextCallback.cancel(), this.nextCallback = null);
-  }, i.safeSetState = function(t, e) {
-    e = this.setNextCallback(e), this.setState(t, e);
-  }, i.setNextCallback = function(t) {
-    var e = this, o = !0;
-    return this.nextCallback = function(a) {
-      o && (o = !1, e.nextCallback = null, t(a));
-    }, this.nextCallback.cancel = function() {
-      o = !1;
-    }, this.nextCallback;
-  }, i.onTransitionEnd = function(t, e) {
-    this.setNextCallback(e);
-    var o = this.props.nodeRef ? this.props.nodeRef.current : P.findDOMNode(this), a = t == null && !this.props.addEndListener;
-    if (!o || a) {
-      setTimeout(this.nextCallback, 0);
-      return;
-    }
-    if (this.props.addEndListener) {
-      var p = this.props.nodeRef ? [this.nextCallback] : [o, this.nextCallback], h = p[0], d = p[1];
-      this.props.addEndListener(h, d);
-    }
-    t != null && setTimeout(this.nextCallback, t);
-  }, i.render = function() {
-    var t = this.state.status;
-    if (t === D)
-      return null;
-    var e = this.props, o = e.children;
-    e.in, e.mountOnEnter, e.unmountOnExit, e.appear, e.enter, e.exit, e.timeout, e.addEndListener, e.onEnter, e.onEntering, e.onEntered, e.onExit, e.onExiting, e.onExited, e.nodeRef;
-    var a = j(e, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
-    return (
-      // allows for nested Transitions
-      /* @__PURE__ */ C.createElement(G.Provider, {
-        value: null
-      }, typeof o == "function" ? o(t, a) : C.cloneElement(C.Children.only(o), a))
-    );
-  }, s;
-}(C.Component);
-b.contextType = G;
-b.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * A React reference to DOM element that need to transition:
-   * https://stackoverflow.com/a/51127130/4671932
-   *
-   *   - When `nodeRef` prop is used, `node` is not passed to callback functions
-   *      (e.g. `onEnter`) because user already has direct access to the node.
-   *   - When changing `key` prop of `Transition` in a `TransitionGroup` a new
-   *     `nodeRef` need to be provided to `Transition` with changed `key` prop
-   *     (see
-   *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
-   */
-  nodeRef: n.shape({
-    current: typeof Element > "u" ? n.any : function(u, s, i, r, t, e) {
-      var o = u[s];
-      return n.instanceOf(o && "ownerDocument" in o ? o.ownerDocument.defaultView.Element : Element)(u, s, i, r, t, e);
-    }
-  }),
-  /**
-   * A `function` child can be used instead of a React element. This function is
-   * called with the current transition status (`'entering'`, `'entered'`,
-   * `'exiting'`, `'exited'`), which can be used to apply context
-   * specific props to a component.
-   *
-   * ```jsx
-   * <Transition in={this.state.in} timeout={150}>
-   *   {state => (
-   *     <MyComponent className={`fade fade-${state}`} />
-   *   )}
-   * </Transition>
-   * ```
-   */
-  children: n.oneOfType([n.func.isRequired, n.element.isRequired]).isRequired,
-  /**
-   * Show the component; triggers the enter or exit states
-   */
-  in: n.bool,
-  /**
-   * By default the child component is mounted immediately along with
-   * the parent `Transition` component. If you want to "lazy mount" the component on the
-   * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
-   * mounted, even on "exited", unless you also specify `unmountOnExit`.
-   */
-  mountOnEnter: n.bool,
-  /**
-   * By default the child component stays mounted after it reaches the `'exited'` state.
-   * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
-   */
-  unmountOnExit: n.bool,
-  /**
-   * By default the child component does not perform the enter transition when
-   * it first mounts, regardless of the value of `in`. If you want this
-   * behavior, set both `appear` and `in` to `true`.
-   *
-   * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop
-   * > only adds an additional enter transition. However, in the
-   * > `<CSSTransition>` component that first enter transition does result in
-   * > additional `.appear-*` classes, that way you can choose to style it
-   * > differently.
-   */
-  appear: n.bool,
-  /**
-   * Enable or disable enter transitions.
-   */
-  enter: n.bool,
-  /**
-   * Enable or disable exit transitions.
-   */
-  exit: n.bool,
-  /**
-   * The duration of the transition, in milliseconds.
-   * Required unless `addEndListener` is provided.
-   *
-   * You may specify a single timeout for all transitions:
-   *
-   * ```jsx
-   * timeout={500}
-   * ```
-   *
-   * or individually:
-   *
-   * ```jsx
-   * timeout={{
-   *  appear: 500,
-   *  enter: 300,
-   *  exit: 500,
-   * }}
-   * ```
-   *
-   * - `appear` defaults to the value of `enter`
-   * - `enter` defaults to `0`
-   * - `exit` defaults to `0`
-   *
-   * @type {number | { enter?: number, exit?: number, appear?: number }}
-   */
-  timeout: function(s) {
-    var i = se;
-    s.addEndListener || (i = i.isRequired);
-    for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), e = 1; e < r; e++)
-      t[e - 1] = arguments[e];
-    return i.apply(void 0, [s].concat(t));
-  },
-  /**
-   * Add a custom transition end trigger. Called with the transitioning
-   * DOM node and a `done` callback. Allows for more fine grained transition end
-   * logic. Timeouts are still used as a fallback if provided.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * ```jsx
-   * addEndListener={(node, done) => {
-   *   // use the css transitionend event to mark the finish of a transition
-   *   node.addEventListener('transitionend', done, false);
-   * }}
-   * ```
-   */
-  addEndListener: n.func,
-  /**
-   * Callback fired before the "entering" status is applied. An extra parameter
-   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * @type Function(node: HtmlElement, isAppearing: bool) -> void
-   */
-  onEnter: n.func,
-  /**
-   * Callback fired after the "entering" status is applied. An extra parameter
-   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * @type Function(node: HtmlElement, isAppearing: bool)
-   */
-  onEntering: n.func,
-  /**
-   * Callback fired after the "entered" status is applied. An extra parameter
-   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * @type Function(node: HtmlElement, isAppearing: bool) -> void
-   */
-  onEntered: n.func,
-  /**
-   * Callback fired before the "exiting" status is applied.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * @type Function(node: HtmlElement) -> void
-   */
-  onExit: n.func,
-  /**
-   * Callback fired after the "exiting" status is applied.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * @type Function(node: HtmlElement) -> void
-   */
-  onExiting: n.func,
-  /**
-   * Callback fired after the "exited" status is applied.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed
-   *
-   * @type Function(node: HtmlElement) -> void
-   */
-  onExited: n.func
-} : {};
-function _() {
-}
-b.defaultProps = {
-  in: !1,
-  mountOnEnter: !1,
-  unmountOnExit: !1,
-  appear: !1,
-  enter: !0,
-  exit: !0,
-  onEnter: _,
-  onEntering: _,
-  onEntered: _,
-  onExit: _,
-  onExiting: _,
-  onExited: _
-};
-b.UNMOUNTED = D;
-b.EXITED = g;
-b.ENTERING = x;
-b.ENTERED = w;
-b.EXITING = A;
-const ie = "_snackbar_1w4kg_56", ue = "_bottomToTop_1w4kg_1", v = {
-  "u-typography-h1": "_u-typography-h1_1w4kg_1",
-  "u-typography-h2": "_u-typography-h2_1w4kg_8",
-  "u-typography-h3": "_u-typography-h3_1w4kg_15",
-  "u-typography-h4": "_u-typography-h4_1w4kg_22",
-  "u-typography-h5": "_u-typography-h5_1w4kg_29",
-  "u-typography-h6": "_u-typography-h6_1w4kg_36",
-  "u-typography-base": "_u-typography-base_1w4kg_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_1w4kg_48",
-  "u-typography-base--xl": "_u-typography-base--xl_1w4kg_52",
-  "u-typography-base--lg": "_u-typography-base--lg_1w4kg_56",
-  "snackbar--message": "_snackbar--message_1w4kg_56",
-  "u-typography-base--sm": "_u-typography-base--sm_1w4kg_60",
-  "u-typography-base--bold": "_u-typography-base--bold_1w4kg_64",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1w4kg_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_1w4kg_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1w4kg_73",
-  snackbar: ie,
-  "snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_1w4kg_90",
-  "snackbar--content": "_snackbar--content_1w4kg_95",
-  "snackbar--success": "_snackbar--success_1w4kg_105",
-  "snackbar--error": "_snackbar--error_1w4kg_108",
-  "snackbar--warning": "_snackbar--warning_1w4kg_111",
-  "snackbar--action": "_snackbar--action_1w4kg_121",
-  bottomToTop: ue
-}, ye = ({
-  snackbarMessage: u,
-  variant: s,
-  autoHideDuration: i = 5e3,
-  open: r = !0,
-  onClose: t,
-  onClosed: e,
-  classNameWrapper: o,
-  "data-testid": a
-}) => {
-  const [p, h] = V(!0), d = X(null), m = {
-    entering: "translateY(0)",
-    entered: "translateY(0)",
-    exiting: "translateY(80px)",
-    exited: "translateY(80px)",
-    unmounted: "translateY(80px)"
-  }, y = () => {
-    h(!1);
-  }, T = () => {
-    h(!0);
-  };
-  return /* @__PURE__ */ E("div", { className: N(v.snackbar, o), children: /* @__PURE__ */ E(
-    q,
-    {
-      autoHideDuration: i,
-      open: r,
-      onClose: (k, O) => O !== "clickaway" && (t == null ? void 0 : t()),
-      exited: p,
-      className: N(v["snackbar__snackbar-el-wrapper"]),
-      children: /* @__PURE__ */ E(
-        b,
-        {
-          timeout: { enter: 400, exit: 400 },
-          in: r,
-          appear: !0,
-          unmountOnExit: !0,
-          onEnter: y,
-          onExited: T,
-          onExit: e,
-          nodeRef: d,
-          children: (k) => /* @__PURE__ */ Y(
-            "div",
-            {
-              className: N(v["snackbar--content"], v[`snackbar--${s}`]),
-              style: {
-                transform: m[k],
-                transition: "transform 300ms ease"
-              },
-              ref: d,
-              "data-testid": a,
-              children: [
-                /* @__PURE__ */ E("div", { className: N(v["snackbar--message"]), children: /* @__PURE__ */ E("p", { children: u }) }),
-                /* @__PURE__ */ E("div", { className: N(v["snackbar--action"]), children: /* @__PURE__ */ E("a", { onClick: t, children: /* @__PURE__ */ E(K, { icon: "xmark", color: "var(--white-100)", size: "1.5rem" }) }) })
-              ]
-            }
-          )
-        }
-      )
-    }
-  ) });
-};
-export {
-  ye as Snackbar
-};