@pismo/marola 0.0.1-alpha.9 → 1.0.0-beta.0

package/dist/components/Snackbar/Snackbar.js

@@ -1,14 +1,14 @@
 import '../../assets/Snackbar.css';
-import { jsx as h, jsxs as Y } from "react/jsx-runtime";
-import * as N from "react";
+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 O } from "../../clsx-DB4S2d7J.js";
+import { c as N } from "../../clsx-DB4S2d7J.js";
 import { Icon as K } from "../Icon/Icon.js";
-import { a as w, _ as j } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
-import { g as $, a as z, e as H, b as U, P as t, c as J, d as Q } from "../../index-CqjC7P5Y.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, R as D } from "../../index-BNWbc5Kh.js";
-import { C as B } from "../../ClickAwayListener-BKznXF1d.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);
@@ -17,111 +17,111 @@ z(W, ["root"]);
 function te(u = {}) {
   const {
     autoHideDuration: s = null,
-    disableWindowBlurListener: a = !1,
+    disableWindowBlurListener: i = !1,
     onClose: r,
-    open: n,
+    open: t,
     resumeHideDuration: e
   } = u, o = Z();
-  N.useEffect(() => {
-    if (!n)
+  S.useEffect(() => {
+    if (!t)
       return;
-    function l(d) {
-      d.defaultPrevented || (d.key === "Escape" || d.key === "Esc") && (r == null || r(d, "escapeKeyDown"));
+    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);
     };
-  }, [n, r]);
-  const i = I((l, d) => {
-    r == null || r(l, d);
-  }), c = I((l) => {
+  }, [t, r]);
+  const a = I((l, c) => {
+    r == null || r(l, c);
+  }), p = I((l) => {
     !r || l == null || o.start(l, () => {
-      i(null, "timeout");
+      a(null, "timeout");
     });
   });
-  N.useEffect(() => (n && c(s), o.clear), [n, s, c, o]);
-  const m = (l) => {
+  S.useEffect(() => (t && p(s), o.clear), [t, s, p, o]);
+  const h = (l) => {
     r == null || r(l, "clickaway");
-  }, p = o.clear, E = N.useCallback(() => {
-    s != null && c(e ?? s * 0.5);
-  }, [s, e, c]), x = (l) => (d) => {
+  }, 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(d), E();
-  }, g = (l) => (d) => {
+    f == null || f(c), m();
+  }, T = (l) => (c) => {
     const f = l.onFocus;
-    f == null || f(d), p();
-  }, R = (l) => (d) => {
+    f == null || f(c), d();
+  }, k = (l) => (c) => {
     const f = l.onMouseEnter;
-    f == null || f(d), p();
-  }, P = (l) => (d) => {
+    f == null || f(c), d();
+  }, O = (l) => (c) => {
     const f = l.onMouseLeave;
-    f == null || f(d), E();
+    f == null || f(c), m();
   };
-  return N.useEffect(() => {
-    if (!a && n)
-      return window.addEventListener("focus", E), window.addEventListener("blur", p), () => {
-        window.removeEventListener("focus", E), window.removeEventListener("blur", p);
+  return S.useEffect(() => {
+    if (!i && t)
+      return window.addEventListener("focus", m), window.addEventListener("blur", d), () => {
+        window.removeEventListener("focus", m), window.removeEventListener("blur", d);
       };
-  }, [a, n, E, p]), {
+  }, [i, t, m, d]), {
     getRootProps: (l = {}) => {
-      const d = w({}, H(u), H(l));
-      return w({
+      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, d, {
-        onBlur: x(d),
-        onFocus: g(d),
-        onMouseEnter: R(d),
-        onMouseLeave: P(d)
+      }, l, c, {
+        onBlur: y(c),
+        onFocus: T(c),
+        onMouseEnter: k(c),
+        onMouseLeave: O(c)
       });
     },
-    onClickAway: m
+    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__ */ N.forwardRef(function(s, a) {
+}, Q(ee)), q = /* @__PURE__ */ S.forwardRef(function(s, i) {
   const {
     autoHideDuration: r = null,
-    children: n,
+    children: t,
     disableWindowBlurListener: e = !1,
     exited: o = !0,
-    onClose: i,
-    open: c,
-    resumeHideDuration: m,
-    slotProps: p = {},
-    slots: E = {}
-  } = s, x = j(s, ne), g = oe(), {
-    getRootProps: R,
-    onClickAway: P
-  } = te(w({}, s, {
+    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: i,
-    open: c,
-    resumeHideDuration: m
-  })), L = s, l = E.root || "div", d = U({
+    onClose: a,
+    open: p,
+    resumeHideDuration: h
+  })), L = s, l = m.root || "div", c = U({
     elementType: l,
-    getSlotProps: R,
-    externalForwardedProps: x,
-    externalSlotProps: p.root,
+    getSlotProps: k,
+    externalForwardedProps: y,
+    externalSlotProps: d.root,
     additionalProps: {
-      ref: a
+      ref: i
     },
     ownerState: L,
-    className: g.root
+    className: T.root
   }), f = U({
     elementType: B,
-    externalSlotProps: p.clickAwayListener,
+    externalSlotProps: d.clickAwayListener,
     additionalProps: {
-      onClickAway: P
+      onClickAway: O
     },
     ownerState: L
   });
-  return delete f.ownerState, !c && o ? null : /* @__PURE__ */ h(B, w({}, f, {
-    children: /* @__PURE__ */ h(l, w({}, d, {
-      children: n
+  return delete f.ownerState, !p && o ? null : /* @__PURE__ */ E(B, R({}, f, {
+    children: /* @__PURE__ */ E(l, R({}, c, {
+      children: t
     }))
   }));
 });
@@ -137,21 +137,21 @@ process.env.NODE_ENV !== "production" && (q.propTypes = {
    * the `null` value.
    * @default null
    */
-  autoHideDuration: t.number,
+  autoHideDuration: n.number,
   /**
    * @ignore
    */
-  children: t.node,
+  children: n.node,
   /**
    * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
    * @default false
    */
-  disableWindowBlurListener: t.bool,
+  disableWindowBlurListener: n.bool,
   /**
    * The prop used to handle exited transition and unmount the component.
    * @default true
    */
-  exited: t.bool,
+  exited: n.bool,
   /**
    * Callback fired when the component requests to be closed.
    * Typically `onClose` is used to set state in the parent component,
@@ -162,44 +162,44 @@ process.env.NODE_ENV !== "production" && (q.propTypes = {
    * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
-  onClose: t.func,
+  onClose: n.func,
   /**
    * If `true`, the component is shown.
    */
-  open: t.bool,
+  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: t.number,
+  resumeHideDuration: n.number,
   /**
    * The props used for each slot inside the Snackbar.
    * @default {}
    */
-  slotProps: t.shape({
-    clickAwayListener: t.oneOfType([t.func, t.shape({
-      children: t.element.isRequired,
-      disableReactTree: t.bool,
-      mouseEvent: t.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
-      onClickAway: t.func,
-      touchEvent: t.oneOf(["onTouchEnd", "onTouchStart", !1])
+  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: t.oneOfType([t.func, t.object])
+    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: t.shape({
-    root: t.elementType
+  slots: n.shape({
+    root: n.elementType
   })
 });
 function M(u, s) {
-  return M = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(r, n) {
-    return r.__proto__ = n, r;
+  return M = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(r, t) {
+    return r.__proto__ = t, r;
   }, M(u, s);
 }
 function re(u, s) {
@@ -208,152 +208,152 @@ function re(u, s) {
 const F = {
   disabled: !1
 };
-var se = process.env.NODE_ENV !== "production" ? t.oneOfType([t.number, t.shape({
-  enter: t.number,
-  exit: t.number,
-  appear: t.number
+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" && t.oneOfType([t.string, t.shape({
-  enter: t.string,
-  exit: t.string,
-  active: t.string
-}), t.shape({
-  enter: t.string,
-  enterDone: t.string,
-  enterActive: t.string,
-  exit: t.string,
-  exitDone: t.string,
-  exitActive: t.string
+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 ie = function(s) {
+var ae = function(s) {
   return s.scrollTop;
-}, S = "unmounted", v = "exited", k = "entering", y = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
+}, D = "unmounted", g = "exited", x = "entering", w = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
   re(s, u);
-  function s(r, n) {
+  function s(r, t) {
     var e;
-    e = u.call(this, r, n) || this;
-    var o = n, i = o && !o.isMounting ? r.enter : r.appear, c;
-    return e.appearStatus = null, r.in ? i ? (c = v, e.appearStatus = k) : c = y : r.unmountOnExit || r.mountOnEnter ? c = S : c = v, e.state = {
-      status: c
+    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(n, e) {
-    var o = n.in;
-    return o && e.status === S ? {
-      status: v
+  s.getDerivedStateFromProps = function(t, e) {
+    var o = t.in;
+    return o && e.status === D ? {
+      status: g
     } : null;
   };
-  var a = s.prototype;
-  return a.componentDidMount = function() {
+  var i = s.prototype;
+  return i.componentDidMount = function() {
     this.updateStatus(!0, this.appearStatus);
-  }, a.componentDidUpdate = function(n) {
+  }, i.componentDidUpdate = function(t) {
     var e = null;
-    if (n !== this.props) {
+    if (t !== this.props) {
       var o = this.state.status;
-      this.props.in ? o !== k && o !== y && (e = k) : (o === k || o === y) && (e = A);
+      this.props.in ? o !== x && o !== w && (e = x) : (o === x || o === w) && (e = A);
     }
     this.updateStatus(!1, e);
-  }, a.componentWillUnmount = function() {
+  }, i.componentWillUnmount = function() {
     this.cancelNextCallback();
-  }, a.getTimeouts = function() {
-    var n = this.props.timeout, e, o, i;
-    return e = o = i = n, n != null && typeof n != "number" && (e = n.exit, o = n.enter, i = n.appear !== void 0 ? n.appear : o), {
+  }, 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: i
+      appear: a
     };
-  }, a.updateStatus = function(n, e) {
-    if (n === void 0 && (n = !1), e !== null)
-      if (this.cancelNextCallback(), e === k) {
+  }, 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 : D.findDOMNode(this);
-          o && ie(o);
+          var o = this.props.nodeRef ? this.props.nodeRef.current : P.findDOMNode(this);
+          o && ae(o);
         }
-        this.performEnter(n);
+        this.performEnter(t);
       } else
         this.performExit();
     else
-      this.props.unmountOnExit && this.state.status === v && this.setState({
-        status: S
+      this.props.unmountOnExit && this.state.status === g && this.setState({
+        status: D
       });
-  }, a.performEnter = function(n) {
-    var e = this, o = this.props.enter, i = this.context ? this.context.isMounting : n, c = this.props.nodeRef ? [i] : [D.findDOMNode(this), i], m = c[0], p = c[1], E = this.getTimeouts(), x = i ? E.appear : E.enter;
-    if (!n && !o || F.disabled) {
+  }, 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: y
+        status: w
       }, function() {
-        e.props.onEntered(m);
+        e.props.onEntered(h);
       });
       return;
     }
-    this.props.onEnter(m, p), this.safeSetState({
-      status: k
+    this.props.onEnter(h, d), this.safeSetState({
+      status: x
     }, function() {
-      e.props.onEntering(m, p), e.onTransitionEnd(x, function() {
+      e.props.onEntering(h, d), e.onTransitionEnd(y, function() {
         e.safeSetState({
-          status: y
+          status: w
         }, function() {
-          e.props.onEntered(m, p);
+          e.props.onEntered(h, d);
         });
       });
     });
-  }, a.performExit = function() {
-    var n = this, e = this.props.exit, o = this.getTimeouts(), i = this.props.nodeRef ? void 0 : D.findDOMNode(this);
+  }, 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: v
+        status: g
       }, function() {
-        n.props.onExited(i);
+        t.props.onExited(a);
       });
       return;
     }
-    this.props.onExit(i), this.safeSetState({
+    this.props.onExit(a), this.safeSetState({
       status: A
     }, function() {
-      n.props.onExiting(i), n.onTransitionEnd(o.exit, function() {
-        n.safeSetState({
-          status: v
+      t.props.onExiting(a), t.onTransitionEnd(o.exit, function() {
+        t.safeSetState({
+          status: g
         }, function() {
-          n.props.onExited(i);
+          t.props.onExited(a);
         });
       });
     });
-  }, a.cancelNextCallback = function() {
+  }, i.cancelNextCallback = function() {
     this.nextCallback !== null && (this.nextCallback.cancel(), this.nextCallback = null);
-  }, a.safeSetState = function(n, e) {
-    e = this.setNextCallback(e), this.setState(n, e);
-  }, a.setNextCallback = function(n) {
+  }, 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(i) {
-      o && (o = !1, e.nextCallback = null, n(i));
+    return this.nextCallback = function(a) {
+      o && (o = !1, e.nextCallback = null, t(a));
     }, this.nextCallback.cancel = function() {
       o = !1;
     }, this.nextCallback;
-  }, a.onTransitionEnd = function(n, e) {
+  }, i.onTransitionEnd = function(t, e) {
     this.setNextCallback(e);
-    var o = this.props.nodeRef ? this.props.nodeRef.current : D.findDOMNode(this), i = n == null && !this.props.addEndListener;
-    if (!o || i) {
+    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 c = this.props.nodeRef ? [this.nextCallback] : [o, this.nextCallback], m = c[0], p = c[1];
-      this.props.addEndListener(m, p);
+      var p = this.props.nodeRef ? [this.nextCallback] : [o, this.nextCallback], h = p[0], d = p[1];
+      this.props.addEndListener(h, d);
     }
-    n != null && setTimeout(this.nextCallback, n);
-  }, a.render = function() {
-    var n = this.state.status;
-    if (n === S)
+    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 i = j(e, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "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(n, i) : C.cloneElement(C.Children.only(o), i))
+      }, typeof o == "function" ? o(t, a) : C.cloneElement(C.Children.only(o), a))
     );
   }, s;
 }(C.Component);
@@ -370,10 +370,10 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    *     (see
    *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
    */
-  nodeRef: t.shape({
-    current: typeof Element > "u" ? t.any : function(u, s, a, r, n, e) {
+  nodeRef: n.shape({
+    current: typeof Element > "u" ? n.any : function(u, s, i, r, t, e) {
       var o = u[s];
-      return t.instanceOf(o && "ownerDocument" in o ? o.ownerDocument.defaultView.Element : Element)(u, s, a, r, n, e);
+      return n.instanceOf(o && "ownerDocument" in o ? o.ownerDocument.defaultView.Element : Element)(u, s, i, r, t, e);
     }
   }),
   /**
@@ -390,23 +390,23 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    * </Transition>
    * ```
    */
-  children: t.oneOfType([t.func.isRequired, t.element.isRequired]).isRequired,
+  children: n.oneOfType([n.func.isRequired, n.element.isRequired]).isRequired,
   /**
    * Show the component; triggers the enter or exit states
    */
-  in: t.bool,
+  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: t.bool,
+  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: t.bool,
+  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
@@ -418,15 +418,15 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    * > additional `.appear-*` classes, that way you can choose to style it
    * > differently.
    */
-  appear: t.bool,
+  appear: n.bool,
   /**
    * Enable or disable enter transitions.
    */
-  enter: t.bool,
+  enter: n.bool,
   /**
    * Enable or disable exit transitions.
    */
-  exit: t.bool,
+  exit: n.bool,
   /**
    * The duration of the transition, in milliseconds.
    * Required unless `addEndListener` is provided.
@@ -454,11 +454,11 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    * @type {number | { enter?: number, exit?: number, appear?: number }}
    */
   timeout: function(s) {
-    var a = se;
-    s.addEndListener || (a = a.isRequired);
-    for (var r = arguments.length, n = new Array(r > 1 ? r - 1 : 0), e = 1; e < r; e++)
-      n[e - 1] = arguments[e];
-    return a.apply(void 0, [s].concat(n));
+    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
@@ -474,7 +474,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    * }}
    * ```
    */
-  addEndListener: t.func,
+  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
@@ -483,7 +483,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEnter: t.func,
+  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
@@ -492,7 +492,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool)
    */
-  onEntering: t.func,
+  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
@@ -501,7 +501,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement, isAppearing: bool) -> void
    */
-  onEntered: t.func,
+  onEntered: n.func,
   /**
    * Callback fired before the "exiting" status is applied.
    *
@@ -509,7 +509,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExit: t.func,
+  onExit: n.func,
   /**
    * Callback fired after the "exiting" status is applied.
    *
@@ -517,7 +517,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExiting: t.func,
+  onExiting: n.func,
   /**
    * Callback fired after the "exited" status is applied.
    *
@@ -525,7 +525,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    *
    * @type Function(node: HtmlElement) -> void
    */
-  onExited: t.func
+  onExited: n.func
 } : {};
 function _() {
 }
@@ -543,72 +543,89 @@ b.defaultProps = {
   onExiting: _,
   onExited: _
 };
-b.UNMOUNTED = S;
-b.EXITED = v;
-b.ENTERING = k;
-b.ENTERED = y;
+b.UNMOUNTED = D;
+b.EXITED = g;
+b.ENTERING = x;
+b.ENTERED = w;
 b.EXITING = A;
-const ae = "_snackbar_kt3bd_1", ue = "_bottomToTop_kt3bd_1", T = {
-  snackbar: ae,
-  "snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_kt3bd_14",
-  "snackbar--content": "_snackbar--content_kt3bd_19",
-  "snackbar--success": "_snackbar--success_kt3bd_29",
-  "snackbar--error": "_snackbar--error_kt3bd_32",
-  "snackbar--attention": "_snackbar--attention_kt3bd_35",
-  "snackbar--message": "_snackbar--message_kt3bd_38",
-  "snackbar--action": "_snackbar--action_kt3bd_46",
+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
-}, xe = ({
+}, ye = ({
   snackbarMessage: u,
-  color: s,
-  autoHideDuration: a = 5e3,
+  variant: s,
+  autoHideDuration: i = 5e3,
   open: r = !0,
-  onClose: n,
-  classNameWrapper: e,
-  "data-testid": o
+  onClose: t,
+  onClosed: e,
+  classNameWrapper: o,
+  "data-testid": a
 }) => {
-  const [i, c] = V(!0), m = X(null), p = {
+  const [p, h] = V(!0), d = X(null), m = {
     entering: "translateY(0)",
     entered: "translateY(0)",
     exiting: "translateY(80px)",
     exited: "translateY(80px)",
     unmounted: "translateY(80px)"
-  }, E = () => {
-    c(!1);
-  }, x = () => {
-    c(!0);
+  }, y = () => {
+    h(!1);
+  }, T = () => {
+    h(!0);
   };
-  return /* @__PURE__ */ h("div", { className: O(T.snackbar, e), children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ E("div", { className: N(v.snackbar, o), children: /* @__PURE__ */ E(
     q,
     {
-      autoHideDuration: a,
+      autoHideDuration: i,
       open: r,
-      onClose: n,
-      exited: i,
-      className: O(T["snackbar__snackbar-el-wrapper"]),
-      children: /* @__PURE__ */ h(
+      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: E,
-          onExited: x,
-          nodeRef: m,
-          children: (g) => /* @__PURE__ */ Y(
+          onEnter: y,
+          onExited: T,
+          onExit: e,
+          nodeRef: d,
+          children: (k) => /* @__PURE__ */ Y(
             "div",
             {
-              className: O(T["snackbar--content"], T[`snackbar--${s}`]),
+              className: N(v["snackbar--content"], v[`snackbar--${s}`]),
               style: {
-                transform: p[g],
+                transform: m[k],
                 transition: "transform 300ms ease"
               },
-              ref: m,
-              "data-testid": o,
+              ref: d,
+              "data-testid": a,
               children: [
-                /* @__PURE__ */ h("div", { className: O(T["snackbar--message"]), children: /* @__PURE__ */ h("p", { children: u }) }),
-                /* @__PURE__ */ h("div", { className: O(T["snackbar--action"]), children: /* @__PURE__ */ h("a", { onClick: n, children: /* @__PURE__ */ h(K, { icon: "xmark", color: "var(--white-100)", size: "1.5rem" }) }) })
+                /* @__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" }) }) })
               ]
             }
           )
@@ -618,5 +635,5 @@ const ae = "_snackbar_kt3bd_1", ue = "_bottomToTop_kt3bd_1", T = {
   ) });
 };
 export {
-  xe as Snackbar
+  ye as Snackbar
 };