@liveblocks/react-ui 2.15.0-debug1 → 2.15.0

package/dist/primitives/Timestamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.js","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":["dateTimeFormat","capitalize","formatter","relativeTimeFormat","locale","forwardRef","Slot","useRerender","useMemo","useInterval","jsx"],"mappings":"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"}
+{"version":3,"file":"Timestamp.js","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":["dateTimeFormat","capitalize","formatter","relativeTimeFormat","locale","forwardRef","Slot","useRerender","useMemo","useInterval","jsx"],"mappings":"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"}

package/dist/primitives/Timestamp.mjs

@@ -6,6 +6,7 @@ import { dateTimeFormat, relativeTimeFormat } from '../utils/intl.mjs';
 import { useInterval } from '../utils/use-interval.mjs';
 import { useRerender } from '../utils/use-rerender.mjs';
 
+"use client";
 const DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1e3;
 const RENDER_INTERVAL = 30 * 1e3;
 const TIMESTAMP_NAME = "Timestamp";

package/dist/primitives/Timestamp.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.mjs","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":["formatter","locale"],"mappings":"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"}
+{"version":3,"file":"Timestamp.mjs","sources":["../../src/primitives/Timestamp.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { capitalize } from \"../utils/capitalize\";\nimport { dateTimeFormat, relativeTimeFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst DYNAMIC_DATE_THRESHOLD = 3 * 24 * 60 * 60 * 1000; // 3 days\nconst RENDER_INTERVAL = 30 * 1000; // 30 seconds\n\nconst TIMESTAMP_NAME = \"Timestamp\";\n\nexport interface TimestampProps\n  extends Omit<ComponentPropsWithSlot<\"time\">, \"children\" | \"title\"> {\n  /**\n   * The date to display.\n   */\n  date: Date | string | number;\n\n  /**\n   * A function to format the displayed date.\n   */\n  children?: (date: Date, locale?: string) => ReactNode;\n\n  /**\n   * The `title` attribute's value or a function to format it.\n   */\n  title?: string | ((date: Date, locale?: string) => string);\n\n  /**\n   * The interval in milliseconds at which the component will re-render.\n   * Can be set to `false` to disable re-rendering.\n   */\n  interval?: number | false;\n\n  /**\n   * The locale used when formatting the date.\n   */\n  locale?: string;\n}\n\nconst relativeUnits = {\n  seconds: 60,\n  minutes: 60,\n  hours: 24,\n  days: 7,\n  weeks: 4.34524,\n  months: 12,\n};\n\n/**\n * Formats a date absolutely.\n */\nfunction formatVerboseDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    year: \"numeric\",\n    month: \"numeric\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n/**\n * Formats a date absolutely with only the day and month.\n */\nfunction formatShortDate(date: Date, locale?: string) {\n  const formatter = dateTimeFormat(locale, {\n    month: \"short\",\n    day: \"numeric\",\n  });\n\n  return capitalize(formatter.format(date));\n}\n\n// Some locales' relative formatting can be broken (e.g. \"-1h\") when using the narrow style.\nconst localesWithBrokenNarrowRelativeFormatting = [\n  \"br\",\n  \"fr\",\n  \"nb\",\n  \"nn\",\n  \"no\",\n  \"ro\",\n  \"sv\",\n];\n\n/**\n * Formats a date relatively.\n */\nfunction formatRelativeDate(date: Date, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = relativeTimeFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const isBrokenWhenNarrow = localesWithBrokenNarrowRelativeFormatting.some(\n    (locale) =>\n      resolvedLocale === locale || resolvedLocale.startsWith(`${locale}-`)\n  );\n\n  const formatter = relativeTimeFormat(resolvedLocale, {\n    style: isBrokenWhenNarrow ? \"short\" : \"narrow\",\n    numeric: \"auto\",\n  });\n\n  let difference = (date.getTime() - Date.now()) / 1000;\n\n  if (\n    difference > -relativeUnits.seconds &&\n    difference < relativeUnits.seconds\n  ) {\n    return formatter.format(0, \"seconds\");\n  }\n\n  for (const [unit, length] of Object.entries(relativeUnits)) {\n    if (Math.abs(difference) < length) {\n      return formatter.format(\n        Math.round(difference),\n        unit as Intl.RelativeTimeFormatUnit\n      );\n    }\n\n    difference /= length;\n  }\n\n  return capitalize(formatter.format(Math.round(difference), \"years\"));\n}\n\n/**\n * Formats a date relatively if it's recent,\n * otherwise absolutely with only the day and month.\n */\nfunction formatDynamicDate(date: Date, locale?: string) {\n  return date.getTime() > Date.now() - DYNAMIC_DATE_THRESHOLD\n    ? formatRelativeDate(date, locale)\n    : formatShortDate(date, locale);\n}\n\n/**\n * Displays a formatted date, and automatically re-renders to support relative\n * formatting. Defaults to relative formatting for recent dates and a short\n * absolute formatting for older ones.\n *\n * @example\n * <Timestamp date={new Date()} />\n *\n * @example\n * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>\n *   {(date) => date.toLocaleDateString()}\n * </Timestamp>\n */\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      date,\n      locale,\n      children: renderChildren = formatDynamicDate,\n      title: renderTitle = formatVerboseDate,\n      dateTime,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const parsedDate = useMemo(() => new Date(date), [date]);\n    const normalizedDate = useMemo(\n      () => parsedDate.toISOString(),\n      [parsedDate]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(parsedDate, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, parsedDate, key]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(parsedDate, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, parsedDate, key]\n    );\n\n    useInterval(rerender, interval);\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDate}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Timestamp.displayName = TIMESTAMP_NAME;\n}\n"],"names":["formatter","locale"],"mappings":";;;;;;;;AAAA,YAAA,CAAA;AAYA,MAAM,sBAAyB,GAAA,CAAA,GAAI,EAAK,GAAA,EAAA,GAAK,EAAK,GAAA,GAAA,CAAA;AAClD,MAAM,kBAAkB,EAAK,GAAA,GAAA,CAAA;AAE7B,MAAM,cAAiB,GAAA,WAAA,CAAA;AA+BvB,MAAM,aAAgB,GAAA;AAAA,EACpB,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,KAAO,EAAA,EAAA;AAAA,EACP,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,OAAA;AAAA,EACP,MAAQ,EAAA,EAAA;AACV,CAAA,CAAA;AAKA,SAAS,iBAAA,CAAkB,MAAY,MAAiB,EAAA;AACtD,EAAM,MAAA,SAAA,GAAY,eAAe,MAAQ,EAAA;AAAA,IACvC,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,IACP,GAAK,EAAA,SAAA;AAAA,IACL,IAAM,EAAA,SAAA;AAAA,IACN,MAAQ,EAAA,SAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,OAAO,UAAW,CAAA,SAAA,CAAU,MAAO,CAAA,IAAI,CAAC,CAAA,CAAA;AAC1C,CAAA;AAKA,SAAS,eAAA,CAAgB,MAAY,MAAiB,EAAA;AACpD,EAAM,MAAA,SAAA,GAAY,eAAe,MAAQ,EAAA;AAAA,IACvC,KAAO,EAAA,OAAA;AAAA,IACP,GAAK,EAAA,SAAA;AAAA,GACN,CAAA,CAAA;AAED,EAAA,OAAO,UAAW,CAAA,SAAA,CAAU,MAAO,CAAA,IAAI,CAAC,CAAA,CAAA;AAC1C,CAAA;AAGA,MAAM,yCAA4C,GAAA;AAAA,EAChD,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AACF,CAAA,CAAA;AAKA,SAAS,kBAAA,CAAmB,MAAY,MAAiB,EAAA;AACvD,EAAI,IAAA,cAAA,CAAA;AAEJ,EAAA,IAAI,MAAQ,EAAA;AACV,IAAiB,cAAA,GAAA,MAAA,CAAA;AAAA,GACZ,MAAA;AACL,IAAA,MAAMA,aAAY,kBAAmB,EAAA,CAAA;AAErC,IAAiBA,cAAAA,GAAAA,UAAAA,CAAU,iBAAkB,CAAA,MAAA,CAAA;AAAA,GAC/C;AAEA,EAAA,MAAM,qBAAqB,yCAA0C,CAAA,IAAA;AAAA,IACnE,CAACC,OACC,KAAA,cAAA,KAAmBA,WAAU,cAAe,CAAA,UAAA,CAAW,GAAGA,OAAS,CAAA,CAAA,CAAA,CAAA;AAAA,GACvE,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,mBAAmB,cAAgB,EAAA;AAAA,IACnD,KAAA,EAAO,qBAAqB,OAAU,GAAA,QAAA;AAAA,IACtC,OAAS,EAAA,MAAA;AAAA,GACV,CAAA,CAAA;AAED,EAAA,IAAI,cAAc,IAAK,CAAA,OAAA,EAAY,GAAA,IAAA,CAAK,KAAS,IAAA,GAAA,CAAA;AAEjD,EAAA,IACE,aAAa,CAAC,aAAA,CAAc,OAC5B,IAAA,UAAA,GAAa,cAAc,OAC3B,EAAA;AACA,IAAO,OAAA,SAAA,CAAU,MAAO,CAAA,CAAA,EAAG,SAAS,CAAA,CAAA;AAAA,GACtC;AAEA,EAAA,KAAA,MAAW,CAAC,IAAM,EAAA,MAAM,KAAK,MAAO,CAAA,OAAA,CAAQ,aAAa,CAAG,EAAA;AAC1D,IAAA,IAAI,IAAK,CAAA,GAAA,CAAI,UAAU,CAAA,GAAI,MAAQ,EAAA;AACjC,MAAA,OAAO,SAAU,CAAA,MAAA;AAAA,QACf,IAAA,CAAK,MAAM,UAAU,CAAA;AAAA,QACrB,IAAA;AAAA,OACF,CAAA;AAAA,KACF;AAEA,IAAc,UAAA,IAAA,MAAA,CAAA;AAAA,GAChB;AAEA,EAAO,OAAA,UAAA,CAAW,UAAU,MAAO,CAAA,IAAA,CAAK,MAAM,UAAU,CAAA,EAAG,OAAO,CAAC,CAAA,CAAA;AACrE,CAAA;AAMA,SAAS,iBAAA,CAAkB,MAAY,MAAiB,EAAA;AACtD,EAAA,OAAO,IAAK,CAAA,OAAA,EAAY,GAAA,IAAA,CAAK,GAAI,EAAA,GAAI,sBACjC,GAAA,kBAAA,CAAmB,IAAM,EAAA,MAAM,CAC/B,GAAA,eAAA,CAAgB,MAAM,MAAM,CAAA,CAAA;AAClC,CAAA;AAeO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,IAAA;AAAA,IACA,MAAA;AAAA,IACA,UAAU,cAAiB,GAAA,iBAAA;AAAA,IAC3B,OAAO,WAAc,GAAA,iBAAA;AAAA,IACrB,QAAA;AAAA,IACA,QAAW,GAAA,eAAA;AAAA,IACX,OAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,YACG,KAAA;AACH,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,MAAA,CAAA;AACnC,IAAA,MAAM,CAAC,QAAA,EAAU,GAAG,CAAA,GAAI,WAAY,EAAA,CAAA;AACpC,IAAM,MAAA,UAAA,GAAa,QAAQ,MAAM,IAAI,KAAK,IAAI,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AACvD,IAAA,MAAM,cAAiB,GAAA,OAAA;AAAA,MACrB,MAAM,WAAW,WAAY,EAAA;AAAA,MAC7B,CAAC,UAAU,CAAA;AAAA,KACb,CAAA;AACA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,MACZ,MACE,OAAO,WAAA,KAAgB,aACnB,WAAY,CAAA,UAAA,EAAY,MAAM,CAC9B,GAAA,WAAA;AAAA,MAEN,CAAC,WAAa,EAAA,UAAA,EAAY,GAAG,CAAA;AAAA,KAC/B,CAAA;AACA,IAAA,MAAM,QAAW,GAAA,OAAA;AAAA,MACf,MACE,OAAO,cAAA,KAAmB,aACtB,cAAe,CAAA,UAAA,EAAY,MAAM,CACjC,GAAA,cAAA;AAAA,MAEN,CAAC,cAAgB,EAAA,UAAA,EAAY,GAAG,CAAA;AAAA,KAClC,CAAA;AAEA,IAAA,WAAA,CAAY,UAAU,QAAQ,CAAA,CAAA;AAE9B,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MACL,UAAU,QAAY,IAAA,cAAA;AAAA,MACtB,KAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,SAAA,CAAU,WAAc,GAAA,cAAA,CAAA;AAC1B;;;;"}

