@oxy.so/bloom 5.1.0 → 5.1.1

package/lib/module/chat-composer/ComposerAttachmentStrip.web.js

@@ -0,0 +1,8 @@
+"use strict";
+
+import { ComposerIconButton } from "./ComposerIconButton.web.js";
+import { createComposerAttachmentStrip } from "./create-composer-attachment-strip.js";
+export const ComposerAttachmentStrip = createComposerAttachmentStrip({
+  ComposerIconButton
+});
+//# sourceMappingURL=ComposerAttachmentStrip.web.js.map

package/lib/module/chat-composer/ComposerAttachmentStrip.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ComposerIconButton","createComposerAttachmentStrip","ComposerAttachmentStrip"],"sourceRoot":"../../../src","sources":["chat-composer/ComposerAttachmentStrip.web.tsx"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,6BAA0B;AAC7D,SAASC,6BAA6B,QAAQ,uCAAoC;AAElF,OAAO,MAAMC,uBAAuB,GAAGD,6BAA6B,CAAC;EAAED;AAAmB,CAAC,CAAC","ignoreList":[]}

package/lib/module/chat-composer/ComposerBanner.js

@@ -1,166 +1,8 @@
 "use strict";
 
-/**
- * The stack above the input: a reply / edit / forward preview, or the one-line
- * `note` a slow-mode countdown and a scheduled send use.
- *
- * Every banner is the same row — rail, glyph, optional thumbnail, two lines of
- * text, a close button — because they are the same affordance ("the next
- * message is about THIS, and here is how to get out of it"). `note` drops the
- * rail and the surface, which is the difference between "you are in a mode" and
- * "here is a fact about sending".
- */
-import React from 'react';
-import { Image, View } from 'react-native';
-import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
-import { useImageResolver } from "../image-resolver/context.js";
-import { useTheme } from "../theme/use-theme.js";
-import { Text } from "../typography/index.js";
 import { ComposerIconButton } from './ComposerIconButton';
