@versini/ui-bubble 6.2.0 → 6.3.0

package/dist/index.d.ts

@@ -1,98 +1,99 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const BUBBLE_CLASSNAME = "av-bubble";
-
-type BubbleProps = {
-	/**
-	 * The text to render in the bubble.
-	 */
-	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.
-	 * - If a string is passed, that string will be copied.
-	 * - If a boolean is passed, the children will be copied, but only if they
-	 * are of type string.
-	 */
-	copyToClipboard?: boolean | string | ((text: any) => void);
-	/**
-	 * The type of focus for the Copy Button. This will change the color
-	 * of the focus ring around the Button.
-	 */
-	copyToClipboardFocusMode?: "dark" | "light" | "system" | "alt-system";
-	/**
-	 * The mode of Copy Button. This will change the color of the Button.
-	 */
-	copyToClipboardMode?: "dark" | "light" | "system" | "alt-system";
-	/**
-	 * Object depicting the extra rows for the Bubble.
-	 * @example
-	 * ```tsx
-	 * <Bubble
-	 * 	footer={{
-	 * 		"Sent": "12:00 PM",
-	 * 		"Delivered": "12:01 PM",
-	 *    "Verified": Bubble.FOOTER_EMPTY,
-	 * 		"Read": "12:02 PM",
-	 * 	}}
-	 * >Hello World</Bubble>
-	 * ```
-	 * This will create a footer with 4 rows, with the row before last being
-	 * empty but taking the full height of a normal row.
-	 *
-	 */
-	footer?: {
-		[key: string]: string | number | undefined | null;
-	};
-	/**
-	 * The type of Bubble. This will change the color of the Bubble
-	 * as well as the chevron location.
-	 */
-	kind?: "left" | "right";
-	/**
-	 * Same as "footer" but accepts raw JSX.
-	 */
-	rawFooter?: React.ReactNode;
-	/**
-	 * Whether or not the Bubble should have a default max-width.
-	 * By default, bubble width will be responsive to the viewport,
-	 * but in some cases, it may be useful to disable this behavior
-	 * and allow the Bubble to grow to its content.
-	 * You can also provide your own container class to control the width,
-	 * based on the container's width.
-	 * @see https://css-tricks.com/css-container-queries/#aa-container-length-units
-	 *
-	 * @example
-	 * ```tsx
-	 * <div> // this div should be declared as a container
-	 *   <Bubble kind="left" noMaxWidth className="max-w-[95qcw]">
-	 *     Hello World
-	 *   </Bubble>
-	 * </div>
-	 * ```
-	 * @default false
-	 */
-	noMaxWidth?: boolean;
-	/**
-	 * Whether or not the Bubble should have a tail.
-	 * @default false
-	 */
-	tail?: boolean;
-};
-
-declare const BUBBLE_FOOTER_EMPTY = "FOOTER_EMPTY";
-declare const Bubble: ({ children, kind, className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, }: BubbleProps) => react_jsx_runtime.JSX.Element;
-
-export { BUBBLE_CLASSNAME, BUBBLE_FOOTER_EMPTY, Bubble, type BubbleProps };
+import { JSX } from 'react/jsx-runtime';
+
+export declare const Bubble: ({ children, kind, className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode, copyToClipboardMode, noMaxWidth, tail, }: BubbleProps) => JSX.Element;
+
+export declare const BUBBLE_CLASSNAME = "av-bubble";
+
+export declare const BUBBLE_FOOTER_EMPTY = "FOOTER_EMPTY";
+
+export declare type BubbleProps = {
+    /**
+     * The text to render in the bubble.
+     */
+    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.
+     * - If a string is passed, that string will be copied.
+     * - If a boolean is passed, the children will be copied, but only if they
+     * are of type string.
+     */
+    copyToClipboard?: boolean | string | ((text: any) => void);
+    /**
+     * The type of focus for the Copy Button. This will change the color
+     * of the focus ring around the Button.
+     */
+    copyToClipboardFocusMode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * The mode of Copy Button. This will change the color of the Button.
+     */
+    copyToClipboardMode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * Object depicting the extra rows for the Bubble.
+     * @example
+     * ```tsx
+     * <Bubble
+     * 	footer={{
+     * 		"Sent": "12:00 PM",
+     * 		"Delivered": "12:01 PM",
+     *    "Verified": Bubble.FOOTER_EMPTY,
+     * 		"Read": "12:02 PM",
+     * 	}}
+     * >Hello World</Bubble>
+     * ```
+     * This will create a footer with 4 rows, with the row before last being
+     * empty but taking the full height of a normal row.
+     *
+     */
+    footer?: {
+        [key: string]: string | number | undefined | null;
+    };
+    /**
+     * The type of Bubble. This will change the color of the Bubble
+     * as well as the chevron location.
+     */
+    kind?: "left" | "right";
+    /**
+     * Same as "footer" but accepts raw JSX.
+     */
+    rawFooter?: React.ReactNode;
+    /**
+     * Whether or not the Bubble should have a default max-width.
+     * By default, bubble width will be responsive to the viewport,
+     * but in some cases, it may be useful to disable this behavior
+     * and allow the Bubble to grow to its content.
+     * You can also provide your own container class to control the width,
+     * based on the container's width.
+     * @see https://css-tricks.com/css-container-queries/#aa-container-length-units
+     *
+     * @example
+     * ```tsx
+     * <div> // this div should be declared as a container
+     *   <Bubble kind="left" noMaxWidth className="max-w-[95qcw]">
+     *     Hello World
+     *   </Bubble>
+     * </div>
+     * ```
+     * @default false
+     */
+    noMaxWidth?: boolean;
+    /**
+     * Whether or not the Bubble should have a tail.
+     * @default false
+     */
+    tail?: boolean;
+};
+
+export { }