package/dist/slate/plugins/auto-links.mjs

@@ -1,4 +1,4 @@
-import { Element, Node, Path, Transforms, Range, Editor } from 'slate';
+import { Node, Path, Transforms, Range, Editor, Element } from 'slate';
 import { isText, isPlainText } from '../utils/is-text.mjs';
 import { filterActiveMarks } from '../utils/marks.mjs';
 import { isComposerBodyCustomLink } from './custom-links.mjs';

package/dist/slate/plugins/custom-links.mjs

@@ -1,4 +1,4 @@
-import { Element, Node, Transforms, Range } from 'slate';
+import { Node, Transforms, Range, Element } from 'slate';
 import { isText, isPlainText } from '../utils/is-text.mjs';
 import { filterActiveMarks } from '../utils/marks.mjs';
 import { selectionContainsInlines } from '../utils/selection-contains-inlines.mjs';

package/dist/slate/plugins/mentions.mjs

@@ -1,4 +1,4 @@
-import { Transforms, Range, Element, Editor } from 'slate';
+import { Range, Editor, Element, Transforms } from 'slate';
 import { getCharacterAfter, getCharacterBefore } from '../utils/get-character.mjs';
 import { getMatchRange } from '../utils/get-match-range.mjs';
 import { isEmptyString } from '../utils/is-empty-string.mjs';

