@pismo/marola 1.0.0-beta.8 → 1.0.0

package/dist/components/Select/SelectButton.d.ts

@@ -8,5 +8,7 @@ export interface SelectButtonProps {
     prefix?: string;
     'data-testid'?: string;
     onClick: () => void;
+    fullWidth?: boolean;
+    placeholder?: string;
 }
 export declare const SelectButton: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Select/SelectButton.js

@@ -1,8 +1,9 @@
 import "react/jsx-runtime";
 import "react";
 import "../../clsx-DB4S2d7J.js";
+import "../Icon/Icon.js";
 import "../Typography/Typography.js";
-import { S as e } from "../../SelectButton-K3OIfR5m.js";
+import { S } from "../../SelectButton-B38avP9u.js";
 export {
-  e as SelectButton
+  S as SelectButton
 };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -20,6 +20,8 @@ export type SkeletonTableProps = SkeletonProps & {
     rows?: number;
     /** Controls if the with of the cells should be automatically defined */
     autoWidth?: boolean;
+    /** Controls if show or not the skeleton of the table header */
+    showHeader?: boolean;
 };
-declare const SkeletonTable: ({ columns, rows, autoWidth, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+declare const SkeletonTable: ({ columns, rows, autoWidth, showHeader, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
 export { Skeleton, SkeletonCircle, SkeletonTable };

package/dist/components/Skeleton/Skeleton.js

@@ -1,23 +1,29 @@
 import '../../assets/Skeleton.css';
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import { jsx as t, jsxs as N } from "react/jsx-runtime";
 import { c as r } from "../../clsx-DB4S2d7J.js";
-const N = "_skeleton_dtmoz_1", b = "_skeletonLoading_dtmoz_1", o = {
-  skeleton: N,
+const u = "_skeleton_mst8q_1", b = "_skeletonLoading_mst8q_1", o = {
+  skeleton: u,
   skeletonLoading: b,
-  "skeleton--circle-type": "_skeleton--circle-type_dtmoz_13",
-  "skeleton--table-type": "_skeleton--table-type_dtmoz_17"
-}, i = (e) => /* @__PURE__ */ t("div", { ...e, className: r(o.skeleton, e.className) }), $ = ({ size: e = "4rem", ...l }) => {
+  "skeleton--circle-type": "_skeleton--circle-type_mst8q_13",
+  "skeleton--table-type": "_skeleton--table-type_mst8q_17"
+}, d = (e) => /* @__PURE__ */ t("div", { ...e, className: r(o.skeleton, e.className) }), C = ({ size: e = "4rem", ...l }) => {
   const s = r(o.skeleton, o["skeleton--circle-type"], l.className);
   return /* @__PURE__ */ t("div", { ...l, style: { width: e, height: e }, className: s });
-}, d = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, C = ({ columns: e = 5, rows: l = 5, autoWidth: s = !0, ...c }) => {
-  const m = r(o["skeleton--table-type"], c.className), a = `${100 / e}%`, h = /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((y, n) => /* @__PURE__ */ t("th", { style: { width: a }, children: /* @__PURE__ */ t(i, { style: { width: s ? d(50) : "100%" } }) }, `row-columns-${n}`)) }), k = new Array(l).fill(null).map((y, n) => /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((f, _) => /* @__PURE__ */ t("td", { style: { width: a }, children: /* @__PURE__ */ t(i, { style: { width: s ? d() : "100%" } }) }, `row-${n}-cell-${_}`)) }, `row-${n}`));
-  return /* @__PURE__ */ w("table", { ...c, className: m, children: [
-    /* @__PURE__ */ t("thead", { children: h }),
-    /* @__PURE__ */ t("tbody", { children: k })
+}, m = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, L = ({
+  columns: e = 5,
+  rows: l = 5,
+  autoWidth: s = !0,
+  showHeader: c = !0,
+  ...a
+}) => {
+  const k = r(o["skeleton--table-type"], a.className), i = `${100 / e}%`, h = c && /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((_, n) => /* @__PURE__ */ t("th", { style: { width: i }, children: /* @__PURE__ */ t(d, { style: { width: s ? m(50) : "100%" } }) }, `row-columns-${n}`)) }), y = new Array(l).fill(null).map((_, n) => /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((f, w) => /* @__PURE__ */ t("td", { style: { width: i }, children: /* @__PURE__ */ t(d, { style: { width: s ? m() : "100%" } }) }, `row-${n}-cell-${w}`)) }, `row-${n}`));
+  return /* @__PURE__ */ N("table", { ...a, className: k, children: [
+    c && /* @__PURE__ */ t("thead", { children: h }),
+    /* @__PURE__ */ t("tbody", { children: y })
   ] });
 };
 export {
-  i as Skeleton,
-  $ as SkeletonCircle,
-  C as SkeletonTable
+  d as Skeleton,
+  C as SkeletonCircle,
+  L as SkeletonTable
 };

