@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 3.0.0

package/dist/components/internal/AiChatUserMessage.js

@@ -1,29 +1,36 @@
 import { jsx } from 'react/jsx-runtime';
 import { memo, forwardRef } from 'react';
+import '../../_private/index.js';
 import { useOverrides } from '../../overrides.js';
 import { classNames } from '../../utils/class-names.js';
+import { Content as AiMessageContent } from '../../primitives/AiMessage/index.js';
 
+function PlainTextPart({ part }) {
+  return /* @__PURE__ */ jsx("p", {
+    children: part.text
+  });
+}
 const AiChatUserMessage = memo(
   forwardRef(
     ({ message, className, overrides }, forwardedRef) => {
       const $ = useOverrides(overrides);
-      const paragraphs = message.content.filter((c) => c.type === "text").map((c) => c.text);
       return /* @__PURE__ */ jsx("div", {
         ref: forwardedRef,
         className: classNames(
           "lb-ai-chat-message lb-ai-chat-user-message",
           className
         ),
-        children: /* @__PURE__ */ jsx("div", {
+        children: message.deletedAt !== void 0 ? /* @__PURE__ */ jsx("div", {
+          className: "lb-ai-chat-message-deleted",
+          children: $.AI_CHAT_MESSAGE_DELETED
+        }) : /* @__PURE__ */ jsx("div", {
           className: "lb-ai-chat-message-content",
-          children: message.deletedAt !== void 0 ? /* @__PURE__ */ jsx("div", {
-            className: "lb-ai-chat-message-deleted",
-            children: $.AI_CHAT_MESSAGE_DELETED
-          }) : /* @__PURE__ */ jsx("div", {
-            className: "lb-ai-chat-message-text",
-            children: paragraphs.map((text, index) => /* @__PURE__ */ jsx("p", {
-              children: text
-            }, index))
+          children: /* @__PURE__ */ jsx(AiMessageContent, {
+            message,
+            components: {
+              TextPart: PlainTextPart
+            },
+            className: "lb-prose lb-ai-chat-message-text"
           })
         })
       });

package/dist/components/internal/AiChatUserMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiChatUserMessage.js","sources":["../../../src/components/internal/AiChatUserMessage.tsx"],"sourcesContent":["import type { UiUserMessage } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport { forwardRef, memo } from \"react\";\n\nimport { type GlobalOverrides, useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\n/* -------------------------------------------------------------------------------------------------\n * AiChatUserMessage\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiChatUserMessageProps extends ComponentProps<\"div\"> {\n  /**\n   * The message to display.\n   */\n  message: UiUserMessage;\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides>;\n}\n\nexport const AiChatUserMessage = memo(\n  forwardRef<HTMLDivElement, AiChatUserMessageProps>(\n    ({ message, className, overrides }, forwardedRef) => {\n      const $ = useOverrides(overrides);\n      const paragraphs = message.content\n        .filter((c) => c.type === \"text\")\n        .map((c) => c.text);\n\n      return (\n        <div\n          ref={forwardedRef}\n          className={classNames(\n            \"lb-ai-chat-message lb-ai-chat-user-message\",\n            className\n          )}\n        >\n          <div className=\"lb-ai-chat-message-content\">\n            {message.deletedAt !== undefined ? (\n              <div className=\"lb-ai-chat-message-deleted\">\n                {$.AI_CHAT_MESSAGE_DELETED}\n              </div>\n            ) : (\n              <div className=\"lb-ai-chat-message-text\">\n                {/* Mimic the structure of assistant messages even though there's no rich text here yet. */}\n                {paragraphs.map((text, index) => (\n                  <p key={index}>{text}</p>\n                ))}\n              </div>\n            )}\n          </div>\n          {/* <div className=\"lb-ai-chat-message-actions\" /> */}\n        </div>\n      );\n    }\n  )\n);\n"],"names":[],"mappings":";;;;;AAqBO,MAAM,iBAAoB,GAAA,IAAA;AAAA,EAC/B,UAAA;AAAA,IACE,CAAC,EAAE,OAAA,EAAS,SAAW,EAAA,SAAA,IAAa,YAAiB,KAAA;AACnD,MAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAChC,MAAA,MAAM,UAAa,GAAA,OAAA,CAAQ,OACxB,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAA,CAAE,IAAS,KAAA,MAAM,CAC/B,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,IAAI,CAAA,CAAA;AAEpB,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAK,EAAA,YAAA;AAAA,QACL,SAAW,EAAA,UAAA;AAAA,UACT,4CAAA;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,4BAAA;AAAA,UACZ,QAAA,EAAA,OAAA,CAAQ,SAAc,KAAA,KAAA,CAAA,mBACpB,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAU,EAAA,4BAAA;AAAA,YACZ,QAAE,EAAA,CAAA,CAAA,uBAAA;AAAA,WACL,oBAEC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAU,EAAA,yBAAA;AAAA,YAEZ,QAAW,EAAA,UAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,0BACpB,GAAA,CAAA,GAAA,EAAA;AAAA,cAAe,QAAA,EAAA,IAAA;AAAA,aAAA,EAAR,KAAa,CACtB,CAAA;AAAA,WACH,CAAA;AAAA,SAEJ,CAAA;AAAA,OAEF,CAAA,CAAA;AAAA,KAEJ;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"AiChatUserMessage.js","sources":["../../../src/components/internal/AiChatUserMessage.tsx"],"sourcesContent":["import type {\n  AiTextPart,\n  AiUserMessage,\n  WithNavigation,\n} from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\nimport { forwardRef, memo } from \"react\";\n\nimport { AiMessage } from \"../../_private\";\nimport { type GlobalOverrides, useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\ntype UiUserMessage = WithNavigation<AiUserMessage>;\n\n/* -------------------------------------------------------------------------------------------------\n * AiChatUserMessage\n * -----------------------------------------------------------------------------------------------*/\nexport interface AiChatUserMessageProps extends ComponentProps<\"div\"> {\n  /**\n   * The message to display.\n   */\n  message: UiUserMessage;\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<GlobalOverrides>;\n}\n\ntype PlainTextPartProps = {\n  part: AiTextPart;\n};\n\nfunction PlainTextPart({ part }: PlainTextPartProps) {\n  return <p>{part.text}</p>;\n}\n\nexport const AiChatUserMessage = memo(\n  forwardRef<HTMLDivElement, AiChatUserMessageProps>(\n    ({ message, className, overrides }, forwardedRef) => {\n      const $ = useOverrides(overrides);\n      return (\n        <div\n          ref={forwardedRef}\n          className={classNames(\n            \"lb-ai-chat-message lb-ai-chat-user-message\",\n            className\n          )}\n        >\n          {message.deletedAt !== undefined ? (\n            <div className=\"lb-ai-chat-message-deleted\">\n              {$.AI_CHAT_MESSAGE_DELETED}\n            </div>\n          ) : (\n            <div className=\"lb-ai-chat-message-content\">\n              <AiMessage.Content\n                message={message}\n                components={{\n                  TextPart: PlainTextPart,\n                }}\n                className=\"lb-prose lb-ai-chat-message-text\"\n              />\n            </div>\n          )}\n        </div>\n      );\n    }\n  )\n);\n"],"names":["AiMessage.Content"],"mappings":";;;;;;;AAgCA,SAAS,aAAA,CAAc,EAAE,IAAA,EAA4B,EAAA;AACnD,EAAA,uBAAQ,GAAA,CAAA,GAAA,EAAA;AAAA,IAAG,QAAK,EAAA,IAAA,CAAA,IAAA;AAAA,GAAK,CAAA,CAAA;AACvB,CAAA;AAEO,MAAM,iBAAoB,GAAA,IAAA;AAAA,EAC/B,UAAA;AAAA,IACE,CAAC,EAAE,OAAA,EAAS,SAAW,EAAA,SAAA,IAAa,YAAiB,KAAA;AACnD,MAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAChC,MAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAK,EAAA,YAAA;AAAA,QACL,SAAW,EAAA,UAAA;AAAA,UACT,4CAAA;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA,OAAA,CAAQ,SAAc,KAAA,KAAA,CAAA,mBACpB,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,4BAAA;AAAA,UACZ,QAAE,EAAA,CAAA,CAAA,uBAAA;AAAA,SACL,oBAEC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,4BAAA;AAAA,UACb,QAAA,kBAAA,GAAA,CAACA,gBAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,UAAY,EAAA;AAAA,cACV,QAAU,EAAA,aAAA;AAAA,aACZ;AAAA,YACA,SAAU,EAAA,kCAAA;AAAA,WACZ,CAAA;AAAA,SACF,CAAA;AAAA,OAEJ,CAAA,CAAA;AAAA,KAEJ;AAAA,GACF;AACF;;;;"}

package/dist/components/internal/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"toolbar\" | \"outline\" | \"primary\" | \"secondary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n  icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"icon\">\n>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, ...props }, forwardedRef) => {\n    return (\n      <CustomButton {...props} ref={forwardedRef}>\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n      </CustomButton>\n    );\n  }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, className, ...props }, forwardedRef) => {\n    return (\n      <CustomButton\n        {...props}\n        type=\"button\"\n        className={classNames(\"lb-select-button\", className)}\n        ref={forwardedRef}\n      >\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n        <span className=\"lb-select-button-chevron\">\n          <ChevronDownIcon />\n        </span>\n      </CustomButton>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AAeO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AAC8C;AAC9C;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?:\n    | \"default\"\n    | \"toolbar\"\n    | \"outline\"\n    | \"primary\"\n    | \"secondary\"\n    | \"destructive\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n  icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"icon\">\n>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, ...props }, forwardedRef) => {\n    return (\n      <CustomButton {...props} ref={forwardedRef}>\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n      </CustomButton>\n    );\n  }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, className, ...props }, forwardedRef) => {\n    return (\n      <CustomButton\n        {...props}\n        type=\"button\"\n        className={classNames(\"lb-select-button\", className)}\n        ref={forwardedRef}\n      >\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n        <span className=\"lb-select-button-chevron\">\n          <ChevronDownIcon />\n        </span>\n      </CustomButton>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;AAqBO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AAC8C;AAC9C;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;;;"}

package/dist/components/internal/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"toolbar\" | \"outline\" | \"primary\" | \"secondary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n  icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"icon\">\n>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, ...props }, forwardedRef) => {\n    return (\n      <CustomButton {...props} ref={forwardedRef}>\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n      </CustomButton>\n    );\n  }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, className, ...props }, forwardedRef) => {\n    return (\n      <CustomButton\n        {...props}\n        type=\"button\"\n        className={classNames(\"lb-select-button\", className)}\n        ref={forwardedRef}\n      >\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n        <span className=\"lb-select-button-chevron\">\n          <ChevronDownIcon />\n        </span>\n      </CustomButton>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAeO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AAC8C;AAC9C;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons/ChevronDown\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?:\n    | \"default\"\n    | \"toolbar\"\n    | \"outline\"\n    | \"primary\"\n    | \"secondary\"\n    | \"destructive\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n  icon?: ReactNode;\n}\n\nexport const CustomButton = forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"icon\">\n>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      children,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, ...props }, forwardedRef) => {\n    return (\n      <CustomButton {...props} ref={forwardedRef}>\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n      </CustomButton>\n    );\n  }\n);\n\nexport const SelectButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ icon, children, className, ...props }, forwardedRef) => {\n    return (\n      <CustomButton\n        {...props}\n        type=\"button\"\n        className={classNames(\"lb-select-button\", className)}\n        ref={forwardedRef}\n      >\n        {icon ? <span className=\"lb-icon-container\">{icon}</span> : null}\n        {children ? <span className=\"lb-button-label\">{children}</span> : null}\n        <span className=\"lb-select-button-chevron\">\n          <ChevronDownIcon />\n        </span>\n      </CustomButton>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAqBO;AAAqB;AAKxB;AACY;AACH;AACO;AACd;AACA;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AAEJ;AACH;AAGN;AAEO;AAAe;AAElB;AACG;AAAiB;AAAY;AAC3B;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AAAA;AACpE;AAGN;AAEO;AAAqB;AAExB;AACG;AACK;AACC;AAC8C;AAC9C;AAEJ;AAAQ;AAAe;AAAqB;AAAe;AAC/C;AAAe;AAAmB;AAAmB;AACjE;AAAe;AACG;AACnB;AAAA;AACF;AAGN;;"}

package/dist/components/internal/CodeBlock.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../icons/index.cjs');
+var overrides = require('../../overrides.cjs');
+var Button = require('./Button.cjs');
+var Tooltip = require('./Tooltip.cjs');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var Check = require('../../icons/Check.cjs');
+var Copy = require('../../icons/Copy.cjs');
+
+const COPY_DELAY = 1500;
+function CodeBlock({ title, code, overrides: overrides$1 }) {
+  const $ = overrides.useOverrides(overrides$1);
+  const [isCopied, setCopied] = react.useState(false);
+  const timeoutRef = react.useRef(null);
+  react.useEffect(() => {
+    if (isCopied) {
+      timeoutRef.current = setTimeout(() => {
+        setCopied(false);
+      }, COPY_DELAY);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [isCopied]);
+  const handleCopy = react.useCallback(() => {
+    try {
+      navigator.clipboard.writeText(code);
+      setCopied(true);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [code]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive.TooltipProvider, {
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: "lb-code-block",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: "lb-code-block-header",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", {
+              className: "lb-code-block-title",
+              children: title
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: "lb-code-block-header-actions",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, {
+                content: isCopied ? null : $.COPY_TO_CLIPBOARD,
+                children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+                  className: "lb-code-block-header-action",
+                  icon: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(Check.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Copy.CopyIcon, {}),
+                  onClick: handleCopy,
+                  "aria-label": $.COPY_TO_CLIPBOARD
+                })
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", {
+          className: "lb-code-block-content",
+          children: /* @__PURE__ */ jsxRuntime.jsx("code", {
+            children: code
+          })
+        })
+      ]
+    })
+  });
+}
+
+exports.CodeBlock = CodeBlock;
+//# sourceMappingURL=CodeBlock.cjs.map