package/dist/utils/Persist.js

@@ -5,6 +5,7 @@ var core = require('@liveblocks/core');
 var react = require('react');
 var flushSync = require('./flush-sync.js');
 
+"use client";
 const PERSIST_NAME = "Persist";
 const PersistContext = react.createContext(null);
 function usePersist() {

package/dist/utils/Persist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Persist.js","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { flushSync } from \"./flush-sync\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":["createContext","useContext","nn","Children","isValidElement","useRef","useLayoutEffect","useState","useCallback","flushSync","jsx"],"mappings":"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"}
+{"version":3,"file":"Persist.js","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { flushSync } from \"./flush-sync\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":["createContext","useContext","nn","Children","isValidElement","useRef","useLayoutEffect","useState","useCallback","flushSync","jsx"],"mappings":"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"}

package/dist/utils/Persist.mjs

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { nn } from '@liveblocks/core';
-import { createContext, useContext, useRef, useLayoutEffect, useState, useCallback, Children, isValidElement } from 'react';
+import { createContext, useContext, Children, isValidElement, useRef, useLayoutEffect, useState, useCallback } from 'react';
 import { flushSync } from './flush-sync.mjs';
 
+"use client";
 const PERSIST_NAME = "Persist";
 const PersistContext = createContext(null);
 function usePersist() {

package/dist/utils/Persist.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Persist.mjs","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { flushSync } from \"./flush-sync\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,YAAe,GAAA,SAAA,CAAA;AAQrB,MAAM,cAAA,GAAiB,cAAqC,IAAI,CAAA,CAAA;AAEzD,SAAS,UAAa,GAAA;AAC3B,EAAM,MAAA,cAAA,GAAiB,WAAW,cAAc,CAAA,CAAA;AAEhD,EAAO,OAAA,EAAA,CAAG,gBAAgB,yCAAyC,CAAA,CAAA;AACrE,CAAA;AAEA,SAAS,SAAS,QAAqB,EAAA;AACrC,EAAM,MAAA,KAAA,GAAmB,MAAM,OAAQ,CAAA,QAAQ,IAC3C,QAAS,CAAA,IAAA,CAAK,QAAQ,CACtB,GAAA,QAAA,CAAA;AAEJ,EAAO,OAAA,cAAA,CAAe,KAAK,CAAA,GAAI,KAAQ,GAAA,KAAA,CAAA,CAAA;AACzC,CAAA;AAEO,SAAS,oBAAoB,GAA6B,EAAA;AAC/D,EAAA,MAAM,CAAC,SAAA,EAAW,OAAO,CAAA,GAAI,UAAW,EAAA,CAAA;AACxC,EAAM,MAAA,qBAAA,GAAwB,OAAsB,IAAI,CAAA,CAAA;AACxD,EAAM,MAAA,oBAAA,GAAuB,OAAsB,IAAI,CAAA,CAAA;AAEvD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAUA,IAAM,MAAA,kBAAA,GAAqB,CAAC,KAA0B,KAAA;AACpD,MAAI,IAAA,KAAA,CAAM,aAAkB,KAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,QAAQ,OAAA,EAAA,CAAA;AAAA,OACV;AAEA,MAAA,qBAAA,CAAsB,UAAU,KAAM,CAAA,aAAA,CAAA;AAAA,KACxC,CAAA;AAEA,IAAQ,OAAA,CAAA,gBAAA,CAAiB,mBAAmB,kBAAkB,CAAA,CAAA;AAC9D,IAAQ,OAAA,CAAA,gBAAA,CAAiB,gBAAgB,kBAAkB,CAAA,CAAA;AAE3D,IAAA,OAAO,MAAM;AACX,MAAQ,OAAA,CAAA,mBAAA,CAAoB,mBAAmB,kBAAkB,CAAA,CAAA;AACjE,MAAQ,OAAA,CAAA,mBAAA,CAAoB,gBAAgB,kBAAkB,CAAA,CAAA;AAAA,KAChE,CAAA;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,OAAO,CAAC,CAAA,CAAA;AAEjB,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AACpB,IAAI,IAAA,gBAAA,CAAA;AAEJ,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,CAAC,SAAW,EAAA;AAGd,MAAA,gBAAA,GAAmB,sBAAsB,MAAM;AAC7C,QAAM,MAAA,MAAA,GAAS,iBAAiB,OAAO,CAAA,CAAA;AACvC,QAAA,oBAAA,CAAqB,UAAU,MAAO,CAAA,aAAA,CAAA;AAEtC,QACE,IAAA,MAAA,CAAO,kBAAkB,MACzB,IAAA,MAAA,CAAO,kBAAkB,qBAAsB,CAAA,OAAA,IAC/C,MAAO,CAAA,OAAA,KAAY,MACnB,EAAA;AACA,UAAQ,OAAA,EAAA,CAAA;AAAA,SACV;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,oBAAA,CAAqB,gBAAgB,CAAA,CAAA;AAAA,KACvC,CAAA;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,GAAA,EAAK,OAAO,CAAC,CAAA,CAAA;AAC9B,CAAA;AAMgB,SAAA,OAAA,CAAQ,EAAE,QAAA,EAA0B,EAAA;AAClD,EAAA,MAAM,CAAC,YAAA,EAAc,aAAa,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AACnD,EAAM,MAAA,gBAAA,GAAmB,OAAkB,IAAI,CAAA,CAAA;AAC/C,EAAM,MAAA,KAAA,GAAQ,SAAS,QAAQ,CAAA,CAAA;AAE/B,EAAM,MAAA,OAAA,GAAU,YAAY,MAAM;AAChC,IAAU,SAAA,CAAA,MAAM,aAAc,CAAA,KAAK,CAAC,CAAA,CAAA;AAAA,GACtC,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAClB,MAAA,gBAAA,CAAiB,OAAU,GAAA,KAAA,CAAA;AAAA,KAC7B;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EACE,uBAAA,GAAA,CAAC,eAAe,QAAf,EAAA;AAAA,IAAwB,KAAO,EAAA,CAAC,OAAQ,CAAA,KAAK,GAAG,OAAO,CAAA;AAAA,IACrD,QAAA,EAAA,KAAA,KAAU,YAAe,GAAA,gBAAA,CAAiB,OAAU,GAAA,IAAA,CAAA;AAAA,GACvD,CAAA,CAAA;AAEJ,CAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,OAAA,CAAQ,WAAc,GAAA,YAAA,CAAA;AACxB;;;;"}
+{"version":3,"file":"Persist.mjs","sources":["../../src/utils/Persist.tsx"],"sourcesContent":["\"use client\";\n\nimport { nn } from \"@liveblocks/core\";\nimport type { ReactNode, RefObject } from \"react\";\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { flushSync } from \"./flush-sync\";\n\n// Persist is an overly simplified version of Framer Motion's AnimatePresence,\n// mostly mimicking its usePresence API: https://github.com/framer/motion/blob/main/packages/framer-motion/src/components/AnimatePresence/use-presence.ts\n\nconst PERSIST_NAME = \"Persist\";\n\ninterface PersistProps {\n  children: Exclude<ReactNode, Iterable<ReactNode>>;\n}\n\ntype PersistContext = [boolean, () => void];\n\nconst PersistContext = createContext<PersistContext | null>(null);\n\nexport function usePersist() {\n  const persistContext = useContext(PersistContext);\n\n  return nn(persistContext, \"Persist is missing from the React tree.\");\n}\n\nfunction getChild(children: ReactNode) {\n  const child: ReactNode = Array.isArray(children)\n    ? Children.only(children)\n    : children;\n\n  return isValidElement(child) ? child : undefined;\n}\n\nexport function useAnimationPersist(ref: RefObject<HTMLElement>) {\n  const [isPresent, unmount] = usePersist();\n  const previousAnimationName = useRef<string | null>(null);\n  const unmountAnimationName = useRef<string | null>(null);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    /**\n     * Stop persisting at the end of the last animation.\n     *\n     * We keep track of all ending animations because animations stay\n     * on getComputedStyle(element).animationName even if they're over,\n     * so we need to keep track of previous animations to truly know if\n     * an animation should be waited on.\n     */\n    const handleAnimationEnd = (event: AnimationEvent) => {\n      if (event.animationName === unmountAnimationName.current) {\n        unmount();\n      }\n\n      previousAnimationName.current = event.animationName;\n    };\n\n    element.addEventListener(\"animationcancel\", handleAnimationEnd);\n    element.addEventListener(\"animationend\", handleAnimationEnd);\n\n    return () => {\n      element.removeEventListener(\"animationcancel\", handleAnimationEnd);\n      element.removeEventListener(\"animationend\", handleAnimationEnd);\n    };\n  }, [ref, unmount]);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    let animationFrameId: number;\n\n    if (!element) {\n      return;\n    }\n\n    if (!isPresent) {\n      // If the element should be unmounting, wait for a repaint and check\n      // if it is visible and has an animation. If not, unmount immediately.\n      animationFrameId = requestAnimationFrame(() => {\n        const styles = getComputedStyle(element);\n        unmountAnimationName.current = styles.animationName;\n\n        if (\n          styles.animationName === \"none\" ||\n          styles.animationName === previousAnimationName.current ||\n          styles.display === \"none\"\n        ) {\n          unmount();\n        }\n      });\n    }\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n    };\n  }, [isPresent, ref, unmount]);\n}\n\n/**\n * Persist a component until it decides to unmount by\n * itself (instead of orchestrating the unmount from the parent).\n */\nexport function Persist({ children }: PersistProps) {\n  const [isPersisting, setPersisting] = useState(true);\n  const lastPresentChild = useRef<ReactNode>(null);\n  const child = getChild(children);\n\n  const unmount = useCallback(() => {\n    flushSync(() => setPersisting(false));\n  }, []);\n\n  useLayoutEffect(() => {\n    if (child) {\n      setPersisting(true);\n      lastPresentChild.current = child;\n    }\n  }, [child]);\n\n  return (\n    <PersistContext.Provider value={[Boolean(child), unmount]}>\n      {child ?? (isPersisting ? lastPresentChild.current : null)}\n    </PersistContext.Provider>\n  );\n}\n\nif (process.env.NODE_ENV !== \"production\") {\n  Persist.displayName = PERSIST_NAME;\n}\n"],"names":[],"mappings":"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"}

