@versini/ui-bubble 3.3.1 → 3.4.0

package/dist/index.d.ts

@@ -9,8 +9,16 @@ type BubbleProps = {
 	children: React.ReactNode;
 	/**
 	 * CSS class(es) to add to the main component wrapper.
+	 * Bubble is made of a wrapper, a main content, and a footer. This prop
+	 * allows you to add classes to the main component wrapper.
 	 */
 	className?: string;
+	/**
+	 * CSS class(es) to add to the content wrapper.
+	 * Bubble is made of a wrapper, a main content, and a footer. This prop
+	 * allows you to add classes to the content wrapper.
+	 */
+	contentClassName?: string;
 	/**
 	 * Whether or not to show a "copy/paste" icon next to the Bubble.
 	 * - If a function is passed, it will be called with the text to copy.
@@ -80,6 +88,6 @@ type BubbleProps = {
 	tail?: boolean;
 };
 
-declare const Bubble: ({ children, kind, className, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, }: BubbleProps) => react_jsx_runtime.JSX.Element;
+declare const Bubble: ({ children, kind, className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, }: BubbleProps) => react_jsx_runtime.JSX.Element;
 
 export { BUBBLE_CLASSNAME, Bubble };

package/dist/index.js

@@ -1,53 +1,53 @@
-import { jsx as s, jsxs as w, Fragment as Y } from "react/jsx-runtime";
-import M, { useRef as B, useLayoutEffect as O, useMemo as H, useState as P, useEffect as V, useCallback as ee } from "react";
-import i from "clsx";
+import { jsx as s, jsxs as x, Fragment as Y } from "react/jsx-runtime";
+import V, { useRef as B, useLayoutEffect as j, useMemo as P, useState as q, useEffect as L, useCallback as ee } from "react";
+import o from "clsx";
 /*!
-  @versini/ui-bubble v3.3.1
+  @versini/ui-bubble v3.4.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUBBLE__ || (window.__VERSINI_UI_BUBBLE__ = {
-    version: "3.3.1",
-    buildTime: "03/03/2025 12:36 PM EST",
+    version: "3.4.0",
+    buildTime: "03/05/2025 01:31 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re = ({
+const I = "av-bubble", A = "av-button", C = "icon", F = "button", M = "link", re = ({
   type: e,
   size: t,
   labelRight: r,
   labelLeft: a,
   align: l,
-  animated: o
+  animated: i
 }) => {
-  const n = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", b = "max-h-12 py-2 px-4";
+  const n = "max-h-8 py-0 px-2", c = "max-h-9 h-8 px-3", d = "max-h-12 py-2 px-4";
   switch (e) {
-    case q:
-    case S:
-      return i({
+    case F:
+    case M:
+      return o({
         [n]: t === "small",
-        [d]: t === "medium",
-        [b]: t === "large"
+        [c]: t === "medium",
+        [d]: t === "large"
       });
     case C:
-      return i("flex items-center", {
+      return o("flex items-center", {
         "justify-center": l === "center",
         "justify-start": l === "left",
         "justify-end": l === "right",
-        "h-6 w-6 p-0": t === "small" && !o && !(r || a),
-        "h-6 px-2": t === "small" && !o && (r || a),
-        "h-8 w-8 p-1": t === "medium" && !o && !(r || a),
-        "h-8 px-3": t === "medium" && !o && (r || a),
-        "h-12 w-12 p-2": t === "large" && !o && !(r || a),
-        "h-12 px-4": t === "large" && !o && (r || a),
-        "h-6 py-0": t === "small" && o && !(r || a),
-        "h-6": t === "small" && o && (r || a),
-        "h-8 py-1": t === "medium" && o && !(r || a),
-        "h-8": t === "medium" && o && (r || a),
-        "h-12 py-2": t === "large" && o && !(r || a),
-        "h-12": t === "large" && o && (r || a)
+        "h-6 w-6 p-0": t === "small" && !i && !(r || a),
+        "h-6 px-2": t === "small" && !i && (r || a),
+        "h-8 w-8 p-1": t === "medium" && !i && !(r || a),
+        "h-8 px-3": t === "medium" && !i && (r || a),
+        "h-12 w-12 p-2": t === "large" && !i && !(r || a),
+        "h-12 px-4": t === "large" && !i && (r || a),
+        "h-6 py-0": t === "small" && i && !(r || a),
+        "h-6": t === "small" && i && (r || a),
+        "h-8 py-1": t === "medium" && i && !(r || a),
+        "h-8": t === "medium" && i && (r || a),
+        "h-12 py-2": t === "large" && i && !(r || a),
+        "h-12": t === "large" && i && (r || a)
       });
   }
 }, te = ({
@@ -56,20 +56,20 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   labelRight: r,
   labelLeft: a
 }) => {
-  const l = "text-sm font-medium", o = "text-base font-medium", n = "text-lg font-medium";
+  const l = "text-sm font-medium", i = "text-base font-medium", n = "text-lg font-medium";
   switch (e) {
-    case q:
-    case S:
-      return i({
-        "text-center": e === S,
+    case F:
+    case M:
+      return o({
+        "text-center": e === M,
         [l]: t === "small",
-        [o]: t === "medium",
+        [i]: t === "medium",
         [n]: t === "large"
       });
     case C:
-      return i({
+      return o({
         [l]: t === "small" && (r || a),
-        [o]: t === "medium" && (r || a),
+        [i]: t === "medium" && (r || a),
         [n]: t === "large" && (r || a)
       });
   }
@@ -82,7 +82,7 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   if (t)
     return "not-prose";
   if (a === "primary")
-    return i("not-prose", {
+    return o("not-prose", {
       truncate: !r,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
@@ -90,7 +90,7 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
       "dark:text-copy-light": e === "alt-system"
     });
   if (a === "secondary")
-    return i("not-prose", {
+    return o("not-prose", {
       truncate: !r,
       "text-copy-light": e === "light" || e === "system",
       "text-copy-lighter": e === "dark" || e === "alt-system",
@@ -98,7 +98,7 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
       "dark:text-copy-light": e === "system"
     });
   if (a === "danger")
-    return i("not-prose", {
+    return o("not-prose", {
       truncate: !r,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
@@ -106,7 +106,7 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
       "dark:text-copy-light": e === "alt-system"
     });
   if (a === "selected")
-    return i("not-prose text-copy-lighter", {
+    return o("not-prose text-copy-lighter", {
       truncate: !r
     });
 }, oe = ({
@@ -116,21 +116,21 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
 }) => {
   if (!t) {
     if (r === "primary")
-      return i({
+      return o({
         "bg-action-dark": e === "dark",
         "bg-action-light": e === "light",
         "bg-action-dark dark:bg-action-light": e === "system",
         "bg-action-light dark:bg-action-dark": e === "alt-system"
       });
     if (r === "secondary")
-      return i({
+      return o({
         "bg-action-dark": e === "light",
         "bg-action-light": e === "dark",
         "bg-action-dark dark:bg-action-light": e === "alt-system",
         "bg-action-light dark:bg-action-dark": e === "system"
       });
     if (r === "danger")
-      return i({
+      return o({
         "bg-action-danger-dark": e === "dark",
         "bg-action-danger-light": e === "light",
         "bg-action-danger-dark dark:bg-action-danger-light": e === "system",
@@ -141,7 +141,7 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   }
 }, ie = ({
   radius: e
-}) => i({
+}) => o({
   "rounded-full": e === "large",
   "rounded-md": e === "medium",
   "rounded-sm": e === "small"
@@ -153,21 +153,21 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   if (t)
     return "";
   if (r === "primary")
-    return i("hover:text-copy-light-hover", {
+    return o("hover:text-copy-light-hover", {
       "hover:bg-action-dark-hover": e === "dark",
       "hover:bg-action-light-hover": e === "light",
       "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system",
       "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system"
     });
   if (r === "secondary")
-    return i("hover:text-copy-light-hover", {
+    return o("hover:text-copy-light-hover", {
       "hover:bg-action-dark-hover": e === "light",
       "hover:bg-action-light-hover": e === "dark",
       "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system",
       "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system"
     });
   if (r === "danger")
-    return i("hover:text-copy-light-hover", {
+    return o("hover:text-copy-light-hover", {
       "hover:bg-action-danger-dark-hover": e === "dark",
       "hover:bg-action-danger-light-hover": e === "light",
       "hover:bg-action-danger-dark-hover dark:hover:bg-action-danger-light-hover": e === "system",
@@ -183,21 +183,21 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   if (t)
     return "";
   if (r === "primary")
-    return i("active:text-copy-light-active", {
+    return o("active:text-copy-light-active", {
       "active:bg-action-dark-active": e === "dark",
       "active:bg-action-light-active": e === "light",
       "active:bg-action-dark-active dark:active:bg-action-light-active": e === "system",
       "active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system"
     });
   if (r === "secondary")
-    return i("active:text-copy-light-active", {
+    return o("active:text-copy-light-active", {
       "active:bg-action-dark-active": e === "light",
       "active:bg-action-light-active": e === "dark",
       "active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system",
       "active:bg-action-light-active dark:active:bg-action-dark-active": e === "system"
     });
   if (r === "danger")
-    return i("active:text-copy-lighter-active", {
+    return o("active:text-copy-lighter-active", {
       "active:bg-action-danger-dark-active": e === "dark",
       "active:bg-action-danger-light-active": e === "light",
       "active:bg-action-danger-dark-active dark:active:bg-action-danger-light-active": e === "system",
@@ -213,21 +213,21 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   if (t)
     return "border border-transparent";
   if (r === "primary")
-    return i("border", {
+    return o("border", {
       "border-border-dark": e === "dark",
       "border-border-accent": e === "light",
       "border-border-dark dark:border-border-accent": e === "system",
       "border-border-accent dark:border-border-dark": e === "alt-system"
     });
   if (r === "secondary")
-    return i("border", {
+    return o("border", {
       "border-border-dark": e === "light",
       "border-border-accent": e === "dark",
       "border-border-dark dark:border-border-accent": e === "alt-system",
       "border-border-accent dark:border-border-dark": e === "system"
     });
   if (r === "danger")
-    return i("border", {
+    return o("border", {
       "border-border-danger-dark": e === "dark",
       "border-border-danger-medium": e === "light",
       "border-border-danger-dark dark:border-border-danger-medium": e === "system",
@@ -237,7 +237,7 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
     return "border border-border-selected-dark";
 }, ce = ({
   focusMode: e
-}) => i("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
+}) => o("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
   "focus:outline-focus-dark": e === "dark",
   "focus:outline-focus-light": e === "light",
   "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
@@ -246,7 +246,7 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   mode: e,
   raw: t,
   iconClassName: r
-}) => t ? "" : i(
+}) => t ? "" : o(
   {
     "text-copy-accent-dark": e === "light" || e === "alt-system",
     "text-copy-light": e === "dark" || e === "system",
@@ -256,7 +256,7 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   r
 ), be = ({
   animated: e
-}) => i({
+}) => o({
   "transition-opacity duration-300 ease-in": e
 }), ue = ({
   type: e,
@@ -264,74 +264,74 @@ const I = "av-bubble", j = "av-button", C = "icon", q = "button", S = "link", re
   raw: r,
   mode: a,
   focusMode: l,
-  disabled: o,
+  disabled: i,
   fullWidth: n,
-  size: d,
-  noBorder: b,
+  size: c,
+  noBorder: d,
   labelRight: h,
-  labelLeft: m,
+  labelLeft: v,
   noBackground: u,
-  variant: c,
-  noTruncate: f,
-  align: _,
-  radius: g,
-  animated: p
-}) => (c || (c = "primary"), r ? i(j, t) : i(
-  j,
+  variant: b,
+  noTruncate: m,
+  align: w,
+  radius: _,
+  animated: g
+}) => (b || (b = "primary"), r ? o(A, t) : o(
+  A,
   ae({
     mode: a,
-    variant: c,
+    variant: b,
     noBackground: u,
-    noTruncate: f
+    noTruncate: m
   }),
-  oe({ mode: a, noBackground: u, variant: c }),
-  ie({ radius: g }),
+  oe({ mode: a, noBackground: u, variant: b }),
+  ie({ radius: _ }),
   re({
     type: e,
-    size: d,
+    size: c,
     labelRight: h,
-    labelLeft: m,
-    align: _,
-    animated: p
+    labelLeft: v,
+    align: w,
+    animated: g
   }),
-  te({ type: e, size: d, labelRight: h, labelLeft: m }),
-  se({ mode: a, variant: c, noBorder: b }),
+  te({ type: e, size: c, labelRight: h, labelLeft: v }),
+  se({ mode: a, variant: b, noBorder: d }),
   ce({ focusMode: l }),
-  le({ mode: a, variant: c, disabled: o }),
-  ne({ mode: a, variant: c, disabled: o }),
+  le({ mode: a, variant: b, disabled: i }),
+  ne({ mode: a, variant: b, disabled: i }),
   {
     "w-full": n,
-    "disabled:cursor-not-allowed disabled:opacity-50": o
+    "disabled:cursor-not-allowed disabled:opacity-50": i
   },
-  i({
-    "transition-[width] duration-300 ease-in-out": e === C && p
+  o({
+    "transition-[width] duration-300 ease-in-out": e === C && g
   }),
   t
 )), ge = (e, t, r) => {
   var a;
   !t && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof r == "function" && r(e);
-}, F = M.forwardRef((e, t) => {
+}, G = V.forwardRef((e, t) => {
   const { onClick: r, noInternalClick: a = !1, ...l } = e;
   return /* @__PURE__ */ s(
     "button",
     {
       ref: t,
-      onClick: (o) => {
-        ge(o, a, r);
+      onClick: (i) => {
+        ge(i, a, r);
       },
       ...l
     }
   );
 });