package/dist/components/internal/CodeBlock.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.cjs","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  title: string;\n  code: string;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n  const $ = useOverrides(overrides);\n  const [isCopied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (isCopied) {\n      timeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, COPY_DELAY);\n    }\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [isCopied]);\n\n  const handleCopy = useCallback(() => {\n    try {\n      navigator.clipboard.writeText(code);\n      setCopied(true);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [code]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"lb-code-block\">\n        <div className=\"lb-code-block-header\">\n          <span className=\"lb-code-block-title\">{title}</span>\n          <div className=\"lb-code-block-header-actions\">\n            <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n              <Button\n                className=\"lb-code-block-header-action\"\n                icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n                onClick={handleCopy}\n                aria-label={$.COPY_TO_CLIPBOARD}\n              />\n            </Tooltip>\n          </div>\n        </div>\n        <pre className=\"lb-code-block-content\">\n          <code>{code}</code>\n        </pre>\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"names":["overrides","useOverrides","useState","useRef","useEffect","useCallback","jsx","TooltipProvider","jsxs","Tooltip","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,aAAMA,aAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAIC,uBAAaD,WAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAIE,eAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAaC,aAA6C,IAAI,CAAA,CAAA;AAEpE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAaC,kBAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAP,EAAA;AACA,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACGC,cAAA,CAAAC,gCAAA,EAAA;AAAA,IACC,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,eAAA;AAAA,MACb,QAAA,EAAA;AAAA,wBAACA,eAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,sBAAA;AAAA,UACb,QAAA,EAAA;AAAA,4BAACF,cAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAU,EAAA,qBAAA;AAAA,cAAuB,QAAA,EAAA,KAAA;AAAA,aAAM,CAAA;AAAA,4BAC5CA,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAU,EAAA,8BAAA;AAAA,cACb,QAAC,kBAAAA,cAAA,CAAAG,eAAA,EAAA;AAAA,gBAAQ,OAAA,EAAS,QAAW,GAAA,IAAA,GAAO,CAAE,CAAA,iBAAA;AAAA,gBACpC,QAAC,kBAAAH,cAAA,CAAAI,aAAA,EAAA;AAAA,kBACC,SAAU,EAAA,6BAAA;AAAA,kBACV,MAAM,QAAW,mBAAAJ,cAAA,CAACK,eAAU,EAAA,EAAA,CAAA,kCAAMC,aAAS,EAAA,EAAA,CAAA;AAAA,kBAC3C,OAAS,EAAA,UAAA;AAAA,kBACT,cAAY,CAAE,CAAA,iBAAA;AAAA,iBAChB,CAAA;AAAA,eACF,CAAA;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACCN,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,uBAAA;AAAA,UACb,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA,EAAA,IAAA;AAAA,WAAK,CAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/internal/CodeBlock.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import '../../icons/index.js';
+import { useOverrides } from '../../overrides.js';
+import { Button } from './Button.js';
+import { Tooltip } from './Tooltip.js';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { CheckIcon } from '../../icons/Check.js';
+import { CopyIcon } from '../../icons/Copy.js';
+
+const COPY_DELAY = 1500;
+function CodeBlock({ title, code, overrides }) {
+  const $ = useOverrides(overrides);
+  const [isCopied, setCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (isCopied) {
+      timeoutRef.current = setTimeout(() => {
+        setCopied(false);
+      }, COPY_DELAY);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [isCopied]);
+  const handleCopy = useCallback(() => {
+    try {
+      navigator.clipboard.writeText(code);
+      setCopied(true);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [code]);
+  return /* @__PURE__ */ jsx(TooltipProvider, {
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "lb-code-block",
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: "lb-code-block-header",
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: "lb-code-block-title",
+              children: title
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: "lb-code-block-header-actions",
+              children: /* @__PURE__ */ jsx(Tooltip, {
+                content: isCopied ? null : $.COPY_TO_CLIPBOARD,
+                children: /* @__PURE__ */ jsx(Button, {
+                  className: "lb-code-block-header-action",
+                  icon: isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {}),
+                  onClick: handleCopy,
+                  "aria-label": $.COPY_TO_CLIPBOARD
+                })
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("pre", {
+          className: "lb-code-block-content",
+          children: /* @__PURE__ */ jsx("code", {
+            children: code
+          })
+        })
+      ]
+    })
+  });
+}
+
+export { CodeBlock };
+//# sourceMappingURL=CodeBlock.js.map

package/dist/components/internal/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/internal/CodeBlock.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon } from \"../../icons\";\nimport type { GlobalOverrides } from \"../../overrides\";\nimport { useOverrides } from \"../../overrides\";\nimport { Button } from \"./Button\";\nimport { Tooltip, TooltipProvider } from \"./Tooltip\";\n\nconst COPY_DELAY = 1500;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  title: string;\n  code: string;\n  overrides?: Partial<GlobalOverrides>;\n}\n\nexport function CodeBlock({ title, code, overrides }: CodeBlockProps) {\n  const $ = useOverrides(overrides);\n  const [isCopied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (isCopied) {\n      timeoutRef.current = setTimeout(() => {\n        setCopied(false);\n      }, COPY_DELAY);\n    }\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [isCopied]);\n\n  const handleCopy = useCallback(() => {\n    try {\n      navigator.clipboard.writeText(code);\n      setCopied(true);\n    } catch (error) {\n      console.error(error);\n    }\n  }, [code]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"lb-code-block\">\n        <div className=\"lb-code-block-header\">\n          <span className=\"lb-code-block-title\">{title}</span>\n          <div className=\"lb-code-block-header-actions\">\n            <Tooltip content={isCopied ? null : $.COPY_TO_CLIPBOARD}>\n              <Button\n                className=\"lb-code-block-header-action\"\n                icon={isCopied ? <CheckIcon /> : <CopyIcon />}\n                onClick={handleCopy}\n                aria-label={$.COPY_TO_CLIPBOARD}\n              />\n            </Tooltip>\n          </div>\n        </div>\n        <pre className=\"lb-code-block-content\">\n          <code>{code}</code>\n        </pre>\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AASA,MAAM,UAAa,GAAA,IAAA,CAAA;AAQZ,SAAS,SAAU,CAAA,EAAE,KAAO,EAAA,IAAA,EAAM,WAA6B,EAAA;AACpE,EAAM,MAAA,CAAA,GAAI,aAAa,SAAS,CAAA,CAAA;AAChC,EAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAa,OAA6C,IAAI,CAAA,CAAA;AAEpE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAU,EAAA;AACZ,MAAW,UAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACpC,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,SACd,UAAU,CAAA,CAAA;AAAA,KACf;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,YAAA,CAAa,WAAW,OAAO,CAAA,CAAA;AAAA,OACjC;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,IAAI,IAAA;AACF,MAAU,SAAA,CAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AAClC,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,aACP,KAAP,EAAA;AACA,MAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAA,uBACG,GAAA,CAAA,eAAA,EAAA;AAAA,IACC,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,eAAA;AAAA,MACb,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,sBAAA;AAAA,UACb,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cAAK,SAAU,EAAA,qBAAA;AAAA,cAAuB,QAAA,EAAA,KAAA;AAAA,aAAM,CAAA;AAAA,4BAC5C,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAU,EAAA,8BAAA;AAAA,cACb,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA;AAAA,gBAAQ,OAAA,EAAS,QAAW,GAAA,IAAA,GAAO,CAAE,CAAA,iBAAA;AAAA,gBACpC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,kBACC,SAAU,EAAA,6BAAA;AAAA,kBACV,MAAM,QAAW,mBAAA,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA,uBAAM,QAAS,EAAA,EAAA,CAAA;AAAA,kBAC3C,OAAS,EAAA,UAAA;AAAA,kBACT,cAAY,CAAE,CAAA,iBAAA;AAAA,iBAChB,CAAA;AAAA,eACF,CAAA;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAU,EAAA,uBAAA;AAAA,UACb,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,YAAM,QAAA,EAAA,IAAA;AAAA,WAAK,CAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/internal/Dropdown.cjs

@@ -39,7 +39,7 @@ function Dropdown({
   ...props
 }) {
   const $ = overrides.useOverrides();
-  const { portalContainer } = config.useLiveblocksUIConfig();
+  const { portalContainer } = config.useLiveblocksUiConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.Root, {
     defaultOpen,
     open,

package/dist/components/internal/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUIConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={classNames(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAEN;AAAA;AACA;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AACH;AACF;AAAA;AAGN;AAEO;AAAqB;AAExB;AACG;AACoD;AAC/C;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;;;;;;"}
+{"version":3,"file":"Dropdown.cjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUiConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={classNames(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAEN;AAAA;AACA;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AACH;AACF;AAAA;AAGN;AAEO;AAAqB;AAExB;AACG;AACoD;AAC/C;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;;;;;;"}

package/dist/components/internal/Dropdown.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 export { DropdownMenuTrigger as DropdownTrigger } from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { useLiveblocksUIConfig } from '../../config.js';
+import { useLiveblocksUiConfig } from '../../config.js';
 import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.js';
 import { useOverrides } from '../../overrides.js';
 import { classNames } from '../../utils/class-names.js';
@@ -19,7 +19,7 @@ function Dropdown({
   ...props
 }) {
   const $ = useOverrides();
-  const { portalContainer } = useLiveblocksUIConfig();
+  const { portalContainer } = useLiveblocksUiConfig();
   return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, {
     defaultOpen,
     open,

package/dist/components/internal/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUIConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={classNames(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAEN;AAAA;AACA;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AACH;AACF;AAAA;AAGN;AAEO;AAAqB;AAExB;AACG;AACoD;AAC/C;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\ninterface DropdownItemProps\n  extends DropdownMenuPrimitive.DropdownMenuItemProps {\n  icon?: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUiConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(\n  ({ children, className, icon, ...props }, forwardedRef) => {\n    return (\n      <DropdownMenuPrimitive.DropdownMenuItem\n        className={classNames(\"lb-dropdown-item\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {icon ? (\n          <span className=\"lb-dropdown-item-icon lb-icon-container\">\n            {icon}\n          </span>\n        ) : null}\n        {children ? (\n          <span className=\"lb-dropdown-item-label\">{children}</span>\n        ) : null}\n      </DropdownMenuPrimitive.DropdownMenuItem>\n    );\n  }\n);\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAEN;AAAA;AACA;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAEH;AACH;AACF;AAAA;AAGN;AAEO;AAAqB;AAExB;AACG;AACoD;AAC/C;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;"}

package/dist/components/internal/Emoji.cjs

@@ -2,15 +2,23 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var Emoji$1 = require('../../primitives/internal/Emoji.cjs');
+var constants = require('../../constants.cjs');
 var classNames = require('../../utils/class-names.cjs');
 
 const Emoji = react.forwardRef(
-  ({ className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Emoji$1.Emoji, {
+  ({ emoji, className, style, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", {
+      role: "img",
+      "aria-label": emoji,
+      "data-emoji": emoji,
       className: classNames.classNames("lb-emoji", className),
+      style: {
+        ...style,
+        fontFamily: constants.EMOJI_FONT_FAMILY
+      },
       ...props,
-      ref: forwardedRef
+      ref: forwardedRef,
+      children: emoji
     });
   }
 );

package/dist/components/internal/Emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Emoji.cjs","sources":["../../../src/components/internal/Emoji.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport type { EmojiProps as EmojiPrimitiveProps } from \"../../primitives/internal/Emoji\";\nimport { Emoji as EmojiPrimitive } from \"../../primitives/internal/Emoji\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport const Emoji = forwardRef<HTMLSpanElement, EmojiPrimitiveProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <EmojiPrimitive\n        className={classNames(\"lb-emoji\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","jsx","EmojiPrimitive","classNames"],"mappings":";;;;;;;AAMO,MAAM,KAAQ,GAAAA,gBAAA;AAAA,EACnB,CAAC,EAAE,SAAc,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACzC,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAA,EAAWC,qBAAW,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MAC1C,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KACP,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Emoji.cjs","sources":["../../../src/components/internal/Emoji.tsx"],"sourcesContent":["import { type ComponentProps, forwardRef } from \"react\";\n\nimport { EMOJI_FONT_FAMILY } from \"../../constants\";\nimport { classNames } from \"../../utils/class-names\";\n\ninterface EmojiProps extends ComponentProps<\"span\"> {\n  emoji: string;\n}\n\nexport const Emoji = forwardRef<HTMLSpanElement, EmojiProps>(\n  ({ emoji, className, style, ...props }, forwardedRef) => {\n    return (\n      <span\n        role=\"img\"\n        aria-label={emoji}\n        data-emoji={emoji}\n        className={classNames(\"lb-emoji\", className)}\n        style={{\n          ...style,\n          fontFamily: EMOJI_FONT_FAMILY,\n        }}\n        {...props}\n        ref={forwardedRef}\n      >\n        {emoji}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","jsx","classNames","EMOJI_FONT_FAMILY"],"mappings":";;;;;;;AASO,MAAM,KAAQ,GAAAA,gBAAA;AAAA,EACnB,CAAC,EAAE,KAAA,EAAO,WAAW,KAAU,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACvD,IAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,IAAK,EAAA,KAAA;AAAA,MACL,YAAY,EAAA,KAAA;AAAA,MACZ,YAAY,EAAA,KAAA;AAAA,MACZ,SAAA,EAAWC,qBAAW,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MAC3C,KAAO,EAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,UAAY,EAAAC,2BAAA;AAAA,OACd;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA,KAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/internal/Emoji.js

@@ -1,14 +1,22 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Emoji as Emoji$1 } from '../../primitives/internal/Emoji.js';
+import { EMOJI_FONT_FAMILY } from '../../constants.js';
 import { classNames } from '../../utils/class-names.js';
 
 const Emoji = forwardRef(
-  ({ className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsx(Emoji$1, {
+  ({ emoji, className, style, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsx("span", {
+      role: "img",
+      "aria-label": emoji,
+      "data-emoji": emoji,
       className: classNames("lb-emoji", className),
+      style: {
+        ...style,
+        fontFamily: EMOJI_FONT_FAMILY
+      },
       ...props,
-      ref: forwardedRef
+      ref: forwardedRef,
+      children: emoji
     });
   }
 );

package/dist/components/internal/Emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"Emoji.js","sources":["../../../src/components/internal/Emoji.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport type { EmojiProps as EmojiPrimitiveProps } from \"../../primitives/internal/Emoji\";\nimport { Emoji as EmojiPrimitive } from \"../../primitives/internal/Emoji\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport const Emoji = forwardRef<HTMLSpanElement, EmojiPrimitiveProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <EmojiPrimitive\n        className={classNames(\"lb-emoji\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":["EmojiPrimitive"],"mappings":";;;;;AAMO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAc,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACzC,IAAA,uBACG,GAAA,CAAAA,OAAA,EAAA;AAAA,MACC,SAAA,EAAW,UAAW,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MAC1C,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KACP,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Emoji.js","sources":["../../../src/components/internal/Emoji.tsx"],"sourcesContent":["import { type ComponentProps, forwardRef } from \"react\";\n\nimport { EMOJI_FONT_FAMILY } from \"../../constants\";\nimport { classNames } from \"../../utils/class-names\";\n\ninterface EmojiProps extends ComponentProps<\"span\"> {\n  emoji: string;\n}\n\nexport const Emoji = forwardRef<HTMLSpanElement, EmojiProps>(\n  ({ emoji, className, style, ...props }, forwardedRef) => {\n    return (\n      <span\n        role=\"img\"\n        aria-label={emoji}\n        data-emoji={emoji}\n        className={classNames(\"lb-emoji\", className)}\n        style={{\n          ...style,\n          fontFamily: EMOJI_FONT_FAMILY,\n        }}\n        {...props}\n        ref={forwardedRef}\n      >\n        {emoji}\n      </span>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;AASO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,CAAC,EAAE,KAAA,EAAO,WAAW,KAAU,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACvD,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,IAAK,EAAA,KAAA;AAAA,MACL,YAAY,EAAA,KAAA;AAAA,MACZ,YAAY,EAAA,KAAA;AAAA,MACZ,SAAA,EAAW,UAAW,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MAC3C,KAAO,EAAA;AAAA,QACL,GAAG,KAAA;AAAA,QACH,UAAY,EAAA,iBAAA;AAAA,OACd;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA,KAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/internal/EmojiPicker.cjs

@@ -73,7 +73,7 @@ function EmojiPickerListCategoryHeader({
 const EmojiPicker = react.forwardRef(
   ({ onEmojiSelect, onOpenChange, children, className, ...props }, forwardedRef) => {
     const [isOpen, setOpen] = react.useState(false);
-    const { portalContainer, emojibaseUrl } = config.useLiveblocksUIConfig();
+    const { portalContainer, emojibaseUrl } = config.useLiveblocksUiConfig();
     const $ = overrides.useOverrides();
     const handleOpenChange = react.useCallback(
       (isOpen2) => {

package/dist/components/internal/EmojiPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.cjs","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport {\n  type Emoji as FrimousseEmoji,\n  EmojiPicker as EmojiPickerPrimitive,\n  type EmojiPickerListCategoryHeaderProps,\n  type EmojiPickerListEmojiProps,\n  type EmojiPickerListRowProps,\n  type Locale,\n} from \"frimousse\";\nimport type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { forwardRef, useCallback, useState } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\nimport { Emoji } from \"./Emoji\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n  onOpenChange?: (open: boolean) => void;\n  onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerListEmoji({\n  emoji,\n  className,\n  ...props\n}: EmojiPickerListEmojiProps) {\n  return (\n    <button\n      className={classNames(\"lb-emoji-picker-emoji\", className)}\n      {...props}\n    >\n      <Emoji emoji={emoji.emoji} />\n    </button>\n  );\n}\n\nfunction EmojiPickerListRow({\n  children,\n  className,\n  ...props\n}: EmojiPickerListRowProps) {\n  return (\n    <div className={classNames(\"lb-emoji-picker-row\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerListCategoryHeader({\n  category,\n  className,\n  ...props\n}: EmojiPickerListCategoryHeaderProps) {\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-category-header\", className)}\n      {...props}\n    >\n      <span className=\"lb-emoji-picker-category-header-title\">\n        {category.label}\n      </span>\n    </div>\n  );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n  (\n    { onEmojiSelect, onOpenChange, children, className, ...props },\n    forwardedRef\n  ) => {\n    const [isOpen, setOpen] = useState(false);\n    const { portalContainer, emojibaseUrl } = useLiveblocksUIConfig();\n    const $ = useOverrides();\n\n    const handleOpenChange = useCallback(\n      (isOpen: boolean) => {\n        setOpen(isOpen);\n        onOpenChange?.(isOpen);\n      },\n      [onOpenChange]\n    );\n\n    const handleEmojiSelect = useCallback(\n      ({ emoji }: FrimousseEmoji) => {\n        setOpen(false);\n        onEmojiSelect?.(emoji);\n      },\n      [onEmojiSelect]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            className={classNames(\n              \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n              className\n            )}\n            {...props}\n            ref={forwardedRef}\n            asChild\n          >\n            <EmojiPickerPrimitive.Root\n              onEmojiSelect={handleEmojiSelect}\n              locale={$.locale as Locale}\n              columns={10}\n              emojiVersion={15.1}\n              emojibaseUrl={emojibaseUrl}\n              onClick={stopPropagation}\n            >\n              <div className=\"lb-emoji-picker-header\">\n                <div className=\"lb-emoji-picker-search-container\">\n                  <EmojiPickerPrimitive.Search\n                    className=\"lb-emoji-picker-search\"\n                    placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n                    autoFocus\n                  />\n                  <SearchIcon />\n                </div>\n              </div>\n              <EmojiPickerPrimitive.Viewport className=\"lb-emoji-picker-content\">\n                <EmojiPickerPrimitive.Loading className=\"lb-loading lb-emoji-picker-loading\">\n                  <SpinnerIcon />\n                </EmojiPickerPrimitive.Loading>\n                <EmojiPickerPrimitive.Empty className=\"lb-empty lb-emoji-picker-empty\">\n                  {$.EMOJI_PICKER_EMPTY}\n                </EmojiPickerPrimitive.Empty>\n                <EmojiPickerPrimitive.List\n                  className=\"lb-emoji-picker-list\"\n                  components={{\n                    CategoryHeader: EmojiPickerListCategoryHeader,\n                    Row: EmojiPickerListRow,\n                    Emoji: EmojiPickerListEmoji,\n                  }}\n                />\n              </EmojiPickerPrimitive.Viewport>\n              <div className=\"lb-emoji-picker-footer\">\n                <EmojiPickerPrimitive.ActiveEmoji>\n                  {({ emoji }) =>\n                    emoji ? (\n                      <>\n                        <div className=\"lb-emoji-picker-active-emoji\">\n                          {emoji.emoji}\n                        </div>\n                        <span className=\"lb-emoji-picker-active-emoji-label\">\n                          {emoji.label}\n                        </span>\n                      </>\n                    ) : (\n                      <span className=\"lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder\">\n                        Select an emoji…\n                      </span>\n                    )\n                  }\n                </EmojiPickerPrimitive.ActiveEmoji>\n                <Tooltip content={$.EMOJI_PICKER_CHANGE_SKIN_TONE}>\n                  <EmojiPickerPrimitive.SkinToneSelector className=\"lb-button lb-emoji-picker-skin-tone-selector\" />\n                </Tooltip>\n              </div>\n            </EmojiPickerPrimitive.Root>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["jsx","classNames","Emoji","forwardRef","useState","useLiveblocksUIConfig","useOverrides","useCallback","isOpen","jsxs","PopoverPrimitive","FLOATING_ELEMENT_SIDE_OFFSET","FLOATING_ELEMENT_COLLISION_PADDING","EmojiPickerPrimitive","SearchIcon","SpinnerIcon","Fragment","Tooltip"],"mappings":"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"}
+{"version":3,"file":"EmojiPicker.cjs","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport {\n  type Emoji as FrimousseEmoji,\n  EmojiPicker as EmojiPickerPrimitive,\n  type EmojiPickerListCategoryHeaderProps,\n  type EmojiPickerListEmojiProps,\n  type EmojiPickerListRowProps,\n  type Locale,\n} from \"frimousse\";\nimport type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { forwardRef, useCallback, useState } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\nimport { Emoji } from \"./Emoji\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n  onOpenChange?: (open: boolean) => void;\n  onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerListEmoji({\n  emoji,\n  className,\n  ...props\n}: EmojiPickerListEmojiProps) {\n  return (\n    <button\n      className={classNames(\"lb-emoji-picker-emoji\", className)}\n      {...props}\n    >\n      <Emoji emoji={emoji.emoji} />\n    </button>\n  );\n}\n\nfunction EmojiPickerListRow({\n  children,\n  className,\n  ...props\n}: EmojiPickerListRowProps) {\n  return (\n    <div className={classNames(\"lb-emoji-picker-row\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerListCategoryHeader({\n  category,\n  className,\n  ...props\n}: EmojiPickerListCategoryHeaderProps) {\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-category-header\", className)}\n      {...props}\n    >\n      <span className=\"lb-emoji-picker-category-header-title\">\n        {category.label}\n      </span>\n    </div>\n  );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n  (\n    { onEmojiSelect, onOpenChange, children, className, ...props },\n    forwardedRef\n  ) => {\n    const [isOpen, setOpen] = useState(false);\n    const { portalContainer, emojibaseUrl } = useLiveblocksUiConfig();\n    const $ = useOverrides();\n\n    const handleOpenChange = useCallback(\n      (isOpen: boolean) => {\n        setOpen(isOpen);\n        onOpenChange?.(isOpen);\n      },\n      [onOpenChange]\n    );\n\n    const handleEmojiSelect = useCallback(\n      ({ emoji }: FrimousseEmoji) => {\n        setOpen(false);\n        onEmojiSelect?.(emoji);\n      },\n      [onEmojiSelect]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            className={classNames(\n              \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n              className\n            )}\n            {...props}\n            ref={forwardedRef}\n            asChild\n          >\n            <EmojiPickerPrimitive.Root\n              onEmojiSelect={handleEmojiSelect}\n              locale={$.locale as Locale}\n              columns={10}\n              emojiVersion={15.1}\n              emojibaseUrl={emojibaseUrl}\n              onClick={stopPropagation}\n            >\n              <div className=\"lb-emoji-picker-header\">\n                <div className=\"lb-emoji-picker-search-container\">\n                  <EmojiPickerPrimitive.Search\n                    className=\"lb-emoji-picker-search\"\n                    placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n                    autoFocus\n                  />\n                  <SearchIcon />\n                </div>\n              </div>\n              <EmojiPickerPrimitive.Viewport className=\"lb-emoji-picker-content\">\n                <EmojiPickerPrimitive.Loading className=\"lb-loading lb-emoji-picker-loading\">\n                  <SpinnerIcon />\n                </EmojiPickerPrimitive.Loading>\n                <EmojiPickerPrimitive.Empty className=\"lb-empty lb-emoji-picker-empty\">\n                  {$.EMOJI_PICKER_EMPTY}\n                </EmojiPickerPrimitive.Empty>\n                <EmojiPickerPrimitive.List\n                  className=\"lb-emoji-picker-list\"\n                  components={{\n                    CategoryHeader: EmojiPickerListCategoryHeader,\n                    Row: EmojiPickerListRow,\n                    Emoji: EmojiPickerListEmoji,\n                  }}\n                />\n              </EmojiPickerPrimitive.Viewport>\n              <div className=\"lb-emoji-picker-footer\">\n                <EmojiPickerPrimitive.ActiveEmoji>\n                  {({ emoji }) =>\n                    emoji ? (\n                      <>\n                        <div className=\"lb-emoji-picker-active-emoji\">\n                          {emoji.emoji}\n                        </div>\n                        <span className=\"lb-emoji-picker-active-emoji-label\">\n                          {emoji.label}\n                        </span>\n                      </>\n                    ) : (\n                      <span className=\"lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder\">\n                        Select an emoji…\n                      </span>\n                    )\n                  }\n                </EmojiPickerPrimitive.ActiveEmoji>\n                <Tooltip content={$.EMOJI_PICKER_CHANGE_SKIN_TONE}>\n                  <EmojiPickerPrimitive.SkinToneSelector className=\"lb-button lb-emoji-picker-skin-tone-selector\" />\n                </Tooltip>\n              </div>\n            </EmojiPickerPrimitive.Root>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["jsx","classNames","Emoji","forwardRef","useState","useLiveblocksUiConfig","useOverrides","useCallback","isOpen","jsxs","PopoverPrimitive","FLOATING_ELEMENT_SIDE_OFFSET","FLOATING_ELEMENT_COLLISION_PADDING","EmojiPickerPrimitive","SearchIcon","SpinnerIcon","Fragment","Tooltip"],"mappings":"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"}

package/dist/components/internal/EmojiPicker.js

@@ -3,7 +3,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 export { PopoverTrigger as EmojiPickerTrigger } from '@radix-ui/react-popover';
 import { EmojiPicker as EmojiPicker$1 } from 'frimousse';
 import { forwardRef, useState, useCallback } from 'react';
-import { useLiveblocksUIConfig } from '../../config.js';
+import { useLiveblocksUiConfig } from '../../config.js';
 import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.js';
 import { SearchIcon } from '../../icons/Search.js';
 import { SpinnerIcon } from '../../icons/Spinner.js';
@@ -53,7 +53,7 @@ function EmojiPickerListCategoryHeader({
 const EmojiPicker = forwardRef(
   ({ onEmojiSelect, onOpenChange, children, className, ...props }, forwardedRef) => {
     const [isOpen, setOpen] = useState(false);
-    const { portalContainer, emojibaseUrl } = useLiveblocksUIConfig();
+    const { portalContainer, emojibaseUrl } = useLiveblocksUiConfig();
     const $ = useOverrides();
     const handleOpenChange = useCallback(
       (isOpen2) => {

package/dist/components/internal/EmojiPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport {\n  type Emoji as FrimousseEmoji,\n  EmojiPicker as EmojiPickerPrimitive,\n  type EmojiPickerListCategoryHeaderProps,\n  type EmojiPickerListEmojiProps,\n  type EmojiPickerListRowProps,\n  type Locale,\n} from \"frimousse\";\nimport type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { forwardRef, useCallback, useState } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\nimport { Emoji } from \"./Emoji\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n  onOpenChange?: (open: boolean) => void;\n  onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerListEmoji({\n  emoji,\n  className,\n  ...props\n}: EmojiPickerListEmojiProps) {\n  return (\n    <button\n      className={classNames(\"lb-emoji-picker-emoji\", className)}\n      {...props}\n    >\n      <Emoji emoji={emoji.emoji} />\n    </button>\n  );\n}\n\nfunction EmojiPickerListRow({\n  children,\n  className,\n  ...props\n}: EmojiPickerListRowProps) {\n  return (\n    <div className={classNames(\"lb-emoji-picker-row\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerListCategoryHeader({\n  category,\n  className,\n  ...props\n}: EmojiPickerListCategoryHeaderProps) {\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-category-header\", className)}\n      {...props}\n    >\n      <span className=\"lb-emoji-picker-category-header-title\">\n        {category.label}\n      </span>\n    </div>\n  );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n  (\n    { onEmojiSelect, onOpenChange, children, className, ...props },\n    forwardedRef\n  ) => {\n    const [isOpen, setOpen] = useState(false);\n    const { portalContainer, emojibaseUrl } = useLiveblocksUIConfig();\n    const $ = useOverrides();\n\n    const handleOpenChange = useCallback(\n      (isOpen: boolean) => {\n        setOpen(isOpen);\n        onOpenChange?.(isOpen);\n      },\n      [onOpenChange]\n    );\n\n    const handleEmojiSelect = useCallback(\n      ({ emoji }: FrimousseEmoji) => {\n        setOpen(false);\n        onEmojiSelect?.(emoji);\n      },\n      [onEmojiSelect]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            className={classNames(\n              \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n              className\n            )}\n            {...props}\n            ref={forwardedRef}\n            asChild\n          >\n            <EmojiPickerPrimitive.Root\n              onEmojiSelect={handleEmojiSelect}\n              locale={$.locale as Locale}\n              columns={10}\n              emojiVersion={15.1}\n              emojibaseUrl={emojibaseUrl}\n              onClick={stopPropagation}\n            >\n              <div className=\"lb-emoji-picker-header\">\n                <div className=\"lb-emoji-picker-search-container\">\n                  <EmojiPickerPrimitive.Search\n                    className=\"lb-emoji-picker-search\"\n                    placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n                    autoFocus\n                  />\n                  <SearchIcon />\n                </div>\n              </div>\n              <EmojiPickerPrimitive.Viewport className=\"lb-emoji-picker-content\">\n                <EmojiPickerPrimitive.Loading className=\"lb-loading lb-emoji-picker-loading\">\n                  <SpinnerIcon />\n                </EmojiPickerPrimitive.Loading>\n                <EmojiPickerPrimitive.Empty className=\"lb-empty lb-emoji-picker-empty\">\n                  {$.EMOJI_PICKER_EMPTY}\n                </EmojiPickerPrimitive.Empty>\n                <EmojiPickerPrimitive.List\n                  className=\"lb-emoji-picker-list\"\n                  components={{\n                    CategoryHeader: EmojiPickerListCategoryHeader,\n                    Row: EmojiPickerListRow,\n                    Emoji: EmojiPickerListEmoji,\n                  }}\n                />\n              </EmojiPickerPrimitive.Viewport>\n              <div className=\"lb-emoji-picker-footer\">\n                <EmojiPickerPrimitive.ActiveEmoji>\n                  {({ emoji }) =>\n                    emoji ? (\n                      <>\n                        <div className=\"lb-emoji-picker-active-emoji\">\n                          {emoji.emoji}\n                        </div>\n                        <span className=\"lb-emoji-picker-active-emoji-label\">\n                          {emoji.label}\n                        </span>\n                      </>\n                    ) : (\n                      <span className=\"lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder\">\n                        Select an emoji…\n                      </span>\n                    )\n                  }\n                </EmojiPickerPrimitive.ActiveEmoji>\n                <Tooltip content={$.EMOJI_PICKER_CHANGE_SKIN_TONE}>\n                  <EmojiPickerPrimitive.SkinToneSelector className=\"lb-button lb-emoji-picker-skin-tone-selector\" />\n                </Tooltip>\n              </div>\n            </EmojiPickerPrimitive.Root>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["isOpen","EmojiPickerPrimitive"],"mappings":";;;;;;;;;;;;;;AA6BA,SAAS,oBAAqB,CAAA;AAAA,EAC5B,KAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA8B,EAAA;AAC5B,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,IACC,SAAA,EAAW,UAAW,CAAA,uBAAA,EAAyB,SAAS,CAAA;AAAA,IACvD,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAM,OAAO,KAAM,CAAA,KAAA;AAAA,KAAO,CAAA;AAAA,GAC7B,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,kBAAmB,CAAA;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA4B,EAAA;AAC1B,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,UAAW,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAAA,IAAI,GAAG,KAAA;AAAA,IAC/D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,6BAA8B,CAAA;AAAA,EACrC,QAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAAuC,EAAA;AACrC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,UAAW,CAAA,iCAAA,EAAmC,SAAS,CAAA;AAAA,IACjE,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MAAK,SAAU,EAAA,uCAAA;AAAA,MACb,QAAS,EAAA,QAAA,CAAA,KAAA;AAAA,KACZ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAA;AAEO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,CACE,EAAE,aAAe,EAAA,YAAA,EAAc,UAAU,SAAc,EAAA,GAAA,KAAA,IACvD,YACG,KAAA;AACH,IAAA,MAAM,CAAC,MAAA,EAAQ,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACxC,IAAA,MAAM,EAAE,eAAA,EAAiB,YAAa,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAChE,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,MACvB,CAACA,OAAoB,KAAA;AACnB,QAAA,OAAA,CAAQA,OAAM,CAAA,CAAA;AACd,QAAA,YAAA,GAAeA,OAAM,CAAA,CAAA;AAAA,OACvB;AAAA,MACA,CAAC,YAAY,CAAA;AAAA,KACf,CAAA;AAEA,IAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,MACxB,CAAC,EAAE,KAAA,EAA4B,KAAA;AAC7B,QAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AACb,QAAA,aAAA,GAAgB,KAAK,CAAA,CAAA;AAAA,OACvB;AAAA,MACA,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IAAM,MAAA,eAAA,GAAkB,WAAY,CAAA,CAAC,KAA0B,KAAA;AAC7D,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,KACxB,EAAG,EAAE,CAAA,CAAA;AAEL,IACE,uBAAA,IAAA,CAAC,iBAAiB,IAAjB,EAAA;AAAA,MAAsB,IAAM,EAAA,MAAA;AAAA,MAAQ,YAAc,EAAA,gBAAA;AAAA,MAChD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,iBAAiB,MAAjB,EAAA;AAAA,UAAwB,SAAW,EAAA,eAAA;AAAA,UAClC,QAAA,kBAAA,GAAA,CAAC,iBAAiB,OAAjB,EAAA;AAAA,YACC,IAAK,EAAA,KAAA;AAAA,YACL,KAAM,EAAA,QAAA;AAAA,YACN,UAAY,EAAA,4BAAA;AAAA,YACZ,gBAAkB,EAAA,kCAAA;AAAA,YAClB,SAAW,EAAA,UAAA;AAAA,cACT,gDAAA;AAAA,cACA,SAAA;AAAA,aACF;AAAA,YACC,GAAG,KAAA;AAAA,YACJ,GAAK,EAAA,YAAA;AAAA,YACL,OAAO,EAAA,IAAA;AAAA,YAEP,QAAA,kBAAA,IAAA,CAACC,cAAqB,IAArB,EAAA;AAAA,cACC,aAAe,EAAA,iBAAA;AAAA,cACf,QAAQ,CAAE,CAAA,MAAA;AAAA,cACV,OAAS,EAAA,EAAA;AAAA,cACT,YAAc,EAAA,IAAA;AAAA,cACd,YAAA;AAAA,cACA,OAAS,EAAA,eAAA;AAAA,cAET,QAAA,EAAA;AAAA,gCAAC,GAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAU,EAAA,wBAAA;AAAA,kBACb,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,oBAAI,SAAU,EAAA,kCAAA;AAAA,oBACb,QAAA,EAAA;AAAA,sCAAA,GAAA,CAACA,cAAqB,MAArB,EAAA;AAAA,wBACC,SAAU,EAAA,wBAAA;AAAA,wBACV,aAAa,CAAE,CAAA,+BAAA;AAAA,wBACf,SAAS,EAAA,IAAA;AAAA,uBACX,CAAA;AAAA,0CACC,UAAW,EAAA,EAAA,CAAA;AAAA,qBAAA;AAAA,mBACd,CAAA;AAAA,iBACF,CAAA;AAAA,gCACA,IAAA,CAACA,cAAqB,QAArB,EAAA;AAAA,kBAA8B,SAAU,EAAA,yBAAA;AAAA,kBACvC,QAAA,EAAA;AAAA,oCAAA,GAAA,CAACA,cAAqB,OAArB,EAAA;AAAA,sBAA6B,SAAU,EAAA,oCAAA;AAAA,sBACtC,8BAAC,WAAY,EAAA,EAAA,CAAA;AAAA,qBACf,CAAA;AAAA,oCACA,GAAA,CAACA,cAAqB,KAArB,EAAA;AAAA,sBAA2B,SAAU,EAAA,gCAAA;AAAA,sBACnC,QAAE,EAAA,CAAA,CAAA,kBAAA;AAAA,qBACL,CAAA;AAAA,oCACA,GAAA,CAACA,cAAqB,IAArB,EAAA;AAAA,sBACC,SAAU,EAAA,sBAAA;AAAA,sBACV,UAAY,EAAA;AAAA,wBACV,cAAgB,EAAA,6BAAA;AAAA,wBAChB,GAAK,EAAA,kBAAA;AAAA,wBACL,KAAO,EAAA,oBAAA;AAAA,uBACT;AAAA,qBACF,CAAA;AAAA,mBAAA;AAAA,iBACF,CAAA;AAAA,gCACC,IAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAU,EAAA,wBAAA;AAAA,kBACb,QAAA,EAAA;AAAA,oCAAA,GAAA,CAACA,cAAqB,WAArB,EAAA;AAAA,sBACE,QAAC,EAAA,CAAA,EAAE,KAAM,EAAA,KACR,KACE,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,wBACE,QAAA,EAAA;AAAA,0CAAC,GAAA,CAAA,KAAA,EAAA;AAAA,4BAAI,SAAU,EAAA,8BAAA;AAAA,4BACZ,QAAM,EAAA,KAAA,CAAA,KAAA;AAAA,2BACT,CAAA;AAAA,0CACC,GAAA,CAAA,MAAA,EAAA;AAAA,4BAAK,SAAU,EAAA,oCAAA;AAAA,4BACb,QAAM,EAAA,KAAA,CAAA,KAAA;AAAA,2BACT,CAAA;AAAA,yBAAA;AAAA,uBACF,oBAEC,GAAA,CAAA,MAAA,EAAA;AAAA,wBAAK,SAAU,EAAA,mFAAA;AAAA,wBAAoF,QAAA,EAAA,uBAAA;AAAA,uBAEpG,CAAA;AAAA,qBAGN,CAAA;AAAA,oCACC,GAAA,CAAA,OAAA,EAAA;AAAA,sBAAQ,SAAS,CAAE,CAAA,6BAAA;AAAA,sBAClB,QAAA,kBAAA,GAAA,CAACA,cAAqB,gBAArB,EAAA;AAAA,wBAAsC,SAAU,EAAA,8CAAA;AAAA,uBAA+C,CAAA;AAAA,qBAClG,CAAA;AAAA,mBAAA;AAAA,iBACF,CAAA;AAAA,eAAA;AAAA,aACF,CAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"EmojiPicker.js","sources":["../../../src/components/internal/EmojiPicker.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport {\n  type Emoji as FrimousseEmoji,\n  EmojiPicker as EmojiPickerPrimitive,\n  type EmojiPickerListCategoryHeaderProps,\n  type EmojiPickerListEmojiProps,\n  type EmojiPickerListRowProps,\n  type Locale,\n} from \"frimousse\";\nimport type { ComponentPropsWithoutRef, SyntheticEvent } from \"react\";\nimport { forwardRef, useCallback, useState } from \"react\";\n\nimport { useLiveblocksUiConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { SearchIcon } from \"../../icons/Search\";\nimport { SpinnerIcon } from \"../../icons/Spinner\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\nimport { Emoji } from \"./Emoji\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface EmojiPickerProps extends ComponentPropsWithoutRef<\"div\"> {\n  onOpenChange?: (open: boolean) => void;\n  onEmojiSelect?: (emoji: string) => void;\n}\n\nfunction EmojiPickerListEmoji({\n  emoji,\n  className,\n  ...props\n}: EmojiPickerListEmojiProps) {\n  return (\n    <button\n      className={classNames(\"lb-emoji-picker-emoji\", className)}\n      {...props}\n    >\n      <Emoji emoji={emoji.emoji} />\n    </button>\n  );\n}\n\nfunction EmojiPickerListRow({\n  children,\n  className,\n  ...props\n}: EmojiPickerListRowProps) {\n  return (\n    <div className={classNames(\"lb-emoji-picker-row\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction EmojiPickerListCategoryHeader({\n  category,\n  className,\n  ...props\n}: EmojiPickerListCategoryHeaderProps) {\n  return (\n    <div\n      className={classNames(\"lb-emoji-picker-category-header\", className)}\n      {...props}\n    >\n      <span className=\"lb-emoji-picker-category-header-title\">\n        {category.label}\n      </span>\n    </div>\n  );\n}\n\nexport const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(\n  (\n    { onEmojiSelect, onOpenChange, children, className, ...props },\n    forwardedRef\n  ) => {\n    const [isOpen, setOpen] = useState(false);\n    const { portalContainer, emojibaseUrl } = useLiveblocksUiConfig();\n    const $ = useOverrides();\n\n    const handleOpenChange = useCallback(\n      (isOpen: boolean) => {\n        setOpen(isOpen);\n        onOpenChange?.(isOpen);\n      },\n      [onOpenChange]\n    );\n\n    const handleEmojiSelect = useCallback(\n      ({ emoji }: FrimousseEmoji) => {\n        setOpen(false);\n        onEmojiSelect?.(emoji);\n      },\n      [onEmojiSelect]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    return (\n      <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n        <PopoverPrimitive.Portal container={portalContainer}>\n          <PopoverPrimitive.Content\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            className={classNames(\n              \"lb-root lb-portal lb-elevation lb-emoji-picker\",\n              className\n            )}\n            {...props}\n            ref={forwardedRef}\n            asChild\n          >\n            <EmojiPickerPrimitive.Root\n              onEmojiSelect={handleEmojiSelect}\n              locale={$.locale as Locale}\n              columns={10}\n              emojiVersion={15.1}\n              emojibaseUrl={emojibaseUrl}\n              onClick={stopPropagation}\n            >\n              <div className=\"lb-emoji-picker-header\">\n                <div className=\"lb-emoji-picker-search-container\">\n                  <EmojiPickerPrimitive.Search\n                    className=\"lb-emoji-picker-search\"\n                    placeholder={$.EMOJI_PICKER_SEARCH_PLACEHOLDER}\n                    autoFocus\n                  />\n                  <SearchIcon />\n                </div>\n              </div>\n              <EmojiPickerPrimitive.Viewport className=\"lb-emoji-picker-content\">\n                <EmojiPickerPrimitive.Loading className=\"lb-loading lb-emoji-picker-loading\">\n                  <SpinnerIcon />\n                </EmojiPickerPrimitive.Loading>\n                <EmojiPickerPrimitive.Empty className=\"lb-empty lb-emoji-picker-empty\">\n                  {$.EMOJI_PICKER_EMPTY}\n                </EmojiPickerPrimitive.Empty>\n                <EmojiPickerPrimitive.List\n                  className=\"lb-emoji-picker-list\"\n                  components={{\n                    CategoryHeader: EmojiPickerListCategoryHeader,\n                    Row: EmojiPickerListRow,\n                    Emoji: EmojiPickerListEmoji,\n                  }}\n                />\n              </EmojiPickerPrimitive.Viewport>\n              <div className=\"lb-emoji-picker-footer\">\n                <EmojiPickerPrimitive.ActiveEmoji>\n                  {({ emoji }) =>\n                    emoji ? (\n                      <>\n                        <div className=\"lb-emoji-picker-active-emoji\">\n                          {emoji.emoji}\n                        </div>\n                        <span className=\"lb-emoji-picker-active-emoji-label\">\n                          {emoji.label}\n                        </span>\n                      </>\n                    ) : (\n                      <span className=\"lb-emoji-picker-active-emoji-label lb-emoji-picker-active-emoji-label-placeholder\">\n                        Select an emoji…\n                      </span>\n                    )\n                  }\n                </EmojiPickerPrimitive.ActiveEmoji>\n                <Tooltip content={$.EMOJI_PICKER_CHANGE_SKIN_TONE}>\n                  <EmojiPickerPrimitive.SkinToneSelector className=\"lb-button lb-emoji-picker-skin-tone-selector\" />\n                </Tooltip>\n              </div>\n            </EmojiPickerPrimitive.Root>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    );\n  }\n);\n\nexport { PopoverTrigger as EmojiPickerTrigger } from \"@radix-ui/react-popover\";\n"],"names":["isOpen","EmojiPickerPrimitive"],"mappings":"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"}

package/dist/components/internal/InboxNotificationThread.cjs

@@ -86,8 +86,11 @@ function findLastCommentWithMentionedId(comments, mentionedId) {
       continue;
     }
     if (comment.body) {
-      const mentionedIds = core.getMentionedIdsFromCommentBody(comment.body);
-      if (mentionedIds.includes(mentionedId)) {
+      const mentions = core.getMentionsFromCommentBody(
+        comment.body,
+        (mention) => mention.kind === "user" && mention.id === mentionedId
+      );
+      if (mentions.length > 0) {
         return comment;
       }
     }