package/dist/utils/Portal.js

@@ -5,6 +5,7 @@ var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var ReactDOM = require('react-dom');
 
+"use client";
 const PORTAL_NAME = "Portal";
 const Portal = react.forwardRef(
   ({ container = document?.body, asChild, ...props }, forwardedRef) => {

package/dist/utils/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sources":["../../src/utils/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\n\nconst PORTAL_NAME = \"Portal\";\n\ninterface PortalProps extends ComponentPropsWithSlot<\"div\"> {\n  /**\n   * The container to render the portal into.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = forwardRef<HTMLDivElement, PortalProps>(\n  ({ container = document?.body, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n\n    return container\n      ? createPortal(\n          <Component data-liveblocks-portal=\"\" {...props} ref={forwardedRef} />,\n          container\n        )\n      : null;\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Portal.displayName = PORTAL_NAME;\n}\n\nexport { Portal };\n"],"names":["forwardRef","Slot","createPortal","jsx"],"mappings":";;;;;;;AAQA,MAAM,WAAc,GAAA,QAAA,CAAA;AASpB,MAAM,MAAS,GAAAA,gBAAA;AAAA,EACb,CAAC,EAAE,SAAY,GAAA,QAAA,EAAU,MAAM,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACnE,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,KAAA,CAAA;AAEnC,IAAA,OAAO,SACH,GAAAC,qBAAA;AAAA,sBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,QAAU,wBAAuB,EAAA,EAAA;AAAA,QAAI,GAAG,KAAA;AAAA,QAAO,GAAK,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,MACnE,SAAA;AAAA,KAEF,GAAA,IAAA,CAAA;AAAA,GACN;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,MAAA,CAAO,WAAc,GAAA,WAAA,CAAA;AACvB;;;;"}
+{"version":3,"file":"Portal.js","sources":["../../src/utils/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\n\nconst PORTAL_NAME = \"Portal\";\n\ninterface PortalProps extends ComponentPropsWithSlot<\"div\"> {\n  /**\n   * The container to render the portal into.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = forwardRef<HTMLDivElement, PortalProps>(\n  ({ container = document?.body, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n\n    return container\n      ? createPortal(\n          <Component data-liveblocks-portal=\"\" {...props} ref={forwardedRef} />,\n          container\n        )\n      : null;\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Portal.displayName = PORTAL_NAME;\n}\n\nexport { Portal };\n"],"names":["forwardRef","Slot","createPortal","jsx"],"mappings":";;;;;;;AAAA,YAAA,CAAA;AAQA,MAAM,WAAc,GAAA,QAAA,CAAA;AASpB,MAAM,MAAS,GAAAA,gBAAA;AAAA,EACb,CAAC,EAAE,SAAY,GAAA,QAAA,EAAU,MAAM,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACnE,IAAM,MAAA,SAAA,GAAY,UAAUC,cAAO,GAAA,KAAA,CAAA;AAEnC,IAAA,OAAO,SACH,GAAAC,qBAAA;AAAA,sBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,QAAU,wBAAuB,EAAA,EAAA;AAAA,QAAI,GAAG,KAAA;AAAA,QAAO,GAAK,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,MACnE,SAAA;AAAA,KAEF,GAAA,IAAA,CAAA;AAAA,GACN;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,MAAA,CAAO,WAAc,GAAA,WAAA,CAAA;AACvB;;;;"}

