@kesha-antonov/react-native-chat 5.0.0 → 6.0.0

package/lib/components/ContextMenu/placement.js

@@ -0,0 +1,117 @@
+import { BAR_CELL, BAR_HEIGHT, BAR_INSET, BAR_OFFSET, BAR_PAD_BOTTOM, BAR_PAD_TOP, BAR_TO_MENU, BOTTOM_CLEARANCE, FINGER_GAP, MESSAGE_GAP, PANEL_COLUMNS, PANEL_MAX_HEIGHT, PILL_X, PILL_Y, ROW_HEIGHT, SIDE_INSET, TALL_POPUP, TOP_INSET } from './constants';
+
+/** Where the pressed message is, and where the finger was, in window coordinates. */
+
+export const clamp = (value, min, max) => Math.max(min, Math.min(value, Math.max(min, max)));
+
+// The center of a reactions bar cell, in window coordinates.
+export const cellCenter = (index, barLeft, barWidth, isRTL) => isRTL ? barLeft + barWidth - BAR_INSET - index * BAR_CELL - BAR_CELL / 2 : barLeft + BAR_INSET + index * BAR_CELL + BAR_CELL / 2;
+
+// The bar is sized from its cells; an accessory can widen it.
+export const getBarWidth = (barSlots, accessoryWidth, screenWidth) => Math.min(BAR_INSET * 2 + barSlots * BAR_CELL + accessoryWidth, screenWidth - SIDE_INSET * 2);
+// The popup is anchored at the finger, which near the bottom of the list (or beside a
+// short bubble at the right edge) clamps it straight over the message it is for. When the
+// card (or its reactions pill) would cover the lit message's text and it fits fully below or
+// above that message, it moves there instead, keeping its horizontal placement.
+const placeTop = (box, touchAt, messageTop, messageHeight) => {
+  const {
+    anchor,
+    containerLeft,
+    containerWidth,
+    containerHeight,
+    hasReactions,
+    minY,
+    maxY
+  } = box;
+  let top = touchAt;
+  if (containerHeight > TALL_POPUP) top += TALL_POPUP - containerHeight;
+  top = clamp(top, minY, maxY);
+  const messageBottom = messageTop + messageHeight;
+  const cardTop = hasReactions ? top + BAR_OFFSET : top;
+  const cardBottom = top + containerHeight;
+  const coversBubble = messageHeight > 0 && cardTop < messageBottom && cardBottom > messageTop && containerLeft < anchor.pageX + anchor.bubbleWidth && containerLeft + containerWidth > anchor.pageX;
+  if (coversBubble) {
+    // Below: the reactions bar's tail reaches up to the bubble, as it does from the finger.
+    const below = messageBottom + MESSAGE_GAP - (hasReactions ? BAR_OFFSET : 0);
+    // Above: the card ends just over the bubble.
+    const above = messageTop - MESSAGE_GAP - containerHeight;
+    if (below >= minY && below <= maxY) top = below;else if (above >= minY && above <= maxY) top = above;
+  }
+  return top;
+};
+export const placeMenu = ({
+  openAnchor,
+  pageX,
+  pageY,
+  bubbleWidth,
+  bubbleHeight,
+  screenWidth,
+  screenHeight,
+  insets,
+  isRTL,
+  hasReactions,
+  barWidth,
+  rowCount,
+  menuWidth
+}) => {
+  const hasMenu = rowCount > 0;
+  const menuHeight = rowCount * ROW_HEIGHT;
+  const containerWidth = Math.max(hasReactions ? barWidth : 0, hasMenu ? menuWidth : 0);
+  const barBlockHeight = BAR_OFFSET + BAR_PAD_TOP + BAR_HEIGHT + BAR_PAD_BOTTOM;
+  const containerHeight = hasReactions ? hasMenu ? BAR_OFFSET + BAR_TO_MENU + menuHeight : barBlockHeight : menuHeight;
+
+  // Beside the finger, on the side away from the reading direction.
+  const containerLeft = isRTL ? clamp(openAnchor.touchX + FINGER_GAP, SIDE_INSET, screenWidth - SIDE_INSET - containerWidth) : clamp(openAnchor.touchX - FINGER_GAP - containerWidth, SIDE_INSET, screenWidth - SIDE_INSET - containerWidth);
+  const minY = insets.top + TOP_INSET;
+  const maxY = screenHeight - insets.bottom - containerHeight - BOTTOM_CLEARANCE;
+  const box = {
+    anchor: openAnchor,
+    containerLeft,
+    containerWidth,
+    containerHeight,
+    hasReactions,
+    minY,
+    maxY
+  };
+  const containerTop = placeTop(box, openAnchor.touchY, openAnchor.pageY, openAnchor.bubbleHeight);
+
+  // How far the message has moved since the overlay opened, kept on screen.
+  const movedBy = pageY - openAnchor.pageY;
+  const followDy = movedBy === 0 ? 0 : placeTop(box, openAnchor.touchY + movedBy, pageY, bubbleHeight) - containerTop;
+
+  // The bar keeps to the container's far side, the card to its near side.
+  const barLeft = isRTL ? containerLeft : containerLeft + containerWidth - barWidth;
+  const pillTop = containerTop + BAR_OFFSET + BAR_PAD_TOP;
+  const menuLeft = isRTL ? containerLeft + containerWidth - menuWidth : containerLeft;
+  const menuTop = hasReactions ? containerTop + BAR_OFFSET + BAR_TO_MENU : containerTop;
+
+  // The expanded panel keeps the bar's top and far side, moving up if it would not fit.
+  const panelWidth = Math.min(Math.max(barWidth, PANEL_COLUMNS * 40 + BAR_INSET * 2), screenWidth - SIDE_INSET * 2);
+  const panelHeight = Math.min(PANEL_MAX_HEIGHT, screenHeight - insets.top - insets.bottom - TOP_INSET * 2);
+  const panelLeft = clamp(isRTL ? barLeft : barLeft + barWidth - panelWidth, SIDE_INSET, screenWidth - SIDE_INSET - panelWidth);
+  const panelTop = clamp(pillTop, minY, screenHeight - insets.bottom - panelHeight - TOP_INSET);
+
+  // The reaction is applied first and the emoji flies to its pill under the
+  // message at its live position: a first reaction grows the bubble, so the target follows it.
+  const flightTarget = {
+    toX: isRTL ? pageX + bubbleWidth - PILL_X : pageX + PILL_X,
+    toY: pageY + bubbleHeight - PILL_Y
+  };
+  return {
+    hasMenu,
+    containerLeft,
+    containerWidth,
+    containerTop,
+    followDy,
+    barLeft,
+    pillTop,
+    menuLeft,
+    menuTop,
+    panelWidth,
+    panelHeight,
+    panelLeft,
+    panelTop,
+    flightTarget
+  };
+};
+//# sourceMappingURL=placement.js.map

