@oxy.so/bloom 5.0.0 → 5.1.1

package/src/chat-composer/ChatComposer.tsx

@@ -1,463 +1,6 @@
-/**
- * The message input bar of a person-to-person chat: a radius-24 pill with a
- * left attach button, an autosizing field, an emoji button and a right control
- * that swaps between a mic (nothing to send) and an accent send disc (there is).
- *
- * Presentational. Every piece of state — the draft, the banners, the pending
- * attachments, which suggestion is highlighted — arrives as a prop, because the
- * app owns drafts per conversation and a composer that kept its own would lose
- * them on every navigation.
- */
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import {
-  TextInput,
-  View,
-  type NativeSyntheticEvent,
-  type TextInputContentSizeChangeEventData,
-  type TextInputKeyPressEventData,
-} from 'react-native';
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useReducedMotion,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { RiAddLine } from '../icons/remix/RiAddLine';
-import { RiCameraLine } from '../icons/remix/RiCameraLine';
-import { RiEmotionLine } from '../icons/remix/RiEmotionLine';
-import { RiForbidLine } from '../icons/remix/RiForbidLine';
-import { RiMic2Line } from '../icons/remix/RiMic2Line';
-import { RiSendPlaneLine } from '../icons/remix/RiSendPlaneLine';
-import { useControllableState } from '../hooks/use-controllable-state';
-import { useTextareaAutosize } from '../hooks/use-textarea-autosize';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
-import { TYPE_SCALE } from '../typography/scale';
 import { ComposerAttachmentStrip } from './ComposerAttachmentStrip';
 import { ComposerIconButton } from './ComposerIconButton';
-import {
-  BAR_PADDING,
-  BAR_RADIUS,
-  chatComposerLabels,
-  CONTROL_SIZE,
-  DEFAULT_MAX_LINES,
-  LINE_HEIGHT,
-  SWAP_MS,
-  resolveChatComposerPalette,
-} from './shared';
 import { SuggestionList } from './SuggestionList';
