emoji-picker-react 5.1.0 → 5.1.2

package/dist/esm/index.mjs

@@ -1,48 +1,10 @@
 "use client";
-import {
-  Categories,
-  CategoryNav,
-  DEFAULT_PICKER_HEIGHT,
-  DEFAULT_PICKER_WIDTH,
-  DefaultPickerConfiguration,
-  EmojiStyle,
-  Empty,
-  List,
-  LoadError,
-  Loading,
-  MutableConfigProvider,
-  Panel,
-  Preview,
-  Reactions,
-  Relative,
-  Root,
-  Search,
-  SkinTone,
-  SkinTonePickerLocation,
-  SkinTones,
-  SuggestionMode,
-  Theme,
-  ViewOnlyEmoji,
-  Viewport,
-  commonInteractionStyles,
-  compareConfig,
-  cx,
-  defaultPickerTokens,
-  emojiByUnified,
-  isPickerBehaviorProp,
-  resolveEmojiStyle,
-  resolveSkinTonePickerLocation,
-  stylesheet,
-  useDefaultAppearance,
-  useDefineMutableConfig,
-  usePreviewConfig,
-  useSearchDisabledConfig,
-  useSkinTonePickerLocationConfig,
-  useSkinTonesDisabledConfig,
-  validColumns
-} from "./chunks/chunk-L4H5QY3X.mjs";
-import "./chunks/chunk-3NQHPTFV.mjs";
-import "./chunks/chunk-FJVAS6PR.mjs";
+import { Categories, CategoryNav, DEFAULT_PICKER_HEIGHT, DEFAULT_PICKER_WIDTH, DefaultPickerConfiguration, EmojiStyle, Empty, List, LoadError, Loading, MutableConfigProvider, Panel, Preview, Reactions, Relative, Root, Search, SkinTone, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme, ViewOnlyEmoji, Viewport, commonInteractionStyles, compareConfig, cx, defaultPickerTokens, emojiByUnified, isPickerBehaviorProp, resolveEmojiStyle, resolveSkinTonePickerLocation, stylesheet, useDefaultAppearance, useDefineMutableConfig, usePreviewConfig, useSearchDisabledConfig, useSkinTonePickerLocationConfig, useSkinTonesDisabledConfig, validColumns } from "./chunks/chunk-FYMRCRY5.mjs";
+
+import "./chunks/chunk-GZYF2CX5.mjs";
+
+import "./chunks/chunk-V7DBC3DD.mjs";
+
 import "./chunks/chunk-ZOAKI5M6.mjs";
 
 // src/index.tsx
@@ -56,328 +18,259 @@ import * as React from "react";
 
 // src/hooks/useShouldShowSkinTonePicker.ts
 function useIsSkinToneInSearch() {
-  const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
-  return skinTonePickerLocationConfig === "SEARCH" /* SEARCH */;
+    return "SEARCH" /* SEARCH */ === useSkinTonePickerLocationConfig();
 }
+
 function useIsSkinToneInPreview() {
-  const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
-  return skinTonePickerLocationConfig === "PREVIEW" /* PREVIEW */;
+    return "PREVIEW" /* PREVIEW */ === useSkinTonePickerLocationConfig();
 }
 
 // src/components/header/Header.tsx
 function Header() {
-  const appearance = useDefaultAppearance();
-  const searchDisabled = useSearchDisabledConfig();
-  const skinTonesDisabled = useSkinTonesDisabledConfig();
-  const toneInSearch = useIsSkinToneInSearch();
-  return /* @__PURE__ */ React.createElement(
-    Relative,
-    {
-      className: cx(
-        "epr-header",
-        appearance && commonInteractionStyles.hiddenOnReactions
-      )
-    },
-    !searchDisabled && /* @__PURE__ */ React.createElement(Search, null, !skinTonesDisabled && toneInSearch && /* @__PURE__ */ React.createElement(SkinTone, null)),
-    /* @__PURE__ */ React.createElement(CategoryNav, null)
-  );
+    const appearance = useDefaultAppearance(), searchDisabled = useSearchDisabledConfig(), skinTonesDisabled = useSkinTonesDisabledConfig(), toneInSearch = useIsSkinToneInSearch();
+    /* @__PURE__ */
+    return React.createElement(Relative, {
+        className: cx("epr-header", appearance && commonInteractionStyles.hiddenOnReactions)
+    }, !searchDisabled && /* @__PURE__ */ React.createElement(Search, null, !skinTonesDisabled && toneInSearch && /* @__PURE__ */ React.createElement(SkinTone, null)), 
+    /* @__PURE__ */ React.createElement(CategoryNav, null));
 }
 
 // src/components/main/defaultAppearance.tsx
 import * as React2 from "react";