package/lib/components/ContextMenu/placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.js","names":["BAR_CELL","BAR_HEIGHT","BAR_INSET","BAR_OFFSET","BAR_PAD_BOTTOM","BAR_PAD_TOP","BAR_TO_MENU","BOTTOM_CLEARANCE","FINGER_GAP","MESSAGE_GAP","PANEL_COLUMNS","PANEL_MAX_HEIGHT","PILL_X","PILL_Y","ROW_HEIGHT","SIDE_INSET","TALL_POPUP","TOP_INSET","clamp","value","min","max","Math","cellCenter","index","barLeft","barWidth","isRTL","getBarWidth","barSlots","accessoryWidth","screenWidth","placeTop","box","touchAt","messageTop","messageHeight","anchor","containerLeft","containerWidth","containerHeight","hasReactions","minY","maxY","top","messageBottom","cardTop","cardBottom","coversBubble","pageX","bubbleWidth","below","above","placeMenu","openAnchor","pageY","bubbleHeight","screenHeight","insets","rowCount","menuWidth","hasMenu","menuHeight","barBlockHeight","touchX","bottom","containerTop","touchY","movedBy","followDy","pillTop","menuLeft","menuTop","panelWidth","panelHeight","panelLeft","panelTop","flightTarget","toX","toY"],"sources":["../../../src/components/ContextMenu/placement.ts"],"sourcesContent":["import {\n  BAR_CELL,\n  BAR_HEIGHT,\n  BAR_INSET,\n  BAR_OFFSET,\n  BAR_PAD_BOTTOM,\n  BAR_PAD_TOP,\n  BAR_TO_MENU,\n  BOTTOM_CLEARANCE,\n  FINGER_GAP,\n  MESSAGE_GAP,\n  PANEL_COLUMNS,\n  PANEL_MAX_HEIGHT,\n  PILL_X,\n  PILL_Y,\n  ROW_HEIGHT,\n  SIDE_INSET,\n  TALL_POPUP,\n  TOP_INSET,\n} from './constants'\nimport { FlightTarget } from './types'\n\n/** Where the pressed message is, and where the finger was, in window coordinates. */\nexport interface MenuAnchor {\n  pageX: number\n  pageY: number\n  bubbleWidth: number\n  bubbleHeight: number\n  touchX: number\n  touchY: number\n}\n\nexport const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, Math.max(min, max)))\n\n// The center of a reactions bar cell, in window coordinates.\nexport const cellCenter = (index: number, barLeft: number, barWidth: number, isRTL: boolean) => isRTL\n  ? barLeft + barWidth - BAR_INSET - index * BAR_CELL - BAR_CELL / 2\n  : barLeft + BAR_INSET + index * BAR_CELL + BAR_CELL / 2\n\n// The bar is sized from its cells; an accessory can widen it.\nexport const getBarWidth = (barSlots: number, accessoryWidth: number, screenWidth: number) =>\n  Math.min(BAR_INSET * 2 + barSlots * BAR_CELL + accessoryWidth, screenWidth - SIDE_INSET * 2)\n\ninterface PopupBox {\n  anchor: MenuAnchor\n  containerLeft: number\n  containerWidth: number\n  containerHeight: number\n  hasReactions: boolean\n  minY: number\n  maxY: number\n}\n\n// The popup is anchored at the finger, which near the bottom of the list (or beside a\n// short bubble at the right edge) clamps it straight over the message it is for. When the\n// card (or its reactions pill) would cover the lit message's text and it fits fully below or\n// above that message, it moves there instead, keeping its horizontal placement.\nconst placeTop = (box: PopupBox, touchAt: number, messageTop: number, messageHeight: number) => {\n  const { anchor, containerLeft, containerWidth, containerHeight, hasReactions, minY, maxY } = box\n  let top = touchAt\n  if (containerHeight > TALL_POPUP)\n    top += TALL_POPUP - containerHeight\n  top = clamp(top, minY, maxY)\n\n  const messageBottom = messageTop + messageHeight\n  const cardTop = hasReactions ? top + BAR_OFFSET : top\n  const cardBottom = top + containerHeight\n  const coversBubble = messageHeight > 0 &&\n    cardTop < messageBottom && cardBottom > messageTop &&\n    containerLeft < anchor.pageX + anchor.bubbleWidth && containerLeft + containerWidth > anchor.pageX\n  if (coversBubble) {\n    // Below: the reactions bar's tail reaches up to the bubble, as it does from the finger.\n    const below = messageBottom + MESSAGE_GAP - (hasReactions ? BAR_OFFSET : 0)\n    // Above: the card ends just over the bubble.\n    const above = messageTop - MESSAGE_GAP - containerHeight\n    if (below >= minY && below <= maxY)\n      top = below\n    else if (above >= minY && above <= maxY)\n      top = above\n  }\n  return top\n}\n\nexport interface MenuPlacementInput {\n  /** The anchor as it was when the overlay opened. */\n  openAnchor: MenuAnchor\n  /** The message's live position, which the list can move while the overlay is up. */\n  pageX: number\n  pageY: number\n  bubbleWidth: number\n  bubbleHeight: number\n  screenWidth: number\n  screenHeight: number\n  insets: { top: number, bottom: number }\n  isRTL: boolean\n  hasReactions: boolean\n  barWidth: number\n  rowCount: number\n  menuWidth: number\n}\n\nexport const placeMenu = ({\n  openAnchor,\n  pageX,\n  pageY,\n  bubbleWidth,\n  bubbleHeight,\n  screenWidth,\n  screenHeight,\n  insets,\n  isRTL,\n  hasReactions,\n  barWidth,\n  rowCount,\n  menuWidth,\n}: MenuPlacementInput) => {\n  const hasMenu = rowCount > 0\n  const menuHeight = rowCount * ROW_HEIGHT\n\n  const containerWidth = Math.max(hasReactions ? barWidth : 0, hasMenu ? menuWidth : 0)\n  const barBlockHeight = BAR_OFFSET + BAR_PAD_TOP + BAR_HEIGHT + BAR_PAD_BOTTOM\n  const containerHeight = hasReactions\n    ? (hasMenu ? BAR_OFFSET + BAR_TO_MENU + menuHeight : barBlockHeight)\n    : menuHeight\n\n  // Beside the finger, on the side away from the reading direction.\n  const containerLeft = isRTL\n    ? clamp(openAnchor.touchX + FINGER_GAP, SIDE_INSET, screenWidth - SIDE_INSET - containerWidth)\n    : clamp(openAnchor.touchX - FINGER_GAP - containerWidth, SIDE_INSET, screenWidth - SIDE_INSET - containerWidth)\n\n  const minY = insets.top + TOP_INSET\n  const maxY = screenHeight - insets.bottom - containerHeight - BOTTOM_CLEARANCE\n\n  const box: PopupBox = { anchor: openAnchor, containerLeft, containerWidth, containerHeight, hasReactions, minY, maxY }\n  const containerTop = placeTop(box, openAnchor.touchY, openAnchor.pageY, openAnchor.bubbleHeight)\n\n  // How far the message has moved since the overlay opened, kept on screen.\n  const movedBy = pageY - openAnchor.pageY\n  const followDy = movedBy === 0 ? 0 : placeTop(box, openAnchor.touchY + movedBy, pageY, bubbleHeight) - containerTop\n\n  // The bar keeps to the container's far side, the card to its near side.\n  const barLeft = isRTL ? containerLeft : containerLeft + containerWidth - barWidth\n  const pillTop = containerTop + BAR_OFFSET + BAR_PAD_TOP\n  const menuLeft = isRTL ? containerLeft + containerWidth - menuWidth : containerLeft\n  const menuTop = hasReactions ? containerTop + BAR_OFFSET + BAR_TO_MENU : containerTop\n\n  // The expanded panel keeps the bar's top and far side, moving up if it would not fit.\n  const panelWidth = Math.min(Math.max(barWidth, PANEL_COLUMNS * 40 + BAR_INSET * 2), screenWidth - SIDE_INSET * 2)\n  const panelHeight = Math.min(PANEL_MAX_HEIGHT, screenHeight - insets.top - insets.bottom - TOP_INSET * 2)\n  const panelLeft = clamp(isRTL ? barLeft : barLeft + barWidth - panelWidth, SIDE_INSET, screenWidth - SIDE_INSET - panelWidth)\n  const panelTop = clamp(pillTop, minY, screenHeight - insets.bottom - panelHeight - TOP_INSET)\n\n  // The reaction is applied first and the emoji flies to its pill under the\n  // message at its live position: a first reaction grows the bubble, so the target follows it.\n  const flightTarget: FlightTarget = {\n    toX: isRTL ? pageX + bubbleWidth - PILL_X : pageX + PILL_X,\n    toY: pageY + bubbleHeight - PILL_Y,\n  }\n\n  return {\n    hasMenu,\n    containerLeft,\n    containerWidth,\n    containerTop,\n    followDy,\n    barLeft,\n    pillTop,\n    menuLeft,\n    menuTop,\n    panelWidth,\n    panelHeight,\n    panelLeft,\n    panelTop,\n    flightTarget,\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/components/ContextMenu/styles.d.ts