package/dist/utils/Portal.mjs

@@ -3,6 +3,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { createPortal } from 'react-dom';
 
+"use client";
 const PORTAL_NAME = "Portal";
 const Portal = forwardRef(
   ({ container = document?.body, asChild, ...props }, forwardedRef) => {

package/dist/utils/Portal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.mjs","sources":["../../src/utils/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\n\nconst PORTAL_NAME = \"Portal\";\n\ninterface PortalProps extends ComponentPropsWithSlot<\"div\"> {\n  /**\n   * The container to render the portal into.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = forwardRef<HTMLDivElement, PortalProps>(\n  ({ container = document?.body, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n\n    return container\n      ? createPortal(\n          <Component data-liveblocks-portal=\"\" {...props} ref={forwardedRef} />,\n          container\n        )\n      : null;\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Portal.displayName = PORTAL_NAME;\n}\n\nexport { Portal };\n"],"names":[],"mappings":";;;;;AAQA,MAAM,WAAc,GAAA,QAAA,CAAA;AASpB,MAAM,MAAS,GAAA,UAAA;AAAA,EACb,CAAC,EAAE,SAAY,GAAA,QAAA,EAAU,MAAM,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACnE,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,KAAA,CAAA;AAEnC,IAAA,OAAO,SACH,GAAA,YAAA;AAAA,sBACG,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,wBAAuB,EAAA,EAAA;AAAA,QAAI,GAAG,KAAA;AAAA,QAAO,GAAK,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,MACnE,SAAA;AAAA,KAEF,GAAA,IAAA,CAAA;AAAA,GACN;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,MAAA,CAAO,WAAc,GAAA,WAAA,CAAA;AACvB;;;;"}
+{"version":3,"file":"Portal.mjs","sources":["../../src/utils/Portal.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\n\nconst PORTAL_NAME = \"Portal\";\n\ninterface PortalProps extends ComponentPropsWithSlot<\"div\"> {\n  /**\n   * The container to render the portal into.\n   */\n  container?: HTMLElement | null;\n}\n\nconst Portal = forwardRef<HTMLDivElement, PortalProps>(\n  ({ container = document?.body, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"div\";\n\n    return container\n      ? createPortal(\n          <Component data-liveblocks-portal=\"\" {...props} ref={forwardedRef} />,\n          container\n        )\n      : null;\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Portal.displayName = PORTAL_NAME;\n}\n\nexport { Portal };\n"],"names":[],"mappings":";;;;;AAAA,YAAA,CAAA;AAQA,MAAM,WAAc,GAAA,QAAA,CAAA;AASpB,MAAM,MAAS,GAAA,UAAA;AAAA,EACb,CAAC,EAAE,SAAY,GAAA,QAAA,EAAU,MAAM,OAAY,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACnE,IAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,KAAA,CAAA;AAEnC,IAAA,OAAO,SACH,GAAA,YAAA;AAAA,sBACG,GAAA,CAAA,SAAA,EAAA;AAAA,QAAU,wBAAuB,EAAA,EAAA;AAAA,QAAI,GAAG,KAAA;AAAA,QAAO,GAAK,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,MACnE,SAAA;AAAA,KAEF,GAAA,IAAA,CAAA;AAAA,GACN;AACF,EAAA;AAEA,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,MAAA,CAAO,WAAc,GAAA,WAAA,CAAA;AACvB;;;;"}