-import type { ChatComposerProps } from './types';
-import { dataHook, IS_WEB, useChatComposerWebCss } from './web-hooks';
-import { useMessages } from '../locale/messages';
-import { CHAT_COMPOSER_MESSAGES } from './messages';
-import { useCommonMessages } from '../locale/common-messages';
-
-const EASE_OUT = Easing.bezier(0, 0, 0.2, 1);
-
-/**
- * One half of the mic ↔ send crossfade.
- *
- * Two things the fade must not break, neither of which the animation expresses:
- *
- * `pointerEvents` is a PROP, not a style entry — react-native-web drops it from
- * a style object silently, and a hidden layer that still takes the press is a
- * send button that fires when the field is empty.
- *
- * The hidden half leaves the ACCESSIBILITY TREE too. Both halves stay mounted so
- * they can cross-fade, so without this every composer announces "Send" and
- * "Record a voice message" side by side and only one of them does anything.
- * `aria-hidden` is what react-native-web reads and
- * `importantForAccessibility` is what React Native reads; a surface that sets
- * one of the two is hidden on one platform only.
- */
-function SwapLayer({ shown, children }: { shown: boolean; children: React.ReactNode }) {
-  const reducedMotion = useReducedMotion();
-  const progress = useSharedValue(shown ? 1 : 0);
-  React.useEffect(() => {
-    progress.value = reducedMotion
-      ? shown
-        ? 1
-        : 0
-      : withTiming(shown ? 1 : 0, { duration: SWAP_MS, easing: EASE_OUT });
-  }, [shown, reducedMotion, progress]);
-  const animated = useAnimatedStyle(() => ({ opacity: progress.value }), [progress]);
-  return (
-    <Animated.View
-      pointerEvents={shown ? 'auto' : 'none'}
-      aria-hidden={!shown}
-      accessibilityElementsHidden={!shown}
-      importantForAccessibility={shown ? 'auto' : 'no-hide-descendants'}
-      style={[{ position: 'absolute', top: 0, left: 0 }, animated]}>
-      {children}
-    </Animated.View>
-  );
-}
-
-/** A DOM keyboard event as react-native-web hands it to `onKeyPress`. */
-type WebKeyEvent = TextInputKeyPressEventData & {
-  shiftKey?: boolean;
-  metaKey?: boolean;
-  ctrlKey?: boolean;
-  altKey?: boolean;
-  isComposing?: boolean;
-};
-
-export function ChatComposer({
-  value,
-  defaultValue = '',
-  onValueChange,
-  placeholder: placeholderProp,
-  onSend,
-  sendOn = 'enter',
-  maxLines = DEFAULT_MAX_LINES,
-  minLines = 1,
-  disabled = false,
-  notice,
-  noticeIcon,
-  banner,
-  attachments,
-  onRemoveAttachment,
-  leading,
-  onAttachPress,
-  emojiSlot,
-  onEmojiPress,
-  onCameraPress,
-  onMicPress,
-  onMicPressIn,
-  onMicPressOut,
-  canSend,
-  recorder,
-  suggestions,
-  suggestionKind = 'mention',
-  activeIndex = -1,
-  onActiveIndexChange,
-  onSelectSuggestion,
-  onEscape,
-  onEditLast,
-  showKeyboardHint = false,
-  inputRef,
-  onFocus,
-  onBlur,
-  labels: labelOverrides,
-  style,
-  testID,
-  accessibilityLabel,
-}: ChatComposerProps) {
-  const theme = useTheme();
-  const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-  const common = useCommonMessages();
-  const palette = resolveChatComposerPalette(theme);
-  useChatComposerWebCss();
-  const labels = useMemo(
-    () => ({ ...chatComposerLabels(messages, common.send), ...labelOverrides }),
-    [common.send, labelOverrides, messages],
-  );
-  const placeholder = placeholderProp ?? messages.message;
-
-  const [text, setText] = useControllableState<string>({
-    value,
-    defaultValue,
-    onChange: onValueChange,
-  });
-
-  const localRef = useRef<TextInput | null>(null);
-  const setFieldRef = useCallback(
-    (node: TextInput | null) => {
-      localRef.current = node;
-      if (inputRef) inputRef.current = node;
-    },
-    [inputRef],
-  );
-
-  const minHeight = Math.max(1, minLines) * LINE_HEIGHT;
-  const maxHeight = Math.max(minLines, maxLines) * LINE_HEIGHT;
-  const [contentHeight, setContentHeight] = useState(minHeight);
-  const height = Math.min(maxHeight, Math.max(minHeight, contentHeight));
-
-  /**
-   * Web autosize measures the node, native reads `onContentSizeChange`.
-   *
-   * They are not interchangeable: react-native-web reports `scrollHeight`,
-   * which never falls below the height already applied, so a field grown to six
-   * lines and then emptied would stay six lines tall. `useTextareaAutosize`
-   * collapses the node to measure it only when the draft may have got SHORTER —
-   * collapsing on every keystroke re-laid-out the whole page three times a key.
-   */
-  useTextareaAutosize(localRef, text, {
-    enabled: IS_WEB,
-    height,
-    minHeight,
-    onMeasure: setContentHeight,
-  });
-
-  const onContentSizeChange = useCallback(
-    (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
-      if (IS_WEB) return;
-      setContentHeight(event.nativeEvent.contentSize.height);
-    },
-    [],
-  );
-
-  const trimmed = text.trim();
-  const hasAttachments = !!attachments && attachments.length > 0;
-  const showSend = canSend ?? (trimmed.length > 0 || hasAttachments);
-
-  const submit = useCallback(() => {
-    if (disabled || !showSend) return;
-    onSend?.(text);
-    if (value === undefined) setText('');
-  }, [disabled, showSend, onSend, text, value, setText]);
-
-  const openSuggestions = !!suggestions && suggestions.length > 0;
-
-  const onKeyPress = useCallback(
-    (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      if (!IS_WEB) return;
-      const native = event.nativeEvent as WebKeyEvent;
-      // An IME candidate window is using the same keys; committing a
-      // composition must never send the half-written word behind it.
-      if (native.isComposing) return;
-      const mod = native.metaKey === true || native.ctrlKey === true;
-
-      if (openSuggestions && (native.key === 'ArrowDown' || native.key === 'ArrowUp')) {
-        event.preventDefault();
-        const count = suggestions?.length ?? 0;
-        const step = native.key === 'ArrowDown' ? 1 : -1;
-        const from = activeIndex < 0 ? (step > 0 ? -1 : 0) : activeIndex;
-        onActiveIndexChange?.((from + step + count) % count);
-        return;
-      }
-      if (native.key === 'Escape') {
-        event.preventDefault();
-        onEscape?.();
-        return;
-      }
-      if (native.key === 'ArrowUp' && text.length === 0) {
-        event.preventDefault();
-        onEditLast?.();
-        return;
-      }
-      if (native.key !== 'Enter') return;
-
-      if (openSuggestions && activeIndex >= 0) {
-        const picked = suggestions?.[activeIndex];
-        if (picked && !picked.disabled) {
-          event.preventDefault();
-          onSelectSuggestion?.(picked, activeIndex);
-          return;
-        }
-      }
-      if (sendOn === 'enter' ? native.shiftKey !== true && !mod : mod) {
-        event.preventDefault();
-        submit();
-      }
-    },
-    [
-      activeIndex,
-      onActiveIndexChange,
-      onEditLast,
-      onEscape,
-      onSelectSuggestion,
-      openSuggestions,
-      sendOn,
-      submit,
-      suggestions,
-      text.length,
-    ],
-  );
-
-  const bar: WebCssStyle = {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    gap: 2,
-    minHeight: CONTROL_SIZE + BAR_PADDING * 2,
-    borderRadius: BAR_RADIUS,
-    borderWidth: 1,
-    borderColor: palette.border,
-    // A disabled bar changes its FILL rather than its opacity. Dimming the
-    // container compounds with each control's own disabled opacity — 0.55 × 0.4
-    // put the send disc at 0.22, which reads as a rendering fault rather than a
-    // state.
-    backgroundColor: disabled ? palette.inset : palette.surface,
-    paddingLeft: BAR_PADDING,
-    paddingRight: BAR_PADDING,
-    paddingTop: BAR_PADDING,
-    paddingBottom: BAR_PADDING,
-    '--bloom-chat-composer-ring': palette.focusRing,
-  };
-
-  const NoticeIcon = noticeIcon ?? RiForbidLine;
-
-  return (
-    <View
-      accessibilityLabel={accessibilityLabel}
-      style={[{ width: '100%', flexDirection: 'column', gap: 6 }, style]}
-      testID={testID}>
-      {openSuggestions ? (
-        <SuggestionList
-          kind={suggestionKind}
-          suggestions={suggestions ?? []}
-          activeIndex={activeIndex}
-          onActiveIndexChange={onActiveIndexChange}
-          onSelectSuggestion={onSelectSuggestion}
-          testID={testID ? `${testID}-suggestions` : undefined}
-        />
-      ) : null}
-
-      {banner}
-
-      {hasAttachments ? (
-        <ComposerAttachmentStrip
-          attachments={attachments ?? []}
-          onRemove={onRemoveAttachment}
-          testID={testID ? `${testID}-attachments` : undefined}
-        />
-      ) : null}
-
-      {recorder ?? (
-        <View style={bar} testID={testID ? `${testID}-bar` : undefined}>
-          {notice !== undefined ? (
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 8,
-                flexGrow: 1,
-                minHeight: CONTROL_SIZE,
-                paddingLeft: 12,
-                paddingRight: 12,
-              }}
-              testID={testID ? `${testID}-notice` : undefined}>
-              {typeof notice === 'string' ? (
-                <>
-                  <NoticeIcon width={16} height={16} fill={palette.iconSecondary} />
-                  <Text
-                    variant="body-2-regular"
-                    numberOfLines={2}
-                    style={{ color: palette.textSecondary, textAlign: 'center' }}>
-                    {notice}
-                  </Text>
-                </>
-              ) : (
-                notice
-              )}
-            </View>
-          ) : (
-            <>
-              {leading ??
-                (onAttachPress ? (
-                  <ComposerIconButton
-                    icon={RiAddLine}
-                    accessibilityLabel={labels.attach}
-                    onPress={onAttachPress}
-                    disabled={disabled}
-                    iconSize={22}
-                    testID={testID ? `${testID}-attach` : undefined}
-                  />
-                ) : null)}
-
-              <View
-                style={{
-                  flexGrow: 1,
-                  flexShrink: 1,
-                  justifyContent: 'center',
-                  minHeight: CONTROL_SIZE,
-                  paddingLeft: 6,
-                  paddingRight: 6,
-                }}>
-                <TextInput
-                  ref={setFieldRef}
-                  {...dataHook('bloomChatComposerInput')}
-                  accessibilityLabel={labels.input}
-                  multiline
-                  editable={!disabled}
-                  value={text}
-                  onChangeText={setText}
-                  onKeyPress={onKeyPress}
-                  onContentSizeChange={onContentSizeChange}
-                  onFocus={onFocus}
-                  onBlur={onBlur}
-                  placeholder={placeholder}
-                  placeholderTextColor={palette.textPlaceholder}
-                  selectionColor={palette.accent}
-                  cursorColor={palette.accent}
-                  scrollEnabled={height >= maxHeight}
-                  style={{
-                    width: '100%',
-                    height,
-                    maxHeight,
-                    padding: 0,
-                    margin: 0,
-                    ...TYPE_SCALE['body-regular'],
-                    fontFamily: IS_WEB ? 'var(--bloom-font-sans)' : 'Inter',
-                    color: disabled ? palette.textSecondary : palette.text,
-                    backgroundColor: 'transparent',
-                  }}
-                  testID={testID ? `${testID}-input` : undefined}
-                />
-              </View>
-
-              {onCameraPress ? (
-                <ComposerIconButton
-                  icon={RiCameraLine}
-                  accessibilityLabel={labels.camera}
-                  onPress={onCameraPress}
-                  disabled={disabled}
-                  testID={testID ? `${testID}-camera` : undefined}
-                />
-              ) : null}
-
-              {emojiSlot ??
-                (onEmojiPress ? (
-                  <ComposerIconButton
-                    icon={RiEmotionLine}
-                    accessibilityLabel={labels.emoji}
-                    onPress={onEmojiPress}
-                    disabled={disabled}
-                    testID={testID ? `${testID}-emoji` : undefined}
-                  />
-                ) : null)}
-
-              <View style={{ width: CONTROL_SIZE, height: CONTROL_SIZE, marginLeft: 2 }}>
-                <SwapLayer shown={showSend}>
-                  <ComposerIconButton
-                    icon={RiSendPlaneLine}
-                    tone="accent"
-                    accessibilityLabel={labels.send}
-                    onPress={submit}
-                    disabled={disabled}
-                    iconSize={18}
-                    testID={testID ? `${testID}-send` : undefined}
-                  />
-                </SwapLayer>
-                <SwapLayer shown={!showSend}>
-                  <ComposerIconButton
-                    icon={RiMic2Line}
-                    accessibilityLabel={labels.mic}
-                    onPress={onMicPress}
-                    onPressIn={onMicPressIn}
-                    onPressOut={onMicPressOut}
-                    disabled={disabled}
-                    testID={testID ? `${testID}-mic` : undefined}
-                  />
-                </SwapLayer>
-              </View>
-            </>
-          )}
-        </View>
-      )}
+import { createChatComposer } from './create-chat-composer';
 
