@liveblocks/react-ui 3.0.0 → 3.1.0

package/dist/components/internal/Dropdown.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 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';
+import { cn } from '../../utils/cn.js';
 
 
 function Dropdown({
@@ -30,7 +30,7 @@ function Dropdown({
       /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
         container: portalContainer,
         children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
-          className: classNames(
+          className: cn(
             "lb-root lb-portal lb-elevation lb-dropdown",
             className
           ),
@@ -46,7 +46,7 @@ function Dropdown({
 const DropdownItem = forwardRef(
   ({ children, className, icon, ...props }, forwardedRef) => {
     return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.DropdownMenuItem, {
-      className: classNames("lb-dropdown-item", className),
+      className: cn("lb-dropdown-item", className),
       ...props,
       ref: forwardedRef,
       children: [

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 { cn } from \"../../utils/cn\";\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={cn(\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={cn(\"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;AAC4C;AACvC;AACC;AAEJ;AACE;AAAe;AACb;AAED;AAED;AAAe;AAA0B;AACxC;AAAA;AACN;AAGN;;"}

package/dist/components/internal/Emoji.cjs

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var constants = require('../../constants.cjs');
-var classNames = require('../../utils/class-names.cjs');
+var cn = require('../../utils/cn.cjs');
 
 const Emoji = react.forwardRef(
   ({ emoji, className, style, ...props }, forwardedRef) => {
@@ -11,7 +11,7 @@ const Emoji = react.forwardRef(
       role: "img",
       "aria-label": emoji,
       "data-emoji": emoji,
-      className: classNames.classNames("lb-emoji", className),
+      className: cn.cn("lb-emoji", className),
       style: {
         ...style,
         fontFamily: constants.EMOJI_FONT_FAMILY

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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 { cn } from \"../../utils/cn\";\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={cn(\"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","cn","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,KAAG,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MACnC,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,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { EMOJI_FONT_FAMILY } from '../../constants.js';
-import { classNames } from '../../utils/class-names.js';
+import { cn } from '../../utils/cn.js';
 
 const Emoji = forwardRef(
   ({ emoji, className, style, ...props }, forwardedRef) => {
@@ -9,7 +9,7 @@ const Emoji = forwardRef(
       role: "img",
       "aria-label": emoji,
       "data-emoji": emoji,
-      className: classNames("lb-emoji", className),
+      className: cn("lb-emoji", className),
       style: {
         ...style,
         fontFamily: EMOJI_FONT_FAMILY

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

@@ -1 +1 @@
-{"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;;;;"}
+{"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 { cn } from \"../../utils/cn\";\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={cn(\"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,EAAG,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MACnC,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

@@ -9,7 +9,7 @@ var constants = require('../../constants.cjs');
 var Search = require('../../icons/Search.cjs');
 var Spinner = require('../../icons/Spinner.cjs');
 var overrides = require('../../overrides.cjs');
-var classNames = require('../../utils/class-names.cjs');
+var cn = require('../../utils/cn.cjs');
 var Emoji = require('./Emoji.cjs');
 var Tooltip = require('./Tooltip.cjs');
 
@@ -38,7 +38,7 @@ function EmojiPickerListEmoji({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("button", {
-    className: classNames.classNames("lb-emoji-picker-emoji", className),
+    className: cn.cn("lb-emoji-picker-emoji", className),
     ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(Emoji.Emoji, {
       emoji: emoji.emoji
@@ -51,7 +51,7 @@ function EmojiPickerListRow({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-emoji-picker-row", className),
+    className: cn.cn("lb-emoji-picker-row", className),
     ...props,
     children
   });
@@ -62,7 +62,7 @@ function EmojiPickerListCategoryHeader({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: classNames.classNames("lb-emoji-picker-category-header", className),
+    className: cn.cn("lb-emoji-picker-category-header", className),
     ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx("span", {
       className: "lb-emoji-picker-category-header-title",
@@ -104,7 +104,7 @@ const EmojiPicker = react.forwardRef(
             align: "center",
             sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
             collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
-            className: classNames.classNames(
+            className: cn.cn(
               "lb-root lb-portal lb-elevation lb-emoji-picker",
               className
             ),

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 { cn } from \"../../utils/cn\";\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 className={cn(\"lb-emoji-picker-emoji\", className)} {...props}>\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={cn(\"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={cn(\"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={cn(\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","cn","Emoji","forwardRef","useState","useLiveblocksUiConfig","useOverrides","useCallback","isOpen","jsxs","PopoverPrimitive","FLOATING_ELEMENT_SIDE_OFFSET","FLOATING_ELEMENT_COLLISION_PADDING","EmojiPickerPrimitive","SearchIcon","SpinnerIcon","Fragment","Tooltip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAS,oBAAqB,CAAA;AAAA,EAC5B,KAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA8B,EAAA;AAC5B,EAAA,uBACGA,cAAA,CAAA,QAAA,EAAA;AAAA,IAAO,SAAA,EAAWC,KAAG,CAAA,uBAAA,EAAyB,SAAS,CAAA;AAAA,IAAI,GAAG,KAAA;AAAA,IAC7D,QAAC,kBAAAD,cAAA,CAAAE,WAAA,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,uBACGF,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAWC,KAAG,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAAA,IAAI,GAAG,KAAA;AAAA,IACvD,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,uBACGD,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWC,KAAG,CAAA,iCAAA,EAAmC,SAAS,CAAA;AAAA,IACzD,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAAD,cAAA,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,GAAAG,gBAAA;AAAA,EACzB,CACE,EAAE,aAAe,EAAA,YAAA,EAAc,UAAU,SAAc,EAAA,GAAA,KAAA,IACvD,YACG,KAAA;AACH,IAAA,MAAM,CAAC,MAAA,EAAQ,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AACxC,IAAA,MAAM,EAAE,eAAA,EAAiB,YAAa,EAAA,GAAIC,4BAAsB,EAAA,CAAA;AAChE,IAAA,MAAM,IAAIC,sBAAa,EAAA,CAAA;AAEvB,IAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,MACvB,CAACC,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,GAAAD,iBAAA;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,GAAkBA,iBAAY,CAAA,CAAC,KAA0B,KAAA;AAC7D,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,KACxB,EAAG,EAAE,CAAA,CAAA;AAEL,IACE,uBAAAE,eAAA,CAACC,4BAAiB,IAAjB,EAAA;AAAA,MAAsB,IAAM,EAAA,MAAA;AAAA,MAAQ,YAAc,EAAA,gBAAA;AAAA,MAChD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACDV,cAAA,CAACU,4BAAiB,MAAjB,EAAA;AAAA,UAAwB,SAAW,EAAA,eAAA;AAAA,UAClC,QAAA,kBAAAV,cAAA,CAACU,4BAAiB,OAAjB,EAAA;AAAA,YACC,IAAK,EAAA,KAAA;AAAA,YACL,KAAM,EAAA,QAAA;AAAA,YACN,UAAY,EAAAC,sCAAA;AAAA,YACZ,gBAAkB,EAAAC,4CAAA;AAAA,YAClB,SAAW,EAAAX,KAAA;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,kBAAAQ,eAAA,CAACI,sBAAqB,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,gCAACb,cAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAU,EAAA,wBAAA;AAAA,kBACb,QAAC,kBAAAS,eAAA,CAAA,KAAA,EAAA;AAAA,oBAAI,SAAU,EAAA,kCAAA;AAAA,oBACb,QAAA,EAAA;AAAA,sCAAAT,cAAA,CAACa,sBAAqB,MAArB,EAAA;AAAA,wBACC,SAAU,EAAA,wBAAA;AAAA,wBACV,aAAa,CAAE,CAAA,+BAAA;AAAA,wBACf,SAAS,EAAA,IAAA;AAAA,uBACX,CAAA;AAAA,qDACCC,iBAAW,EAAA,EAAA,CAAA;AAAA,qBAAA;AAAA,mBACd,CAAA;AAAA,iBACF,CAAA;AAAA,gCACAL,eAAA,CAACI,sBAAqB,QAArB,EAAA;AAAA,kBAA8B,SAAU,EAAA,yBAAA;AAAA,kBACvC,QAAA,EAAA;AAAA,oCAAAb,cAAA,CAACa,sBAAqB,OAArB,EAAA;AAAA,sBAA6B,SAAU,EAAA,oCAAA;AAAA,sBACtC,yCAACE,mBAAY,EAAA,EAAA,CAAA;AAAA,qBACf,CAAA;AAAA,oCACAf,cAAA,CAACa,sBAAqB,KAArB,EAAA;AAAA,sBAA2B,SAAU,EAAA,gCAAA;AAAA,sBACnC,QAAE,EAAA,CAAA,CAAA,kBAAA;AAAA,qBACL,CAAA;AAAA,oCACAb,cAAA,CAACa,sBAAqB,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,gCACCJ,eAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAU,EAAA,wBAAA;AAAA,kBACb,QAAA,EAAA;AAAA,oCAAAT,cAAA,CAACa,sBAAqB,WAArB,EAAA;AAAA,sBACE,QAAC,EAAA,CAAA,EAAE,KAAM,EAAA,KACR,KACE,mBAAAJ,eAAA,CAAAO,mBAAA,EAAA;AAAA,wBACE,QAAA,EAAA;AAAA,0CAAChB,cAAA,CAAA,KAAA,EAAA;AAAA,4BAAI,SAAU,EAAA,8BAAA;AAAA,4BACZ,QAAM,EAAA,KAAA,CAAA,KAAA;AAAA,2BACT,CAAA;AAAA,0CACCA,cAAA,CAAA,MAAA,EAAA;AAAA,4BAAK,SAAU,EAAA,oCAAA;AAAA,4BACb,QAAM,EAAA,KAAA,CAAA,KAAA;AAAA,2BACT,CAAA;AAAA,yBAAA;AAAA,uBACF,oBAECA,cAAA,CAAA,MAAA,EAAA;AAAA,wBAAK,SAAU,EAAA,mFAAA;AAAA,wBAAoF,QAAA,EAAA,uBAAA;AAAA,uBAEpG,CAAA;AAAA,qBAGN,CAAA;AAAA,oCACCA,cAAA,CAAAiB,eAAA,EAAA;AAAA,sBAAQ,SAAS,CAAE,CAAA,6BAAA;AAAA,sBAClB,QAAA,kBAAAjB,cAAA,CAACa,sBAAqB,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;;;;;;;;"}

package/dist/components/internal/EmojiPicker.js

@@ -8,7 +8,7 @@ import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from
 import { SearchIcon } from '../../icons/Search.js';
 import { SpinnerIcon } from '../../icons/Spinner.js';
 import { useOverrides } from '../../overrides.js';
-import { classNames } from '../../utils/class-names.js';
+import { cn } from '../../utils/cn.js';
 import { Emoji } from './Emoji.js';
 import { Tooltip } from './Tooltip.js';
 
@@ -18,7 +18,7 @@ function EmojiPickerListEmoji({
   ...props
 }) {
   return /* @__PURE__ */ jsx("button", {
-    className: classNames("lb-emoji-picker-emoji", className),
+    className: cn("lb-emoji-picker-emoji", className),
     ...props,
     children: /* @__PURE__ */ jsx(Emoji, {
       emoji: emoji.emoji
@@ -31,7 +31,7 @@ function EmojiPickerListRow({
   ...props
 }) {
   return /* @__PURE__ */ jsx("div", {
-    className: classNames("lb-emoji-picker-row", className),
+    className: cn("lb-emoji-picker-row", className),
     ...props,
     children
   });
@@ -42,7 +42,7 @@ function EmojiPickerListCategoryHeader({
   ...props
 }) {
   return /* @__PURE__ */ jsx("div", {
-    className: classNames("lb-emoji-picker-category-header", className),
+    className: cn("lb-emoji-picker-category-header", className),
     ...props,
     children: /* @__PURE__ */ jsx("span", {
       className: "lb-emoji-picker-category-header-title",
@@ -84,7 +84,7 @@ const EmojiPicker = forwardRef(
             align: "center",
             sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
             collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
-            className: classNames(
+            className: cn(
               "lb-root lb-portal lb-elevation lb-emoji-picker",
               className
             ),

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":"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"}
+{"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 { cn } from \"../../utils/cn\";\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 className={cn(\"lb-emoji-picker-emoji\", className)} {...props}>\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={cn(\"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={cn(\"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={cn(\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,IAAO,SAAA,EAAW,EAAG,CAAA,uBAAA,EAAyB,SAAS,CAAA;AAAA,IAAI,GAAG,KAAA;AAAA,IAC7D,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,EAAG,CAAA,qBAAA,EAAuB,SAAS,CAAA;AAAA,IAAI,GAAG,KAAA;AAAA,IACvD,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,EAAG,CAAA,iCAAA,EAAmC,SAAS,CAAA;AAAA,IACzD,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,EAAA;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;;;;"}

package/dist/components/internal/Icon.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('../../utils/class-names.cjs');
+var cn = require('../../utils/cn.cjs');
 
 const ICON_WIDTH = 20;
 const ICON_HEIGHT = 20;
@@ -17,7 +17,7 @@ function Icon({ children, className, ...props }) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     role: "presentation",
-    className: classNames.classNames("lb-icon", className),
+    className: cn.cn("lb-icon", className),
     ...props,
     children
   });

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sources":["../../../src/components/internal/Icon.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport const ICON_WIDTH = 20;\nexport const ICON_HEIGHT = 20;\n\nexport function Icon({ children, className, ...props }: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={ICON_WIDTH}\n      height={ICON_HEIGHT}\n      viewBox={`0 0 ${ICON_WIDTH} ${ICON_HEIGHT}`}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role=\"presentation\"\n      className={classNames(\"lb-icon\", className)}\n      {...props}\n    >\n      {children}\n    </svg>\n  );\n}\n"],"names":["jsx","classNames"],"mappings":";;;;;AAIO,MAAM,UAAa,GAAA,GAAA;AACnB,MAAM,WAAc,GAAA,GAAA;AAEpB,SAAS,IAAK,CAAA,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,OAAgC,EAAA;AAC7E,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAM,EAAA,4BAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,IACP,MAAQ,EAAA,WAAA;AAAA,IACR,OAAA,EAAS,OAAO,UAAc,CAAA,CAAA,EAAA,WAAA,CAAA,CAAA;AAAA,IAC9B,IAAK,EAAA,MAAA;AAAA,IACL,MAAO,EAAA,cAAA;AAAA,IACP,WAAa,EAAA,GAAA;AAAA,IACb,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,IACf,IAAK,EAAA,cAAA;AAAA,IACL,SAAA,EAAWC,qBAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,IACzC,GAAG,KAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;;;"}
+{"version":3,"file":"Icon.cjs","sources":["../../../src/components/internal/Icon.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\nexport const ICON_WIDTH = 20;\nexport const ICON_HEIGHT = 20;\n\nexport function Icon({ children, className, ...props }: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={ICON_WIDTH}\n      height={ICON_HEIGHT}\n      viewBox={`0 0 ${ICON_WIDTH} ${ICON_HEIGHT}`}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role=\"presentation\"\n      className={cn(\"lb-icon\", className)}\n      {...props}\n    >\n      {children}\n    </svg>\n  );\n}\n"],"names":["jsx","cn"],"mappings":";;;;;AAIO,MAAM,UAAa,GAAA,GAAA;AACnB,MAAM,WAAc,GAAA,GAAA;AAEpB,SAAS,IAAK,CAAA,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,OAAgC,EAAA;AAC7E,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAM,EAAA,4BAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,IACP,MAAQ,EAAA,WAAA;AAAA,IACR,OAAA,EAAS,OAAO,UAAc,CAAA,CAAA,EAAA,WAAA,CAAA,CAAA;AAAA,IAC9B,IAAK,EAAA,MAAA;AAAA,IACL,MAAO,EAAA,cAAA;AAAA,IACP,WAAa,EAAA,GAAA;AAAA,IACb,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,IACf,IAAK,EAAA,cAAA;AAAA,IACL,SAAA,EAAWC,KAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,IACjC,GAAG,KAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;;;"}

package/dist/components/internal/Icon.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { classNames } from '../../utils/class-names.js';
+import { cn } from '../../utils/cn.js';
 
 const ICON_WIDTH = 20;
 const ICON_HEIGHT = 20;
@@ -15,7 +15,7 @@ function Icon({ children, className, ...props }) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     role: "presentation",
-    className: classNames("lb-icon", className),
+    className: cn("lb-icon", className),
     ...props,
     children
   });

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/internal/Icon.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport const ICON_WIDTH = 20;\nexport const ICON_HEIGHT = 20;\n\nexport function Icon({ children, className, ...props }: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={ICON_WIDTH}\n      height={ICON_HEIGHT}\n      viewBox={`0 0 ${ICON_WIDTH} ${ICON_HEIGHT}`}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role=\"presentation\"\n      className={classNames(\"lb-icon\", className)}\n      {...props}\n    >\n      {children}\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,UAAa,GAAA,GAAA;AACnB,MAAM,WAAc,GAAA,GAAA;AAEpB,SAAS,IAAK,CAAA,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,OAAgC,EAAA;AAC7E,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAM,EAAA,4BAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,IACP,MAAQ,EAAA,WAAA;AAAA,IACR,OAAA,EAAS,OAAO,UAAc,CAAA,CAAA,EAAA,WAAA,CAAA,CAAA;AAAA,IAC9B,IAAK,EAAA,MAAA;AAAA,IACL,MAAO,EAAA,cAAA;AAAA,IACP,WAAa,EAAA,GAAA;AAAA,IACb,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,IACf,IAAK,EAAA,cAAA;AAAA,IACL,SAAA,EAAW,UAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,IACzC,GAAG,KAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/internal/Icon.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\nexport const ICON_WIDTH = 20;\nexport const ICON_HEIGHT = 20;\n\nexport function Icon({ children, className, ...props }: ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={ICON_WIDTH}\n      height={ICON_HEIGHT}\n      viewBox={`0 0 ${ICON_WIDTH} ${ICON_HEIGHT}`}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      role=\"presentation\"\n      className={cn(\"lb-icon\", className)}\n      {...props}\n    >\n      {children}\n    </svg>\n  );\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,UAAa,GAAA,GAAA;AACnB,MAAM,WAAc,GAAA,GAAA;AAEpB,SAAS,IAAK,CAAA,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,OAAgC,EAAA;AAC7E,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAM,EAAA,4BAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,IACP,MAAQ,EAAA,WAAA;AAAA,IACR,OAAA,EAAS,OAAO,UAAc,CAAA,CAAA,EAAA,WAAA,CAAA,CAAA;AAAA,IAC9B,IAAK,EAAA,MAAA;AAAA,IACL,MAAO,EAAA,cAAA;AAAA,IACP,WAAa,EAAA,GAAA;AAAA,IACb,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,IACf,IAAK,EAAA,cAAA;AAAA,IACL,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,IACjC,GAAG,KAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/internal/InboxNotificationThread.cjs

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
 var overrides = require('../../overrides.cjs');
 var index = require('../../primitives/Comment/index.cjs');
-var classNames = require('../../utils/class-names.cjs');
+var cn = require('../../utils/cn.cjs');
 var Comment = require('../Comment.cjs');
 var User = require('./User.cjs');
 
@@ -20,7 +20,7 @@ function InboxNotificationComment({
 }) {
   const $ = overrides.useOverrides(overrides$1);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: classNames.classNames(
+    className: cn.cn(
       "lb-root lb-inbox-notification-comment lb-comment",
       className
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationThread.cjs","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments = true,\n  showReactions = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                <div className=\"lb-attachments\">\n                  {comment.attachments.map((attachment) => (\n                    <CommentNonInteractiveFileAttachment\n                      key={attachment.id}\n                      attachment={attachment}\n                      overrides={overrides}\n                      roomId={comment.roomId}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  if (!comments.length) {\n    return;\n  }\n\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i]!;\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentions = getMentionsFromCommentBody(\n        comment.body,\n        (mention) => mention.kind === \"user\" && mention.id === mentionedId\n      );\n\n      if (mentions.length > 0) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["overrides","useOverrides","jsxs","classNames","jsx","User","Fragment","CommentPrimitive.Body","CommentMention","CommentNonInteractiveLink","CommentNonInteractiveReaction","CommentNonInteractiveFileAttachment","getMentionsFromCommentBody"],"mappings":"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"}
+{"version":3,"file":"InboxNotificationThread.cjs","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments = true,\n  showReactions = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={cn(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                <div className=\"lb-attachments\">\n                  {comment.attachments.map((attachment) => (\n                    <CommentNonInteractiveFileAttachment\n                      key={attachment.id}\n                      attachment={attachment}\n                      overrides={overrides}\n                      roomId={comment.roomId}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  if (!comments.length) {\n    return;\n  }\n\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i]!;\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentions = getMentionsFromCommentBody(\n        comment.body,\n        (mention) => mention.kind === \"user\" && mention.id === mentionedId\n      );\n\n      if (mentions.length > 0) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["overrides","useOverrides","jsxs","cn","jsx","User","Fragment","CommentPrimitive.Body","CommentMention","CommentNonInteractiveLink","CommentNonInteractiveReaction","CommentNonInteractiveFileAttachment","getMentionsFromCommentBody"],"mappings":"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"}

package/dist/components/internal/InboxNotificationThread.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { getMentionsFromCommentBody } from '@liveblocks/core';
 import { useOverrides } from '../../overrides.js';
 import { Body as CommentBody } from '../../primitives/Comment/index.js';
-import { classNames } from '../../utils/class-names.js';
+import { cn } from '../../utils/cn.js';
 import { CommentMention, CommentNonInteractiveLink, CommentNonInteractiveReaction, CommentNonInteractiveFileAttachment } from '../Comment.js';
 import { User } from './User.js';
 
@@ -18,7 +18,7 @@ function InboxNotificationComment({
 }) {
   const $ = useOverrides(overrides);
   return /* @__PURE__ */ jsxs("div", {
-    className: classNames(
+    className: cn(
       "lb-root lb-inbox-notification-comment lb-comment",
       className
     ),

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

@@ -1 +1 @@
-{"version":3,"file":"InboxNotificationThread.js","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { classNames } from \"../../utils/class-names\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments = true,\n  showReactions = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={classNames(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                <div className=\"lb-attachments\">\n                  {comment.attachments.map((attachment) => (\n                    <CommentNonInteractiveFileAttachment\n                      key={attachment.id}\n                      attachment={attachment}\n                      overrides={overrides}\n                      roomId={comment.roomId}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  if (!comments.length) {\n    return;\n  }\n\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i]!;\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentions = getMentionsFromCommentBody(\n        comment.body,\n        (mention) => mention.kind === \"user\" && mention.id === mentionedId\n      );\n\n      if (mentions.length > 0) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["CommentPrimitive.Body"],"mappings":"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"}
+{"version":3,"file":"InboxNotificationThread.js","sources":["../../../src/components/internal/InboxNotificationThread.tsx"],"sourcesContent":["import type {\n  BaseMetadata,\n  CommentData,\n  InboxNotificationThreadData,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { getMentionsFromCommentBody } from \"@liveblocks/core\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  type CommentOverrides,\n  type GlobalOverrides,\n  useOverrides,\n} from \"../../overrides\";\nimport * as CommentPrimitive from \"../../primitives/Comment\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  CommentMention,\n  CommentNonInteractiveFileAttachment,\n  CommentNonInteractiveLink,\n  CommentNonInteractiveReaction,\n} from \"../Comment\";\nimport { User } from \"./User\";\n\ntype InboxNotificationThreadCommentsContents = {\n  type: \"comments\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\ntype InboxNotificationThreadMentionContents = {\n  type: \"mention\";\n  unread: boolean;\n  comments: CommentData[];\n  userIds: string[];\n  date: Date;\n};\n\nexport const INBOX_NOTIFICATION_THREAD_MAX_COMMENTS = 3;\n\ntype InboxNotificationThreadContents =\n  | InboxNotificationThreadCommentsContents\n  | InboxNotificationThreadMentionContents;\n\ninterface InboxNotificationCommentProps extends ComponentProps<\"div\"> {\n  comment: CommentData;\n  showHeader?: boolean;\n  showAttachments?: boolean;\n  showReactions?: boolean;\n  overrides?: Partial<GlobalOverrides & CommentOverrides>;\n}\n\nexport function InboxNotificationComment({\n  comment,\n  showHeader = true,\n  showAttachments = true,\n  showReactions = true,\n  overrides,\n  className,\n  ...props\n}: InboxNotificationCommentProps) {\n  const $ = useOverrides(overrides);\n\n  return (\n    <div\n      className={cn(\n        \"lb-root lb-inbox-notification-comment lb-comment\",\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"lb-comment-header\">\n          <User className=\"lb-comment-author\" userId={comment.userId} />\n        </div>\n      )}\n      <div className=\"lb-comment-content\">\n        {comment.body ? (\n          <>\n            <CommentPrimitive.Body\n              className=\"lb-comment-body\"\n              body={comment.body}\n              components={{\n                Mention: CommentMention,\n                Link: CommentNonInteractiveLink,\n              }}\n            />\n            {showReactions && comment.reactions.length > 0 && (\n              <div className=\"lb-comment-reactions\">\n                {comment.reactions.map((reaction) => (\n                  <CommentNonInteractiveReaction\n                    key={reaction.emoji}\n                    reaction={reaction}\n                    overrides={overrides}\n                    disabled\n                  />\n                ))}\n              </div>\n            )}\n            {showAttachments && comment.attachments.length > 0 ? (\n              <div className=\"lb-comment-attachments\">\n                <div className=\"lb-attachments\">\n                  {comment.attachments.map((attachment) => (\n                    <CommentNonInteractiveFileAttachment\n                      key={attachment.id}\n                      attachment={attachment}\n                      overrides={overrides}\n                      roomId={comment.roomId}\n                    />\n                  ))}\n                </div>\n              </div>\n            ) : null}\n          </>\n        ) : (\n          <div className=\"lb-comment-body\">\n            <p className=\"lb-comment-deleted\">{$.COMMENT_DELETED}</p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Find the last comment with a mention for the given user ID,\n * unless the comment was created by the user themselves.\n */\nfunction findLastCommentWithMentionedId(\n  comments: CommentData[],\n  mentionedId: string\n) {\n  if (!comments.length) {\n    return;\n  }\n\n  for (let i = comments.length - 1; i >= 0; i--) {\n    const comment = comments[i]!;\n\n    if (comment.userId === mentionedId) {\n      continue;\n    }\n\n    if (comment.body) {\n      const mentions = getMentionsFromCommentBody(\n        comment.body,\n        (mention) => mention.kind === \"user\" && mention.id === mentionedId\n      );\n\n      if (mentions.length > 0) {\n        return comment;\n      }\n    }\n  }\n\n  return;\n}\n\nfunction getUserIdsFromComments(comments: CommentData[]) {\n  return Array.from(new Set(comments.map((comment) => comment.userId)));\n}\n\nexport function generateInboxNotificationThreadContents(\n  inboxNotification: InboxNotificationThreadData,\n  thread: ThreadData<BaseMetadata>,\n  userId: string\n): InboxNotificationThreadContents {\n  const unreadComments = thread.comments.filter((comment) => {\n    if (!comment.body) {\n      return false;\n    }\n\n    return inboxNotification.readAt\n      ? comment.createdAt > inboxNotification.readAt &&\n          comment.createdAt <= inboxNotification.notifiedAt\n      : comment.createdAt <= inboxNotification.notifiedAt;\n  });\n\n  // If the thread is read, show the last comments.\n  if (unreadComments.length === 0) {\n    const lastComments = thread.comments\n      .filter((comment) => comment.body)\n      .slice(-INBOX_NOTIFICATION_THREAD_MAX_COMMENTS);\n\n    return {\n      type: \"comments\",\n      unread: false,\n      comments: lastComments,\n      userIds: getUserIdsFromComments(lastComments),\n      date: inboxNotification.notifiedAt,\n    };\n  }\n\n  const commentWithMention = findLastCommentWithMentionedId(\n    unreadComments,\n    userId\n  );\n\n  // If the thread contains one or more mentions for the current user, show the last comment with a mention.\n  if (commentWithMention) {\n    return {\n      type: \"mention\",\n      unread: true,\n      comments: [commentWithMention],\n      userIds: [commentWithMention.userId],\n      date: commentWithMention.createdAt,\n    };\n  }\n\n  const lastUnreadComments = unreadComments.slice(\n    -INBOX_NOTIFICATION_THREAD_MAX_COMMENTS\n  );\n\n  // Otherwise, show the last unread comments.\n  return {\n    type: \"comments\",\n    unread: true,\n    comments: lastUnreadComments,\n    userIds: getUserIdsFromComments(unreadComments),\n    date: inboxNotification.notifiedAt,\n  };\n}\n"],"names":["CommentPrimitive.Body"],"mappings":"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"}

package/dist/components/internal/List.cjs

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var overrides = require('../../overrides.cjs');
-var classNames = require('../../utils/class-names.cjs');
+var cn = require('../../utils/cn.cjs');
 var intl = require('../../utils/intl.cjs');
 
 const List = react.forwardRef(
@@ -24,7 +24,7 @@ const List = react.forwardRef(
       );
     }, [formatRemainingWithDefault, locale, truncate, values]);
     return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      className: classNames.classNames("lb-list", className),
+      className: cn.cn("lb-list", className),
       ...props,
       ref: forwardedRef,
       children: formattedList

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

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\nimport { classNames } from \"../../utils/class-names\";\nimport { listFormat } from \"../../utils/intl\";\n\nexport interface ListProps extends ComponentPropsWithSlot<\"span\"> {\n  values: ReactNode[];\n  formatRemaining?: (amount: number) => string;\n  truncate?: number;\n  locale?: string;\n}\n\nexport const List = forwardRef<HTMLSpanElement, ListProps>(\n  (\n    { values, formatRemaining, truncate, locale, className, asChild, ...props },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const $ = useOverrides();\n    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;\n    const formattedList = useMemo(() => {\n      const elements =\n        truncate && truncate < values.length - 1\n          ? [\n              ...values.slice(0, truncate),\n              formatRemainingWithDefault(values.length - truncate),\n            ]\n          : [...values];\n      const placeholders = Array(elements.length).fill(\".\");\n      const parts = listFormat(locale).formatToParts(placeholders);\n\n      return parts.map((part) =>\n        part.type === \"element\" ? elements.shift() : part.value\n      );\n    }, [formatRemainingWithDefault, locale, truncate, values]);\n\n    return (\n      <Component\n        className={classNames(\"lb-list\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {formattedList}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","Slot","useOverrides","useMemo","listFormat","jsx","classNames"],"mappings":";;;;;;;;;AAgBO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,CACE,EAAE,MAAA,EAAQ,eAAiB,EAAA,QAAA,EAAU,QAAQ,SAAW,EAAA,OAAA,EAAA,GAAY,KAAM,EAAA,EAC1E,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,IAAIC,sBAAa,EAAA,CAAA;AACvB,IAAM,MAAA,0BAAA,GAA6B,mBAAmB,CAAE,CAAA,cAAA,CAAA;AACxD,IAAM,MAAA,aAAA,GAAgBC,cAAQ,MAAM;AAClC,MAAA,MAAM,QACJ,GAAA,QAAA,IAAY,QAAW,GAAA,MAAA,CAAO,SAAS,CACnC,GAAA;AAAA,QACE,GAAG,MAAA,CAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA;AAAA,QAC3B,0BAAA,CAA2B,MAAO,CAAA,MAAA,GAAS,QAAQ,CAAA;AAAA,OACrD,GACA,CAAC,GAAG,MAAM,CAAA,CAAA;AAChB,MAAA,MAAM,eAAe,KAAM,CAAA,QAAA,CAAS,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAA;AACpD,MAAA,MAAM,KAAQ,GAAAC,eAAA,CAAW,MAAM,CAAA,CAAE,cAAc,YAAY,CAAA,CAAA;AAE3D,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA,QAAI,CAAC,SAChB,IAAK,CAAA,IAAA,KAAS,YAAY,QAAS,CAAA,KAAA,KAAU,IAAK,CAAA,KAAA;AAAA,OACpD,CAAA;AAAA,OACC,CAAC,0BAAA,EAA4B,MAAQ,EAAA,QAAA,EAAU,MAAM,CAAC,CAAA,CAAA;AAEzD,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAA,EAAWC,qBAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACzC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA,aAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"List.cjs","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\nimport { cn } from \"../../utils/cn\";\nimport { listFormat } from \"../../utils/intl\";\n\nexport interface ListProps extends ComponentPropsWithSlot<\"span\"> {\n  values: ReactNode[];\n  formatRemaining?: (amount: number) => string;\n  truncate?: number;\n  locale?: string;\n}\n\nexport const List = forwardRef<HTMLSpanElement, ListProps>(\n  (\n    { values, formatRemaining, truncate, locale, className, asChild, ...props },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const $ = useOverrides();\n    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;\n    const formattedList = useMemo(() => {\n      const elements =\n        truncate && truncate < values.length - 1\n          ? [\n              ...values.slice(0, truncate),\n              formatRemainingWithDefault(values.length - truncate),\n            ]\n          : [...values];\n      const placeholders = Array(elements.length).fill(\".\");\n      const parts = listFormat(locale).formatToParts(placeholders);\n\n      return parts.map((part) =>\n        part.type === \"element\" ? elements.shift() : part.value\n      );\n    }, [formatRemainingWithDefault, locale, truncate, values]);\n\n    return (\n      <Component\n        className={cn(\"lb-list\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {formattedList}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","Slot","useOverrides","useMemo","listFormat","jsx","cn"],"mappings":";;;;;;;;;AAgBO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,CACE,EAAE,MAAA,EAAQ,eAAiB,EAAA,QAAA,EAAU,QAAQ,SAAW,EAAA,OAAA,EAAA,GAAY,KAAM,EAAA,EAC1E,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,IAAIC,sBAAa,EAAA,CAAA;AACvB,IAAM,MAAA,0BAAA,GAA6B,mBAAmB,CAAE,CAAA,cAAA,CAAA;AACxD,IAAM,MAAA,aAAA,GAAgBC,cAAQ,MAAM;AAClC,MAAA,MAAM,QACJ,GAAA,QAAA,IAAY,QAAW,GAAA,MAAA,CAAO,SAAS,CACnC,GAAA;AAAA,QACE,GAAG,MAAA,CAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA;AAAA,QAC3B,0BAAA,CAA2B,MAAO,CAAA,MAAA,GAAS,QAAQ,CAAA;AAAA,OACrD,GACA,CAAC,GAAG,MAAM,CAAA,CAAA;AAChB,MAAA,MAAM,eAAe,KAAM,CAAA,QAAA,CAAS,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAA;AACpD,MAAA,MAAM,KAAQ,GAAAC,eAAA,CAAW,MAAM,CAAA,CAAE,cAAc,YAAY,CAAA,CAAA;AAE3D,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA,QAAI,CAAC,SAChB,IAAK,CAAA,IAAA,KAAS,YAAY,QAAS,CAAA,KAAA,KAAU,IAAK,CAAA,KAAA;AAAA,OACpD,CAAA;AAAA,OACC,CAAC,0BAAA,EAA4B,MAAQ,EAAA,QAAA,EAAU,MAAM,CAAC,CAAA,CAAA;AAEzD,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAA,EAAWC,KAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACjC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA,aAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/internal/List.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useMemo } from 'react';
 import { useOverrides } from '../../overrides.js';
-import { classNames } from '../../utils/class-names.js';
+import { cn } from '../../utils/cn.js';
 import { listFormat } from '../../utils/intl.js';
 
 const List = forwardRef(
@@ -22,7 +22,7 @@ const List = forwardRef(
       );
     }, [formatRemainingWithDefault, locale, truncate, values]);
     return /* @__PURE__ */ jsx(Component, {
-      className: classNames("lb-list", className),
+      className: cn("lb-list", className),
       ...props,
       ref: forwardedRef,
       children: formattedList

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

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\nimport { classNames } from \"../../utils/class-names\";\nimport { listFormat } from \"../../utils/intl\";\n\nexport interface ListProps extends ComponentPropsWithSlot<\"span\"> {\n  values: ReactNode[];\n  formatRemaining?: (amount: number) => string;\n  truncate?: number;\n  locale?: string;\n}\n\nexport const List = forwardRef<HTMLSpanElement, ListProps>(\n  (\n    { values, formatRemaining, truncate, locale, className, asChild, ...props },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const $ = useOverrides();\n    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;\n    const formattedList = useMemo(() => {\n      const elements =\n        truncate && truncate < values.length - 1\n          ? [\n              ...values.slice(0, truncate),\n              formatRemainingWithDefault(values.length - truncate),\n            ]\n          : [...values];\n      const placeholders = Array(elements.length).fill(\".\");\n      const parts = listFormat(locale).formatToParts(placeholders);\n\n      return parts.map((part) =>\n        part.type === \"element\" ? elements.shift() : part.value\n      );\n    }, [formatRemainingWithDefault, locale, truncate, values]);\n\n    return (\n      <Component\n        className={classNames(\"lb-list\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {formattedList}\n      </Component>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,CACE,EAAE,MAAA,EAAQ,eAAiB,EAAA,QAAA,EAAU,QAAQ,SAAW,EAAA,OAAA,EAAA,GAAY,KAAM,EAAA,EAC1E,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AACvB,IAAM,MAAA,0BAAA,GAA6B,mBAAmB,CAAE,CAAA,cAAA,CAAA;AACxD,IAAM,MAAA,aAAA,GAAgB,QAAQ,MAAM;AAClC,MAAA,MAAM,QACJ,GAAA,QAAA,IAAY,QAAW,GAAA,MAAA,CAAO,SAAS,CACnC,GAAA;AAAA,QACE,GAAG,MAAA,CAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA;AAAA,QAC3B,0BAAA,CAA2B,MAAO,CAAA,MAAA,GAAS,QAAQ,CAAA;AAAA,OACrD,GACA,CAAC,GAAG,MAAM,CAAA,CAAA;AAChB,MAAA,MAAM,eAAe,KAAM,CAAA,QAAA,CAAS,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAA;AACpD,MAAA,MAAM,KAAQ,GAAA,UAAA,CAAW,MAAM,CAAA,CAAE,cAAc,YAAY,CAAA,CAAA;AAE3D,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA,QAAI,CAAC,SAChB,IAAK,CAAA,IAAA,KAAS,YAAY,QAAS,CAAA,KAAA,KAAU,IAAK,CAAA,KAAA;AAAA,OACpD,CAAA;AAAA,OACC,CAAC,0BAAA,EAA4B,MAAQ,EAAA,QAAA,EAAU,MAAM,CAAC,CAAA,CAAA;AAEzD,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAA,EAAW,UAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACzC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA,aAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"List.js","sources":["../../../src/components/internal/List.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport { useOverrides } from \"../../overrides\";\nimport type { ComponentPropsWithSlot } from \"../../types\";\nimport { cn } from \"../../utils/cn\";\nimport { listFormat } from \"../../utils/intl\";\n\nexport interface ListProps extends ComponentPropsWithSlot<\"span\"> {\n  values: ReactNode[];\n  formatRemaining?: (amount: number) => string;\n  truncate?: number;\n  locale?: string;\n}\n\nexport const List = forwardRef<HTMLSpanElement, ListProps>(\n  (\n    { values, formatRemaining, truncate, locale, className, asChild, ...props },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const $ = useOverrides();\n    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;\n    const formattedList = useMemo(() => {\n      const elements =\n        truncate && truncate < values.length - 1\n          ? [\n              ...values.slice(0, truncate),\n              formatRemainingWithDefault(values.length - truncate),\n            ]\n          : [...values];\n      const placeholders = Array(elements.length).fill(\".\");\n      const parts = listFormat(locale).formatToParts(placeholders);\n\n      return parts.map((part) =>\n        part.type === \"element\" ? elements.shift() : part.value\n      );\n    }, [formatRemainingWithDefault, locale, truncate, values]);\n\n    return (\n      <Component\n        className={cn(\"lb-list\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {formattedList}\n      </Component>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAgBO,MAAM,IAAO,GAAA,UAAA;AAAA,EAClB,CACE,EAAE,MAAA,EAAQ,eAAiB,EAAA,QAAA,EAAU,QAAQ,SAAW,EAAA,OAAA,EAAA,GAAY,KAAM,EAAA,EAC1E,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AACvB,IAAM,MAAA,0BAAA,GAA6B,mBAAmB,CAAE,CAAA,cAAA,CAAA;AACxD,IAAM,MAAA,aAAA,GAAgB,QAAQ,MAAM;AAClC,MAAA,MAAM,QACJ,GAAA,QAAA,IAAY,QAAW,GAAA,MAAA,CAAO,SAAS,CACnC,GAAA;AAAA,QACE,GAAG,MAAA,CAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA;AAAA,QAC3B,0BAAA,CAA2B,MAAO,CAAA,MAAA,GAAS,QAAQ,CAAA;AAAA,OACrD,GACA,CAAC,GAAG,MAAM,CAAA,CAAA;AAChB,MAAA,MAAM,eAAe,KAAM,CAAA,QAAA,CAAS,MAAM,CAAA,CAAE,KAAK,GAAG,CAAA,CAAA;AACpD,MAAA,MAAM,KAAQ,GAAA,UAAA,CAAW,MAAM,CAAA,CAAE,cAAc,YAAY,CAAA,CAAA;AAE3D,MAAA,OAAO,KAAM,CAAA,GAAA;AAAA,QAAI,CAAC,SAChB,IAAK,CAAA,IAAA,KAAS,YAAY,QAAS,CAAA,KAAA,KAAU,IAAK,CAAA,KAAA;AAAA,OACpD,CAAA;AAAA,OACC,CAAC,0BAAA,EAA4B,MAAQ,EAAA,QAAA,EAAU,MAAM,CAAC,CAAA,CAAA;AAEzD,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MACjC,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA,aAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/internal/Prose.cjs

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var components = require('../../components.cjs');
 var Markdown = require('../../primitives/Markdown.cjs');
-var classNames = require('../../utils/class-names.cjs');
+var cn = require('../../utils/cn.cjs');
 var CodeBlock$1 = require('./CodeBlock.cjs');
 
 function Link({ href, title, children }) {
@@ -28,7 +28,7 @@ function Prose({ content, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Markdown.Markdown, {
     content,
     components: markdownComponents,
-    className: classNames.classNames("lb-prose", className),
+    className: cn.cn("lb-prose", className),
     ...props
   });
 }