package/dist/utils/use-visible.js

@@ -21,6 +21,27 @@ function unobserve(element) {
   intersectionCallbacks.delete(element);
   intersectionObserver?.unobserve(element);
 }
+function useVisible(ref, options) {
+  const [isVisible, setVisible] = react.useState(false);
+  const enabled = options?.enabled ?? true;
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (enabled) {
+      observe(element, (entry) => {
+        setVisible(entry.isIntersecting);
+      });
+    } else {
+      unobserve(element);
+    }
+    return () => {
+      unobserve(element);
+    };
+  }, [enabled]);
+  return isVisible;
+}
 function useVisibleCallback(ref, callback, options) {
   const enabled = options?.enabled ?? true;
   const latestCallback = useLatest.useLatest(callback);
@@ -44,5 +65,6 @@ function useVisibleCallback(ref, callback, options) {
   }, [enabled]);
 }
 
+exports.useVisible = useVisible;
 exports.useVisibleCallback = useVisibleCallback;
 //# sourceMappingURL=use-visible.js.map

package/dist/utils/use-visible.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-visible.js","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ntype Options = { enabled?: boolean };\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet intersectionObserver: IntersectionObserver | undefined;\nconst intersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback\n) {\n  if (!intersectionObserver) {\n    intersectionObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        const callback = intersectionCallbacks.get(entry.target);\n\n        callback?.(entry);\n      }\n    });\n  }\n\n  intersectionCallbacks.set(element, callback);\n  intersectionObserver.observe(element);\n}\n\nfunction unobserve(element: Element) {\n  intersectionCallbacks.delete(element);\n  intersectionObserver?.unobserve(element);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n  const enabled = options?.enabled ?? true;\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        setVisible(entry.isIntersecting);\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return isVisible;\n}\n\nexport function useVisibleCallback<T extends (...args: any[]) => void>(\n  ref: RefObject<Element>,\n  callback: T,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        if (entry.isIntersecting) {\n          latestCallback.current();\n        }\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"names":["callback","useLatest","useEffect"],"mappings":";;;;;AAUA,IAAI,oBAAA,CAAA;AACJ,MAAM,qBAAA,uBAA4B,OAGhC,EAAA,CAAA;AAEF,SAAS,OAAA,CACP,SACA,QACA,EAAA;AACA,EAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,IAAuB,oBAAA,GAAA,IAAI,oBAAqB,CAAA,CAAC,OAAY,KAAA;AAC3D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAMA,SAAW,GAAA,qBAAA,CAAsB,GAAI,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAEvD,QAAAA,YAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAsB,qBAAA,CAAA,GAAA,CAAI,SAAS,QAAQ,CAAA,CAAA;AAC3C,EAAA,oBAAA,CAAqB,QAAQ,OAAO,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,UAAU,OAAkB,EAAA;AACnC,EAAA,qBAAA,CAAsB,OAAO,OAAO,CAAA,CAAA;AACpC,EAAA,oBAAA,EAAsB,UAAU,OAAO,CAAA,CAAA;AACzC,CAAA;AAgCgB,SAAA,kBAAA,CACd,GACA,EAAA,QAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiBC,oBAAU,QAAQ,CAAA,CAAA;AAEzC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,IAAI,MAAM,cAAgB,EAAA;AACxB,UAAA,cAAA,CAAe,OAAQ,EAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AACd;;;;"}
+{"version":3,"file":"use-visible.js","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ntype Options = { enabled?: boolean };\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet intersectionObserver: IntersectionObserver | undefined;\nconst intersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback\n) {\n  if (!intersectionObserver) {\n    intersectionObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        const callback = intersectionCallbacks.get(entry.target);\n\n        callback?.(entry);\n      }\n    });\n  }\n\n  intersectionCallbacks.set(element, callback);\n  intersectionObserver.observe(element);\n}\n\nfunction unobserve(element: Element) {\n  intersectionCallbacks.delete(element);\n  intersectionObserver?.unobserve(element);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n  const enabled = options?.enabled ?? true;\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        setVisible(entry.isIntersecting);\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return isVisible;\n}\n\nexport function useVisibleCallback<T extends (...args: any[]) => void>(\n  ref: RefObject<Element>,\n  callback: T,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        if (entry.isIntersecting) {\n          latestCallback.current();\n        }\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"names":["callback","useState","useEffect","useLatest"],"mappings":";;;;;AAUA,IAAI,oBAAA,CAAA;AACJ,MAAM,qBAAA,uBAA4B,OAGhC,EAAA,CAAA;AAEF,SAAS,OAAA,CACP,SACA,QACA,EAAA;AACA,EAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,IAAuB,oBAAA,GAAA,IAAI,oBAAqB,CAAA,CAAC,OAAY,KAAA;AAC3D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAMA,SAAW,GAAA,qBAAA,CAAsB,GAAI,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAEvD,QAAAA,YAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAsB,qBAAA,CAAA,GAAA,CAAI,SAAS,QAAQ,CAAA,CAAA;AAC3C,EAAA,oBAAA,CAAqB,QAAQ,OAAO,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,UAAU,OAAkB,EAAA;AACnC,EAAA,qBAAA,CAAsB,OAAO,OAAO,CAAA,CAAA;AACpC,EAAA,oBAAA,EAAsB,UAAU,OAAO,CAAA,CAAA;AACzC,CAAA;AAKgB,SAAA,UAAA,CAAW,KAAyB,OAAmB,EAAA;AACrE,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAC9C,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AAEpC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,UAAA,CAAW,MAAM,cAAc,CAAA,CAAA;AAAA,OAChC,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAO,OAAA,SAAA,CAAA;AACT,CAAA;AAEgB,SAAA,kBAAA,CACd,GACA,EAAA,QAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiBC,oBAAU,QAAQ,CAAA,CAAA;AAEzC,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,IAAI,MAAM,cAAgB,EAAA;AACxB,UAAA,cAAA,CAAe,OAAQ,EAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AACd;;;;;"}

package/dist/utils/use-visible.mjs

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useLatest } from './use-latest.mjs';
 
 let intersectionObserver;