package/dist/components/Skeleton/SkeletonTable.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ columns, rows, autoWidth, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ columns, rows, autoWidth, showHeader, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/components/Snackbar/Snackbar.js

@@ -1,28 +1,29 @@
 import '../../assets/Snackbar.css';
-import { jsx as E, jsxs as Y } from "react/jsx-runtime";
-import * as S from "react";
+import { jsx as h, jsxs as Y } from "react/jsx-runtime";
+import * as w from "react";
 import C, { useState as V, useRef as X } from "react";
-import { c as N } from "../../clsx-DB4S2d7J.js";
+import { c as S } 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 "../../useSlotProps-kRhf7Gil.js";
-import { u as Z } from "../../useTimeout-DxF9kiZL.js";
+import { Text as $ } from "../Typography/Typography.js";
+import { g as z, a as J, b as R, f as H, _ as j, c as U, P as n, d as Q, e as Z } from "../../useSlotProps-C_I1kEHr.js";
+import { u as ee } from "../../useTimeout-DxF9kiZL.js";
 import { u as I } from "../../useEventCallback-BAQJJ3ye.js";
-import { C as B } from "../../ClickAwayListener-BaJ-OV_7.js";
-import { R as P } from "../../index-D3Wj0eid.js";
+import { C as B } from "../../ClickAwayListener-DbEYZpyh.js";
+import { R as P } from "../../index-bQFToy-I.js";
 const W = "Snackbar";