package/dist/index.js

@@ -1,19 +1,211 @@
-import { BUBBLE_CLASSNAME as i, BUBBLE_FOOTER_EMPTY as o, Bubble as E } from "./components/Bubble/Bubble.js";
 /*!
-  @versini/ui-bubble v6.2.0
+  @versini/ui-bubble v6.3.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_BUBBLE__ || (window.__VERSINI_UI_BUBBLE__ = {
-    version: "6.2.0",
-    buildTime: "11/03/2025 10:48 AM EST",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_BUBBLE__) {
+    window.__VERSINI_UI_BUBBLE__ = {
+      version: "6.3.0",
+      buildTime: "11/04/2025 09:51 AM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-export {
-  i as BUBBLE_CLASSNAME,
-  o as BUBBLE_FOOTER_EMPTY,
-  E as Bubble
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconCopied, IconCopy } from "@versini/ui-icons";
+import { useEffect, useState } from "react";
+import clsx from "clsx";
+
+;// CONCATENATED MODULE: ./src/common/constants.ts
+const BUBBLE_CLASSNAME = "av-bubble";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@versini/ui-button"
+
+;// CONCATENATED MODULE: external "@versini/ui-icons"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: ./src/components/Bubble/utilities.ts
+
+
+const getBubbleSizesClasses = ({ kind, noMaxWidth })=>{
+    return clsx("px-4 py-2", {
+        "max-w-xs sm:max-w-md md:max-w-2xl": !noMaxWidth,
+        "lg:max-w-3xl": kind === "left" && !noMaxWidth
+    });
 };
+const getBubbleColorClasses = ({ kind })=>{
+    return clsx({
+        "bg-surface-light dark:bg-surface-dark": kind === "left",
+        "bg-surface-accent": kind === "right"
+    });
+};
+const getBubbleTypographyClasses = ({ kind })=>{
+    return clsx("prose prose-dark dark:prose-lighter", "prose-blockquote:my-1", "prose-ol:my-1 prose-ul:my-1", {
+        "text-copy-lighter": kind === "right"
+    });
+};
+const getBubbleBorderClasses = ({ kind, tail })=>{
+    if (tail) {
+        return clsx(`${BUBBLE_CLASSNAME}-${kind}-tail`, "rounded-3xl", "relative", "before:content-['']", "before:w-3", "before:h-2", "before:absolute", "before:bottom-0", {
+            "last-bubble-right:before:right-[2px] last-bubble-right:before:border-l-[8px] last-bubble-right:before:border-l-surface-accent last-bubble-right:before:rounded-bl-[100%]": kind === "right",
+            "last-bubble-left:before:left-[2px] last-bubble-left:before:border-r-[8px] last-bubble-left:before:border-r-surface-light last-bubble-left:dark:before:border-r-surface-dark last-bubble-left:before:rounded-br-[100%]": kind === "left"
+        });
+    }
+    if (!tail) {
+        return clsx("rounded-b-xl", {
+            "rounded-tr-xl": kind === "left",
+            "rounded-tl-xl": kind === "right"
+        });
+    }
+};
+const getBubbleClasses = ({ kind, className, contentClassName, noMaxWidth, tail })=>{
+    const wrapper = clsx(BUBBLE_CLASSNAME, `${BUBBLE_CLASSNAME}-${kind}`, "flex items-start", {
+        "flex-row-reverse": kind === "right"
+    }, className);
+    const main = clsx(`${BUBBLE_CLASSNAME}-content`, "flex flex-col empty:hidden", getBubbleSizesClasses({
+        kind,
+        noMaxWidth
+    }), getBubbleTypographyClasses({
+        kind
+    }), getBubbleColorClasses({
+        kind
+    }), getBubbleBorderClasses({
+        kind,
+        tail
+    }), contentClassName);
+    const footer = "pr-2 pt-1 text-end text-xs text-copy-light";
+    const copyButton = clsx("flex flex-col-reverse sm:flex-row", {
+        "ml-2": kind === "left" && !tail,
+        "mr-2": kind === "right" && !tail,
+        "ml-1": kind === "left" && tail,
+        "mr-1": kind === "right" && tail
+    });
+    return {
+        wrapper,
+        main,
+        footer,
+        copyButton
+    };
+};
+
+;// CONCATENATED MODULE: ./src/components/Bubble/Bubble.tsx
+
+
+
+
+
+// Special symbol to represent an empty footer row that should maintain its height
+const BUBBLE_FOOTER_EMPTY = "FOOTER_EMPTY";
+const Bubble = ({ children, kind = "left", className, contentClassName, footer, rawFooter, copyToClipboard, copyToClipboardFocusMode = "system", copyToClipboardMode = "system", noMaxWidth = false, tail = false })=>{
+    const [copied, setCopied] = useState(false);
+    const bubbleClasses = getBubbleClasses({
+        kind,
+        className,
+        contentClassName,
+        noMaxWidth,
+        tail
+    });
+    const isCopyToClipboardEnabled = Boolean(copyToClipboard) && (typeof copyToClipboard === "function" || typeof copyToClipboard === "string" || typeof children === "string");
+    // copy to clipboard function
+    const handleCopyToClipboard = ()=>{
+        setCopied(true);
+        if (typeof copyToClipboard === "function") {
+            copyToClipboard(children);
+        } else if (typeof copyToClipboard === "string") {
+            navigator.clipboard.writeText(copyToClipboard);
+        } else if (typeof children === "string") {
+            navigator.clipboard.writeText(children);
+        }
+    };
+    // after 3 seconds, reset the copied state
+    useEffect(()=>{
+        let timeoutId;
+        if (copied) {
+            timeoutId = window.setTimeout(()=>{
+                setCopied(false);
+            }, 3000);
+        }
+        return ()=>{
+            clearTimeout(timeoutId);
+        };
+    }, [
+        copied
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: bubbleClasses.wrapper,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: bubbleClasses.main,
+                        children: children
+                    }),
+                    footer && Object.keys(footer).map((key, idx)=>{
+                        const footerValue = footer[key];
+                        // Handle the FOOTER_EMPTY case
+                        if (footerValue === BUBBLE_FOOTER_EMPTY) {
+                            return /*#__PURE__*/ jsx("div", {
+                                className: "prose-p:m-0",
+                                children: /*#__PURE__*/ jsx("p", {
+                                    className: bubbleClasses.footer,
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        className: "invisible",
+                                        children: "\xa0"
+                                    })
+                                })
+                            }, `${key}-${idx}`);
+                        }
+                        // Handle normal footer values (only if they exist)
+                        return footerValue ? /*#__PURE__*/ jsx("div", {
+                            className: "prose-p:m-0",
+                            children: /*#__PURE__*/ jsxs("p", {
+                                className: bubbleClasses.footer,
+                                children: [
+                                    key,
+                                    ": ",
+                                    footerValue
+                                ]
+                            })
+                        }, `${key}-${idx}`) : null;
+                    }),
+                    rawFooter && rawFooter
+                ]
+            }),
+            isCopyToClipboardEnabled && /*#__PURE__*/ jsx("div", {
+                className: bubbleClasses.copyButton,
+                children: /*#__PURE__*/ jsx(ButtonIcon, {
+                    noBorder: true,
+                    noBackground: true,
+                    size: "small",
+                    mode: copyToClipboardMode,
+                    focusMode: copyToClipboardFocusMode,
+                    label: copied ? "Copied to clipboard" : "Copy to clipboard",
+                    onClick: handleCopyToClipboard,
+                    disabled: copied,
+                    children: copied ? /*#__PURE__*/ jsx(IconCopied, {
+                        size: "size-3"
+                    }) : /*#__PURE__*/ jsx(IconCopy, {
+                        size: "size-3"
+                    })
+                })
+            })
+        ]
+    });
+};
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+export { BUBBLE_CLASSNAME, BUBBLE_FOOTER_EMPTY, Bubble };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-bubble",
-	"version": "6.2.0",
+	"version": "6.3.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,13 +20,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -42,13 +42,13 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
-		"@versini/ui-button": "8.1.4",
-		"@versini/ui-icons": "4.14.1",
+		"@versini/ui-button": "8.2.0",
+		"@versini/ui-icons": "4.15.1",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.16"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "6e772b53eddd144bb51e2345c545ff338832d668"
+	"gitHead": "d43a776558072976e0920ab60f28f45a9efd3848"
 }