-      {showKeyboardHint && IS_WEB && notice === undefined ? (
-        <Text
-          variant="caption-2-regular"
-          style={{ color: palette.textPlaceholder, paddingLeft: 14 }}>
-          {sendOn === 'enter' ? labels.enterHint : labels.modEnterHint}
-        </Text>
-      ) : null}
-    </View>
-  );
-}
+export const ChatComposer = createChatComposer({ ComposerAttachmentStrip, ComposerIconButton, SuggestionList });

package/src/chat-composer/ChatComposer.web.tsx

@@ -0,0 +1,6 @@
+import { ComposerAttachmentStrip } from './ComposerAttachmentStrip.web';
+import { ComposerIconButton } from './ComposerIconButton.web';
+import { SuggestionList } from './SuggestionList.web';
+import { createChatComposer } from './create-chat-composer';
+
+export const ChatComposer = createChatComposer({ ComposerAttachmentStrip, ComposerIconButton, SuggestionList });

package/src/chat-composer/ComposerAttachmentStrip.tsx

@@ -1,204 +1,4 @@
-/**
- * The pending-attachment strip between the banner stack and the bar.
- *
- * The tile geometry and the rounded-rect progress path are `composer-panel`'s —
- * imported rather than retyped, because a second ring drawn from a second path
- * helper is how two composers end up with rings that close at different angles.
- */
-import React from 'react';
-import { Image, Pressable, ScrollView, View } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-
-import { ringPath } from '../composer-panel/shared';
-import { RiCloseLine } from '../icons/remix/RiCloseLine';
-import { RiFileTextLine } from '../icons/remix/RiFileTextLine';
-import { useImageResolver } from '../image-resolver/context';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
 import { ComposerIconButton } from './ComposerIconButton';