-import { BANNER_ICONS, BANNER_RADIUS, BANNER_RAIL_WIDTH, resolveChatComposerPalette } from "./shared.js";
-import { useCommonMessages } from "../locale/common-messages.js";
-
-/** A URL passes through; a bare id goes to the app's `ImageResolver`. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function isUrl(value) {
-  return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
-}
-export function ComposerBanner({
-  kind,
-  title,
-  preview,
-  thumbnail,
-  icon,
-  accentColor,
-  onClose,
-  closeLabel: closeLabelProp,
-  trailing,
-  style,
-  testID,
-  accessibilityLabel
-}) {
-  const common = useCommonMessages();
-  const closeLabel = closeLabelProp ?? common.cancel;
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme);
-  const resolveImage = useImageResolver();
-  const Icon = icon ?? BANNER_ICONS[kind];
-  const accent = accentColor ?? palette.accent;
-  const note = kind === 'note';
-  const thumbUri = thumbnail === undefined ? undefined : isUrl(thumbnail) ? thumbnail : resolveImage?.(thumbnail, 'thumb');
-  if (note) {
-    return /*#__PURE__*/_jsxs(View, {
-      accessibilityRole: "text",
-      accessibilityLabel: accessibilityLabel ?? (preview ? `${title}. ${preview}` : title),
-      style: [{
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingLeft: 10,
-        paddingRight: 6,
-        paddingTop: 2,
-        paddingBottom: 2
-      }, style],
-      testID: testID,
-      children: [/*#__PURE__*/_jsx(Icon, {
-        width: 14,
-        height: 14,
-        fill: palette.iconSecondary
-      }), /*#__PURE__*/_jsx(Text, {
-        variant: "caption-1-regular",
-        numberOfLines: 1,
-        style: {
-          color: palette.textSecondary,
-          flexShrink: 1
-        },
-        children: title
-      }), preview ? /*#__PURE__*/_jsx(Text, {
-        variant: "caption-1-regular",
-        numberOfLines: 1,
-        style: {
-          color: palette.textPlaceholder,
-          flexShrink: 1
-        },
-        children: preview
-      }) : null, /*#__PURE__*/_jsx(View, {
-        style: {
-          flexGrow: 1
-        }
-      }), trailing, onClose ? /*#__PURE__*/_jsx(ComposerIconButton, {
-        icon: RiCloseLine,
-        accessibilityLabel: closeLabel,
-        onPress: onClose,
-        size: 24,
-        iconSize: 14
-      }) : null]
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    accessibilityLabel: accessibilityLabel ?? (preview ? `${title}. ${preview}` : title),
-    style: [{
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 10,
-      borderRadius: BANNER_RADIUS,
-      backgroundColor: palette.accentSoft,
-      paddingLeft: 8,
-      paddingRight: 4,
-      paddingTop: 6,
-      paddingBottom: 6
-    }, style],
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(View, {
-      testID: testID ? `${testID}-rail` : undefined,
-      style: {
-        width: BANNER_RAIL_WIDTH,
-        alignSelf: 'stretch',
-        minHeight: 32,
-        borderRadius: 2,
-        backgroundColor: accent
-      }
-    }), /*#__PURE__*/_jsx(Icon, {
-      width: 18,
-      height: 18,
-      fill: accent
-    }), thumbUri ? /*#__PURE__*/_jsx(Image, {
-      source: {
-        uri: thumbUri
-      },
-      accessibilityIgnoresInvertColors: true,
-      style: {
-        width: 32,
-        height: 32,
-        borderRadius: 8,
-        backgroundColor: palette.inset
-      }
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: {
-        flexShrink: 1,
-        flexGrow: 1,
-        gap: 1
-      },
-      children: [/*#__PURE__*/_jsx(Text, {
-        variant: "body-2-medium",
-        numberOfLines: 1,
-        style: {
-          color: accent
-        },
-        children: title
-      }), preview ? /*#__PURE__*/_jsx(Text, {
-        variant: "body-2-regular",
-        numberOfLines: 1,
-        style: {
-          color: palette.textSecondary
-        },
-        children: preview
-      }) : null]
-    }), trailing, onClose ? /*#__PURE__*/_jsx(ComposerIconButton, {
-      icon: RiCloseLine,
-      accessibilityLabel: closeLabel,
-      onPress: onClose,
-      size: 28,
-      iconSize: 16
-    }) : null]
-  });
-}
+import { createComposerBanner } from "./create-composer-banner.js";
+export const ComposerBanner = createComposerBanner({
+  ComposerIconButton
+});
 //# sourceMappingURL=ComposerBanner.js.map

package/lib/module/chat-composer/ComposerBanner.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Image","View","RiCloseLine","useImageResolver","useTheme","Text","ComposerIconButton","BANNER_ICONS","BANNER_RADIUS","BANNER_RAIL_WIDTH","resolveChatComposerPalette","useCommonMessages","jsx","_jsx","jsxs","_jsxs","isUrl","value","test","startsWith","ComposerBanner","kind","title","preview","thumbnail","icon","accentColor","onClose","closeLabel","closeLabelProp","trailing","style","testID","accessibilityLabel","common","cancel","theme","palette","resolveImage","Icon","accent","note","thumbUri","undefined","accessibilityRole","flexDirection","alignItems","gap","paddingLeft","paddingRight","paddingTop","paddingBottom","children","width","height","fill","iconSecondary","variant","numberOfLines","color","textSecondary","flexShrink","textPlaceholder","flexGrow","onPress","size","iconSize","borderRadius","backgroundColor","accentSoft","alignSelf","minHeight","source","uri","accessibilityIgnoresInvertColors","inset"],"sourceRoot":"../../../src","sources":["chat-composer/ComposerBanner.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ComposerIconButton","createComposerBanner","ComposerBanner"],"sourceRoot":"../../../src","sources":["chat-composer/ComposerBanner.tsx"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,oBAAoB,QAAQ,6BAA0B;AAE/D,OAAO,MAAMC,cAAc,GAAGD,oBAAoB,CAAC;EAAED;AAAmB,CAAC,CAAC","ignoreList":[]}