package/dist/components/Bubble/Bubble.js

@@ -1,236 +0,0 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { ButtonIcon as I } from "@versini/ui-button";
-import { useState as y, useEffect as C } from "react";
-import c from "clsx";
-const p = "av-bubble", v = ({
-  children: e,
-  fill: t,
-  viewBox: o,
-  className: i,
-  defaultViewBox: s,
-  size: n,
-  title: l,
-  semantic: b = !1,
-  ...f
-}) => {
-  const h = c(n, i);
-  return /* @__PURE__ */ d(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      className: h,
-      viewBox: o || s,
-      fill: t || "currentColor",
-      role: "img",
-      "aria-hidden": !b,
-      focusable: !1,
-      ...f,
-      children: [
-        l && b && /* @__PURE__ */ r("title", { children: l }),
-        e
-      ]
-    }
-  );
-};
-/*!
-  @versini/ui-svgicon v4.2.2
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
-    version: "4.2.2",
-    buildTime: "10/24/2025 06:42 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const E = ({
-  className: e,
-  viewBox: t,
-  title: o,
-  monotone: i,
-  ...s
-}) => /* @__PURE__ */ d(
-  v,
-  {
-    defaultViewBox: "0 0 448 512",
-    size: "size-5",
-    viewBox: t,
-    className: e,
-    title: o || "Copied",
-    ...s,
-    children: [
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96m104 160c0-6.1 2.3-12.3 7-17 9.4-9.4 24.6-9.4 33.9 0l47 47 111-111c4.7-4.7 10.8-7 17-7s12.3 2.3 17 7c2.3 2.3 4.1 5 5.3 7.9.6 1.5 1 2.9 1.3 4.4.2 1.1.3 2.2.3 2.2.1 1.2.1 1.2.1 2.5-.1 1.5-.1 1.9-.1 2.3-.1.7-.2 1.5-.3 2.2-.3 1.5-.7 3-1.3 4.4-1.2 2.9-2.9 5.6-5.3 7.9l-128 128c-4.7 4.7-10.8 7-17 7s-12.3-2.3-17-7l-64-64c-4.7-4.7-7-10.8-7-17z",
-          opacity: ".4"
-        }
-      ),
-      /* @__PURE__ */ r("path", { d: "M337 175c9.4 9.4 9.4 24.6 0 33.9L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0z" })
-    ]
-  }
-), V = ({
-  className: e,
-  viewBox: t,
-  title: o,
-  monotone: i,
-  ...s
-}) => /* @__PURE__ */ r(
-  v,
-  {
-    defaultViewBox: "0 0 512 512",
-    size: "size-5",
-    viewBox: t,
-    className: e,
-    title: o || "Copy",
-    ...s,
-    children: /* @__PURE__ */ r("path", { d: "M64 464h224c8.8 0 16-7.2 16-16v-64h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16m160-160h224c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16m-64-16V64c0-35.3 28.7-64 64-64h224c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64" })
-  }
-);
-/*!
-  @versini/ui-icons v4.14.1
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.14.1",
-    buildTime: "10/24/2025 06:42 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const z = ({ kind: e, noMaxWidth: t }) => c("px-4 py-2", {
-  "max-w-xs sm:max-w-md md:max-w-2xl": !t,
-  "lg:max-w-3xl": e === "left" && !t
-}), S = ({ kind: e }) => c({
-  "bg-surface-light dark:bg-surface-dark": e === "left",
-  "bg-surface-accent": e === "right"
-}), T = ({ kind: e }) => c(
-  "prose prose-dark dark:prose-lighter",
-  "prose-blockquote:my-1",
-  "prose-ol:my-1 prose-ul:my-1",
-  {
-    "text-copy-lighter": e === "right"
-  }
-), M = ({ kind: e, tail: t }) => {
-  if (t)
-    return c(
-      `${p}-${e}-tail`,
-      "rounded-3xl",
-      "relative",
-      "before:content-['']",
-      "before:w-3",
-      "before:h-2",
-      "before:absolute",
-      "before:bottom-0",
-      {
-        "last-bubble-right:before:right-[2px] last-bubble-right:before:border-l-[8px] last-bubble-right:before:border-l-surface-accent last-bubble-right:before:rounded-bl-[100%]": e === "right",
-        "last-bubble-left:before:left-[2px] last-bubble-left:before:border-r-[8px] last-bubble-left:before:border-r-surface-light last-bubble-left:dark:before:border-r-surface-dark last-bubble-left:before:rounded-br-[100%]": e === "left"
-      }
-    );
-  if (!t)
-    return c("rounded-b-xl", {
-      "rounded-tr-xl": e === "left",
-      "rounded-tl-xl": e === "right"
-    });
-}, O = ({
-  kind: e,
-  className: t,
-  contentClassName: o,
-  noMaxWidth: i,
-  tail: s
-}) => {
-  const n = c(
-    p,
-    `${p}-${e}`,
-    "flex items-start",
-    {
-      "flex-row-reverse": e === "right"
-    },
-    t
-  ), l = c(
-    `${p}-content`,
-    "flex flex-col empty:hidden",
-    z({ kind: e, noMaxWidth: i }),
-    T({ kind: e }),
-    S({ kind: e }),
-    M({ kind: e, tail: s }),
-    o
-  ), b = "pr-2 pt-1 text-end text-xs text-copy-light", f = c("flex flex-col-reverse sm:flex-row", {
-    "ml-2": e === "left" && !s,
-    "mr-2": e === "right" && !s,
-    "ml-1": e === "left" && s,
-    "mr-1": e === "right" && s
-  });
-  return {
-    wrapper: n,
-    main: l,
-    footer: b,
-    copyButton: f
-  };
-}, $ = "FOOTER_EMPTY", P = ({
-  children: e,
-  kind: t = "left",
-  className: o,
-  contentClassName: i,
-  footer: s,
-  rawFooter: n,
-  copyToClipboard: l,
-  copyToClipboardFocusMode: b = "system",
-  copyToClipboardMode: f = "system",
-  noMaxWidth: h = !1,
-  tail: B = !1
-}) => {
-  const [u, x] = y(!1), m = O({
-    kind: t,
-    className: o,
-    contentClassName: i,
-    noMaxWidth: h,
-    tail: B
-  }), _ = !!l && (typeof l == "function" || typeof l == "string" || typeof e == "string"), N = () => {
-    x(!0), typeof l == "function" ? l(e) : typeof l == "string" ? navigator.clipboard.writeText(l) : typeof e == "string" && navigator.clipboard.writeText(e);
-  };
-  return C(() => {
-    let a;
-    return u && (a = window.setTimeout(() => {
-      x(!1);
-    }, 3e3)), () => {
-      clearTimeout(a);
-    };
-  }, [u]), /* @__PURE__ */ d("div", { className: m.wrapper, children: [
-    /* @__PURE__ */ d("div", { children: [
-      /* @__PURE__ */ r("div", { className: m.main, children: e }),
-      s && Object.keys(s).map((a, w) => {
-        const g = s[a];
-        return g === $ ? /* @__PURE__ */ r("div", { className: "prose-p:m-0", children: /* @__PURE__ */ r("p", { className: m.footer, "aria-hidden": "true", children: /* @__PURE__ */ r("span", { className: "invisible", children: " " }) }) }, `${a}-${w}`) : g ? /* @__PURE__ */ r("div", { className: "prose-p:m-0", children: /* @__PURE__ */ d("p", { className: m.footer, children: [
-          a,
-          ": ",
-          g
-        ] }) }, `${a}-${w}`) : null;
-      }),
-      n && n
-    ] }),
-    _ && /* @__PURE__ */ r("div", { className: m.copyButton, children: /* @__PURE__ */ r(
-      I,
-      {
-        noBorder: !0,
-        noBackground: !0,
-        size: "small",
-        mode: f,
-        focusMode: b,
-        label: u ? "Copied to clipboard" : "Copy to clipboard",
-        onClick: N,
-        disabled: u,
-        children: u ? /* @__PURE__ */ r(E, { size: "size-3" }) : /* @__PURE__ */ r(V, { size: "size-3" })
-      }
-    ) })
-  ] });
-};
-export {
-  p as BUBBLE_CLASSNAME,
-  $ as BUBBLE_FOOTER_EMPTY,
-  P as Bubble
-};