@@ -19,6 +19,27 @@ function unobserve(element) {
   intersectionCallbacks.delete(element);
   intersectionObserver?.unobserve(element);
 }
+function useVisible(ref, options) {
+  const [isVisible, setVisible] = useState(false);
+  const enabled = options?.enabled ?? true;
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    if (enabled) {
+      observe(element, (entry) => {
+        setVisible(entry.isIntersecting);
+      });
+    } else {
+      unobserve(element);
+    }
+    return () => {
+      unobserve(element);
+    };
+  }, [enabled]);
+  return isVisible;
+}
 function useVisibleCallback(ref, callback, options) {
   const enabled = options?.enabled ?? true;
   const latestCallback = useLatest(callback);
@@ -42,5 +63,5 @@ function useVisibleCallback(ref, callback, options) {
   }, [enabled]);
 }
 
-export { useVisibleCallback };
+export { useVisible, useVisibleCallback };
 //# sourceMappingURL=use-visible.mjs.map

package/dist/utils/use-visible.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-visible.mjs","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ntype Options = { enabled?: boolean };\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet intersectionObserver: IntersectionObserver | undefined;\nconst intersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback\n) {\n  if (!intersectionObserver) {\n    intersectionObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        const callback = intersectionCallbacks.get(entry.target);\n\n        callback?.(entry);\n      }\n    });\n  }\n\n  intersectionCallbacks.set(element, callback);\n  intersectionObserver.observe(element);\n}\n\nfunction unobserve(element: Element) {\n  intersectionCallbacks.delete(element);\n  intersectionObserver?.unobserve(element);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n  const enabled = options?.enabled ?? true;\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        setVisible(entry.isIntersecting);\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return isVisible;\n}\n\nexport function useVisibleCallback<T extends (...args: any[]) => void>(\n  ref: RefObject<Element>,\n  callback: T,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        if (entry.isIntersecting) {\n          latestCallback.current();\n        }\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"names":["callback"],"mappings":";;;AAUA,IAAI,oBAAA,CAAA;AACJ,MAAM,qBAAA,uBAA4B,OAGhC,EAAA,CAAA;AAEF,SAAS,OAAA,CACP,SACA,QACA,EAAA;AACA,EAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,IAAuB,oBAAA,GAAA,IAAI,oBAAqB,CAAA,CAAC,OAAY,KAAA;AAC3D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAMA,SAAW,GAAA,qBAAA,CAAsB,GAAI,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAEvD,QAAAA,YAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAsB,qBAAA,CAAA,GAAA,CAAI,SAAS,QAAQ,CAAA,CAAA;AAC3C,EAAA,oBAAA,CAAqB,QAAQ,OAAO,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,UAAU,OAAkB,EAAA;AACnC,EAAA,qBAAA,CAAsB,OAAO,OAAO,CAAA,CAAA;AACpC,EAAA,oBAAA,EAAsB,UAAU,OAAO,CAAA,CAAA;AACzC,CAAA;AAgCgB,SAAA,kBAAA,CACd,GACA,EAAA,QAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiB,UAAU,QAAQ,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,IAAI,MAAM,cAAgB,EAAA;AACxB,UAAA,cAAA,CAAe,OAAQ,EAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AACd;;;;"}
+{"version":3,"file":"use-visible.mjs","sources":["../../src/utils/use-visible.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nimport { useLatest } from \"./use-latest\";\n\ntype Options = { enabled?: boolean };\n\ntype IntersectionObserverSingleCallback = (\n  entry: IntersectionObserverEntry\n) => void;\n\nlet intersectionObserver: IntersectionObserver | undefined;\nconst intersectionCallbacks = new WeakMap<\n  Element,\n  IntersectionObserverSingleCallback\n>();\n\nfunction observe(\n  element: Element,\n  callback: IntersectionObserverSingleCallback\n) {\n  if (!intersectionObserver) {\n    intersectionObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        const callback = intersectionCallbacks.get(entry.target);\n\n        callback?.(entry);\n      }\n    });\n  }\n\n  intersectionCallbacks.set(element, callback);\n  intersectionObserver.observe(element);\n}\n\nfunction unobserve(element: Element) {\n  intersectionCallbacks.delete(element);\n  intersectionObserver?.unobserve(element);\n}\n\n/**\n * Observe whether an element is currently visible or not.\n */\nexport function useVisible(ref: RefObject<Element>, options?: Options) {\n  const [isVisible, setVisible] = useState(false);\n  const enabled = options?.enabled ?? true;\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        setVisible(entry.isIntersecting);\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return isVisible;\n}\n\nexport function useVisibleCallback<T extends (...args: any[]) => void>(\n  ref: RefObject<Element>,\n  callback: T,\n  options?: Options\n) {\n  const enabled = options?.enabled ?? true;\n  const latestCallback = useLatest(callback);\n\n  useEffect(() => {\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (enabled) {\n      observe(element, (entry) => {\n        if (entry.isIntersecting) {\n          latestCallback.current();\n        }\n      });\n    } else {\n      unobserve(element);\n    }\n\n    return () => {\n      unobserve(element);\n    };\n  }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"names":["callback"],"mappings":";;;AAUA,IAAI,oBAAA,CAAA;AACJ,MAAM,qBAAA,uBAA4B,OAGhC,EAAA,CAAA;AAEF,SAAS,OAAA,CACP,SACA,QACA,EAAA;AACA,EAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,IAAuB,oBAAA,GAAA,IAAI,oBAAqB,CAAA,CAAC,OAAY,KAAA;AAC3D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAMA,SAAW,GAAA,qBAAA,CAAsB,GAAI,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AAEvD,QAAAA,YAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AAEA,EAAsB,qBAAA,CAAA,GAAA,CAAI,SAAS,QAAQ,CAAA,CAAA;AAC3C,EAAA,oBAAA,CAAqB,QAAQ,OAAO,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,UAAU,OAAkB,EAAA;AACnC,EAAA,qBAAA,CAAsB,OAAO,OAAO,CAAA,CAAA;AACpC,EAAA,oBAAA,EAAsB,UAAU,OAAO,CAAA,CAAA;AACzC,CAAA;AAKgB,SAAA,UAAA,CAAW,KAAyB,OAAmB,EAAA;AACrE,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9C,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AAEpC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,UAAA,CAAW,MAAM,cAAc,CAAA,CAAA;AAAA,OAChC,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAO,OAAA,SAAA,CAAA;AACT,CAAA;AAEgB,SAAA,kBAAA,CACd,GACA,EAAA,QAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,OAAA,GAAU,SAAS,OAAW,IAAA,IAAA,CAAA;AACpC,EAAM,MAAA,cAAA,GAAiB,UAAU,QAAQ,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,OAAA,EAAS,CAAC,KAAU,KAAA;AAC1B,QAAA,IAAI,MAAM,cAAgB,EAAA;AACxB,UAAA,cAAA,CAAe,OAAQ,EAAA,CAAA;AAAA,SACzB;AAAA,OACD,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AAAA,GACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AACd;;;;"}

package/dist/version.js

@@ -1,8 +1,8 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.15.0-debug1";
-const PKG_FORMAT = "cjs";
+const PKG_VERSION = typeof "2.15.0" === "string" && "2.15.0";
+const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;
 exports.PKG_NAME = PKG_NAME;

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,gBAAA;AACjD,MAAA,UAAA,GAAkD;;;;;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}

package/dist/version.mjs

@@ -1,6 +1,6 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = "2.15.0-debug1";
-const PKG_FORMAT = "esm";
+const PKG_VERSION = typeof "2.15.0" === "string" && "2.15.0";
+const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };
 //# sourceMappingURL=version.mjs.map