-import { TILE, TILE_RADIUS, resolveChatComposerPalette } from './shared';
-import type { ChatComposerAttachment, ComposerAttachmentStripProps } from './types';
-import { dataHook } from './web-hooks';
-import { useMessages } from '../locale/messages';
-import { CHAT_COMPOSER_MESSAGES } from './messages';
-
-function isUrl(value: string): boolean {
-  return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
-}
-
-function Tile({
-  attachment,
-  size,
-  onRemove,
-  removeLabel,
-  onOpen,
-  openLabel,
-  testID,
-}: {
-  attachment: ChatComposerAttachment;
-  size: number;
-  onRemove?: (id: string) => void;
-  removeLabel: (attachment: ChatComposerAttachment) => string;
-  onOpen?: (id: string) => void;
-  openLabel?: (attachment: ChatComposerAttachment) => string;
-  testID?: string;
-}) {
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme);
-  const resolveImage = useImageResolver();
-  const Glyph = attachment.icon ?? RiFileTextLine;
-  const uploading = attachment.progress !== undefined;
-  const progress = Math.min(100, Math.max(0, attachment.progress ?? 0));
-  const radius = TILE_RADIUS - 1;
-  const path = ringPath(size, size, 1, radius);
-  // No `pathLength` on native, so the dash arithmetic needs the real length:
-  // four straight runs plus one full circle of the corner radius.
-  const length = 4 * (size - 2 - 2 * radius) + 2 * Math.PI * radius;
-
-  const uri =
-    attachment.source === undefined
-      ? undefined
-      : isUrl(attachment.source)
-        ? attachment.source
-        : resolveImage?.(attachment.source, 'thumb');
-
-  // The box is a button only where the caller gave it something to do. A tile
-  // that is `role="button"` with no handler announces an action that is not
-  // there, and one that opens on press without a role is unreachable.
-  const Box = onOpen === undefined ? View : Pressable;
-  const boxProps =
-    onOpen === undefined
-      ? {}
-      : {
-          role: 'button' as const,
-          accessibilityLabel: (openLabel ?? ((a: ChatComposerAttachment) => a.name))(attachment),
-          onPress: () => onOpen(attachment.id),
-        };
-
-  return (
-    <View style={{ width: size, gap: 4 }} testID={testID}>
-      {/* The clipped box and the ring are SIBLINGS, never nested. Inside the
-          bordered box an inset-0 layer is the PADDING box — `size - 2` — so a
-          ring drawn in the tile's own `size` coordinates lands 1px off and has
-          its last edge cut away by the same `overflow: hidden` that rounds the
-          photo. The symptom is a ring that stops three quarters of the way
-          round while the dash arithmetic says it is complete. */}
-      <View style={{ position: 'relative', width: size, height: size }}>
-        <Box
-          {...boxProps}
-          style={{
-            width: size,
-            height: size,
-            borderRadius: TILE_RADIUS,
-            borderWidth: 1,
-            borderColor: palette.border,
-            backgroundColor: palette.inset,
-            alignItems: 'center',
-            justifyContent: 'center',
-            overflow: 'hidden',
-          }}>
-          {uri ? (
-            <Image
-              source={{ uri }}
-              accessibilityIgnoresInvertColors
-              style={{ width: size, height: size, opacity: uploading ? 0.6 : 1 }}
-            />
-          ) : (
-            <Glyph width={22} height={22} fill={palette.iconSecondary} />
-          )}
-        </Box>
-        {uploading ? (
-          <View
-            {...dataHook('bloomChatComposerRing')}
-            pointerEvents="none"
-            style={{ position: 'absolute', top: 0, left: 0, width: size, height: size }}
-            testID={testID ? `${testID}-ring` : undefined}>
-            <Svg width={size} height={size}>
-              <Path
-                d={path}
-                fill="none"
-                stroke={palette.accent}
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeDasharray={`${(length * progress) / 100} ${length}`}
-              />
-            </Svg>
-          </View>
-        ) : null}
-      </View>
-      {onRemove && !uploading ? (
-        <View style={{ position: 'absolute', top: -6, right: -6 }}>
-          <ComposerIconButton
-            icon={RiCloseLine}
-            accessibilityLabel={removeLabel(attachment)}
-            onPress={() => onRemove(attachment.id)}
-            size={20}
-            iconSize={12}
-            style={{
-              backgroundColor: palette.surface,
-              borderWidth: 1,
-              borderColor: palette.border,
-            }}
-            testID={testID ? `${testID}-remove` : undefined}
-          />
-        </View>
-      ) : null}
-      <Text
-        variant="caption-2-regular"
-        numberOfLines={1}
-        style={{ color: uploading ? palette.accent : palette.textSecondary }}>
-        {uploading ? `${Math.round(progress)}%` : (attachment.caption ?? attachment.name)}
-      </Text>
-    </View>
-  );
-}
+import { createComposerAttachmentStrip } from './create-composer-attachment-strip';
 