-function ee(u) {
-  return $(W, u);
+function te(u) {
+  return z(W, u);
 }
-z(W, ["root"]);
-function te(u = {}) {
+J(W, ["root"]);
+function ne(u = {}) {
   const {
     autoHideDuration: s = null,
     disableWindowBlurListener: i = !1,
     onClose: r,
     open: t,
     resumeHideDuration: e
-  } = u, o = Z();
-  S.useEffect(() => {
+  } = u, o = ee();
+  w.useEffect(() => {
     if (!t)
       return;
     function l(c) {
@@ -34,35 +35,35 @@ function te(u = {}) {
   }, [t, r]);
   const a = I((l, c) => {
     r == null || r(l, c);
-  }), p = I((l) => {
+  }), d = 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) => {
+  w.useEffect(() => (t && d(s), o.clear), [t, s, d, o]);
+  const m = (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) => {
+  }, p = o.clear, E = w.useCallback(() => {
+    s != null && d(e ?? s * 0.5);
+  }, [s, e, d]), x = (l) => (c) => {
     const f = l.onBlur;
-    f == null || f(c), m();
-  }, T = (l) => (c) => {
+    f == null || f(c), E();
+  }, O = (l) => (c) => {
     const f = l.onFocus;
-    f == null || f(c), d();
-  }, k = (l) => (c) => {
+    f == null || f(c), p();
+  }, T = (l) => (c) => {
     const f = l.onMouseEnter;
-    f == null || f(c), d();
-  }, O = (l) => (c) => {
+    f == null || f(c), p();
+  }, N = (l) => (c) => {
     const f = l.onMouseLeave;
-    f == null || f(c), m();
+    f == null || f(c), E();
   };
-  return S.useEffect(() => {
+  return w.useEffect(() => {
     if (!i && t)
-      return window.addEventListener("focus", m), window.addEventListener("blur", d), () => {
-        window.removeEventListener("focus", m), window.removeEventListener("blur", d);
+      return window.addEventListener("focus", E), window.addEventListener("blur", p), () => {
+        window.removeEventListener("focus", E), window.removeEventListener("blur", p);
       };
-  }, [i, t, m, d]), {
+  }, [i, t, E, p]), {
     getRootProps: (l = {}) => {
       const c = R({}, H(u), H(l));
       return R({
@@ -70,57 +71,57 @@ function te(u = {}) {
         // 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)
+        onBlur: x(c),
+        onFocus: O(c),
+        onMouseEnter: T(c),
+        onMouseLeave: N(c)
       });
     },
-    onClickAway: h
+    onClickAway: m
   };
 }
-const ne = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"], oe = () => J({
+const oe = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"], re = () => Q({
   root: ["root"]
-}, Q(ee)), q = /* @__PURE__ */ S.forwardRef(function(s, i) {
+}, Z(te)), q = /* @__PURE__ */ w.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, {
+    open: d,
+    resumeHideDuration: m,
+    slotProps: p = {},
+    slots: E = {}
+  } = s, x = j(s, oe), O = re(), {
+    getRootProps: T,
+    onClickAway: N
+  } = ne(R({}, s, {
     autoHideDuration: r,
     disableWindowBlurListener: e,
     onClose: a,
-    open: p,
-    resumeHideDuration: h
-  })), L = s, l = m.root || "div", c = U({
+    open: d,
+    resumeHideDuration: m
+  })), L = s, l = E.root || "div", c = U({
     elementType: l,
-    getSlotProps: k,
-    externalForwardedProps: y,
-    externalSlotProps: d.root,
+    getSlotProps: T,
+    externalForwardedProps: x,
+    externalSlotProps: p.root,
     additionalProps: {
       ref: i
     },
     ownerState: L,
-    className: T.root
+    className: O.root
   }), f = U({
     elementType: B,
-    externalSlotProps: d.clickAwayListener,
+    externalSlotProps: p.clickAwayListener,
     additionalProps: {
-      onClickAway: O
+      onClickAway: N
     },
     ownerState: L
   });
-  return delete f.ownerState, !p && o ? null : /* @__PURE__ */ E(B, R({}, f, {
-    children: /* @__PURE__ */ E(l, R({}, c, {
+  return delete f.ownerState, !d && o ? null : /* @__PURE__ */ h(B, R({}, f, {
+    children: /* @__PURE__ */ h(l, R({}, c, {
       children: t
     }))
   }));
@@ -202,13 +203,13 @@ function M(u, s) {
     return r.__proto__ = t, r;
   }, M(u, s);
 }
-function re(u, s) {
+function se(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({
+var ae = process.env.NODE_ENV !== "production" ? n.oneOfType([n.number, n.shape({
   enter: n.number,
   exit: n.number,
   appear: n.number
@@ -226,22 +227,22 @@ process.env.NODE_ENV !== "production" && n.oneOfType([n.string, n.shape({
   exitActive: n.string
 })]);
 const G = C.createContext(null);
-var ae = function(s) {
+var ie = function(s) {
   return s.scrollTop;
-}, D = "unmounted", g = "exited", x = "entering", w = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
-  re(s, u);
+}, D = "unmounted", v = "exited", k = "entering", g = "entered", A = "exiting", b = /* @__PURE__ */ function(u) {
+  se(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
+    var o = t, a = o && !o.isMounting ? r.enter : r.appear, d;
+    return e.appearStatus = null, r.in ? a ? (d = v, e.appearStatus = k) : d = g : r.unmountOnExit || r.mountOnEnter ? d = D : d = v, e.state = {
+      status: d
     }, e.nextCallback = null, e;
   }
   s.getDerivedStateFromProps = function(t, e) {
     var o = t.in;
     return o && e.status === D ? {
-      status: g
+      status: v
     } : null;
   };
   var i = s.prototype;
@@ -251,7 +252,7 @@ var ae = function(s) {
     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.props.in ? o !== k && o !== g && (e = k) : (o === k || o === g) && (e = A);
     }
     this.updateStatus(!1, e);
   }, i.componentWillUnmount = function() {
@@ -265,36 +266,36 @@ var ae = function(s) {
     };
   }, i.updateStatus = function(t, e) {
     if (t === void 0 && (t = !1), e !== null)
-      if (this.cancelNextCallback(), e === x) {
+      if (this.cancelNextCallback(), e === k) {
         if (this.props.unmountOnExit || this.props.mountOnEnter) {
           var o = this.props.nodeRef ? this.props.nodeRef.current : P.findDOMNode(this);
-          o && ae(o);
+          o && ie(o);
         }
         this.performEnter(t);
       } else
         this.performExit();
     else
-      this.props.unmountOnExit && this.state.status === g && this.setState({
+      this.props.unmountOnExit && this.state.status === v && 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;
+    var e = this, o = this.props.enter, a = this.context ? this.context.isMounting : t, d = this.props.nodeRef ? [a] : [P.findDOMNode(this), a], m = d[0], p = d[1], E = this.getTimeouts(), x = a ? E.appear : E.enter;
     if (!t && !o || F.disabled) {
       this.safeSetState({
-        status: w
+        status: g
       }, function() {
-        e.props.onEntered(h);
+        e.props.onEntered(m);
       });
       return;
     }
-    this.props.onEnter(h, d), this.safeSetState({
-      status: x
+    this.props.onEnter(m, p), this.safeSetState({
+      status: k
     }, function() {
-      e.props.onEntering(h, d), e.onTransitionEnd(y, function() {
+      e.props.onEntering(m, p), e.onTransitionEnd(x, function() {
         e.safeSetState({
-          status: w
+          status: g
         }, function() {
-          e.props.onEntered(h, d);
+          e.props.onEntered(m, p);
         });
       });
     });
@@ -302,7 +303,7 @@ var ae = function(s) {
     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
+        status: v
       }, function() {
         t.props.onExited(a);
       });
@@ -313,7 +314,7 @@ var ae = function(s) {
     }, function() {
       t.props.onExiting(a), t.onTransitionEnd(o.exit, function() {
         t.safeSetState({
-          status: g
+          status: v
         }, function() {
           t.props.onExited(a);
         });
@@ -338,8 +339,8 @@ var ae = function(s) {
       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);
+      var d = this.props.nodeRef ? [this.nextCallback] : [o, this.nextCallback], m = d[0], p = d[1];
+      this.props.addEndListener(m, p);
     }
     t != null && setTimeout(this.nextCallback, t);
   }, i.render = function() {
@@ -454,7 +455,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    * @type {number | { enter?: number, exit?: number, appear?: number }}
    */
   timeout: function(s) {
-    var i = se;
+    var i = ae;
     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];
@@ -527,7 +528,7 @@ b.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onExited: n.func
 } : {};
-function _() {
+function y() {
 }
 b.defaultProps = {
   in: !1,
@@ -536,44 +537,28 @@ b.defaultProps = {
   appear: !1,
   enter: !0,
   exit: !0,
-  onEnter: _,
-  onEntering: _,
-  onEntered: _,
-  onExit: _,
-  onExiting: _,
-  onExited: _
+  onEnter: y,
+  onEntering: y,
+  onEntered: y,
+  onExit: y,
+  onExiting: y,
+  onExited: y
 };
 b.UNMOUNTED = D;
-b.EXITED = g;
-b.ENTERING = x;
-b.ENTERED = w;
+b.EXITED = v;
+b.ENTERING = k;
+b.ENTERED = g;
 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 = ({
+const ue = "_snackbar_8unab_2", le = "_bottomToTop_8unab_1", _ = {
+  snackbar: ue,
+  "snackbar__snackbar-el-wrapper": "_snackbar__snackbar-el-wrapper_8unab_15",
+  "snackbar--content": "_snackbar--content_8unab_20",
+  "snackbar--success": "_snackbar--success_8unab_32",
+  "snackbar--error": "_snackbar--error_8unab_36",
+  "snackbar--warning": "_snackbar--warning_8unab_40",
+  "snackbar--action": "_snackbar--action_8unab_44",
+  bottomToTop: le
+}, ke = ({
   snackbarMessage: u,
   variant: s,
   autoHideDuration: i = 5e3,
@@ -583,49 +568,49 @@ const ie = "_snackbar_1w4kg_56", ue = "_bottomToTop_1w4kg_1", v = {
   classNameWrapper: o,
   "data-testid": a
 }) => {
-  const [p, h] = V(!0), d = X(null), m = {
+  const [d, m] = V(!0), p = X(null), E = {
     entering: "translateY(0)",
     entered: "translateY(0)",
     exiting: "translateY(80px)",
     exited: "translateY(80px)",
     unmounted: "translateY(80px)"
-  }, y = () => {
-    h(!1);
-  }, T = () => {
-    h(!0);
+  }, x = () => {
+    m(!1);
+  }, O = () => {
+    m(!0);
   };
-  return /* @__PURE__ */ E("div", { className: N(v.snackbar, o), children: /* @__PURE__ */ E(
+  return /* @__PURE__ */ h("div", { className: S(_.snackbar, o), children: /* @__PURE__ */ h(
     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(
+      onClose: (T, N) => N !== "clickaway" && (t == null ? void 0 : t()),
+      exited: d,
+      className: S(_["snackbar__snackbar-el-wrapper"]),
+      children: /* @__PURE__ */ h(
         b,
         {
           timeout: { enter: 400, exit: 400 },
           in: r,
           appear: !0,
           unmountOnExit: !0,
-          onEnter: y,
-          onExited: T,
+          onEnter: x,
+          onExited: O,
           onExit: e,
-          nodeRef: d,
-          children: (k) => /* @__PURE__ */ Y(
+          nodeRef: p,
+          children: (T) => /* @__PURE__ */ Y(
             "div",
             {
-              className: N(v["snackbar--content"], v[`snackbar--${s}`]),
+              className: S(_["snackbar--content"], _[`snackbar--${s}`]),
               style: {
-                transform: m[k],
+                transform: E[T],
                 transition: "transform 300ms ease"
               },
-              ref: d,
+              ref: p,
               "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" }) }) })
+                /* @__PURE__ */ h("div", { className: S(_["snackbar--message"]), children: /* @__PURE__ */ h($, { variant: "base-lg", bold: !0, color: "var(--colors-neutral-text-color-text)", children: u }) }),
+                /* @__PURE__ */ h("div", { className: S(_["snackbar--action"]), children: /* @__PURE__ */ h("a", { onClick: t, children: /* @__PURE__ */ h(K, { icon: "circle-xmark", color: "var(--colors-neutral-text-color-text)", size: "1.5rem" }) }) })
               ]
             }
           )
@@ -635,5 +620,5 @@ const ie = "_snackbar_1w4kg_56", ue = "_bottomToTop_1w4kg_1", v = {
   ) });
 };
 export {
-  ye as Snackbar
+  ke as Snackbar
 };