-F.displayName = "BaseButton";
+G.displayName = "BaseButton";
 function me() {
   const e = B(!1);
-  return V(() => (e.current = !0, () => {
+  return L(() => (e.current = !0, () => {
     e.current = !1;
   }), []), ee(() => e.current, []);
 }
 function he(e) {
-  return H(() => e.every((t) => t == null) ? () => {
+  return P(() => e.every((t) => t == null) ? () => {
   } : (t) => {
     e.forEach((r) => {
       typeof r == "function" ? r(t) : r != null && (r.current = t);
@@ -348,14 +348,14 @@ const fe = {
   bottom: 0,
   right: 0
 };
-function R(e) {
-  const t = me(), r = B(0), a = B(null), [l, o] = P(fe), n = H(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
-    const b = d[0];
-    b && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
-      a.current && t() && o(b.contentRect);
+function S(e) {
+  const t = me(), r = B(0), a = B(null), [l, i] = q(fe), n = P(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((c) => {
+    const d = c[0];
+    d && (cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
+      a.current && t() && i(d.contentRect);
     }));
   }), [t]);
-  return V(() => (a.current && (n == null || n.observe(a.current, e)), () => {
+  return L(() => (a.current && (n == null || n.observe(a.current, e)), () => {
     n == null || n.disconnect(), r.current && cancelAnimationFrame(r.current);
   }), [n, e]), [a, l];
 }
@@ -373,28 +373,28 @@ const ve = {
   // px-3 x 2
   large: 16 * 2
   // px-4 x 2
-}, ye = 2, L = M.forwardRef(
+}, ye = 2, U = V.forwardRef(
   ({
     children: e,
     disabled: t = !1,
     mode: r = "system",
     focusMode: a = "system",
     fullWidth: l = !1,
-    className: o,
+    className: i,
     type: n = "button",
-    raw: d = !1,
-    noBorder: b = !1,
+    raw: c = !1,
+    noBorder: d = !1,
     "aria-label": h,
-    label: m,
+    label: v,
     size: u = "medium",
-    labelRight: c,
-    labelLeft: f,
-    noBackground: _ = !1,
-    align: g = "center",
-    radius: p = "large",
-    variant: W = "primary",
+    labelRight: b,
+    labelLeft: m,
+    noBackground: w = !1,
+    align: _ = "center",
+    radius: g = "large",
+    variant: T = "primary",
     iconClassName: X,
-    animated: y = !1,
+    animated: p = !1,
     ...Z
   }, D) => {
     const J = ue({
@@ -403,57 +403,57 @@ const ve = {
       focusMode: a,
       fullWidth: l,
       disabled: t,
-      raw: d,
-      className: o,
-      noBorder: b,
+      raw: c,
+      className: i,
+      noBorder: d,
       size: u,
-      labelRight: c,
-      labelLeft: f,
-      noBackground: _,
-      align: g,
-      radius: p,
-      variant: W,
-      animated: y
-    }), K = de({ mode: r, raw: d, iconClassName: X }), U = be({ animated: y }), [v, T] = R(), [k, z] = R(), [N, $] = R(), E = B(0), x = B(null), Q = he([D, x]);
-    return O(() => {
-      N && N.current && y && (E.current = $.width + pe[u] + (b ? 0 : ye));
-    }, [$, N, u, b, y]), O(() => {
-      x && x.current && y && (c && v && T.width > 0 ? (v.current && (v.current.style.opacity = "100"), x.current.style.width = `${T.width + E.current}px`) : f && z.width > 0 ? (k.current && (k.current.style.opacity = "100"), x.current.style.width = `${z.width + E.current}px`) : (v.current && (v.current.style.opacity = "0"), k.current && (k.current.style.opacity = "0"), x.current.style.width = `${ve[u]}px`));
+      labelRight: b,
+      labelLeft: m,
+      noBackground: w,
+      align: _,
+      radius: g,
+      variant: T,
+      animated: p
+    }), K = de({ mode: r, raw: c, iconClassName: X }), $ = be({ animated: p }), [f, z] = S(), [y, E] = S(), [N, O] = S(), R = B(0), k = B(null), Q = he([D, k]);
+    return j(() => {
+      N && N.current && p && (R.current = O.width + pe[u] + (d ? 0 : ye));
+    }, [O, N, u, d, p]), j(() => {
+      k && k.current && p && (b && f && z.width > 0 ? (f.current && (f.current.style.opacity = "100"), k.current.style.width = `${z.width + R.current}px`) : m && E.width > 0 ? (y.current && (y.current.style.opacity = "100"), k.current.style.width = `${E.width + R.current}px`) : (f.current && (f.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), k.current.style.width = `${ve[u]}px`));
     }, [
-      T,
-      c,
-      v,
       z,
+      b,
       f,
-      k,
+      E,
+      m,
+      y,
       u,
-      y
-    ]), /* @__PURE__ */ w(
-      F,
+      p
+    ]), /* @__PURE__ */ x(
+      G,
       {
         ref: Q,
         className: J,
         disabled: t,
         type: n,
-        "aria-label": h || m,
+        "aria-label": h || v,
         ...Z,
         children: [
           /* @__PURE__ */ s(
-            A,
+            H,
             {
-              label: f,
-              labelRef: k,
-              labelClass: U,
+              label: m,
+              labelRef: y,
+              labelClass: $,
               labelInnerClass: "pr-2"
             }
           ),
           /* @__PURE__ */ s("span", { ref: N, className: K, children: e }),
           /* @__PURE__ */ s(
-            A,
+            H,
             {
-              label: c,
-              labelRef: v,
-              labelClass: U,
+              label: b,
+              labelRef: f,
+              labelClass: $,
               labelInnerClass: "pl-2"
             }
           )
@@ -461,35 +461,35 @@ const ve = {
       }
     );
   }
-), A = ({
+), H = ({
   labelRef: e,
   labelClass: t,
   label: r,
   labelInnerClass: a
 }) => /* @__PURE__ */ s("span", { ref: e, className: t, children: r && /* @__PURE__ */ s("span", { className: a, children: r }) });
-L.displayName = "ButtonIcon";
+U.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v4.2.9
+  @versini/ui-button v4.2.10
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "4.2.9",
-    buildTime: "03/03/2025 12:35 PM EST",
+    version: "4.2.10",
+    buildTime: "03/05/2025 01:30 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const ke = M.forwardRef(
+const ke = V.forwardRef(
   ({
     children: e,
     mode: t = "system",
     className: r,
     active: a = !1,
     ...l
-  }, o) => {
-    const n = a ? i(
+  }, i) => {
+    const n = a ? o(
       "relative",
       "focus-within:static",
       "focus-within:after:border-transparent",
@@ -507,10 +507,10 @@ const ke = M.forwardRef(
       }
     ) : "";
     return /* @__PURE__ */ s("div", { className: n, children: /* @__PURE__ */ s(
-      L,
+      U,
       {
-        className: i("justify-center", r),
-        ref: o,
+        className: o("justify-center", r),
+        ref: i,
         mode: t,
         radius: "small",
         ...l,
@@ -520,19 +520,19 @@ const ke = M.forwardRef(
   }
 );
 ke.displayName = "ButtonSort";
-const G = ({
+const W = ({
   children: e,
   fill: t,
   viewBox: r,
   className: a,
   defaultViewBox: l,
-  size: o,
+  size: i,
   title: n,
-  semantic: d = !1,
-  ...b
+  semantic: c = !1,
+  ...d
 }) => {
-  const h = i(o, a);
-  return /* @__PURE__ */ w(Y, { children: [
+  const h = o(i, a);
+  return /* @__PURE__ */ x(Y, { children: [
     /* @__PURE__ */ s(
       "svg",
       {
@@ -541,13 +541,13 @@ const G = ({
         viewBox: r || l,
         fill: t || "currentColor",
         role: "img",
-        "aria-hidden": !d,
+        "aria-hidden": !c,
         focusable: !1,
-        ...b,
+        ...d,
         children: e
       }
     ),
-    n && d && /* @__PURE__ */ s("span", { className: "sr-only", children: n })
+    n && c && /* @__PURE__ */ s("span", { className: "sr-only", children: n })
   ] });
 };
 /*!
@@ -569,8 +569,8 @@ const xe = ({
   title: r,
   monotone: a,
   ...l
-}) => /* @__PURE__ */ w(
-  G,
+}) => /* @__PURE__ */ x(
+  W,
   {
     defaultViewBox: "0 0 448 512",
     size: "size-5",
@@ -596,7 +596,7 @@ const xe = ({
   monotone: a,
   ...l
 }) => /* @__PURE__ */ s(
-  G,
+  W,
   {
     defaultViewBox: "0 0 512 512",
     size: "size-5",
@@ -620,13 +620,13 @@ try {
   });
 } catch {
 }
-const _e = ({ kind: e, noMaxWidth: t }) => i("px-4 py-2", {
+const _e = ({ kind: e, noMaxWidth: t }) => o("px-4 py-2", {
   "max-w-xs sm:max-w-md md:max-w-2xl": !t,
   "lg:max-w-3xl": e === "left" && !t
-}), Be = ({ kind: e }) => i({
+}), Be = ({ kind: e }) => o({
   "bg-surface-lighter dark:bg-surface-dark": e === "left",
   "bg-surface-accent": e === "right"
-}), Ne = ({ kind: e }) => i(
+}), Ne = ({ kind: e }) => o(
   "prose prose-dark dark:prose-lighter",
   "prose-ul:prose-li:marker:text-black",
   "prose-blockquote:my-1",
@@ -636,7 +636,7 @@ const _e = ({ kind: e, noMaxWidth: t }) => i("px-4 py-2", {
   }
 ), Ie = ({ kind: e, tail: t }) => {
   if (t)
-    return i(
+    return o(
       `${I}-${e}-tail`,
       "rounded-3xl",
       "relative",
@@ -651,17 +651,18 @@ const _e = ({ kind: e, noMaxWidth: t }) => i("px-4 py-2", {
       }
     );
   if (!t)
-    return i("rounded-b-xl", {
+    return o("rounded-b-xl", {
       "rounded-tr-xl": e === "left",
       "rounded-tl-xl": e === "right"
     });
 }, Ce = ({
   kind: e,
   className: t,
-  noMaxWidth: r,
-  tail: a
+  contentClassName: r,
+  noMaxWidth: a,
+  tail: l
 }) => {
-  const l = i(
+  const i = o(
     I,
     `${I}-${e}`,
     "flex items-start",
@@ -669,74 +670,77 @@ const _e = ({ kind: e, noMaxWidth: t }) => i("px-4 py-2", {
       "flex-row-reverse": e === "right"
     },
     t
-  ), o = i(
+  ), n = o(
     `${I}-content`,
     "flex flex-col empty:hidden",
-    _e({ kind: e, noMaxWidth: r }),
+    _e({ kind: e, noMaxWidth: a }),
     Ne({ kind: e }),
     Be({ kind: e }),
-    Ie({ kind: e, tail: a })
-  ), n = "pr-2 pt-1 text-end text-xs text-copy-light", d = i("flex flex-col-reverse sm:flex-row", {
-    "ml-2": e === "left" && !a,
-    "mr-2": e === "right" && !a,
-    "ml-1": e === "left" && a,
-    "mr-1": e === "right" && a
+    Ie({ kind: e, tail: l }),
+    r
+  ), c = "pr-2 pt-1 text-end text-xs text-copy-light", d = o("flex flex-col-reverse sm:flex-row", {
+    "ml-2": e === "left" && !l,
+    "mr-2": e === "right" && !l,
+    "ml-1": e === "left" && l,
+    "mr-1": e === "right" && l
   });
   return {
-    wrapper: l,
-    main: o,
-    footer: n,
+    wrapper: i,
+    main: n,
+    footer: c,
     copyButton: d
   };
 }, Re = ({
   children: e,
   kind: t = "left",
   className: r,
-  footer: a,
-  rawFooter: l,
-  copyToClipboard: o,
-  copyToClipboardFocusMode: n = "system",
+  contentClassName: a,
+  footer: l,
+  rawFooter: i,
+  copyToClipboard: n,
+  copyToClipboardFocusMode: c = "system",
   copyToClipboardMode: d = "system",
-  noMaxWidth: b = !1,
-  tail: h = !1
+  noMaxWidth: h = !1,
+  tail: v = !1
 }) => {
-  const [m, u] = P(!1), c = Ce({
+  const [u, b] = q(!1), m = Ce({
     kind: t,
     className: r,
-    noMaxWidth: b,
-    tail: h
-  }), f = !!o && (typeof o == "function" || typeof o == "string" || typeof e == "string"), _ = () => {
-    u(!0), typeof o == "function" ? o(e) : typeof o == "string" ? navigator.clipboard.writeText(o) : typeof e == "string" && navigator.clipboard.writeText(e);
+    contentClassName: a,
+    noMaxWidth: h,
+    tail: v
+  }), w = !!n && (typeof n == "function" || typeof n == "string" || typeof e == "string"), _ = () => {
+    b(!0), typeof n == "function" ? n(e) : typeof n == "string" ? navigator.clipboard.writeText(n) : typeof e == "string" && navigator.clipboard.writeText(e);
   };
-  return V(() => {
+  return L(() => {
     let g;
-    return m && (g = window.setTimeout(() => {
-      u(!1);
+    return u && (g = window.setTimeout(() => {
+      b(!1);
     }, 3e3)), () => {
       clearTimeout(g);
     };
-  }, [m]), /* @__PURE__ */ w("div", { className: c.wrapper, children: [
-    /* @__PURE__ */ w("div", { children: [
-      /* @__PURE__ */ s("div", { className: c.main, children: e }),
-      a && Object.keys(a).map((g, p) => a[g] ? /* @__PURE__ */ s("div", { className: "prose-p:m-0", children: /* @__PURE__ */ w("p", { className: c.footer, children: [
+  }, [u]), /* @__PURE__ */ x("div", { className: m.wrapper, children: [
+    /* @__PURE__ */ x("div", { children: [
+      /* @__PURE__ */ s("div", { className: m.main, children: e }),
+      l && Object.keys(l).map((g, T) => l[g] ? /* @__PURE__ */ s("div", { className: "prose-p:m-0", children: /* @__PURE__ */ x("p", { className: m.footer, children: [
         g,
         ": ",
-        a[g]
-      ] }) }, `${g}-${p}`) : null),
-      l && l
+        l[g]
+      ] }) }, `${g}-${T}`) : null),
+      i && i
     ] }),
-    f && /* @__PURE__ */ s("div", { className: c.copyButton, children: /* @__PURE__ */ s(
-      L,
+    w && /* @__PURE__ */ s("div", { className: m.copyButton, children: /* @__PURE__ */ s(
+      U,
       {
         noBorder: !0,
         noBackground: !0,
         size: "small",
         mode: d,
-        focusMode: n,
-        label: m ? "Copied to clipboard" : "Copy to clipboard",
+        focusMode: c,
+        label: u ? "Copied to clipboard" : "Copy to clipboard",
         onClick: _,
-        disabled: m,
-        children: m ? /* @__PURE__ */ s(xe, { size: "size-3" }) : /* @__PURE__ */ s(we, { size: "size-3" })
+        disabled: u,
+        children: u ? /* @__PURE__ */ s(xe, { size: "size-3" }) : /* @__PURE__ */ s(we, { size: "size-3" })
       }
     ) })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-bubble",
-	"version": "3.3.1",
+	"version": "3.4.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -43,7 +43,7 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "4.2.9",
+		"@versini/ui-button": "4.2.10",
 		"@versini/ui-icons": "*",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
@@ -51,5 +51,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "ebb2ccff07bcf7d3870f21aac2f195d378a0f6fc"
+	"gitHead": "9e5d6d4b86a1c509628c6e5ea0a101921cd8eb78"
 }