-export function ComposerAttachmentStrip({
-  attachments,
-  onRemove,
-  onOpen,
-  size = TILE,
-  removeLabel: removeLabelProp,
-  openLabel,
-  style,
-  testID,
-  accessibilityLabel: accessibilityLabelProp,
-}: ComposerAttachmentStripProps) {
-  const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-  const removeLabel = removeLabelProp ?? ((attachment: ChatComposerAttachment) => messages.removeAttachment(attachment.name));
-  const accessibilityLabel = accessibilityLabelProp ?? messages.attachments;
-  if (attachments.length === 0) return null;
-  return (
-    <ScrollView
-      {...dataHook('bloomChatComposerScroll')}
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      accessibilityLabel={accessibilityLabel}
-      contentContainerStyle={{
-        flexDirection: 'row',
-        gap: 10,
-        // The remove disc hangs 6px past the tile on both axes and a horizontal
-        // ScrollView clips its cross axis (`overflow-y: hidden` on web), so the
-        // top pad is the disc's overhang plus its border — not a rhythm value.
-        paddingLeft: 8,
-        paddingRight: 8,
-        paddingTop: 10,
-        paddingBottom: 2,
-      }}
-      style={[{ flexGrow: 0 }, style]}
-      testID={testID}>
-      {attachments.map((attachment) => (
-        <Tile
-          key={attachment.id}
-          attachment={attachment}
-          size={size}
-          onRemove={onRemove}
-          removeLabel={removeLabel}
-          onOpen={onOpen}
-          openLabel={openLabel}
-          testID={testID ? `${testID}-${attachment.id}` : undefined}
-        />
-      ))}
-    </ScrollView>
-  );
-}
+export const ComposerAttachmentStrip = createComposerAttachmentStrip({ ComposerIconButton });

package/src/chat-composer/ComposerAttachmentStrip.web.tsx

@@ -0,0 +1,4 @@
+import { ComposerIconButton } from './ComposerIconButton.web';
+import { createComposerAttachmentStrip } from './create-composer-attachment-strip';
+
+export const ComposerAttachmentStrip = createComposerAttachmentStrip({ ComposerIconButton });