+
 function defaultRootClassName(theme, className, unstyled) {
-  if (unstyled) {
-    return cx(className);
-  }
-  return cx(
-    styles.main,
-    styles.baseVariables,
-    theme === "dark" /* DARK */ && styles.darkTheme,
-    theme === "auto" /* AUTO */ && styles.autoThemeDark,
-    className
-  );
+    return unstyled ? cx(className) : cx(styles.main, styles.baseVariables, "dark" /* DARK */ === theme && styles.darkTheme, "auto" /* AUTO */ === theme && styles.autoThemeDark, className);
 }
-function defaultRootStyle({
-  width,
-  height,
-  style,
-  columns
-}) {
-  return {
-    // v4-compatible default dimensions; consumer style and explicit
-    // width/height props both override them. With `columns`, the width
-    // fits the columns instead.
-    ...columns === void 0 && { width: getDimension(DEFAULT_PICKER_WIDTH) },
-    height: getDimension(DEFAULT_PICKER_HEIGHT),
-    ...style,
-    ...width !== void 0 ? { width: getDimension(width) } : {},
-    ...height !== void 0 ? { height: getDimension(height) } : {}
-  };
+
+function defaultRootStyle({width, height, style, columns}) {
+    return {
+        // v4-compatible default dimensions; consumer style and explicit
+        // width/height props both override them. With `columns`, the width
+        // fits the columns instead.
+        ...void 0 === columns && {
+            width: getDimension(DEFAULT_PICKER_WIDTH)
+        },
+        height: getDimension(DEFAULT_PICKER_HEIGHT),
+        ...style,
+        ...void 0 !== width ? {
+            width: getDimension(width)
+        } : {},
+        ...void 0 !== height ? {
+            height: getDimension(height)
+        } : {}
+    };
 }
+
 function getDimension(dimension) {
-  return typeof dimension === "number" ? `${dimension}px` : dimension;
+    return "number" == typeof dimension ? `${dimension}px` : dimension;
 }
+
 var darkThemeBaseVariables = {
-  "--epr-dark": "#000",
-  "--epr-dark-emoji-variation-picker-bg-color": "var(--epr-dark)",
-  "--epr-dark-highlight-color": "#c0c0c0",
-  "--epr-dark-text-color": "var(--epr-highlight-color)",
-  "--epr-dark-hover-bg-color": "#363636f6",
-  "--epr-dark-hover-bg-color-reduced-opacity": "#36363680",
-  "--epr-dark-focus-bg-color": "#474747",
-  "--epr-dark-search-input-bg-color": "#333333",
-  "--epr-dark-category-label-bg-color": "#222222e6",
-  "--epr-dark-picker-border-color": "#151617",
-  "--epr-dark-bg-color": "#222222",
-  "--epr-dark-reactions-bg-color": "#22222290",
-  "--epr-dark-search-input-bg-color-active": "var(--epr-dark)",
-  "--epr-dark-emoji-variation-indicator-color": "#444",
-  "--epr-dark-category-icon-active-color": "#6AA9DD",
-  "--epr-dark-category-icon-inactive-color": "#C0C0BF",
-  "--epr-dark-skin-tone-picker-menu-color": "#22222295",
-  "--epr-dark-skin-tone-outer-border-color": "var(--epr-dark-picker-border-color)",
-  "--epr-dark-skin-tone-inner-border-color": "#00000000"
-};
-var DarkTheme = {
-  "--epr-emoji-variation-picker-bg-color": "var(--epr-dark-emoji-variation-picker-bg-color)",
-  "--epr-hover-bg-color-reduced-opacity": "var(--epr-dark-hover-bg-color-reduced-opacity)",
-  "--epr-highlight-color": "var(--epr-dark-highlight-color)",
-  "--epr-text-color": "var(--epr-dark-text-color)",
-  "--epr-hover-bg-color": "var(--epr-dark-hover-bg-color)",
-  "--epr-focus-bg-color": "var(--epr-dark-focus-bg-color)",
-  "--epr-search-input-bg-color": "var(--epr-dark-search-input-bg-color)",
-  "--epr-category-label-bg-color": "var(--epr-dark-category-label-bg-color)",
-  "--epr-picker-border-color": "var(--epr-dark-picker-border-color)",
-  "--epr-bg-color": "var(--epr-dark-bg-color)",
-  "--epr-reactions-bg-color": "var(--epr-dark-reactions-bg-color)",
-  "--epr-search-input-bg-color-active": "var(--epr-dark-search-input-bg-color-active)",
-  "--epr-emoji-variation-indicator-color": "var(--epr-dark-emoji-variation-indicator-color)",
-  "--epr-category-icon-active-color": "var(--epr-dark-category-icon-active-color)",
-  "--epr-category-icon-inactive-color": "var(--epr-dark-category-icon-inactive-color)",
-  "--epr-skin-tone-picker-menu-color": "var(--epr-dark-skin-tone-picker-menu-color)",
-  "--epr-skin-tone-outer-border-color": "var(--epr-dark-skin-tone-outer-border-color)",
-  "--epr-skin-tone-inner-border-color": "var(--epr-dark-skin-tone-inner-border-color)",
-  "--epr-dark-text-color": "var(--epr-highlight-color)",
-  "--epr-dark-hover-bg-color": "#363636f6",
-  "--epr-dark-hover-bg-color-reduced-opacity": "#36363680",
-  "--epr-dark-focus-bg-color": "#474747",
-  "--epr-dark-search-input-bg-color": "#333333",
-  "--epr-dark-category-label-bg-color": "#222222e6",
-  "--epr-dark-picker-border-color": "#151617",
-  "--epr-dark-bg-color": "#222222",
-  "--epr-dark-reactions-bg-color": "#22222290",
-  "--epr-dark-search-input-bg-color-active": "var(--epr-dark)",
-  "--epr-dark-emoji-variation-indicator-color": "#444",
-  "--epr-dark-category-icon-active-color": "#6AA9DD",
-  "--epr-dark-category-icon-inactive-color": "#C0C0BF",
-  "--epr-dark-skin-tone-picker-menu-color": "#22222295",
-  "--epr-dark-skin-tone-outer-border-color": "var(--epr-dark-picker-border-color)",
-  "--epr-dark-skin-tone-inner-border-color": "#00000000"
-};
-var styles = /* @__PURE__ */ (() => stylesheet.create({
-  main: {
-    ".": ["epr-main", "EmojiPickerReact" /* emojiPicker */],
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: "var(--epr-picker-border-radius)",
-    borderColor: "var(--epr-picker-border-color)",
-    backgroundColor: "var(--epr-bg-color)",
-    overflow: "hidden",
-    transition: "height 0.3s ease-in-out, background-color 0.1s ease-in-out",
-    "*": {
-      boxSizing: "border-box",
-      // Overridable without a specificity fight (v4 hard-coded sans-serif).
-      fontFamily: "var(--epr-font-family, sans-serif)"
-    }
-  },
-  baseVariables: {
-    // Single-sourced from the public token preset: the default tree and
-    // bare-Root consumers share the same documented defaults. The private
-    // dark-theme values ride along (referenced only by the DarkTheme
-    // overrides below); they stay out of the shared preset so the
-    // primitives bundle keeps its separation marker scan clean.
-    "--": { ...defaultPickerTokens, ...darkThemeBaseVariables }
-  },
-  // color-scheme makes native parts (scrollbars, the search field's
-  // controls) render dark too; without it they stay light on a dark picker.
-  autoThemeDark: {
-    ".": "epr-auto-theme" /* autoTheme */,
-    "@media (prefers-color-scheme: dark)": {
-      "--": DarkTheme,
-      colorScheme: "dark"
+    "--epr-dark": "#000",
+    "--epr-dark-emoji-variation-picker-bg-color": "var(--epr-dark)",
+    "--epr-dark-highlight-color": "#c0c0c0",
+    "--epr-dark-text-color": "var(--epr-highlight-color)",
+    "--epr-dark-hover-bg-color": "#363636f6",
+    "--epr-dark-hover-bg-color-reduced-opacity": "#36363680",
+    "--epr-dark-focus-bg-color": "#474747",
+    "--epr-dark-search-input-bg-color": "#333333",
+    "--epr-dark-category-label-bg-color": "#222222e6",
+    "--epr-dark-picker-border-color": "#151617",
+    "--epr-dark-bg-color": "#222222",
+    "--epr-dark-reactions-bg-color": "#22222290",
+    "--epr-dark-search-input-bg-color-active": "var(--epr-dark)",
+    "--epr-dark-emoji-variation-indicator-color": "#444",
+    "--epr-dark-category-icon-active-color": "#6AA9DD",
+    "--epr-dark-category-icon-inactive-color": "#C0C0BF",
+    "--epr-dark-skin-tone-picker-menu-color": "#22222295",
+    "--epr-dark-skin-tone-outer-border-color": "var(--epr-dark-picker-border-color)",
+    "--epr-dark-skin-tone-inner-border-color": "#00000000"
+}, DarkTheme = {
+    "--epr-emoji-variation-picker-bg-color": "var(--epr-dark-emoji-variation-picker-bg-color)",
+    "--epr-hover-bg-color-reduced-opacity": "var(--epr-dark-hover-bg-color-reduced-opacity)",
+    "--epr-highlight-color": "var(--epr-dark-highlight-color)",
+    "--epr-text-color": "var(--epr-dark-text-color)",
+    "--epr-hover-bg-color": "var(--epr-dark-hover-bg-color)",
+    "--epr-focus-bg-color": "var(--epr-dark-focus-bg-color)",
+    "--epr-search-input-bg-color": "var(--epr-dark-search-input-bg-color)",
+    "--epr-category-label-bg-color": "var(--epr-dark-category-label-bg-color)",
+    "--epr-picker-border-color": "var(--epr-dark-picker-border-color)",
+    "--epr-bg-color": "var(--epr-dark-bg-color)",
+    "--epr-reactions-bg-color": "var(--epr-dark-reactions-bg-color)",
+    "--epr-search-input-bg-color-active": "var(--epr-dark-search-input-bg-color-active)",
+    "--epr-emoji-variation-indicator-color": "var(--epr-dark-emoji-variation-indicator-color)",
+    "--epr-category-icon-active-color": "var(--epr-dark-category-icon-active-color)",
+    "--epr-category-icon-inactive-color": "var(--epr-dark-category-icon-inactive-color)",
+    "--epr-skin-tone-picker-menu-color": "var(--epr-dark-skin-tone-picker-menu-color)",
+    "--epr-skin-tone-outer-border-color": "var(--epr-dark-skin-tone-outer-border-color)",
+    "--epr-skin-tone-inner-border-color": "var(--epr-dark-skin-tone-inner-border-color)",
+    "--epr-dark-text-color": "var(--epr-highlight-color)",
+    "--epr-dark-hover-bg-color": "#363636f6",
+    "--epr-dark-hover-bg-color-reduced-opacity": "#36363680",
+    "--epr-dark-focus-bg-color": "#474747",
+    "--epr-dark-search-input-bg-color": "#333333",
+    "--epr-dark-category-label-bg-color": "#222222e6",
+    "--epr-dark-picker-border-color": "#151617",
+    "--epr-dark-bg-color": "#222222",
+    "--epr-dark-reactions-bg-color": "#22222290",
+    "--epr-dark-search-input-bg-color-active": "var(--epr-dark)",
+    "--epr-dark-emoji-variation-indicator-color": "#444",
+    "--epr-dark-category-icon-active-color": "#6AA9DD",
+    "--epr-dark-category-icon-inactive-color": "#C0C0BF",
+    "--epr-dark-skin-tone-picker-menu-color": "#22222295",
+    "--epr-dark-skin-tone-outer-border-color": "var(--epr-dark-picker-border-color)",
+    "--epr-dark-skin-tone-inner-border-color": "#00000000"
+}, styles = /* @__PURE__ */ (() => stylesheet.create({
+    main: {
+        ".": [ "epr-main", "EmojiPickerReact" /* emojiPicker */ ],
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderRadius: "var(--epr-picker-border-radius)",
+        borderColor: "var(--epr-picker-border-color)",
+        backgroundColor: "var(--epr-bg-color)",
+        overflow: "hidden",
+        transition: "height 0.3s ease-in-out, background-color 0.1s ease-in-out",
+        fontFamily: "var(--epr-font-family, inherit)",
+        "*": {
+            boxSizing: "border-box",
+            // Overridable without a specificity fight (v4 hard-coded sans-serif).
+            fontFamily: "inherit"
+        }
+    },
+    baseVariables: {
+        // Single-sourced from the public token preset: the default tree and
+        // bare-Root consumers share the same documented defaults. The private
+        // dark-theme values ride along (referenced only by the DarkTheme
+        // overrides below); they stay out of the shared preset so the
+        // primitives bundle keeps its separation marker scan clean.
+        "--": {
+            ...defaultPickerTokens,
+            ...darkThemeBaseVariables
+        }
+    },
+    // color-scheme makes native parts (scrollbars, the search field's
+    // controls) render dark too; without it they stay light on a dark picker.
+    autoThemeDark: {
+        ".": "epr-auto-theme" /* autoTheme */ ,
+        "@media (prefers-color-scheme: dark)": {
+            "--": DarkTheme,
+            colorScheme: "dark"
+        }
+    },
+    darkTheme: {
+        ".": "epr-dark-theme" /* darkTheme */ ,
+        "--": DarkTheme,
+        colorScheme: "dark"
     }
-  },
-  darkTheme: {
-    ".": "epr-dark-theme" /* darkTheme */,
-    "--": DarkTheme,
-    colorScheme: "dark"
-  }
-}))();
+}))(), NATIVE_ATTRIBUTES = /* @__PURE__ */ new Set([ "id", "title", "lang", "dir" ]);
 
-// src/EmojiPickerReact.tsx
-function EmojiPicker(props) {
-  const rootInput = props;
-  const {
-    theme: legacyTheme,
-    colorScheme,
-    width,
-    height,
-    className,
-    style,
-    unstyled,
-    components,
-    open,
-    searchDisabled = false,
-    skinTonesDisabled = false,
-    skinTonePickerLocation = "SEARCH" /* SEARCH */,
-    previewConfig,
-    ...rest
-  } = rootInput;
-  const theme = colorScheme ?? legacyTheme;
-  const showPreview = previewConfig?.showPreview ?? true;
-  const resolvedLocation = resolveSkinTonePickerLocation(
-    skinTonePickerLocation,
-    searchDisabled,
-    showPreview
-  );
-  const defaultConfiguration = {
-    searchDisabled,
-    skinTonesDisabled,
-    skinTonePickerLocation: resolvedLocation,
-    previewConfig,
-    // Closed, as in v4, keeps the picker's state (skin tone, search,
-    // reactions mode) and renders nothing.
-    open: open !== false
-  };
-  const { behaviorProps, unknownProps } = pickBehaviorProps(rest);
-  useUnknownPropsWarning(unknownProps);
-  return /* @__PURE__ */ React3.createElement(DefaultPickerConfiguration.Provider, { value: defaultConfiguration }, /* @__PURE__ */ React3.createElement(
-    Root,
-    {
-      appearance: unstyled ? "none" : "default",
-      components,
-      ...behaviorProps,
-      className: defaultRootClassName(theme, className, unstyled),
-      style: defaultRootStyle({
-        width,
-        height,
-        style,
-        columns: validColumns(props.columns)
-      })
-    },
-    /* @__PURE__ */ React3.createElement(Reactions, null),
-    /* @__PURE__ */ React3.createElement(Panel, null, CONTENT)
-  ));
-}
-var NATIVE_ATTRIBUTES = /* @__PURE__ */ new Set([
-  "id",
-  "title",
-  "lang",
-  "dir"
-]);
 function isNativeAttribute(key) {
-  return NATIVE_ATTRIBUTES.has(key) || key.startsWith("aria-") || key.startsWith("data-");
+    return NATIVE_ATTRIBUTES.has(key) || key.startsWith("aria-") || key.startsWith("data-");
 }
+
 function pickBehaviorProps(props) {
-  const behaviorProps = {};
-  const unknown = [];
-  const values = props;
-  for (const key of Object.keys(values)) {
-    if (isPickerBehaviorProp(key) || isNativeAttribute(key)) {
-      behaviorProps[key] = values[key];
-    } else {
-      unknown.push(key);
-    }
-  }
-  return { behaviorProps, unknownProps: unknown.join(", ") };
-}
-var useUnknownPropsWarning = process.env.NODE_ENV === "production" ? () => void 0 : useDevUnknownPropsWarning;
-function useDevUnknownPropsWarning(unknownProps) {
-  React3.useEffect(() => {
-    if (unknownProps) {
-      console.warn(
-        `[emoji-picker-react] Ignoring unknown prop(s): ${unknownProps}. See docs/v5/MIGRATION.md for removed props.`
-      );
-    }
-  }, [unknownProps]);
+    const behaviorProps = {}, unknown = [], values = props;
+    for (const key of Object.keys(values)) isPickerBehaviorProp(key) || isNativeAttribute(key) ? behaviorProps[key] = values[key] : unknown.push(key);
+    return {
+        behaviorProps,
+        unknownProps: unknown.join(", ")
+    };
 }
-function ContentControl() {
-  const showPreview = usePreviewConfig().showPreview;
-  const skinTonesDisabled = useSkinTonesDisabledConfig();
-  const toneInPreview = useIsSkinToneInPreview();
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Header, null), /* @__PURE__ */ React3.createElement(Viewport, null, /* @__PURE__ */ React3.createElement(List, null), /* @__PURE__ */ React3.createElement(Empty, null), /* @__PURE__ */ React3.createElement(Loading, null), /* @__PURE__ */ React3.createElement(LoadError, null)), showPreview && /* @__PURE__ */ React3.createElement(Preview, null, !skinTonesDisabled && toneInPreview && /* @__PURE__ */ React3.createElement(SkinTone, { orientation: "vertical" })));
-}
-var CONTENT = /* @__PURE__ */ React3.createElement(ContentControl);
-var EmojiPickerReact_default = /* @__PURE__ */ React3.memo(EmojiPicker, compareConfig);
+
+var useUnknownPropsWarning = "production" === process.env.NODE_ENV ? () => {} : function useDevUnknownPropsWarning(unknownProps) {
+    React3.useEffect((() => {
+        unknownProps && console.warn(`[emoji-picker-react] Ignoring unknown prop(s): ${unknownProps}. See docs/v5/MIGRATION.md for removed props.`);
+    }), [ unknownProps ]);
+}, CONTENT = /* @__PURE__ */ React3.createElement((function ContentControl() {
+    const showPreview = usePreviewConfig().showPreview, skinTonesDisabled = useSkinTonesDisabledConfig(), toneInPreview = useIsSkinToneInPreview();
+    /* @__PURE__ */
+    return React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Header, null), /* @__PURE__ */ React3.createElement(Viewport, null, /* @__PURE__ */ React3.createElement(List, null), /* @__PURE__ */ React3.createElement(Empty, null), /* @__PURE__ */ React3.createElement(Loading, null), /* @__PURE__ */ React3.createElement(LoadError, null)), showPreview && /* @__PURE__ */ React3.createElement(Preview, null, !skinTonesDisabled && toneInPreview && /* @__PURE__ */ React3.createElement(SkinTone, {
+        orientation: "vertical"
+    })));
+})), EmojiPickerReact_default = /* @__PURE__ */ React3.memo((
+// src/EmojiPickerReact.tsx
+function EmojiPicker(props) {
+    const rootInput = props, {theme: legacyTheme, colorScheme, width, height, className, style, unstyled, components, open, searchDisabled = !1, skinTonesDisabled = !1, skinTonePickerLocation = "SEARCH" /* SEARCH */ , previewConfig, ...rest} = rootInput, theme = colorScheme ?? legacyTheme, defaultConfiguration = {
+        searchDisabled,
+        skinTonesDisabled,
+        skinTonePickerLocation: resolveSkinTonePickerLocation(skinTonePickerLocation, searchDisabled, previewConfig?.showPreview ?? !0),
+        previewConfig,
+        // Closed, as in v4, keeps the picker's state (skin tone, search,
+        // reactions mode) and renders nothing.
+        open: !1 !== open
+    }, {behaviorProps, unknownProps} = pickBehaviorProps(rest);
+    return useUnknownPropsWarning(unknownProps), /* @__PURE__ */ React3.createElement(DefaultPickerConfiguration.Provider, {
+        value: defaultConfiguration
+    }, /* @__PURE__ */ React3.createElement(Root, {
+        appearance: unstyled ? "none" : "default",
+        components,
+        ...behaviorProps,
+        className: defaultRootClassName(theme, className, unstyled),
+        style: defaultRootStyle({
+            width,
+            height,
+            style,
+            columns: validColumns(props.columns)
+        })
+    }, 
+    /* @__PURE__ */ React3.createElement(Reactions, null), 
+    /* @__PURE__ */ React3.createElement(Panel, null, CONTENT)));
+}), compareConfig);
 
 // src/components/ErrorBoundary.tsx
 import * as React4 from "react";