package/dist/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAiD,gBAAA;AACjD,MAAA,UAAA,GAAkD;;;;"}
+{"version":3,"file":"version.mjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,QAAA,KAAgB,QAAY,IAAA,SAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "2.15.0-debug1",
+  "version": "2.15.0",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -63,8 +63,8 @@
     "README.md"
   ],
   "scripts": {
-    "dev": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript --watch",
-    "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "dev": "rollup --config rollup.config.mjs --watch",
+    "build": "rollup --config rollup.config.mjs",
     "start": "npm run dev",
     "format": "eslint --fix src/; stylelint --fix src/styles/; prettier --write src/",
     "lint": "eslint src/; stylelint src/styles/",
@@ -75,9 +75,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "2.15.0-debug1",
-    "@liveblocks/core": "2.15.0-debug1",
-    "@liveblocks/react": "2.15.0-debug1",
+    "@liveblocks/client": "2.15.0",
+    "@liveblocks/core": "2.15.0",
+    "@liveblocks/react": "2.15.0",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
@@ -95,27 +95,14 @@
   "devDependencies": {
     "@liveblocks/eslint-config": "*",
     "@liveblocks/jest-config": "*",
-    "@rollup/plugin-replace": "^5.0.5",
-    "@rollup/plugin-typescript": "^11.1.2",
+    "@liveblocks/rollup-config": "*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.1.1",
     "emojibase": "^15.3.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "msw": "^0.27.1",
-    "postcss": "^8.4.31",
-    "postcss-advanced-variables": "^3.0.1",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-functions": "^4.0.2",
-    "postcss-import": "^15.1.0",
-    "postcss-lightningcss": "^1.0.0",
-    "postcss-nesting": "^12.0.1",
-    "postcss-reporter": "^7.0.5",
-    "postcss-sort-media-queries": "^5.2.0",
-    "rollup": "^3.28.0",
-    "rollup-plugin-dts": "^5.3.1",
-    "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-preserve-directives": "^0.2.0",
+    "rollup": "3.28.0",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-order": "^6.0.3",