package/lib/module/chat-composer/ComposerBanner.web.js

@@ -0,0 +1,8 @@
+"use strict";
+
+import { ComposerIconButton } from "./ComposerIconButton.web.js";
+import { createComposerBanner } from "./create-composer-banner.js";
+export const ComposerBanner = createComposerBanner({
+  ComposerIconButton
+});
+//# sourceMappingURL=ComposerBanner.web.js.map

package/lib/module/chat-composer/ComposerBanner.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ComposerIconButton","createComposerBanner","ComposerBanner"],"sourceRoot":"../../../src","sources":["chat-composer/ComposerBanner.web.tsx"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,6BAA0B;AAC7D,SAASC,oBAAoB,QAAQ,6BAA0B;AAE/D,OAAO,MAAMC,cAAc,GAAGD,oBAAoB,CAAC;EAAED;AAAmB,CAAC,CAAC","ignoreList":[]}

package/lib/module/chat-composer/EmojiPicker.js

@@ -1,445 +1,10 @@
 "use strict";
 
-import { useCardFill } from "../card/use-card-fill.js";
 import { Surface } from '../surface';
-/**
- * A controlled, presentational emoji grid.
- *
- * BLOOM SHIPS NO EMOJI DATASET, and that is the design rather than an omission:
- * a full set with names and keywords is tens of kilobytes that every app with
- * its own would still pay for, and emoji names are localised. `groups` arrives
- * as a prop. The object form of an entry (`{ char, name, keywords }`) is what
- * the built-in search matches on; a dataset of bare glyphs still renders, it
- * just only matches a pasted glyph — which is the honest behaviour, not a
- * silent one.
- *
- * The grid is a `FlatList` on BOTH platforms, over pre-chunked ROWS rather than
- * single emoji, with exact `getItemLayout` offsets. A few thousand entries is
- * the normal case: at eight columns that is a few hundred rows, of which a
- * dozen are mounted, and the exact offsets are what let a category tab jump
- * straight to its header instead of estimating.
- */
-import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Button } from '../button';
-import { FlatList, Pressable, TextInput, View } from 'react-native';
-import { RiEmotionLine } from "../icons/remix/RiEmotionLine.js";
-import { RiSearchLine } from "../icons/remix/RiSearchLine.js";
-import { useControllableState } from "../hooks/use-controllable-state.js";
-import { useTheme } from "../theme/use-theme.js";
-import { Text } from "../typography/index.js";
-import { TYPE_SCALE } from "../typography/scale.js";
-import { EMOJI_CATEGORY_ICONS, EMOJI_CATEGORY_SIZE, EMOJI_CELL, PANEL_RADIUS, SKIN_TONE_SWATCHES, applySkinTone, emojiChar, filterEmojiGroups, resolveChatComposerPalette } from "./shared.js";
-import { dataHook, useChatComposerWebCss } from "./web-hooks.js";
-import { useMessages } from "../locale/messages.js";
-import { CHAT_COMPOSER_MESSAGES } from "./messages.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const HEADER_HEIGHT = 26;
-const EMOJI_TAB = '__emoji';
-function chunk(entries, columns) {
-  const out = [];
-  for (let i = 0; i < entries.length; i += columns) out.push(entries.slice(i, i + columns));
-  return out;
-}
-function entryName(entry, char) {
-  return typeof entry === 'string' ? char : entry.name ?? char;
-}
-export function EmojiPicker({
-  groups,
-  onSelectEmoji,
-  activeGroup,
-  defaultActiveGroup,
-  onActiveGroupChange,
-  query,
-  defaultQuery = '',
-  onQueryChange,
-  filter = true,
-  frequentlyUsed,
-  skinTone,
-  defaultSkinTone = 0,
-  onSkinToneChange,
-  columns = 8,
-  height = 288,
-  tabs,
-  activeTab,
-  onActiveTabChange,
-  labels: labelOverrides,
-  style,
-  testID,
-  accessibilityLabel: accessibilityLabelProp
-}) {
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme, useCardFill(style));
-  useChatComposerWebCss();
-  const {
-    messages
-  } = useMessages(CHAT_COMPOSER_MESSAGES);
-  const accessibilityLabel = accessibilityLabelProp ?? messages.emojiPicker;
-  const labels = {
-    search: messages.searchEmoji,
-    empty: messages.noEmoji,
-    frequent: messages.frequentlyUsed,
-    skinTone: messages.skinTone,
-    emojiTab: messages.emoji,
-    ...labelOverrides
-  };
-  const [search, setSearch] = useControllableState({
-    value: query,
-    defaultValue: defaultQuery,
-    onChange: onQueryChange
-  });
-  const [tone, setTone] = useControllableState({
-    value: skinTone,
-    defaultValue: defaultSkinTone,
-    onChange: onSkinToneChange
-  });
-  const [category, setCategory] = useControllableState({
-    value: activeGroup,
-    defaultValue: defaultActiveGroup ?? groups[0]?.key ?? '',
-    onChange: onActiveGroupChange
-  });
-  const [tab, setTab] = useControllableState({
-    value: activeTab,
-    defaultValue: EMOJI_TAB,
-    onChange: onActiveTabChange
-  });
-  const [toneOpen, setToneOpen] = useState(false);
-  const listRef = useRef(null);
-  const visible = useMemo(() => filter ? filterEmojiGroups(groups, search) : groups, [filter, groups, search]);
-  const {
-    rows,
-    offsets,
-    heights,
-    headerIndex
-  } = useMemo(() => {
-    const all = [];
-    if (frequentlyUsed && frequentlyUsed.length > 0 && !search.trim()) {
-      all.push({
-        key: 'frequent',
-        label: labels.frequent,
-        emojis: frequentlyUsed
-      });
-    }
-    all.push(...visible);
-    const built = [];
-    const index = {};
-    for (const group of all) {
-      index[group.key] = built.length;
-      built.push({
-        kind: 'header',
-        key: `h-${group.key}`,
-        label: group.label
-      });
-      chunk(group.emojis, columns).forEach((entries, i) => built.push({
-        kind: 'emojis',
-        key: `${group.key}-${i}`,
-        entries
-      }));
-    }
-    const rowHeights = built.map(row => row.kind === 'header' ? HEADER_HEIGHT : EMOJI_CELL);
-    const rowOffsets = [];
-    let running = 0;
-    for (const h of rowHeights) {
-      rowOffsets.push(running);
-      running += h;
-    }
-    return {
-      rows: built,
-      offsets: rowOffsets,
-      heights: rowHeights,
-      headerIndex: index
-    };
-  }, [columns, frequentlyUsed, labels.frequent, search, visible]);
-  const jumpTo = useCallback(key => {
-    setCategory(key);
-    const at = headerIndex[key];
-    if (at === undefined) return;
-    listRef.current?.scrollToOffset({
-      offset: offsets[at] ?? 0,
-      animated: true
-    });
-  }, [headerIndex, offsets, setCategory]);
-  const renderRow = useCallback(({
-    item
-  }) => {
-    if (item.kind === 'header') {
-      return /*#__PURE__*/_jsx(View, {
-        style: {
-          height: HEADER_HEIGHT,
-          justifyContent: 'flex-end',
-          paddingLeft: 6
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          variant: "caption-1-medium",
-          style: {
-            color: palette.textSecondary
-          },
-          children: item.label
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(View, {
-      style: {
-        flexDirection: 'row',
-        height: EMOJI_CELL
-      },
-      children: item.entries.map((entry, i) => {
-        const base = emojiChar(entry);
-        const char = applySkinTone(base, tone);
-        return /*#__PURE__*/_jsx(Button, {
-          appearance: "plain",
-          tone: "neutral",
-          accessibilityLabel: entryName(entry, char),
-          onPress: () => onSelectEmoji?.(char),
-          style: {
-            padding: 0,
-            minWidth: 0,
-            minHeight: 0,
-            flexShrink: 0,
-            width: EMOJI_CELL,
-            height: EMOJI_CELL,
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 8
-          },
-          testID: testID ? `${testID}-emoji-${base}` : undefined,
-          children: /*#__PURE__*/_jsx(Text, {
-            variant: "title-2-regular",
-            children: char
-          })
-        }, `${base}-${i}`);
-      })
-    });
-  }, [onSelectEmoji, palette.textSecondary, testID, tone]);
-  const panel = {
-    borderRadius: PANEL_RADIUS,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 8,
-    paddingRight: 8,
-    gap: 8,
-    '--bloom-chat-composer-ring': palette.focusRing
-  };
-  const topTabs = [{
-    key: EMOJI_TAB,
-    label: labels.emojiTab,
-    icon: RiEmotionLine
-  }, ...(tabs ?? [])];
-  const activeCustom = tabs?.find(t => t.key === tab);
-  return /*#__PURE__*/_jsxs(Surface, {
-    accessibilityLabel: accessibilityLabel,
-    style: [panel, style],
-    testID: testID,
-    children: [tabs && tabs.length > 0 ? /*#__PURE__*/_jsx(View, {
-      accessibilityRole: "tablist",
-      style: {
-        flexDirection: 'row',
-        gap: 4
-      },
-      testID: testID ? `${testID}-tabs` : undefined,
-      children: topTabs.map(entry => {
-        const selected = entry.key === tab;
-        return /*#__PURE__*/_jsx(Pressable, {
-          ...dataHook('bloomChatComposerRow'),
-          accessibilityRole: "tab",
-          accessibilityLabel: entry.label,
-          "aria-selected": selected,
-          accessibilityState: {
-            selected
-          },
-          onPress: () => setTab(entry.key),
-          style: {
-            flexGrow: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: 30,
-            borderRadius: 9999,
-            backgroundColor: selected ? palette.accentSoft : 'transparent'
-          },
-          testID: testID ? `${testID}-tab-${entry.key}` : undefined,
-          children: /*#__PURE__*/_jsx(Text, {
-            variant: "body-2-medium",
-            style: {
-              color: selected ? palette.accentStrong : palette.textSecondary
-            },
-            children: entry.label
-          })
-        }, entry.key);
-      })
-    }) : null, activeCustom ? /*#__PURE__*/_jsx(View, {
-      style: {
-        height
-      },
-      children: activeCustom.content
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 6
-        },
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: {
-            flexGrow: 1,
-            flexShrink: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            height: 32,
-            borderRadius: 10,
-            backgroundColor: palette.inset,
-            paddingLeft: 8,
-            paddingRight: 8
-          },
-          children: [/*#__PURE__*/_jsx(RiSearchLine, {
-            width: 16,
-            height: 16,
-            fill: palette.iconSecondary
-          }), /*#__PURE__*/_jsx(TextInput, {
-            ...dataHook('bloomChatComposerInput'),
-            accessibilityLabel: labels.search,
-            placeholder: labels.search,
-            placeholderTextColor: palette.textPlaceholder,
-            value: search,
-            onChangeText: setSearch,
-            selectionColor: palette.accent,
-            style: {
-              flexGrow: 1,
-              flexShrink: 1,
-              padding: 0,
-              margin: 0,
-              ...TYPE_SCALE['body-2-regular'],
-              color: palette.text,
-              backgroundColor: 'transparent'
-            },
-            testID: testID ? `${testID}-search` : undefined
-          })]
-        }), /*#__PURE__*/_jsx(Button, {
-          appearance: "plain",
-          tone: "neutral",
-          accessibilityLabel: labels.skinTone,
-          "aria-expanded": toneOpen,
-          onPress: () => setToneOpen(!toneOpen),
-          style: {
-            padding: 0,
-            minWidth: 0,
-            minHeight: 0,
-            flexShrink: 0,
-            width: 32,
-            height: 32,
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: 9999,
-            backgroundColor: toneOpen ? palette.hover : palette.inset
-          },
-          testID: testID ? `${testID}-skin-tone` : undefined,
-          children: /*#__PURE__*/_jsx(Text, {
-            variant: "body-regular",
-            children: SKIN_TONE_SWATCHES[tone] ?? SKIN_TONE_SWATCHES[0]
-          })
-        })]
-      }), toneOpen ? /*#__PURE__*/_jsx(View, {
-        style: {
-          flexDirection: 'row',
-          gap: 2,
-          justifyContent: 'flex-end'
-        },
-        testID: testID ? `${testID}-skin-tones` : undefined,
-        children: SKIN_TONE_SWATCHES.map((swatch, index) => {
-          const selected = index === tone;
-          return /*#__PURE__*/_jsx(Button, {
-            appearance: "plain",
-            tone: "neutral",
-            accessibilityLabel: `${labels.skinTone} ${index + 1}`,
-            pressed: selected,
-            onPress: () => {
-              setTone(index);
-              setToneOpen(false);
-            },
-            style: {
-              padding: 0,
-              minWidth: 0,
-              minHeight: 0,
-              flexShrink: 0,
-              width: 30,
-              height: 30,
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: 9999,
-              backgroundColor: selected ? palette.accentSoft : 'transparent'
-            },
-            testID: testID ? `${testID}-skin-tone-${index}` : undefined,
-            children: /*#__PURE__*/_jsx(Text, {
-              variant: "body-regular",
-              children: swatch
-            })
-          }, index);
-        })
-      }) : null, /*#__PURE__*/_jsx(View, {
-        accessibilityRole: "tablist",
-        style: {
-          flexDirection: 'row',
-          justifyContent: 'space-between'
-        },
-        testID: testID ? `${testID}-categories` : undefined,
-        children: groups.map(group => {
-          const selected = group.key === category;
-          const Glyph = group.icon ?? EMOJI_CATEGORY_ICONS[group.key] ?? RiEmotionLine;
-          return /*#__PURE__*/_jsx(Pressable, {
-            ...dataHook('bloomChatComposerControl'),
-            accessibilityRole: "tab",
-            accessibilityLabel: group.label,
-            "aria-selected": selected,
-            accessibilityState: {
-              selected
-            },
-            onPress: () => jumpTo(group.key),
-            style: {
-              width: EMOJI_CATEGORY_SIZE,
-              height: EMOJI_CATEGORY_SIZE,
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderRadius: 9999,
-              backgroundColor: selected ? palette.accentSoft : 'transparent'
-            },
-            testID: testID ? `${testID}-category-${group.key}` : undefined,
-            children: /*#__PURE__*/_jsx(Glyph, {
-              width: 18,
-              height: 18,
-              fill: selected ? palette.accentStrong : palette.iconSecondary
-            })
-          }, group.key);
-        })
-      }), rows.length === 0 ? /*#__PURE__*/_jsx(View, {
-        style: {
-          height,
-          alignItems: 'center',
-          justifyContent: 'center'
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          variant: "body-2-regular",
-          style: {
-            color: palette.textSecondary
-          },
-          children: labels.empty
-        })
-      }) : /*#__PURE__*/_jsx(FlatList, {
-        ref: listRef,
-        ...dataHook('bloomChatComposerScroll'),
-        data: rows,
-        keyExtractor: row => row.key,
-        renderItem: renderRow,
-        getItemLayout: (_data, index) => ({
-          length: heights[index] ?? EMOJI_CELL,
-          offset: offsets[index] ?? 0,
-          index
-        }),
-        style: {
-          height
-        },
-        showsVerticalScrollIndicator: false,
-        testID: testID ? `${testID}-grid` : undefined
-      })]
-    })]
-  });
-}
+import { createEmojiPicker } from "./create-emoji-picker.js";
+export const EmojiPicker = createEmojiPicker({
+  Surface,
+  Button
+});
 //# sourceMappingURL=EmojiPicker.js.map