+
 var ErrorBoundary = class extends React4.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("Emoji Picker React failed to render:", error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return null;
+    constructor(props) {
+        super(props), this.state = {
+            hasError: !1
+        };
+    }
+    static getDerivedStateFromError() {
+        return {
+            hasError: !0
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("Emoji Picker React failed to render:", error, errorInfo);
+    }
+    render() {
+        return this.state.hasError ? null : this.props.children;
     }
-    return this.props.children;
-  }
 };
 
 // src/components/emoji/ExportedEmoji.tsx
 import * as React5 from "react";
-function ExportedEmoji({
-  unified,
-  size = 32,
-  emojiStyle,
-  lazyLoad = false,
-  getEmojiUrl,
-  emojiUrl
-}) {
-  if (!unified && !emojiUrl && !getEmojiUrl) {
-    return null;
-  }
-  return /* @__PURE__ */ React5.createElement(
-    ViewOnlyEmoji,
-    {
-      unified,
-      size,
-      emojiStyle: resolveEmojiStyle(emojiStyle, emojiUrl || getEmojiUrl),
-      lazyLoad,
-      getEmojiUrl: emojiUrl ? () => emojiUrl : getEmojiUrl
-    }
-  );
+
+function ExportedEmoji({unified, size = 32, emojiStyle, lazyLoad = !1, getEmojiUrl, emojiUrl}) {
+    return unified || emojiUrl || getEmojiUrl ? /* @__PURE__ */ React5.createElement(ViewOnlyEmoji, {
+        unified,
+        size,
+        emojiStyle: resolveEmojiStyle(emojiStyle, emojiUrl || getEmojiUrl),
+        lazyLoad,
+        getEmojiUrl: emojiUrl ? () => emojiUrl : getEmojiUrl
+    }) : null;
 }
 
 // src/index.tsx
 function EmojiPicker2(props) {
-  const MutableConfigRef = useDefineMutableConfig({
-    onEmojiClick: props.onEmojiClick,
-    onReactionClick: props.onReactionClick,
-    onSkinToneChange: props.onSkinToneChange,
-    onSearchChange: props.onSearchChange,
-    onReactionsModeChange: props.onReactionsModeChange
-  });
-  return /* @__PURE__ */ React6.createElement(ErrorBoundary, null, /* @__PURE__ */ React6.createElement(MutableConfigProvider, { value: MutableConfigRef, inheritToRoot: true }, /* @__PURE__ */ React6.createElement(EmojiPickerReact_default, { ...props })));
+    const MutableConfigRef = useDefineMutableConfig({
+        onEmojiClick: props.onEmojiClick,
+        onReactionClick: props.onReactionClick,
+        onSkinToneChange: props.onSkinToneChange,
+        onSearchChange: props.onSearchChange,
+        onReactionsModeChange: props.onReactionsModeChange
+    });
+    /* @__PURE__ */
+    return React6.createElement(ErrorBoundary, null, /* @__PURE__ */ React6.createElement(MutableConfigProvider, {
+        value: MutableConfigRef,
+        inheritToRoot: !0
+    }, /* @__PURE__ */ React6.createElement(EmojiPickerReact_default, {
+        ...props
+    })));
 }
-export {
-  Categories,
-  ExportedEmoji as Emoji,
-  EmojiStyle,
-  SkinTonePickerLocation,
-  SkinTones,
-  SuggestionMode,
-  Theme,
-  EmojiPicker2 as default,
-  emojiByUnified
-};
+
+export { Categories, ExportedEmoji as Emoji, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme, EmojiPicker2 as default, emojiByUnified };