@@ -0,0 +1,199 @@
+import { ChatTheme } from '../../Theme';
+export type Styles = ReturnType<typeof createStyles>;
+export declare const createStyles: (theme: ChatTheme) => Readonly<{
+    root: {
+        flex: number;
+    };
+    scrim: {
+        backgroundColor: string;
+    };
+    preview: {
+        position: "absolute";
+    };
+    hidden: {
+        opacity: number;
+    };
+    menu: {
+        position: "absolute";
+        minWidth: number;
+    };
+    menuBackground: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        borderRadius: number;
+        backgroundColor: string;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    menuClip: {
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    row: {
+        height: number;
+        justifyContent: "center";
+        paddingHorizontal: number;
+    };
+    rowPressed: {
+        backgroundColor: string;
+    };
+    iconSlot: {
+        position: "absolute";
+        left: number;
+        top: number;
+        bottom: number;
+        justifyContent: "center";
+    };
+    rowLabel: {
+        fontSize: number;
+        color: string;
+    };
+    rowLabelWithIcon: {
+        paddingLeft: number;
+    };
+    tail: {
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    tailBig: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        position: "absolute";
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+    };
+    tailSmall: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        position: "absolute";
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+    };
+    bar: {
+        position: "absolute";
+    };
+    barClip: {
+        position: "absolute";
+        top: number;
+        bottom: number;
+    };
+    alignEnd: {
+        right: number;
+    };
+    alignStart: {
+        left: number;
+    };
+    barBackground: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: string;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    barItems: {
+        position: "absolute";
+        top: number;
+        height: number;
+        flexDirection: "row";
+        alignItems: "center";
+        paddingHorizontal: number;
+    };
+    barItemsLTR: {
+        right: number;
+    };
+    barItemsRTL: {
+        left: number;
+        flexDirection: "row-reverse";
+    };
+    reactionCell: {
+        width: number;
+        height: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    reactionBox: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    reactionBoxSelected: {
+        backgroundColor: string;
+    };
+    reactionEmoji: {
+        fontSize: number;
+        lineHeight: number;
+        textAlign: "center";
+        color: string;
+    };
+    reactionEmojiSelected: {
+        transform: {
+            scale: number;
+        }[];
+    };
+    panelContent: {
+        borderRadius: number;
+        overflow: "hidden";
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    panelContentInner: {
+        position: "absolute";
+        top: number;
+    };
+    panelInnerEnd: {
+        right: number;
+    };
+    panelInnerStart: {
+        left: number;
+    };
+    flight: {
+        position: "absolute";
+        width: number;
+        height: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+}>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/components/ContextMenu/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAkBvC,MAAM,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAA;AAEpD,eAAO,MAAM,YAAY,GAAI,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgK5C,CAAA"}

package/lib/components/ContextMenu/styles.js

@@ -0,0 +1,169 @@
+import { StyleSheet } from 'react-native';
+import { BAR_CELL, BAR_EMOJI, BAR_EMOJI_BOX, BAR_HEIGHT, BAR_INSET, MENU_MIN_WIDTH, MENU_RADIUS, PANEL_RADIUS, ROW_HEIGHT, ROW_PADDING, SELECTED_SCALE, TAIL_BIG, TAIL_SMALL, TITLE_GAP } from './constants';
+export const createStyles = theme => {
+  const colors = theme.contextMenu;
+  // The 9-patch's soft shadow, and the glass variant's .
+  const shadow = {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.16,
+    shadowRadius: 8,
+    elevation: 8
+  };
+  return StyleSheet.create({
+    root: {
+      flex: 1
+    },
+    scrim: {
+      backgroundColor: colors.scrim
+    },
+    preview: {
+      position: 'absolute'
+    },
+    hidden: {
+      opacity: 0
+    },
+    menu: {
+      position: 'absolute',
+      minWidth: MENU_MIN_WIDTH
+    },
+    menuBackground: {
+      ...StyleSheet.absoluteFill,
+      borderRadius: MENU_RADIUS,
+      backgroundColor: colors.background,
+      ...shadow
+    },
+    menuClip: {
+      borderRadius: MENU_RADIUS,
+      overflow: 'hidden'
+    },
+    row: {
+      height: ROW_HEIGHT,
+      justifyContent: 'center',
+      paddingHorizontal: ROW_PADDING
+    },
+    rowPressed: {
+      backgroundColor: colors.pressed
+    },
+    iconSlot: {
+      position: 'absolute',
+      left: ROW_PADDING,
+      top: 0,
+      bottom: 0,
+      justifyContent: 'center'
+    },
+    rowLabel: {
+      fontSize: 16,
+      color: colors.text
+    },
+    rowLabelWithIcon: {
+      paddingLeft: TITLE_GAP
+    },
+    tail: {
+      ...StyleSheet.absoluteFill
+    },
+    tailBig: {
+      position: 'absolute',
+      width: TAIL_BIG * 2,
+      height: TAIL_BIG * 2,
+      borderRadius: TAIL_BIG,
+      backgroundColor: colors.background,
+      ...shadow
+    },
+    tailSmall: {
+      position: 'absolute',
+      width: TAIL_SMALL * 2,
+      height: TAIL_SMALL * 2,
+      borderRadius: TAIL_SMALL,
+      backgroundColor: colors.background,
+      ...shadow
+    },
+    bar: {
+      position: 'absolute'
+    },
+    barClip: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0
+    },
+    alignEnd: {
+      right: 0
+    },
+    alignStart: {
+      left: 0
+    },
+    barBackground: {
+      ...StyleSheet.absoluteFill,
+      backgroundColor: colors.background,
+      ...shadow
+    },
+    barItems: {
+      position: 'absolute',
+      top: 0,
+      height: BAR_HEIGHT,
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: BAR_INSET
+    },
+    barItemsLTR: {
+      right: 0
+    },
+    barItemsRTL: {
+      left: 0,
+      flexDirection: 'row-reverse'
+    },
+    reactionCell: {
+      width: BAR_CELL,
+      height: BAR_HEIGHT,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    reactionBox: {
+      width: BAR_EMOJI_BOX,
+      height: BAR_EMOJI_BOX,
+      borderRadius: BAR_EMOJI_BOX / 2,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    reactionBoxSelected: {
+      backgroundColor: colors.reactionSelected
+    },
+    reactionEmoji: {
+      fontSize: BAR_EMOJI,
+      lineHeight: BAR_EMOJI_BOX,
+      textAlign: 'center',
+      color: '#000'
+    },
+    reactionEmojiSelected: {
+      transform: [{
+        scale: SELECTED_SCALE
+      }]
+    },
+    panelContent: {
+      ...StyleSheet.absoluteFill,
+      borderRadius: PANEL_RADIUS,
+      overflow: 'hidden'
+    },
+    panelContentInner: {
+      position: 'absolute',
+      top: 0
+    },
+    panelInnerEnd: {
+      right: 0
+    },
+    panelInnerStart: {
+      left: 0
+    },
+    flight: {
+      position: 'absolute',
+      width: BAR_EMOJI_BOX,
+      height: BAR_EMOJI_BOX,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  });
+};
+//# sourceMappingURL=styles.js.map

package/lib/components/ContextMenu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["StyleSheet","BAR_CELL","BAR_EMOJI","BAR_EMOJI_BOX","BAR_HEIGHT","BAR_INSET","MENU_MIN_WIDTH","MENU_RADIUS","PANEL_RADIUS","ROW_HEIGHT","ROW_PADDING","SELECTED_SCALE","TAIL_BIG","TAIL_SMALL","TITLE_GAP","createStyles","theme","colors","contextMenu","shadow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","create","root","flex","scrim","backgroundColor","preview","position","hidden","opacity","menu","minWidth","menuBackground","absoluteFill","borderRadius","background","menuClip","overflow","row","justifyContent","paddingHorizontal","rowPressed","pressed","iconSlot","left","top","bottom","rowLabel","fontSize","color","text","rowLabelWithIcon","paddingLeft","tail","tailBig","tailSmall","bar","barClip","alignEnd","right","alignStart","barBackground","barItems","flexDirection","alignItems","barItemsLTR","barItemsRTL","reactionCell","reactionBox","reactionBoxSelected","reactionSelected","reactionEmoji","lineHeight","textAlign","reactionEmojiSelected","transform","scale","panelContent","panelContentInner","panelInnerEnd","panelInnerStart","flight"],"sources":["../../../src/components/ContextMenu/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { ChatTheme } from '../../Theme'\nimport {\n  BAR_CELL,\n  BAR_EMOJI,\n  BAR_EMOJI_BOX,\n  BAR_HEIGHT,\n  BAR_INSET,\n  MENU_MIN_WIDTH,\n  MENU_RADIUS,\n  PANEL_RADIUS,\n  ROW_HEIGHT,\n  ROW_PADDING,\n  SELECTED_SCALE,\n  TAIL_BIG,\n  TAIL_SMALL,\n  TITLE_GAP,\n} from './constants'\n\nexport type Styles = ReturnType<typeof createStyles>\n\nexport const createStyles = (theme: ChatTheme) => {\n  const colors = theme.contextMenu\n  // The 9-patch's soft shadow, and the glass variant's .\n  const shadow = {\n    shadowColor: '#000',\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.16,\n    shadowRadius: 8,\n    elevation: 8,\n  }\n  return StyleSheet.create({\n    root: {\n      flex: 1,\n    },\n    scrim: {\n      backgroundColor: colors.scrim,\n    },\n    preview: {\n      position: 'absolute',\n    },\n    hidden: {\n      opacity: 0,\n    },\n    menu: {\n      position: 'absolute',\n      minWidth: MENU_MIN_WIDTH,\n    },\n    menuBackground: {\n      ...StyleSheet.absoluteFill,\n      borderRadius: MENU_RADIUS,\n      backgroundColor: colors.background,\n      ...shadow,\n    },\n    menuClip: {\n      borderRadius: MENU_RADIUS,\n      overflow: 'hidden',\n    },\n    row: {\n      height: ROW_HEIGHT,\n      justifyContent: 'center',\n      paddingHorizontal: ROW_PADDING,\n    },\n    rowPressed: {\n      backgroundColor: colors.pressed,\n    },\n    iconSlot: {\n      position: 'absolute',\n      left: ROW_PADDING,\n      top: 0,\n      bottom: 0,\n      justifyContent: 'center',\n    },\n    rowLabel: {\n      fontSize: 16,\n      color: colors.text,\n    },\n    rowLabelWithIcon: {\n      paddingLeft: TITLE_GAP,\n    },\n    tail: {\n      ...StyleSheet.absoluteFill,\n    },\n    tailBig: {\n      position: 'absolute',\n      width: TAIL_BIG * 2,\n      height: TAIL_BIG * 2,\n      borderRadius: TAIL_BIG,\n      backgroundColor: colors.background,\n      ...shadow,\n    },\n    tailSmall: {\n      position: 'absolute',\n      width: TAIL_SMALL * 2,\n      height: TAIL_SMALL * 2,\n      borderRadius: TAIL_SMALL,\n      backgroundColor: colors.background,\n      ...shadow,\n    },\n    bar: {\n      position: 'absolute',\n    },\n    barClip: {\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n    },\n    alignEnd: {\n      right: 0,\n    },\n    alignStart: {\n      left: 0,\n    },\n    barBackground: {\n      ...StyleSheet.absoluteFill,\n      backgroundColor: colors.background,\n      ...shadow,\n    },\n    barItems: {\n      position: 'absolute',\n      top: 0,\n      height: BAR_HEIGHT,\n      flexDirection: 'row',\n      alignItems: 'center',\n      paddingHorizontal: BAR_INSET,\n    },\n    barItemsLTR: {\n      right: 0,\n    },\n    barItemsRTL: {\n      left: 0,\n      flexDirection: 'row-reverse',\n    },\n    reactionCell: {\n      width: BAR_CELL,\n      height: BAR_HEIGHT,\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    reactionBox: {\n      width: BAR_EMOJI_BOX,\n      height: BAR_EMOJI_BOX,\n      borderRadius: BAR_EMOJI_BOX / 2,\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    reactionBoxSelected: {\n      backgroundColor: colors.reactionSelected,\n    },\n    reactionEmoji: {\n      fontSize: BAR_EMOJI,\n      lineHeight: BAR_EMOJI_BOX,\n      textAlign: 'center',\n      color: '#000',\n    },\n    reactionEmojiSelected: {\n      transform: [{ scale: SELECTED_SCALE }],\n    },\n    panelContent: {\n      ...StyleSheet.absoluteFill,\n      borderRadius: PANEL_RADIUS,\n      overflow: 'hidden',\n    },\n    panelContentInner: {\n      position: 'absolute',\n      top: 0,\n    },\n    panelInnerEnd: {\n      right: 0,\n    },\n    panelInnerStart: {\n      left: 0,\n    },\n    flight: {\n      position: 'absolute',\n      width: BAR_EMOJI_BOX,\n      height: BAR_EMOJI_BOX,\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n  })\n}\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AAGzC,SACEC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,UAAU,EACVC,SAAS,QACJ,aAAa;AAIpB,OAAO,MAAMC,YAAY,GAAIC,KAAgB,IAAK;EAChD,MAAMC,MAAM,GAAGD,KAAK,CAACE,WAAW;EAChC;EACA,MAAMC,MAAM,GAAG;IACbC,WAAW,EAAE,MAAM;IACnBC,YAAY,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CAAC;IACrCC,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,CAAC;IACfC,SAAS,EAAE;EACb,CAAC;EACD,OAAO1B,UAAU,CAAC2B,MAAM,CAAC;IACvBC,IAAI,EAAE;MACJC,IAAI,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACLC,eAAe,EAAEd,MAAM,CAACa;IAC1B,CAAC;IACDE,OAAO,EAAE;MACPC,QAAQ,EAAE;IACZ,CAAC;IACDC,MAAM,EAAE;MACNC,OAAO,EAAE;IACX,CAAC;IACDC,IAAI,EAAE;MACJH,QAAQ,EAAE,UAAU;MACpBI,QAAQ,EAAE/B;IACZ,CAAC;IACDgC,cAAc,EAAE;MACd,GAAGtC,UAAU,CAACuC,YAAY;MAC1BC,YAAY,EAAEjC,WAAW;MACzBwB,eAAe,EAAEd,MAAM,CAACwB,UAAU;MAClC,GAAGtB;IACL,CAAC;IACDuB,QAAQ,EAAE;MACRF,YAAY,EAAEjC,WAAW;MACzBoC,QAAQ,EAAE;IACZ,CAAC;IACDC,GAAG,EAAE;MACHrB,MAAM,EAAEd,UAAU;MAClBoC,cAAc,EAAE,QAAQ;MACxBC,iBAAiB,EAAEpC;IACrB,CAAC;IACDqC,UAAU,EAAE;MACVhB,eAAe,EAAEd,MAAM,CAAC+B;IAC1B,CAAC;IACDC,QAAQ,EAAE;MACRhB,QAAQ,EAAE,UAAU;MACpBiB,IAAI,EAAExC,WAAW;MACjByC,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE,CAAC;MACTP,cAAc,EAAE;IAClB,CAAC;IACDQ,QAAQ,EAAE;MACRC,QAAQ,EAAE,EAAE;MACZC,KAAK,EAAEtC,MAAM,CAACuC;IAChB,CAAC;IACDC,gBAAgB,EAAE;MAChBC,WAAW,EAAE5C;IACf,CAAC;IACD6C,IAAI,EAAE;MACJ,GAAG3D,UAAU,CAACuC;IAChB,CAAC;IACDqB,OAAO,EAAE;MACP3B,QAAQ,EAAE,UAAU;MACpBX,KAAK,EAAEV,QAAQ,GAAG,CAAC;MACnBW,MAAM,EAAEX,QAAQ,GAAG,CAAC;MACpB4B,YAAY,EAAE5B,QAAQ;MACtBmB,eAAe,EAAEd,MAAM,CAACwB,UAAU;MAClC,GAAGtB;IACL,CAAC;IACD0C,SAAS,EAAE;MACT5B,QAAQ,EAAE,UAAU;MACpBX,KAAK,EAAET,UAAU,GAAG,CAAC;MACrBU,MAAM,EAAEV,UAAU,GAAG,CAAC;MACtB2B,YAAY,EAAE3B,UAAU;MACxBkB,eAAe,EAAEd,MAAM,CAACwB,UAAU;MAClC,GAAGtB;IACL,CAAC;IACD2C,GAAG,EAAE;MACH7B,QAAQ,EAAE;IACZ,CAAC;IACD8B,OAAO,EAAE;MACP9B,QAAQ,EAAE,UAAU;MACpBkB,GAAG,EAAE,CAAC;MACNC,MAAM,EAAE;IACV,CAAC;IACDY,QAAQ,EAAE;MACRC,KAAK,EAAE;IACT,CAAC;IACDC,UAAU,EAAE;MACVhB,IAAI,EAAE;IACR,CAAC;IACDiB,aAAa,EAAE;MACb,GAAGnE,UAAU,CAACuC,YAAY;MAC1BR,eAAe,EAAEd,MAAM,CAACwB,UAAU;MAClC,GAAGtB;IACL,CAAC;IACDiD,QAAQ,EAAE;MACRnC,QAAQ,EAAE,UAAU;MACpBkB,GAAG,EAAE,CAAC;MACN5B,MAAM,EAAEnB,UAAU;MAClBiE,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBxB,iBAAiB,EAAEzC;IACrB,CAAC;IACDkE,WAAW,EAAE;MACXN,KAAK,EAAE;IACT,CAAC;IACDO,WAAW,EAAE;MACXtB,IAAI,EAAE,CAAC;MACPmB,aAAa,EAAE;IACjB,CAAC;IACDI,YAAY,EAAE;MACZnD,KAAK,EAAErB,QAAQ;MACfsB,MAAM,EAAEnB,UAAU;MAClBkE,UAAU,EAAE,QAAQ;MACpBzB,cAAc,EAAE;IAClB,CAAC;IACD6B,WAAW,EAAE;MACXpD,KAAK,EAAEnB,aAAa;MACpBoB,MAAM,EAAEpB,aAAa;MACrBqC,YAAY,EAAErC,aAAa,GAAG,CAAC;MAC/BmE,UAAU,EAAE,QAAQ;MACpBzB,cAAc,EAAE;IAClB,CAAC;IACD8B,mBAAmB,EAAE;MACnB5C,eAAe,EAAEd,MAAM,CAAC2D;IAC1B,CAAC;IACDC,aAAa,EAAE;MACbvB,QAAQ,EAAEpD,SAAS;MACnB4E,UAAU,EAAE3E,aAAa;MACzB4E,SAAS,EAAE,QAAQ;MACnBxB,KAAK,EAAE;IACT,CAAC;IACDyB,qBAAqB,EAAE;MACrBC,SAAS,EAAE,CAAC;QAAEC,KAAK,EAAEvE;MAAe,CAAC;IACvC,CAAC;IACDwE,YAAY,EAAE;MACZ,GAAGnF,UAAU,CAACuC,YAAY;MAC1BC,YAAY,EAAEhC,YAAY;MAC1BmC,QAAQ,EAAE;IACZ,CAAC;IACDyC,iBAAiB,EAAE;MACjBnD,QAAQ,EAAE,UAAU;MACpBkB,GAAG,EAAE;IACP,CAAC;IACDkC,aAAa,EAAE;MACbpB,KAAK,EAAE;IACT,CAAC;IACDqB,eAAe,EAAE;MACfpC,IAAI,EAAE;IACR,CAAC;IACDqC,MAAM,EAAE;MACNtD,QAAQ,EAAE,UAAU;MACpBX,KAAK,EAAEnB,aAAa;MACpBoB,MAAM,EAAEpB,aAAa;MACrBmE,UAAU,EAAE,QAAQ;MACpBzB,cAAc,EAAE;IAClB;EACF,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}

package/lib/components/ContextMenu/types.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { MessageMenuItem } from '../../Models';
+export interface ContextMenuReactions {
+    emojis: string[];
+    onSelect: (emoji: string) => void;
+    /** Reactions the current user has already picked; drawn smaller, in a circle. */
+    selected?: string[];
+    /** Style for the reactions bar. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style for each emoji in the bar. */
+    emojiStyle?: StyleProp<TextStyle>;
+    /** Extra content at the end of the bar. */
+    renderAccessory?: () => React.ReactNode;
+    /**
+     * The expand button: when set, the bar ends in a chevron that grows the bar into a
+     * panel holding what this returns (a full emoji grid, say). Call `onSelect` with the pick.
+     */
+    renderExpandedPicker?: (props: {
+        onSelect: (emoji: string) => void;
+    }) => React.ReactNode;
+}
+export interface ContextMenuProps {
+    visible: boolean;
+    items: MessageMenuItem[];
+    /**
+     * Called once the menu has closed itself (backdrop tap, a picked action or reaction) and its
+     * exit animation has finished.
+     */
+    onDismiss: () => void;
+    position?: 'left' | 'right';
+    pageX?: number;
+    pageY?: number;
+    bubbleWidth?: number;
+    bubbleHeight?: number;
+    /**
+     * Where the finger was, in window coordinates. The menu opens beside it; without it
+     * the menu opens beside the bubble's middle.
+     */
+    touchX?: number;
+    touchY?: number;
+    /** Optional reactions bar rendered above the menu. */
+    reactions?: ContextMenuReactions;
+    /**
+     * A copy of the pressed message, drawn above the scrim exactly where the message is (`pageX` /
+     * `pageY`, `bubbleWidth` wide), so it stays lit above the scrim while the chat dims.
+     * It follows the anchor if the message moves underneath.
+     */
+    messagePreview?: React.ReactNode;
+    /** Drawn above everything else in the overlay, e.g. a full emoji sheet. */
+    children?: React.ReactNode;
+}
+export interface Flight {
+    emoji: string;
+    fromX: number;
+    fromY: number;
+}
+export interface FlightTarget {
+    toX: number;
+    toY: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/ContextMenu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAE9C,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,mCAAmC;IACnC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,uCAAuC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACjC,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACvC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;CACzF;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC;;;;OAIG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ"}

package/lib/components/ContextMenu/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/ContextMenu/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/components/ContextMenu/types.ts"],"sourcesContent":["import React from 'react'\nimport { StyleProp, TextStyle, ViewStyle } from 'react-native'\n\nimport { MessageMenuItem } from '../../Models'\n\nexport interface ContextMenuReactions {\n  emojis: string[]\n  onSelect: (emoji: string) => void\n  /** Reactions the current user has already picked; drawn smaller, in a circle. */\n  selected?: string[]\n  /** Style for the reactions bar. */\n  containerStyle?: StyleProp<ViewStyle>\n  /** Style for each emoji in the bar. */\n  emojiStyle?: StyleProp<TextStyle>\n  /** Extra content at the end of the bar. */\n  renderAccessory?: () => React.ReactNode\n  /**\n   * The expand button: when set, the bar ends in a chevron that grows the bar into a\n   * panel holding what this returns (a full emoji grid, say). Call `onSelect` with the pick.\n   */\n  renderExpandedPicker?: (props: { onSelect: (emoji: string) => void }) => React.ReactNode\n}\n\nexport interface ContextMenuProps {\n  visible: boolean\n  items: MessageMenuItem[]\n  /**\n   * Called once the menu has closed itself (backdrop tap, a picked action or reaction) and its\n   * exit animation has finished.\n   */\n  onDismiss: () => void\n  position?: 'left' | 'right'\n  pageX?: number\n  pageY?: number\n  bubbleWidth?: number\n  bubbleHeight?: number\n  /**\n   * Where the finger was, in window coordinates. The menu opens beside it; without it\n   * the menu opens beside the bubble's middle.\n   */\n  touchX?: number\n  touchY?: number\n  /** Optional reactions bar rendered above the menu. */\n  reactions?: ContextMenuReactions\n  /**\n   * A copy of the pressed message, drawn above the scrim exactly where the message is (`pageX` /\n   * `pageY`, `bubbleWidth` wide), so it stays lit above the scrim while the chat dims.\n   * It follows the anchor if the message moves underneath.\n   */\n  messagePreview?: React.ReactNode\n  /** Drawn above everything else in the overlay, e.g. a full emoji sheet. */\n  children?: React.ReactNode\n}\n\nexport interface Flight {\n  emoji: string\n  fromX: number\n  fromY: number\n}\n\nexport interface FlightTarget {\n  toX: number\n  toY: number\n}\n"],"mappings":"","ignoreList":[]}

package/lib/components/ContextMenu/useExpandPanel.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch, SetStateAction } from 'react';
+import { SharedValue } from 'react-native-reanimated';
+/**
+ * The reactions bar growing into the full picker panel, and folding back. `setIsExpanded` keeps
+ * the panel's content mounted from the expand until the fold has finished.
+ */
+export declare const useExpandPanel: (expand: SharedValue<number>, menuFade: SharedValue<number>, setIsExpanded: Dispatch<SetStateAction<boolean>>) => {
+    handleExpand: () => void;
+    handleCollapse: () => void;
+};
+//# sourceMappingURL=useExpandPanel.d.ts.map

package/lib/components/ContextMenu/useExpandPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandPanel.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/useExpandPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAA;AACrE,OAAO,EAAE,WAAW,EAAuB,MAAM,yBAAyB,CAAA;AAK1E;;;GAGG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,WAAW,CAAC,MAAM,CAAC,EAC3B,UAAU,WAAW,CAAC,MAAM,CAAC,EAC7B,eAAe,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;;;CAgCjD,CAAA"}