yeet

modules/stickers/native/NativeLottieView.tsx

@@ -0,0 +1,49 @@
+// Metro module 7781 (f7782).
+import Module19, { useEffect, useRef } from "react";
+import { requireNativeComponent } from "react-native";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import Module7782 from "../../../_bundle/Module7782";
+import codegenNativeCommands from "../../../_bundle/codegenNativeCommands";
+const NativeLottieNode = isAndroid() ? Module7782 : requireNativeComponent("NativeLottieNode");
+let c4902_5 = codegenNativeCommands({
+  supportedCommands: ["setup"]
+});
+let c4902_6 = {
+  LOOP: 0,
+  0: "LOOP",
+  STILL: 1,
+  1: "STILL",
+  ONCE: 2,
+  2: "ONCE"
+};
+export default function NativeLottieView(props) {
+  const { asset, url, width, height, opacity = 1, renderMode = c4902_6.LOOP } = props;
+  const LOOP = renderMode;
+  const { animating = true, accessibilityLabel } = props;
+  const ref = Module19.useRef(null);
+  const current = {
+    asset,
+    url,
+    width,
+    height,
+    animating,
+    accessibilityLabel
+  };
+  const ref2 = useRef(current);
+  useEffect(() => {
+    ref2.current = current;
+  });
+  useEffect(() => {
+    const current2 = ref2.current;
+    const { asset, url, width, height, animating, accessibilityLabel } = current2;
+    if (url !== "" && width !== 0 && height !== 0) {
+      c4902_5.setup(ref.current, asset, url, width, height, LOOP, animating, accessibilityLabel);
+    }
+  }, [LOOP]);
+  return <NativeLottieNode ref={ref} style={{
+    width,
+    height,
+    opacity
+  }} />;
+};
+export { c4902_6 as NativeLottieRenderMode };

modules/stickers/native/Sticker.tsx

@@ -0,0 +1,69 @@
+// Metro module 9635 (f9636).
+import { PixelRatio } from "react-native";
+import ThemeStore from "../../user_settings/ThemeStore";
+import { StickerFormat } from "../StickersTypes";
+import * as _StickersUtils from "../StickersUtils";
+import { isGuildSticker, getStickerExtensionFromFormatType } from "../StickersUtils";
+import { intl, t } from "../../../intl/index.native";
+import NativeLottieView, { NativeLottieRenderMode } from "./NativeLottieView";
+import NativeAPNGView from "../../../components_native/common/NativeAPNGView";
+import FastImage from "../../../components_native/common/FastImage";
+import { isThemeDark } from "../../../design/shared";
+import Module5207 from "../../../_bundle/Module5207";
+import Module5208 from "../../../_bundle/Module5208";
+export default function Sticker(props) {
+  const { sticker, size, animated = true, opaque = true } = props;
+  const opacity = opaque ? 1 : 0.3;
+  let url = sticker.format_type === StickerFormat.LOTTIE ? _StickersUtils.getStickerAssetUrl(sticker) : sticker.format_type === StickerFormat.APNG ? _StickersUtils.getStickerAssetUrl(sticker, {
+    isPreview: !animated,
+    size
+  }) : _StickersUtils.getStickerAssetUrl(sticker, {
+    isPreview: !animated,
+    size: PixelRatio.getPixelSizeForLayoutSize(size)
+  });
+  if (url == null) {
+    url = "";
+  }
+  const accessibilityLabel = intl.formatToPlainString(t.rk6pOw, {
+    stickerName: sticker.name
+  });
+  if (sticker.format_type === StickerFormat.LOTTIE) {
+    let id = sticker.id;
+    if (id == null) {
+      id = "";
+    }
+    return <NativeLottieView url={url} asset={id} width={size} height={size} opacity={opacity} renderMode={animated ? NativeLottieRenderMode.LOOP : NativeLottieRenderMode.STILL} accessibilityLabel={accessibilityLabel} />;
+  }
+  L19: {
+    if (sticker.format_type === StickerFormat.APNG) {
+      if ("type" in sticker && !isGuildSticker(sticker)) {
+        break L19;
+      }
+      return <NativeAPNGView style={{
+        height: size,
+        width: size,
+        opacity
+      }} url={url} name={`${sticker.id}.${getStickerExtensionFromFormatType(sticker.format_type)}`} accessibilityLabel={accessibilityLabel} />;
+    }
+  }
+  return <FastImage resizeMode="contain" style={{
+    height: size,
+    width: size,
+    opacity
+  }} placeholder={isThemeDark(ThemeStore.theme) ? Module5207 : Module5208} source={{
+    uri: url
+  }} accessible accessibilityLabel={accessibilityLabel} />;
+};
+export function getStickerAssetUrl(a0, a1, a2) {
+  let r25 = a0.format_type === StickerFormat.LOTTIE ? _StickersUtils.getStickerAssetUrl(a0) : a0.format_type === StickerFormat.APNG ? _StickersUtils.getStickerAssetUrl(a0, {
+    isPreview: !a2,
+    size: a1
+  }) : _StickersUtils.getStickerAssetUrl(a0, {
+    isPreview: !a2,
+    size: PixelRatio.getPixelSizeForLayoutSize(a1)
+  });
+  if (r25 == null) {
+    r25 = "";
+  }
+  return r25;
+}

modules/stickers/native/StickerDetailActionSheet.tsx

@@ -0,0 +1,486 @@
+// Metro module 9640 (f9641).
+import * as Module19 from "react";
+import { useMemo, useEffect, useCallback, useState, useRef } from "react";
+import { ActivityIndicator, View, Pressable } from "react-native";
+import GuildStore from "../../../stores/GuildStore";
+import UserStore from "../../../stores/UserStore";
+import StickersStore from "../StickersStore";
+import { PADDING_HORIZONTAL, MIN_MARGIN, STICKER_SIZE } from "./StickerPickerConstants";
+import { AnalyticsPages, AnalyticsSections, AnalyticEvents, UserSettingsSections, GuildFeatures } from "../../../Constants";
+import { ACTION_SHEET_MAX_WIDTH } from "../../action_sheet/native/ActionSheetConstants";
+import { jsx } from "react/jsx-runtime";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import Module712 from "../../../_bundle/Module712";
+import { useFetchStickerPack, useFavoriteStickerIds, useStickerForRenderableSticker } from "../StickersHooks";
+import { StarIcon } from "../../../design/components/Icon/native/redesign/generated/StarIcon";
+import { StarOutlineIcon } from "../../../design/components/Icon/native/redesign/generated/StarOutlineIcon";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { unfavoriteSticker, favoriteSticker } from "../StickersActionCreators";
+import ToastActionCreators from "../../toast/native/ToastActionCreators";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import StickerPickerListRow from "./StickerPickerListRow";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { hideStickerDetailActionSheet } from "./showStickerDetailActionSheet";
+import { openStickerPickerToPackId } from "./StickersUtils";
+import openStickerPackDetailActionSheet, { AnalyticsPopoutType } from "./openStickerPackDetailActionSheet";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import TidaWebformExperiment from "../../guild/TidaWebformExperiment";
+import { DeveloperMode } from "../../user_settings/UserSettings";
+import { getStickerAssetUrl, isStandardSticker, isGuildSticker } from "../StickersUtils";
+import { collectChannelAnalyticsMetadata } from "../../app_analytics/AppAnalyticsUtils";
+import GuildActionCreators from "../../../actions/GuildActionCreators";
+import getStickerDiscoverableGuild from "../../messages/getStickerDiscoverableGuild";
+import { openUserSettings } from "../../user_settings/core/native/openUserSettings";
+import Sticker from "./Sticker";
+import { MoreHorizontalIcon } from "../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
+import NitroUpsellButton from "../../premium/components/native/NitroUpsellButton";
+import openStickersPremiumUpsellAlert from "./premium/openStickersPremiumUpsellAlert";
+import { FormDivider } from "../../../design/void/Form/native/index";
+import ExpressionGuildDetails from "../../messages/native/emoji/ExpressionGuildDetails";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { HermesBuiltin } from "../../../_hermes/prelude";
+let UnavailableStickerDetail, useStyles, GuildStickerDetail;
+let env6375 = {};
+const StandardStickerDetail = function StandardStickerDetail(props) {
+  let r125;
+  let env17365 = {
+    $parent: env6375
+  };
+  const { sticker: sticker2, channel: channel3 } = props;
+  env17365[0] = channel3;
+  env17365[1] = props.chatInputRef;
+  env17365[2] = void 0;
+  env17365[3] = void 0;
+  env17365[4] = void 0;
+  env17365[5] = void 0;
+  const styles = useStyles();
+  const pack_id = sticker2.pack_id;
+  env17365[2] = pack_id;
+  const name = sticker2.name;
+  const stateFromStores2 = useStateFromStores([StickersStore], () => StickersStore.getStickerPack(env17365[2]));
+  env17365[3] = stateFromStores2;
+  const stateFromStores3 = useStateFromStores([StickersStore], () => StickersStore.isPremiumPack(env17365[2]));
+  env17365[4] = stateFromStores3;
+  useFetchStickerPack(pack_id);
+  const containerWidth = useWindowDimensions_native().width - 2 * PADDING_HORIZONTAL;
+  const rowSize = Math.floor(Math.min(ACTION_SHEET_MAX_WIDTH, containerWidth - MIN_MARGIN) / (STICKER_SIZE + MIN_MARGIN));
+  const memo3 = useMemo(() => ({
+    page: env17365[0].guild_id != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
+    section: AnalyticsSections.STICKER_POPOUT
+  }), [channel3.guild_id]);
+  env17365[5] = memo3;
+  useEffect(() => {
+    const r5 = env17365[3];
+    if (r5 != null) {
+      AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
+        location: env17365[5],
+        type: "Sticker Upsell Sheet",
+        sticker_pack_id: r5.id
+      });
+    }
+  }, [memo3, stateFromStores2]);
+  if (stateFromStores2 == null) {
+    r125 = (0, jsx)(ActivityIndicator, {
+      size: "large"
+    });
+  } else {
+    const stateFromStores = stateFromStores2;
+    r125 = <>
+      <Text variant="heading-md/extrabold" color="mobile-text-heading-primary">{name}</Text>
+      <Text style={styles.description} variant="text-sm/medium">
+        {stateFromStores3 ? intl.format(t.auckXz, {
+          stickerPackName: stateFromStores.name
+        }) : intl.format(t.OzB6e3, {
+          stickerPackName: stateFromStores.name
+        })}
+      </Text>
+      <StickerPickerListRow containerWidth={containerWidth} stickers={stateFromStores.stickers.slice(0, rowSize)} rowSize={rowSize} />
+      {stateFromStores3 ? <View style={{
+        height: Module712.space.PX_16
+      }} /> : null}
+      {stateFromStores3 && <Button variant="secondary" text={intl.string(t.GPy3Ar)} onPress={() => {
+        hideStickerDetailActionSheet();
+        if (stateFromStores != null && env17365[4]) {
+          const r15 = env17365[1];
+          if (r15 != null) {
+            openStickerPickerToPackId(r15, env17365[2]);
+          } else {
+            openStickerPackDetailActionSheet({
+              analyticsLocation: env17365[5],
+              analyticsPopoutType: AnalyticsPopoutType.STICKER_PACK_UPSELL,
+              stickerPack: stateFromStores
+            });
+          }
+        } else {
+          openStickerPackDetailActionSheet({
+            analyticsLocation: env17365[5],
+            analyticsPopoutType: AnalyticsPopoutType.STICKER_PACK_UPSELL,
+            stickerPack: stateFromStores
+          });
+        }
+      }} />}
+    </>;
+  }
+  return r125;
+};
+UnavailableStickerDetail = function UnavailableStickerDetail(props) {
+  let stickerAssetUrl;
+  const { renderableSticker, channel } = props;
+  stickerAssetUrl = void 0;
+  const styles = useStyles();
+  const canUseCustomStickersEverywhere = PremiumUtils.canUseCustomStickersEverywhere(UserStore.getCurrentUser());
+  const memo = useMemo(() => ({
+    page: channel.guild_id != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
+    section: AnalyticsSections.STICKER_POPOUT
+  }), [channel.guild_id]);
+  let tidaWebformEnabled = TidaWebformExperiment.useExperiment({
+    location: "StickerDetailActionSheet"
+  }, {
+    autoTrackExposure: false
+  }).tidaWebformEnabled;
+  const setting = DeveloperMode.useSetting();
+  if (tidaWebformEnabled) {
+    tidaWebformEnabled = setting;
+  }
+  stickerAssetUrl = getStickerAssetUrl(renderableSticker);
+  const callback2 = useCallback(() => {
+    if (stickerAssetUrl != null) {
+      ActionSheetActionCreators.openLazy(import("./StickerOptionsActionSheet"), "StickerOptionsActionSheet", {
+        stickerUrl: stickerAssetUrl
+      }, "stack");
+    }
+  }, [stickerAssetUrl]);
+  const r59 = [<Sticker sticker={renderableSticker} size={48} />, <View style={styles.guildEmojiDescription}>
+    <Text variant="heading-md/extrabold" color="mobile-text-heading-primary">{renderableSticker.name}</Text>
+    <Text style={styles.description} variant="text-sm/medium">
+      {canUseCustomStickersEverywhere ? intl.string(t.vZaScH) : intl.format(t.hGWuxU, {
+        openPremiumSettings: () => {
+          ActionSheetActionCreators.hideActionSheet();
+          AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
+            location_page: memo.page,
+            location_section: memo.section
+          });
+          openUserSettings({
+            screen: UserSettingsSections.PREMIUM,
+            params: {
+              analyticsLocation: memo
+            }
+          });
+        }
+      })}
+    </Text>
+  </View>, ,];
+  if (tidaWebformEnabled) {
+    tidaWebformEnabled = stickerAssetUrl != null;
+  }
+  if (tidaWebformEnabled) {
+    tidaWebformEnabled = <Pressable accessibilityLabel={intl.string(t.PdRCRg)} style={styles.moreMenuIcon} onPress={callback2}>
+      <MoreHorizontalIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
+    </Pressable>;
+  }
+  r59[2] = tidaWebformEnabled;
+  return <View style={styles.guildEmojiTopContainer}>{r59}</View>;
+};
+useStyles = createStyles({
+  content: {
+    padding: 16,
+    paddingBottom: isAndroid() ? 16 : 0
+  },
+  description: {
+    lineHeight: 18,
+    marginTop: 4
+  },
+  guildEmojiTopContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  buttonContainer: {
+    marginTop: Module712.space.PX_12
+  },
+  guildEmojiDescription: {
+    paddingLeft: 16,
+    flex: 1
+  },
+  divider: {
+    marginLeft: 0,
+    marginTop: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_16,
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  moreMenuIcon: {
+    height: 32,
+    width: 32,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  favoriteContainer: {
+    paddingTop: Module712.space.PX_4
+  },
+  starIcon: {
+    height: 32,
+    width: 32
+  },
+  starIconSelected: {
+    tintColor: Module712.colors.ICON_FEEDBACK_WARNING
+  },
+  starIconUnselected: {
+    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  }
+});
+GuildStickerDetail = (props) => {
+  let r3, r33, r125, popoutType;
+  let state2, setState2, stickerAssetUrl2, memo2, current, ref;
+  const { sticker, channel: channel2 } = props;
+  state2 = void 0;
+  setState2 = void 0;
+  stickerAssetUrl2 = void 0;
+  memo2 = void 0;
+  current = void 0;
+  ref = void 0;
+  const r19 = useStyles();
+  let [guild, setState] = useState(null);
+  const state = guild;
+  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(sticker.guild_id));
+  const hasJoinedGuild = stateFromStores2 != null;
+  const r44 = stateFromStores2 == null || stateFromStores2.features.has(GuildFeatures.DISCOVERABLE);
+  [state2, setState2] = useState(!r44);
+  const canUseCustomStickersEverywhere = PremiumUtils.canUseCustomStickersEverywhere(UserStore.getCurrentUser());
+  let tidaWebformEnabled = TidaWebformExperiment.useExperiment({
+    location: "StickerDetailActionSheet"
+  }, {
+    autoTrackExposure: false
+  }).tidaWebformEnabled;
+  const setting = DeveloperMode.useSetting();
+  const id = sticker.id;
+  const r73 = useStyles();
+  let c17369_1 = r73;
+  const r78 = useFavoriteStickerIds().includes(id);
+  let c17369_2 = r78;
+  const callback = useCallback((a0) => {
+    let style;
+    const r1 = {};
+    HermesBuiltin.copyDataProperties(r1, c17369_1.starIcon);
+    if (a0) {
+      HermesBuiltin.copyDataProperties(r1, c17369_1.starIconSelected);
+      style = r1;
+    } else {
+      HermesBuiltin.copyDataProperties(r1, c17369_1.starIconUnselected);
+      style = r1;
+    }
+    return a0 ? <StarIcon style={style} /> : <StarOutlineIcon style={style} />;
+  }, [r73]);
+  const callback3 = useCallback(() => {
+    const content = function content() {
+      return <Text style={{
+        marginLeft: 8,
+        marginTop: 2
+      }} variant="text-md/bold">
+        {c17369_2 ? intl.string(t.in1rga) : intl.string(t.mE2e8A)}
+      </Text>;
+    };
+    ActionSheetActionCreators.hideActionSheet();
+    if (c17369_2) {
+      unfavoriteSticker(id);
+      ToastActionCreators.open({
+        key: "STICKER_UNFAVORITED",
+        icon: () => callback(false),
+        content
+      });
+    } else {
+      favoriteSticker(id);
+      ToastActionCreators.open({
+        key: "STICKER_FAVORITED",
+        icon: () => callback(true),
+        content
+      });
+    }
+  }, [r78, id, callback]);
+  if (tidaWebformEnabled) {
+    tidaWebformEnabled = setting;
+  }
+  stickerAssetUrl2 = getStickerAssetUrl(sticker);
+  const callback2 = useCallback(() => {
+    if (stickerAssetUrl2 != null) {
+      ActionSheetActionCreators.openLazy(import("./StickerOptionsActionSheet"), "StickerOptionsActionSheet", {
+        stickerUrl: stickerAssetUrl2
+      }, "stack");
+    }
+  }, [stickerAssetUrl2]);
+  memo2 = useMemo(() => ({
+    page: channel2.guild_id != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
+    section: AnalyticsSections.STICKER_POPOUT
+  }), [channel2.guild_id]);
+  const current2 = useRef({
+    guild_id: channel2.getGuildId(),
+    ...collectChannelAnalyticsMetadata(channel2)
+  }).current;
+  useEffect(() => {
+    let _fetchDiscoverableGuild2 = function _fetchDiscoverableGuild() {
+      const r9 = async () => {
+        let c31508_1;
+        c31508_1 = void 0;
+        let c31989_0 = await getStickerDiscoverableGuild(sticker.id);
+        (0, setState)(c31989_0);
+        (0, setState2)(true);
+      };
+      _fetchDiscoverableGuild2 = r9;
+      return r9.apply(this, arguments);
+    };
+    if (!state2) {
+      (function fetchDiscoverableGuild() {
+        return _fetchDiscoverableGuild2.apply(this, arguments);
+      })();
+    }
+  }, [sticker.id, state2]);
+  const r115 = sticker.guild_id === channel2.getGuildId();
+  const r6 = state != null;
+  if (canUseCustomStickersEverywhere) {
+    const r143 = hasJoinedGuild ? r115 ? intl.string(t.fZ0DiG) : intl.string(t["1f6D9m"]) : r6 ? intl.string(t.yHmoR9) : intl.string(t.vZaScH);
+    r125 = false;
+    popoutType = "Custom Sticker Popout";
+    r33 = r143;
+    r3 = false;
+  } else if (hasJoinedGuild) {
+    if (r115) {
+      r33 = intl.string(t.jNphpt);
+      r125 = true;
+      popoutType = "Custom Sticker Popout (Upsell)";
+      r3 = true;
+    } else {
+      r33 = intl.string(t.lyD5ZW);
+      r125 = true;
+      popoutType = "Custom Sticker Popout (Upsell)";
+      r3 = true;
+    }
+  } else if (r6) {
+    r33 = intl.string(t.IuXYch);
+    r125 = true;
+    popoutType = "Custom Sticker Popout (Upsell)";
+    r3 = true;
+  } else {
+    r33 = intl.format(t.hGWuxU, {
+      openPremiumSettings: () => {
+        ActionSheetActionCreators.hideActionSheet();
+        AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
+          location_page: memo2.page,
+          location_section: memo2.section
+        });
+        openUserSettings({
+          screen: UserSettingsSections.PREMIUM,
+          params: {
+            analyticsLocation: memo2
+          }
+        });
+      }
+    });
+    r125 = false;
+    popoutType = "Custom Sticker Popout (Soft Upsell)";
+    r3 = false;
+  }
+  const showingJoinGuildCta = (r3 ? !r3 : !hasJoinedGuild) && r6;
+  current = {
+    popoutAnalyticsConfig: current2,
+    popoutType
+  };
+  ref = useRef(current);
+  useEffect(() => {
+    ref.current = current;
+  });
+  useEffect(() => {
+    const current2 = ref.current;
+    const { popoutAnalyticsConfig, popoutType } = current2;
+    if (state2) {
+      AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
+        type: popoutType,
+        ...popoutAnalyticsConfig
+      });
+    }
+  }, [state2]);
+  let r159 = null;
+  if (state2) {
+    const r208 = [<View style={r19.guildEmojiTopContainer}>
+      <Sticker sticker={sticker} size={48} />
+      <View style={r19.guildEmojiDescription}>
+        <Text variant="heading-md/extrabold" color="mobile-text-heading-primary">{sticker.name}</Text>
+        <Text style={r19.description} variant="text-sm/medium">{r33}</Text>
+      </View>
+      {(tidaWebformEnabled ? stickerAssetUrl2 != null : tidaWebformEnabled) && <Pressable accessibilityLabel={intl.string(t.PdRCRg)} style={r19.moreMenuIcon} onPress={callback2}>
+        <MoreHorizontalIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
+      </Pressable>}
+    </View>, , , , ,];
+    if (r125) {
+      r125 = <View style={r19.buttonContainer}>
+        <NitroUpsellButton text={intl.string(t["gl/XHJ"])} onPress={() => openStickersPremiumUpsellAlert(memo2)} />
+        <View style={{
+          height: Module712.space.PX_16
+        }} />
+      </View>;
+    }
+    r208[1] = r125;
+    r208[2] = showingJoinGuildCta && <View style={r19.buttonContainer}>
+      <Button text={intl.string(t.riu2R5)} onPress={() => {
+        if (state != null) {
+          const id2 = state.id;
+          GuildActionCreators.joinGuild(id2).then(() => {
+            GuildActionCreators.transitionToGuildSync(id2);
+          });
+        }
+      }} />
+      <View style={{
+        height: Module712.space.PX_16
+      }} />
+    </View>;
+    let r259 = stateFromStores2 != null || state != null;
+    if (r259) {
+      const r266 = [<FormDivider style={r19.divider} />, ,];
+      if (state == null) {
+        guild = stateFromStores2;
+      }
+      r266[1] = <ExpressionGuildDetails guild={guild} showingJoinGuildCta={showingJoinGuildCta} hasJoinedGuild={hasJoinedGuild} title={hasJoinedGuild ? intl.string(t.kx6pEG) : intl.string(t.pDE7Gb)} />;
+      r259 = <>{r266}</>;
+    }
+    r208[3] = r259;
+    if (tidaWebformEnabled) {
+      tidaWebformEnabled = hasJoinedGuild;
+    }
+    if (tidaWebformEnabled) {
+      tidaWebformEnabled = <>
+        {[<FormDivider style={r19.divider} />, <View style={r19.favoriteContainer}>
+          <Button text={r78 ? intl.string(t.XhzKyF) : intl.string(t.kWmiPW)} variant={r78 ? "tertiary" : "primary"} size="md" onPress={callback3} />
+        </View>]}
+      </>;
+    }
+    r208[4] = tidaWebformEnabled;
+    r159 = <>{r208}</>;
+  }
+  return r159;
+};
+const r105 = Module19.memo(function StickerDetailActionSheet(props) {
+  let r26;
+  const { renderableSticker, channel: channel3, chatInputRef } = props;
+  const styles = useStyles();
+  const [sticker2, r8] = useStickerForRenderableSticker(renderableSticker, true);
+  let r24 = <ActivityIndicator size="large" />;
+  if (sticker2 == null && r8) {
+    r26 = <UnavailableStickerDetail renderableSticker={renderableSticker} channel={channel3} />;
+  } else {
+    r26 = r24;
+    if (sticker2 != null) {
+      if (isStandardSticker(sticker2)) {
+        r24 = <StandardStickerDetail sticker={sticker2} channel={channel3} chatInputRef={chatInputRef} />;
+      } else if (isGuildSticker(sticker2)) {
+        r24 = <GuildStickerDetail sticker={sticker2} channel={channel3} />;
+      }
+      r26 = r24;
+    }
+  }
+  return <BottomSheet startExpanded>
+    <View style={styles.content}>{r26}</View>
+  </BottomSheet>;
+});
+export default r105;

modules/stickers/native/StickerOptionsActionSheet.tsx

@@ -0,0 +1,23 @@
+// Metro module 9641 (f9642).
+import { useCallback } from "react";
+import { copy } from "../../../utils/ClipboardUtils.native";
+import { presentCopiedToClipboard } from "../../toast/native/ToastUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
+import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
+import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
+import { LinkIcon } from "../../../design/components/Icon/native/redesign/generated/LinkIcon";
+import { intl, t } from "../../../intl/index.native";
+export default function StickerOptionsActionSheet(props) {
+  const stickerUrl = props.stickerUrl;
+  const callback = useCallback(() => {
+    copy(stickerUrl);
+    presentCopiedToClipboard();
+    ActionSheetActionCreators.hideActionSheet();
+  }, [stickerUrl]);
+  return <ActionSheet>
+    <TableRowGroup hasIcons>
+      <TableRow icon={<LinkIcon />} label={intl.string(t.B1ubHx)} onPress={callback} />
+    </TableRowGroup>
+  </ActionSheet>;
+};

modules/stickers/native/StickerPackBanner.tsx

@@ -0,0 +1,12 @@
+// Metro module 9632 (f9633).
+import { Image as Image2, View } from "react-native";
+import { getStickerPackBannerAssetUrl } from "../StickersUtils";
+export default function StickerPackBanner(props) {
+  const { containerStyle, style } = props;
+  const stickerPackBannerAssetUrl = getStickerPackBannerAssetUrl(props.stickerPack, 1024);
+  return stickerPackBannerAssetUrl != null ? <View style={containerStyle}>
+    <Image2 source={{
+      uri: stickerPackBannerAssetUrl
+    }} style={style} resizeMode="contain" />
+  </View> : null;
+};

modules/stickers/native/StickerPackDetailActionSheet.tsx

@@ -0,0 +1,109 @@
+// Metro module 9628 (f9629).
+import { memo, useState, useRef, useEffect } from "react";
+import { MIN_MARGIN, STICKER_SIZE } from "./StickerPickerConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { ACTION_SHEET_MAX_WIDTH } from "../../action_sheet/native/ActionSheetConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import Module12 from "../../../_bundle/Module12";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import StickerPackHeader from "./StickerPackHeader";
+import StickerPackInformationPopout, { doesStickerPackHavePopoutInformation } from "./StickerPackInformationPopout";
+import { ActionSheetHeaderBar } from "../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
+import { BottomSheetScrollView } from "../../../_bundle/Module5245";
+import StickerPickerListRow from "./StickerPickerListRow";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import Sticker from "./Sticker";
+const useStyles = createStyles({
+  focusedStickerPreviewContainer: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    height: "100%",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.85)"
+  },
+  header: {
+    marginHorizontal: 16,
+    marginVertical: 8,
+    backgroundColor: "transparent",
+    height: void 0
+  },
+  stickers: {
+    paddingHorizontal: 16,
+    marginBottom: 16
+  },
+  popoutContainer: {
+    position: "absolute",
+    bottom: 50
+  }
+});
+const r43 = memo(function StickerPackDetailActionSheet(props) {
+  let setState, state, setState2, ref, containerWidth, ref2;
+  const { stickerPack, analyticsPopoutType, onClose } = props;
+  setState = void 0;
+  state = void 0;
+  setState2 = void 0;
+  ref = void 0;
+  containerWidth = void 0;
+  ref2 = void 0;
+  const onPressSticker2 = function onPressSticker(a0) {
+    setState(a0);
+  };
+  const toggleDisplayingPackDetails = function toggleDisplayingPackDetails() {
+    if (ref.current != null) {
+      clearTimeout(ref.current);
+    }
+    setState2(!state);
+    if (!state) {
+      ref.current = setTimeout(() => setState2(false), 4000);
+    }
+  };
+  const styles = useStyles();
+  const width = useWindowDimensions_native().width;
+  let sticker;
+  [sticker, setState] = useState(null);
+  let state2;
+  [state2, setState2] = useState(false);
+  state = state2;
+  ref = useRef(null);
+  const bottom = useSafeAreaInsets_native().bottom;
+  containerWidth = Math.floor(Math.min(ACTION_SHEET_MAX_WIDTH, width) / (STICKER_SIZE + MIN_MARGIN));
+  const r55 = Module12.chunk(stickerPack.stickers, containerWidth);
+  ref2 = useRef(onClose);
+  useEffect(() => {
+    ref2.current = onClose;
+  }, [onClose]);
+  useEffect(() => () => {
+    const current = ref2.current;
+    return current == null ? void 0 : current.call(ref2);
+  }, []);
+  useEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
+      type: analyticsPopoutType,
+      sticker_pack_id: stickerPack.id
+    });
+  }, [analyticsPopoutType, stickerPack.id]);
+  const r109 = [<BottomSheet scrollable startExpanded handleDisabled header={<>
+    <StickerPackHeader stickerPack={stickerPack} style={styles.header} onPress={doesStickerPackHavePopoutInformation(stickerPack) ? toggleDisplayingPackDetails : void 0} withBanner withDescription />
+    <ActionSheetHeaderBar variant="floating" />
+  </>}>
+    <BottomSheetScrollView style={styles.stickers} contentContainerStyle={{
+      paddingBottom: 32 + bottom
+    }}>
+      {r55.map((item, index) => <StickerPickerListRow key={index} containerWidth={containerWidth} stickers={item} rowSize={containerWidth} onPressSticker={onPressSticker2} nativeRow={false} />)}
+    </BottomSheetScrollView>
+  </BottomSheet>, sticker != null && <PressableOpacity accessibilityRole="none" style={styles.focusedStickerPreviewContainer} onPress={() => setState(null)}>
+    <Sticker sticker={sticker} size={128} />
+  </PressableOpacity>, ,];
+  if (state) {
+    state2 = <StickerPackInformationPopout stickerPack={stickerPack} style={styles.popoutContainer} onClose={toggleDisplayingPackDetails} />;
+  }
+  r109[2] = state2;
+  return <>{r109}</>;
+});
+export default r43;

modules/stickers/native/StickerPackHeader.tsx

@@ -0,0 +1,111 @@
+// Metro module 9629 (f9630).
+import { memo } from "react";
+import { View } from "react-native";
+import * as _StickerPickerConstants from "./StickerPickerConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { Text } from "../../../design/components/Text/native/Text";
+import { isStickerPackAnimated } from "../StickersUtils";
+import { Icon } from "../../../design/void/native";
+import Module9630 from "../../../_bundle/Module9630";
+import Module9631 from "../../../_bundle/Module9631";
+import { intl, t } from "../../../intl/index.native";
+import StickerPackBanner from "./StickerPackBanner";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+const { PADDING_HORIZONTAL, PADDING_VERTICAL } = _StickerPickerConstants;
+const useStyles = createStyles({
+  section: {
+    paddingTop: PADDING_VERTICAL,
+    paddingHorizontal: PADDING_HORIZONTAL,
+    height: 36 + 2 * PADDING_VERTICAL,
+    justifyContent: "center",
+    overflow: "hidden",
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  },
+  label: {
+    flex: -1
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  bannerContainer: {
+    aspectRatio: 3.824074074074074,
+    marginVertical: -8,
+    width: "100%"
+  },
+  banner: {
+    height: "100%"
+  },
+  headline: {
+    height: 20,
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  iconContainer: {
+    marginLeft: 8,
+    height: 16,
+    width: 16,
+    borderRadius: Module712.radii.sm,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  icon: {
+    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  animatedIcon: {
+    position: "relative",
+    left: 1
+  },
+  premiumIcon: {
+    position: "relative",
+    left: -1
+  }
+});
+const r64 = memo(function(a0) {
+  const { stickerPack, style, onPress } = a0;
+  let withBanner = a0.withBanner;
+  if (withBanner === void 0) {
+    withBanner = false;
+  }
+  let withDescription = a0.withDescription;
+  if (withDescription === void 0) {
+    withDescription = false;
+  }
+  const styles = useStyles();
+  const r72 = [<View style={styles.header}>
+    <View style={styles.headline}>
+      <Text style={styles.label} lineClamp={1} variant="text-md/bold" color="mobile-text-heading-primary">{stickerPack.name}</Text>
+      {isStickerPackAnimated(stickerPack) && <View style={styles.iconContainer}>
+        <Icon source={Module9630} style={styles.animatedIcon} size={Icon.Sizes.EXTRA_SMALL} color={styles.icon.color} />
+      </View>}
+      <View style={styles.iconContainer}>
+        <Icon source={Module9631} style={styles.premiumIcon} size={Icon.Sizes.EXTRA_SMALL} color={styles.icon.color} />
+      </View>
+    </View>
+  </View>, , ,];
+  if (withDescription) {
+    withDescription = stickerPack.description != null;
+  }
+  if (withDescription) {
+    withDescription = <Text variant="text-sm/medium">{stickerPack.description}</Text>;
+  }
+  r72[1] = withDescription;
+  r72[2] = <Text lineClamp={1} variant="text-xs/medium" color="text-default">
+    {intl.format(t["0S3JpO"], {
+      numStickers: stickerPack.stickers.length
+    })}
+  </Text>;
+  const r97 = <>{r72}</>;
+  if (withBanner) {
+    withBanner = <StickerPackBanner stickerPack={stickerPack} containerStyle={styles.bannerContainer} style={styles.banner} />;
+  }
+  return <>
+    {withBanner}
+    {onPress != null ? <PressableOpacity style={[styles.section, style]} onPress={onPress} accessibilityRole="header">{r97}</PressableOpacity> : <View style={[styles.section, style]}>{r97}</View>}
+  </>;
+});
+export default r64;

modules/stickers/native/StickerPackInformationPopout.tsx

@@ -0,0 +1,83 @@
+// Metro module 9633 (f9634).
+import { FlatList, View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { isStickerPackAnimated } from "../StickersUtils";
+import { intl, t } from "../../../intl/index.native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+const useStyles = createStyles({
+  informationContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    width: "90%",
+    marginHorizontal: "5%",
+    padding: 16,
+    borderRadius: Module712.radii.xs,
+    shadowColor: Module712.colors.BLACK,
+    shadowOffset: {
+      width: 2,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 5
+  },
+  headerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 8
+  },
+  informationHeader: {
+    lineHeight: 20
+  },
+  informationContentContainer: {
+    flexDirection: "row"
+  },
+  informationContent: {
+    lineHeight: 20
+  },
+  informationContentDescription: {
+    flex: 1,
+    marginLeft: 5
+  }
+});
+export default function StickerPackInformationPopout(props) {
+  const { stickerPack, onClose, style } = props;
+  const styles = useStyles();
+  const data = [];
+  if (isStickerPackAnimated(stickerPack)) {
+    data.push({
+      key: "animated",
+      description: intl.string(t.W11rMa)
+    });
+  }
+  return <View style={[styles.informationContainer, style]}>
+    <View style={styles.headerContainer}>
+      <Text style={styles.informationHeader} variant="text-md/semibold" color="mobile-text-heading-primary">
+        {intl.format(t.XDm6yN, {
+          stickerPackName: stickerPack.name
+        })}
+      </Text>
+      <PressableOpacity onPress={onClose} accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)}>
+        <Text variant="text-md/bold" color="text-brand">
+          {intl.string(t.cpT0Cq)}
+        </Text>
+      </PressableOpacity>
+    </View>
+    <FlatList data={data} renderItem={function renderItem(info) {
+      return <View style={styles.informationContentContainer}>
+        <Text style={styles.informationContent} variant="text-md/medium" color="text-default">•</Text>
+        <Text style={[styles.informationContent, styles.informationContentDescription]} variant="text-md/medium" color="text-default">{info.item.description}</Text>
+      </View>;
+    }} />
+  </View>;
+};
+export function doesStickerPackHavePopoutInformation(a0) {
+  const r2 = [];
+  if (isStickerPackAnimated(a0)) {
+    r2.push({
+      key: "animated",
+      description: intl.string(t.W11rMa)
+    });
+  }
+  return r2.length > 0;
+}

modules/stickers/native/StickerPicker.tsx

@@ -0,0 +1,144 @@
+// Metro module 9618 (f9619).
+import { memo, useState, useCallback, useEffect } from "react";
+import { ActivityIndicator, View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import StickersStore from "../StickersStore";
+import { STICKER_SEARCH_HEADER_HEIGHT } from "../StickersConstants";
+import { AnalyticEvents, AnalyticsPages, AnalyticsSections, ChatInputComponentViewedTypes, UpsellTypes } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { useFetchStickerPacks } from "../StickersHooks";
+import { useStickerCategories } from "./StickersUtils";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import useExpressionPickerInsets from "../../expression_picker/native/useExpressionPickerInsets";
+import { batchUpdates } from "../../../_bundle/Module705";
+import { searchAllStickers } from "../StickersSearchUtils";
+import { getStickerSendability, StickerSendability } from "../StickerSendability";
+import { isStandardSticker, isGuildSticker } from "../StickersUtils";
+import openStickerPackDetailActionSheet, { AnalyticsPopoutType } from "./openStickerPackDetailActionSheet";
+import PremiumUpsellUtils from "../../../utils/native/PremiumUpsellUtils";
+import TidaWebformExperiment from "../../guild/TidaWebformExperiment";
+import { showStickerDetailActionSheet } from "./showStickerDetailActionSheet";
+import { SearchField } from "../../../design/components/TextField/native/SearchField.native";
+import { intl, t } from "../../../intl/index.native";
+import StickerPickerEmptyState from "./StickerPickerEmptyState";
+import StickerPickerList from "./StickerPickerList";
+import StickerPickerCategories from "./StickerPickerCategories";
+const useStyles = createStyles({
+  container: {
+    flex: 1
+  },
+  header: {
+    paddingVertical: Module712.space.PX_8
+  },
+  loadingIndicator: {
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1
+  },
+  emptyState: {
+    marginTop: STICKER_SEARCH_HEADER_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1
+  }
+});
+const r54 = memo(function StickerPicker(props) {
+  let setState, analyticsLocations, setState2;
+  const { bottomSheetRef, bottomSheetIndex, channel, paddingTop, onPressSticker, stickerFormats, inPortalKeyboard } = props;
+  setState = void 0;
+  analyticsLocations = void 0;
+  setState2 = void 0;
+  const styles = useStyles();
+  useFetchStickerPacks();
+  const stickerCategories = useStickerCategories(channel);
+  const stateFromStores = useStateFromStores([StickersStore], () => StickersStore.hasLoadedStickerPacks);
+  let categoryIndex;
+  [categoryIndex, setState] = useState(0);
+  analyticsLocations = useAnalyticsLocations(AnalyticsLocation.STICKER_PICKER).analyticsLocations;
+  let searchResults;
+  [searchResults, setState2] = useState(null);
+  const expressionPickerInsets = useExpressionPickerInsets({
+    hasCategories: true
+  });
+  const { safeAreaStyle, safeAreaBottomKeyboardAware } = expressionPickerInsets;
+  const callback4 = useCallback((a0) => {
+    if (a0 === "") {
+      batchUpdates(() => {
+        setState(0);
+        setState2(null);
+      });
+    } else {
+      setState2(searchAllStickers(a0));
+    }
+  }, []);
+  useEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.CHAT_INPUT_COMPONENT_VIEWED, {
+      type: ChatInputComponentViewedTypes.STICKER,
+      channel_id: channel.id,
+      guild_id: channel.guild_id
+    });
+  }, [channel.id, channel.guild_id]);
+  const callback = useCallback((a0) => {
+    const stickerSendability = getStickerSendability(a0, UserStore.getCurrentUser(), channel);
+    if (stickerSendability === StickerSendability.SENDABLE) {
+      onPressSticker(a0);
+    } else if (stickerSendability === StickerSendability.SENDABLE_WITH_PREMIUM) {
+      if (isStandardSticker(a0)) {
+        const stickerPack = StickersStore.getStickerPack(a0.pack_id);
+        if (stickerPack == null) {
+          return void 0;
+        }
+        openStickerPackDetailActionSheet({
+          analyticsLocation: {
+            page: channel.guild_id != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL
+          },
+          analyticsPopoutType: AnalyticsPopoutType.STICKER_PACK_DETAIL,
+          stickerPack
+        });
+      } else if (isGuildSticker(a0)) {
+        PremiumUpsellUtils.handleShowUpsellAlert({
+          initialUpsellKey: UpsellTypes.GLOBAL_STICKER,
+          analyticsLocation: {
+            page: channel.guild_id != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
+            section: AnalyticsSections.STICKER_PICKER_UPSELL
+          },
+          analyticsLocations
+        });
+      }
+    }
+  }, [channel, onPressSticker, analyticsLocations]);
+  const callback3 = useCallback(() => {
+    AnalyticsUtils.track(AnalyticEvents.CHAT_INPUT_COMPONENT_VIEWED, {
+      type: ChatInputComponentViewedTypes.STICKER_SEARCH,
+      channel_id: channel.id,
+      guild_id: channel.guild_id
+    });
+  }, [channel]);
+  const tidaWebformEnabled = TidaWebformExperiment.useExperiment({
+    location: "StickerPicker"
+  }, {
+    autoTrackExposure: false
+  }).tidaWebformEnabled;
+  const callback2 = useCallback((a0) => {
+    showStickerDetailActionSheet({
+      renderableSticker: a0,
+      channel
+    });
+  }, [channel]);
+  return <AnalyticsLocationProvider value={analyticsLocations}>
+    <View style={styles.container}>
+      {stickerCategories.length !== 0 ? <View style={styles.header}>
+        <SearchField size="md" placeholder={intl.string(t.dt5h1C)} onChange={callback4} onFocus={callback3} isRound />
+      </View> : null}
+      {stateFromStores ? stickerCategories.length === 0 ? <View style={styles.emptyState}>
+        <StickerPickerEmptyState />
+      </View> : <StickerPickerList bottomSheetRef={bottomSheetRef} bottomSheetIndex={bottomSheetIndex} setCategoryIndex={setState} onPressSticker={callback} onLongPressStickerDetail={tidaWebformEnabled ? callback2 : void 0} insetBottom={safeAreaBottomKeyboardAware} insetTop={paddingTop} channel={channel} stickerFormats={stickerFormats} searchResults={searchResults} inPortalKeyboard={inPortalKeyboard} /> : <ActivityIndicator animating size="large" style={styles.loadingIndicator} />}
+      <StickerPickerCategories categories={stickerCategories} categoryIndex={categoryIndex} style={safeAreaStyle} />
+    </View>
+  </AnalyticsLocationProvider>;
+});
+export default r54;

modules/stickers/native/StickerPickerCategories.tsx

@@ -0,0 +1,172 @@
+// Metro module 9655 (f9656).
+import * as Module19 from "react";
+import { useCallback, useRef, useMemo, useState, useEffect } from "react";
+import { View } from "react-native";
+import GuildStore from "../../../stores/GuildStore";
+import { useStickerPickerStore } from "./StickerPickerStore";
+import { AnalyticEvents, AnalyticsPages, CATEGORY_ICON_RIPPLE_CONFIG, CATEGORY_ICON_SIZE, EXPRESSION_FOOTER_HEIGHT, NODE_SIZE } from "../../../Constants";
+import { ExpressionPickerViewType } from "../../expression_picker/ExpressionPickerConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { AnimateStickers } from "../../user_settings/UserSettings";
+import { shouldAnimateSticker } from "../StickersUtils";
+import { StickerCategoryTypes } from "../StickersTypes";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { Icon } from "../../../design/void/native";
+import { makeSource } from "../../../utils/AvatarUtils";
+import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
+import Sticker from "./Sticker";
+import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
+import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
+import useExpressionPickerCategoriesPlaceholderConfig from "../../expression_picker/native/categories/useExpressionPickerCategoriesPlaceholderConfig";
+import ExpressionPickerCategories from "../../expression_picker/native/categories/ExpressionPickerCategories";
+import FastestList_android from "../../fastest_list/FastestList.android";
+import { intl, t } from "../../../intl/index.native";
+import Module9656 from "../../../_bundle/Module9656";
+const useStyles = createStyles({
+  list: {
+    flex: 1,
+    height: EXPRESSION_FOOTER_HEIGHT
+  },
+  item: {
+    height: EXPRESSION_FOOTER_HEIGHT,
+    width: EXPRESSION_FOOTER_HEIGHT,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  itemInner: {
+    justifyContent: "center",
+    alignItems: "center",
+    height: NODE_SIZE,
+    width: NODE_SIZE,
+    borderRadius: NODE_SIZE / 2
+  },
+  fadedItem: {
+    opacity: 0.5
+  },
+  activeItem: {
+    opacity: 1,
+    backgroundColor: Module712.colors.INTERACTIVE_BACKGROUND_ACTIVE
+  },
+  guildIcon: {
+    height: CATEGORY_ICON_SIZE,
+    width: CATEGORY_ICON_SIZE,
+    borderRadius: CATEGORY_ICON_SIZE / 2
+  },
+  guildItemPlaceholder: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
+  }
+});
+let Component = Module19.memo(function({ category, onPressCategory, index, isActive }) {
+  let r75;
+  const styles = useStyles();
+  let animated = shouldAnimateSticker(AnimateStickers.useSetting(), false);
+  const guild = category.type === StickerCategoryTypes.GUILD ? GuildStore.getGuild(category.id) : null;
+  const callback3 = useCallback(() => {
+    if (!(category.type !== StickerCategoryTypes.PACK && category.type !== StickerCategoryTypes.GUILD)) {
+      AnalyticsUtils.track(AnalyticEvents.EXPRESSION_PICKER_CATEGORY_SELECTED, {
+        location: {
+          page: AnalyticsPages.EXPRESSION_PICKER
+        },
+        tab: ExpressionPickerViewType.STICKER,
+        sticker_pack_id: category.id,
+        guild_id: guild?.id
+      });
+    }
+    return onPressCategory == null ? void 0 : onPressCategory(index);
+  }, [category, guild, index, onPressCategory]);
+  const onPress = category.stickers.length > 0 ? callback3 : void 0;
+  const style = [styles.itemInner, isActive ? styles.activeItem : styles.fadedItem];
+  if (category.icon != null) {
+    r75 = <Icon style={styles.guildIcon} disableColor={category.type === StickerCategoryTypes.PACK} source={makeSource(category.icon)} />;
+  } else if (category.type === StickerCategoryTypes.GUILD) {
+    r75 = <GuildIcon guild={guild} loadingStyle={styles.guildItemPlaceholder} size={GuildIconSizes.XSMALL} style={styles.guildIcon} />;
+  } else {
+    const sticker = "previewSticker" in category && category.previewSticker != null ? category.previewSticker : category.stickers[0];
+    if (animated) {
+      animated = isActive;
+    }
+    r75 = <Sticker sticker={sticker} animated={animated} size={CATEGORY_ICON_SIZE} />;
+  }
+  return <PressableOpacity androidRippleConfig={CATEGORY_ICON_RIPPLE_CONFIG} accessibilityRole="tab" accessibilityLabel={category.name} accessibilityState={{
+    selected: isActive
+  }} disabled={category.stickers.length === 0} onPress={onPress} style={styles.item}>
+    <View style={style}>{r75}</View>
+  </PressableOpacity>;
+});
+export default ({ categories, categoryIndex, style }) => {
+  let state, setState, state2, setState2, stickerPickerStore, callback, callback2;
+  state = void 0;
+  setState = void 0;
+  state2 = void 0;
+  setState2 = void 0;
+  stickerPickerStore = void 0;
+  callback = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const ref = useRef(void 0);
+  const ref2 = useRef(null);
+  const memo = useMemo(() => [categories.length], [categories]);
+  [state, setState] = useState(null);
+  [state2, setState2] = useState(false);
+  stickerPickerStore = useStickerPickerStore((a0) => a0.setPackToScrollTo);
+  useEffect(() => {
+    const r7 = categories.findIndex((category) => category.type === StickerCategoryTypes.PACK);
+    if (r7 >= 0) {
+      setState(r7);
+    }
+  }, [categories]);
+  useEffect(() => {
+    if (ref.current != null && ref2.current != null) {
+      const r11 = categoryIndex * EXPRESSION_FOOTER_HEIGHT;
+      if (r11 > ref.current.end || r11 < ref.current.start) {
+        ref2.current.scrollToLocation({
+          section: 0,
+          item: categoryIndex,
+          animated: false
+        });
+      }
+    }
+  }, [categoryIndex]);
+  callback = useCallback(() => {
+    if (state != null && ref.current != null) {
+      setState2(state * EXPRESSION_FOOTER_HEIGHT > ref.current.end - (state2 ? 0 : EXPRESSION_FOOTER_HEIGHT));
+    }
+  }, [state, state2]);
+  const callback3 = useCallback((a0) => {
+    ref.current = {
+      start: a0.nativeEvent.contentOffset.x,
+      end: a0.nativeEvent.contentOffset.x + a0.nativeEvent.layoutMeasurement.width
+    };
+    callback();
+  }, [callback]);
+  callback2 = useCallback((a0) => {
+    stickerPickerStore(categories[a0].id);
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+  }, [categories, stickerPickerStore]);
+  const callback5 = useCallback(() => {
+    if (state != null) {
+      callback2(state);
+      setState2(false);
+    }
+  }, [state, callback2]);
+  const callback4 = useCallback((a0) => {
+    if (ref.current == null) {
+      ref.current = {
+        start: 0,
+        end: a0.nativeEvent.layout.width
+      };
+      callback();
+    }
+  }, [callback]);
+  const callback6 = useCallback((a0, a1) => <Component category={categories[a1]} index={a1} isActive={a1 === categoryIndex} onPressCategory={callback2} />, [categories, categoryIndex, callback2]);
+  return <ExpressionPickerCategories portalHostName="expression-footer" style={style}>
+    <FastestList_android estimatedListSize="windowSize" horizontal itemSize={EXPRESSION_FOOTER_HEIGHT} keyboardShouldPersistTaps="always" listId={ExpressionPickerViewType.STICKER} onLayout={callback4} onScroll={callback3} placeholderConfig={useExpressionPickerCategoriesPlaceholderConfig()} ref={ref2} scrollReporting="callbacks" sections={memo} renderItem={callback6} showsHorizontalScrollIndicator={false} style={styles.list} />
+    {state != null && state2 && <PressableOpacity onPress={callback5} accessibilityRole="button" accessibilityLabel={intl.string(t.rzCcjK)}>
+      <View style={[styles.item, styles.fadedItem]}>
+        <Icon style={styles.guildIcon} source={Module9656} />
+      </View>
+    </PressableOpacity>}
+  </ExpressionPickerCategories>;
+};

modules/stickers/native/StickerPickerConstants.tsx

@@ -0,0 +1,18 @@
+// Metro module 9589 (f9590).
+import * as _ExpressionPickerConstants from "../../expression_picker/ExpressionPickerConstants";
+import { StickerFormat } from "../StickersTypes";
+const { PADDING_VERTICAL, PADDING_HORIZONTAL, MIN_MARGIN } = _ExpressionPickerConstants;
+const r2 = 2 * PADDING_VERTICAL;
+const r22 = [StickerFormat.GIF, StickerFormat.PNG, StickerFormat.APNG];
+export { PADDING_HORIZONTAL };
+export { PADDING_VERTICAL };
+export { MIN_MARGIN };
+export const STICKER_SIZE = 64;
+export const LABEL_HEIGHT = 16;
+export const BUTTON_HEIGHT = 32;
+export const ROW_HEIGHT = 64 + r2;
+export const STICKER_NUDGE_RESULTS_CAP = 4;
+export const STICKER_PICKER_PADDING = 100;
+export const STICKER_SCROLL_LOAD_DELAY_MS = 250;
+export const STICKER_SCROLL_LOAD_DELAY_AFTER_HEIGHT_CHANGE_MS = 750;
+export { r22 as STICKER_FORMATS };

modules/stickers/native/StickerPickerEmptyState.tsx

@@ -0,0 +1,95 @@
+// Metro module 9649 (f9650).
+import { useState, useEffect } from "react";
+import { View } from "react-native";
+import StickersStore from "../StickersStore";
+import { EMPTY_STATE_STICKERS } from "../StickersConstants";
+import { AnalyticEvents, AnalyticsSections } from "../../../Constants";
+import { PremiumUpsellTypes } from "../../premium/PremiumConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { useShouldAnimateSticker, useFetchStickerPacks } from "../StickersHooks";
+import Sticker from "./Sticker";
+import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
+import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
+import { useStateFromStoresArray } from "../../../_bundle/Module589";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
+import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import FastImage from "../../../components_native/common/FastImage";
+import Module9377 from "../../../_bundle/Module9377";
+import openStickersPremiumUpsellAlert from "./premium/openStickersPremiumUpsellAlert";
+let useStyles;
+const EmptyStateSticker = function EmptyStateSticker(props) {
+  const sticker = props.sticker;
+  return <Sticker key={sticker?.id} sticker={sticker} size={60} animated={useShouldAnimateSticker(props.isFocused)} />;
+};
+useStyles = createStyles({
+  header: {
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  blurb: {
+    lineHeight: 18,
+    textAlign: "center",
+    marginBottom: 12
+  },
+  premiumButton: {
+    marginTop: 20,
+    alignSelf: "center",
+    paddingLeft: 5,
+    paddingRight: 10,
+    flexGrow: 0
+  },
+  nitroWheel: {
+    width: 32
+  },
+  stickersRow: {
+    flexDirection: "row",
+    alignSelf: "center"
+  },
+  sticker: {
+    paddingHorizontal: 2
+  }
+});
+export default () => {
+  const styles = useStyles();
+  useFetchStickerPacks();
+  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EMPTY_STATE).analyticsLocations;
+  const stateFromStoresArray = useStateFromStoresArray([StickersStore], () => EMPTY_STATE_STICKERS.map((item) => StickersStore.getStickerById(item)).filter((item) => item != null));
+  const [state, setState] = useState(null);
+  useEffect(() => {
+    AnalyticsUtils.track(AnalyticEvents.PREMIUM_UPSELL_VIEWED, {
+      type: PremiumUpsellTypes.EMPTY_STICKER_PICKER_UPSELL,
+      source: {
+        section: AnalyticsSections.EMPTY_STICKER_PICKER_UPSELL
+      },
+      location_stack: analyticsLocations
+    });
+  }, [analyticsLocations]);
+  return <View>
+    <Text style={styles.header} accessibilityRole="header" variant="heading-lg/extrabold" color="mobile-text-heading-primary">
+      {intl.string(t.HEm04J)}
+    </Text>
+    <Text style={styles.blurb} variant="text-sm/medium" color="text-default">
+      {intl.string(t.FnNud4)}
+    </Text>
+    <View style={styles.stickersRow}>
+      {stateFromStoresArray.map((item) => {
+        return <PressableOpacity key={item?.id} accessible={false} onLongPress={() => {
+          triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+          setState(item.id);
+        }} style={styles.sticker}>
+          <EmptyStateSticker sticker={item} isFocused={state === item.id} />
+        </PressableOpacity>;
+      })}
+    </View>
+    <View style={styles.premiumButton}>
+      <Button icon={<FastImage source={Module9377} style={styles.nitroWheel} resizeMode="contain" />} text={intl.string(t.pj0XBN)} variant="active" size="sm" onPress={() => openStickersPremiumUpsellAlert({
+        section: AnalyticsSections.EXPRESSION_PICKER
+      })} />
+    </View>
+  </View>;
+};

modules/stickers/native/StickerPickerList.tsx

@@ -0,0 +1,253 @@
+// Metro module 9650 (f9651).
+import * as Module19 from "react";
+import { useRef, useState, useMemo, useEffect, useCallback } from "react";
+import { View } from "react-native";
+import StickersStore from "../StickersStore";
+import { useStickerPickerStore } from "./StickerPickerStore";
+import { STICKER_SCROLL_LOAD_DELAY_AFTER_HEIGHT_CHANGE_MS, STICKER_SCROLL_LOAD_DELAY_MS, STICKER_SIZE } from "./StickerPickerConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { Icon } from "../../../design/void/native";
+import Module9651 from "../../../_bundle/Module9651";
+import { Text } from "../../../design/components/Text/native/Text";
+import { intl, t } from "../../../intl/index.native";
+import { StickerFormat } from "../StickersTypes";
+import { useIsPortalKeyboardInModal } from "../../keyboard/native/PortalKeyboardModalContext";
+import useExpressionPickerListWidth_native from "../../expression_picker/native/useExpressionPickerListWidth.native";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useStickerPickerListData, { StickerPickerSectionType } from "./useStickerPickerListData";
+import StickerPickerListRow from "./StickerPickerListRow";
+import Module12 from "../../../_bundle/Module12";
+import { FastestListPropsPlaceholderType } from "../../fastest_list/props/FastestListPropsPlaceholder";
+import StickerPickerListEmptyState from "./StickerPickerListEmptyState";
+import FastestList_android from "../../fastest_list/FastestList.android";
+import { getCustomKeyboardHeight } from "../../keyboard/native/useCustomKeyboardHeight";
+let Component, Component2;
+const useStyles = createStyles({
+  listPlaceholder: {
+    color: Module712.colors.BACKGROUND_MOD_MUTED
+  },
+  section: {
+    justifyContent: "center",
+    overflow: "hidden",
+    backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
+  },
+  sectionSticker: {
+    backgroundColor: Module712.colors.MOBILE_EXPRESSION_PICKER_BACKGROUND_DEFAULT
+  },
+  nsfwContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: Module712.radii.sm,
+    marginLeft: 12,
+    marginRight: 12,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL
+  },
+  nsfwText: {
+    marginLeft: 4,
+    textAlign: "center"
+  }
+});
+let Component3 = Module19.memo(function({ height }) {
+  const styles2 = useStyles();
+  return <View style={[styles2.nsfwContainer, {
+    height
+  }]}>
+    <Icon source={Module9651} size={Icon.Sizes.SMALL} />
+    <Text style={styles2.nsfwText} variant="text-sm/normal" color="interactive-text-active">
+      {intl.string(t.uy25Qz)}
+    </Text>
+  </View>;
+});
+Component = Module19.memo(function({ height, label, sectionStyle }) {
+  return <View style={[useStyles().section, sectionStyle, {
+    height
+  }]}>
+    <Text lineClamp={1} color="interactive-text-default" variant="heading-sm/semibold">{label}</Text>
+  </View>;
+});
+Component2 = Module19.memo(function(a0) {
+  return <View style={{
+    height: a0.height
+  }} />;
+});
+const r75 = Module19.memo(function(a0) {
+  let stickerPickerStore, memo, sectionHeights, sectionSize, sectionFooterSize, sectionLabels, rowsBySection, rowHeight, rowSize, packToScrollToIndex, setCategory;
+  const { bottomSheetRef, bottomSheetIndex, setCategoryIndex, searchResults, onPressSticker, onLongPressStickerDetail, insetBottom = 0, insetTop = 0, channel, inPortalKeyboard = false } = a0;
+  let c17373_6 = inPortalKeyboard;
+  let stickerFormats = a0.stickerFormats;
+  if (stickerFormats === void 0) {
+    stickerFormats = [StickerFormat.PNG, StickerFormat.APNG, StickerFormat.LOTTIE, StickerFormat.GIF];
+  }
+  stickerPickerStore = void 0;
+  memo = void 0;
+  sectionHeights = void 0;
+  sectionSize = void 0;
+  sectionFooterSize = void 0;
+  sectionLabels = void 0;
+  rowsBySection = void 0;
+  rowHeight = void 0;
+  rowSize = void 0;
+  packToScrollToIndex = void 0;
+  setCategory = void 0;
+  const ref = useRef(null);
+  const styles = useStyles();
+  const [state, setState] = useState(null);
+  const isPortalKeyboardInModal = useIsPortalKeyboardInModal();
+  const containerWidth = useExpressionPickerListWidth_native(inPortalKeyboard);
+  const stateFromStores = useStateFromStores([StickersStore], () => StickersStore.hasLoadedStickerPacks);
+  stickerPickerStore = useStickerPickerStore((a0) => a0.setPackToScrollTo);
+  memo = useMemo(() => {
+    let c26499_0;
+    const scrollToCancel2 = function scrollToCancel() {
+      return clearTimeout(c26499_0.scrollTo);
+    };
+    c26499_0 = {
+      scrollTo: -1
+    };
+    return {
+      scroll: function scroll({ index, delay, expand }) {
+        const r10 = clearTimeout;
+        r10(c26499_0.scrollTo);
+        if (expand) {
+          const current = bottomSheetRef.current;
+          if (current != null) {
+            current.expandActionSheet();
+          }
+        }
+        c26499_0.scrollTo = setTimeout(() => {
+          const current = ref.current;
+          if (current != null) {
+            current.scrollToLocation({
+              section: index,
+              item: 0,
+              animated: true
+            });
+          }
+          stickerPickerStore(null);
+        }, delay);
+        setCategoryIndex(index);
+      },
+      cancel: () => scrollToCancel2
+    };
+  }, [setCategoryIndex, stickerPickerStore, bottomSheetRef]);
+  const stickerPickerListData = useStickerPickerListData({
+    channel,
+    containerWidth,
+    searchResults,
+    stickerFormats
+  });
+  const sections = stickerPickerListData.sections;
+  sectionHeights = stickerPickerListData.sectionHeights;
+  sectionSize = stickerPickerListData.sectionSize;
+  sectionFooterSize = stickerPickerListData.sectionFooterSize;
+  sectionLabels = stickerPickerListData.sectionLabels;
+  rowsBySection = stickerPickerListData.rowsBySection;
+  rowHeight = stickerPickerListData.rowHeight;
+  rowSize = stickerPickerListData.rowSize;
+  packToScrollToIndex = stickerPickerListData.packToScrollToIndex;
+  useEffect(() => {
+    const r3 = packToScrollToIndex != null && stateFromStores;
+    L7: {
+      if (r3) {
+        if (c17373_6 && bottomSheetIndex.get() < 1) {
+          memo.scroll({
+            index: packToScrollToIndex,
+            delay: STICKER_SCROLL_LOAD_DELAY_AFTER_HEIGHT_CHANGE_MS,
+            expand: true
+          });
+          break L7;
+        }
+        memo.scroll({
+          index: packToScrollToIndex,
+          delay: STICKER_SCROLL_LOAD_DELAY_MS
+        });
+      }
+    }
+    return () => {
+      memo.cancel();
+    };
+  }, [inPortalKeyboard, bottomSheetIndex, stateFromStores, packToScrollToIndex, memo]);
+  const callback = useCallback((a0) => <Component label={sectionLabels[a0]} sectionStyle={styles.sectionSticker} height={sectionSize} />, [sectionLabels, sectionSize, styles.sectionSticker]);
+  const callback2 = useCallback(() => <Component2 height={sectionFooterSize} />, [sectionFooterSize]);
+  const callback3 = useCallback((a0, a1) => {
+    const r4 = rowsBySection[a0];
+    if (r4 == null) {
+      return null;
+    }
+    const type = r4.type;
+    if (StickerPickerSectionType.STICKERS === type) {
+      return <StickerPickerListRow containerWidth={containerWidth} stickers={r4.stickersByRow[a1]} rowSize={rowSize} onPressSticker={onPressSticker} onLongPressStickerDetail={onLongPressStickerDetail} focusedSticker={state} setFocusedSticker={setState} channel={channel} />;
+    }
+    if (StickerPickerSectionType.NSFW === type) {
+      return <Component3 height={rowHeight} />;
+    }
+    return null;
+  }, [channel, containerWidth, state, onLongPressStickerDetail, onPressSticker, rowHeight, rowSize, rowsBySection]);
+  const memo2 = useMemo(() => {
+    let c26500_0;
+    const setCategory2 = Module12.debounce((a0) => {
+      let r16;
+      const r6 = 0 < sectionHeights.length;
+      let r4 = 0;
+      if (r6) {
+        const r13 = a0 >= sectionHeights[0];
+        let r1 = 0;
+        let r0 = 0;
+        r4 = 0;
+        if (r13) {
+          do {
+            const r14 = r0 + 1;
+            const r3 = r1 + 1;
+            const length = sectionHeights.length;
+            r4 = r14;
+            if (!(r3 < length)) {
+              break;
+            }
+            r16 = sectionHeights[r3];
+            r1 = r3;
+            r0 = r14;
+            r4 = r0;
+          } while (a0 >= r16);
+        }
+      }
+      setCategoryIndex(r4);
+    }, 100);
+    c26500_0 = setCategory2;
+    return {
+      onScroll: function onScroll(a0) {
+        c26500_0(a0.nativeEvent.contentOffset.y);
+        a0.nativeEvent.layoutMeasurement.height;
+        a0.nativeEvent.contentOffset.y;
+        a0.nativeEvent.contentSize.height;
+      },
+      setCategory: setCategory2
+    };
+  }, [setCategoryIndex, sectionHeights]);
+  const onScroll2 = memo2.onScroll;
+  setCategory = memo2.setCategory;
+  const memo3 = useMemo(() => ({
+    sectionHeader: {
+      type: FastestListPropsPlaceholderType.SHAPE,
+      colorHex: styles.listPlaceholder.color,
+      shape: "rect",
+      borderRadius: Module712.radii.md,
+      paddingVertical: Module712.space.PX_4
+    },
+    sectionItem: {
+      type: FastestListPropsPlaceholderType.SHAPE,
+      colorHex: styles.listPlaceholder.color,
+      shape: "circle",
+      shapeCount: rowSize,
+      width: STICKER_SIZE,
+      height: STICKER_SIZE
+    }
+  }), [styles, rowSize]);
+  useEffect(() => () => setCategory.cancel(), [setCategory]);
+  useEffect(() => () => {
+    memo.cancel();
+  }, [memo]);
+  return searchResults?.length === 0 ? <StickerPickerListEmptyState inActionSheet insetTop={insetTop} insetBottom={insetBottom} /> : <FastestList_android accessibilityLabel={intl.string(t.nf1s3u)} estimatedListSize={getCustomKeyboardHeight()} inActionSheet preventNativeModalDismiss={isPortalKeyboardInModal} insetEnd={insetBottom} insetStart={insetTop} itemSize={rowHeight} keyboardShouldPersistTaps="always" listId="sticker-picker-list" onScroll={onScroll2} placeholderConfig={memo3} renderItem={callback3} renderSectionHeader={callback} renderSectionFooter={callback2} ref={ref} scrollReporting="callbacks" sections={sections} sectionHeaderSize={sectionSize} sectionFooterSize={sectionFooterSize} />;
+});
+export default r75;

modules/stickers/native/StickerPickerListEmptyState.tsx

@@ -0,0 +1,45 @@
+// Metro module 9653 (f9654).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { ScrollView } from "react-native";
+import { EXPRESSION_FOOTER_HEIGHT } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useModalDismissGuardRefreshControl } from "../../keyboard/native/useModalDismissGuardRefreshControl";
+import { BottomSheetScrollView } from "../../../_bundle/Module5245";
+import { RefreshEmptyState } from "../../../design/void/native";
+import { intl, t } from "../../../intl/index.native";
+import Module9654 from "../../../_bundle/Module9654";
+const useStyles = createStyles({
+  emptyStateContainer: {
+    padding: 0,
+    flex: 1
+  },
+  emptyStateBody: {
+    color: Module712.colors.TEXT_SUBTLE
+  },
+  emptyStateImage: {
+    marginBottom: Module712.space.PX_8,
+    marginTop: 0
+  }
+});
+const r42 = Module19.memo(function StickerPickerListEmptyState(props) {
+  const { inActionSheet, insetTop, insetBottom } = props;
+  const styles = useStyles();
+  const memo = useMemo(() => ({
+    marginBottom: insetBottom + EXPRESSION_FOOTER_HEIGHT,
+    marginTop: insetTop,
+    flex: 1
+  }), [insetBottom, insetTop]);
+  const modalDismissGuardRefreshControl = useModalDismissGuardRefreshControl();
+  return inActionSheet ? <BottomSheetScrollView contentContainerStyle={memo} keyboardShouldPersistTaps="always" refreshControl={inActionSheet ? modalDismissGuardRefreshControl : void 0}>
+    <RefreshEmptyState body={intl.string(t.jyiGfc)} bodyStyle={styles.emptyStateBody} containerStyle={styles.emptyStateContainer} imageStyle={styles.emptyStateImage} source={Module9654} titleStyle={{
+      marginBottom: 0
+    }} />
+  </BottomSheetScrollView> : <ScrollView contentContainerStyle={memo} keyboardShouldPersistTaps="always" refreshControl={inActionSheet ? modalDismissGuardRefreshControl : void 0}>
+    <RefreshEmptyState body={intl.string(t.jyiGfc)} bodyStyle={styles.emptyStateBody} containerStyle={styles.emptyStateContainer} imageStyle={styles.emptyStateImage} source={Module9654} titleStyle={{
+      marginBottom: 0
+    }} />
+  </ScrollView>;
+});
+export default r42;

modules/stickers/native/StickerPickerListRow.tsx

@@ -0,0 +1,160 @@
+// Metro module 9634 (f9635).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import { View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import { StickerAnimationSettings } from "../StickersConstants";
+import { STICKER_SIZE, ROW_HEIGHT } from "./StickerPickerConstants";
+import { PADDING_VERTICAL } from "../../expression_picker/ExpressionPickerConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { isAndroid } from "../../../utils/PlatformUtils";
+import { AnimateStickers } from "../../user_settings/UserSettings";
+import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
+import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
+import { shouldAnimateSticker } from "../StickersUtils";
+import { isSendableSticker } from "../StickerSendability";
+import { StickerFormat } from "../StickersTypes";
+import Sticker, { getStickerAssetUrl } from "./Sticker";
+import Module9638 from "../../../_bundle/Module9638";
+import SentryUtils_native from "../../../utils/SentryUtils.native";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+const useStyles = createStyles({
+  row: {
+    height: ROW_HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    overflow: "hidden"
+  },
+  stickerImage: {
+    height: STICKER_SIZE,
+    width: STICKER_SIZE
+  }
+});
+export default function StickerPickerListRow(props) {
+  let r89;
+  let styles, setting, c17364_9, c17364_10;
+  const { containerWidth, stickers, rowSize, onPressSticker: onPressSticker2, onLongPressStickerDetail, focusedSticker, setFocusedSticker, channel, nativeRow = isAndroid() } = props;
+  styles = void 0;
+  setting = void 0;
+  c17364_9 = void 0;
+  c17364_10 = void 0;
+  const handleOnLongPressSticker2 = function handleOnLongPressSticker(a0) {
+    if (onLongPressStickerDetail != null) {
+      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+      onLongPressStickerDetail(a0);
+      return void 0;
+    }
+    if (AnimateStickers.getSetting() === StickerAnimationSettings.ANIMATE_ON_INTERACTION) {
+      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+      if (setFocusedSticker != null) {
+        setFocusedSticker(a0);
+      }
+    }
+  };
+  const rowTraits = function rowTraits(a0) {
+    return [shouldAnimateSticker(setting, a0.id === focusedSticker?.id), channel == null || isSendableSticker(a0, UserStore.getCurrentUser(), channel), onPressSticker2 == null];
+  };
+  styles = useStyles();
+  setting = AnimateStickers.useSetting();
+  const items = [];
+  if (nativeRow) {
+    const r53 = 0 < rowSize;
+    let r56 = 0;
+    if (r53) {
+      do {
+        const r25 = stickers[r56];
+        const r57 = r56;
+        if (r25 !== void 0) {
+          const [stickerAnimated, stickerOpaque, stickerDisabled] = rowTraits(r25);
+          items.push({
+            stickerId: r25.id,
+            stickerName: r25.name,
+            stickerType: r25.format_type,
+            stickerUrl: getStickerAssetUrl(r25, STICKER_SIZE, stickerAnimated),
+            stickerAnimated,
+            stickerDisabled,
+            stickerOpaque
+          });
+        } else {
+          items.push({
+            stickerId: null,
+            stickerName: "",
+            stickerType: StickerFormat.PNG,
+            stickerUrl: "",
+            stickerAnimated: false,
+            stickerDisabled: true,
+            stickerOpaque: false
+          });
+        }
+        r56 = r57 + 1;
+      } while (r56 < rowSize);
+    }
+    try {
+      r89 = <Module9638 style={styles.row} rowData={{
+        rowContentWidth: containerWidth,
+        rowContentPaddingVertical: PADDING_VERTICAL,
+        itemSize: STICKER_SIZE,
+        items
+      }} onPressSticker={(c26494_0) => {
+        const r10 = stickers.find((sticker) => sticker.id === c26494_0.nativeEvent.stickerId);
+        if (r10 != null) {
+          triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+          if (onPressSticker2 != null) {
+            onPressSticker2(r10);
+          }
+        }
+      }} onLongPressSticker={(c26495_0) => {
+        const r8 = stickers.find((sticker) => sticker.id === c26495_0.nativeEvent.stickerId);
+        if (r8 != null) {
+          handleOnLongPressSticker2(r8);
+        }
+      }} />;
+    } catch (r90) {
+      SentryUtils_native.addBreadcrumb({
+        message: "Error in StickerPickerListRowNativeComponent",
+        category: "sticker",
+        data: {
+          itemLength: items.length,
+          items: items.filter((item) => item.stickerId == null || item.stickerName == null || item.stickerUrl == null).map((item) => ({
+            stickerId: item.stickerId,
+            stickerName: item.stickerName,
+            stickerUrl: item.stickerUrl
+          }))
+        }
+      });
+      throw r90;
+    }
+    return r89;
+  }
+  c17364_9 = items;
+  const _loop = function _loop() {
+    const key = c17364_10;
+    const sticker = stickers[key];
+    let c26493_0 = sticker;
+    if (sticker === void 0) {
+      c17364_9.push(<View key={key} style={styles.stickerImage} />);
+      return 1;
+    }
+    const r34 = _slicedToArray([shouldAnimateSticker(setting, sticker.id === focusedSticker?.id), channel == null || isSendableSticker(sticker, UserStore.getCurrentUser(), channel), onPressSticker2 == null], 3);
+    c17364_9.push(<PressableOpacity key={sticker.id} accessibilityRole="button" accessibilityLabel={sticker.name} style={styles.stickerImage} disabled={r34[2]} onPress={() => {
+      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+      if (onPressSticker2 != null) {
+        onPressSticker2(c26493_0);
+      }
+    }} onLongPress={() => handleOnLongPressSticker2(c26493_0)}>
+      <Sticker key={key} sticker={sticker} size={STICKER_SIZE} animated={r34[0]} opaque={r34[1]} />
+    </PressableOpacity>);
+  };
+  c17364_10 = 0;
+  const r14 = 0 < rowSize;
+  let r45 = 0;
+  if (r14) {
+    do {
+      _loop();
+      const r47 = r45 + 1;
+      c17364_10 = r47;
+      r45 = r47;
+    } while (r45 < rowSize);
+  }
+  return <View style={styles.row}>{items}</View>;
+};

modules/stickers/native/StickerPickerStore.tsx

@@ -0,0 +1,12 @@
+// Metro module 9623 (f9624).
+import { create } from "../../../_bundle/Module644";
+import { batchUpdates } from "../../../_bundle/Module705";
+const r15 = create((c17361_0) => ({
+  packToScrollTo: null,
+  setPackToScrollTo: (packToScrollTo) => batchUpdates(() => {
+    c17361_0((a0) => a0.packToScrollTo !== packToScrollTo ? {
+      packToScrollTo
+    } : a0);
+  })
+}));
+export { r15 as useStickerPickerStore };

modules/stickers/native/StickersUtils.tsx

@@ -0,0 +1,48 @@
+// Metro module 9622 (f9623).
+import { useMemo } from "react";
+import { NativeModules } from "react-native";
+import GuildStore from "../../../stores/GuildStore";
+import UserStore from "../../../stores/UserStore";
+import { useStickerPickerStore } from "./StickerPickerStore";
+import { GuildNSFWContentLevel } from "../../../Constants";
+import { ExpressionPickerViewType } from "../../expression_picker/ExpressionPickerConstants";
+import { useStickerPackCategories } from "../StickersHooks";
+import { StickerCategoryTypes } from "../StickersTypes";
+import Module9624 from "../../../_bundle/Module9624";
+import Module9625 from "../../../_bundle/Module9625";
+import { KeyboardTypes } from "../../keyboard/native/KeyboardTypes";
+export function useStickerCategories(a0) {
+  const stickerPackCategories = useStickerPackCategories(a0);
+  const currentUser = UserStore.getCurrentUser();
+  const guilds = GuildStore.getGuilds();
+  return useMemo(() => stickerPackCategories.filter((stickerPackCategory) => stickerPackCategory.stickers.length > 0).filter((item) => {
+    const r8 = guilds[item.id];
+    return !!(item.type !== StickerCategoryTypes.GUILD || currentUser?.nsfwAllowed || r8 == null || r8.nsfwLevel !== GuildNSFWContentLevel.AGE_RESTRICTED && r8.nsfwLevel !== GuildNSFWContentLevel.EXPLICIT);
+  }).map((item) => {
+    if (item.type !== StickerCategoryTypes.FAVORITE && item.type !== StickerCategoryTypes.RECENT) {
+      return item;
+    }
+    return {
+      ...item,
+      icon: item.type === StickerCategoryTypes.FAVORITE ? Module9624 : Module9625
+    };
+  }), [guilds, stickerPackCategories, currentUser]);
+}
+export function preloadSticker(a0) {
+  NativeModules.NativeLottieUtils.preload(a0.hash, a0.url, a0.width, a0.height, a0.frames, a0.callback);
+}
+export function dropPreloadedSticker(a0) {
+  NativeModules.NativeLottieUtils.dropPreload(a0);
+}
+export function openStickerPickerToPackId(c17360_0, a1) {
+  useStickerPickerStore.getState().setPackToScrollTo(a1);
+  setTimeout(() => {
+    const current = c17360_0.current;
+    if (current != null) {
+      current.openCustomKeyboard({
+        type: KeyboardTypes.EXPRESSION,
+        context: ExpressionPickerViewType.STICKER
+      });
+    }
+  }, 1);
+}

modules/stickers/native/openStickerPackDetailActionSheet.tsx

@@ -0,0 +1,20 @@
+// Metro module 9627 (f9628).
+import { AnalyticEvents } from "../../../Constants";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+const r15 = {
+  EXPRESSION_SUGGESTIONS: "Sticker Pack Detail Sheet (Expression Suggestions Popout)",
+  STICKER_PACK_DETAIL: "Sticker Pack Detail Sheet",
+  STICKER_PACK_UPSELL: "Sticker Pack Detail Sheet (Sticker Upsell Popout)"
+};
+export default function openStickerPackDetailActionSheet({ analyticsLocation, analyticsPopoutType, stickerPack }) {
+  AnalyticsUtils.track(AnalyticEvents.STICKER_PACK_VIEW_ALL, {
+    location: analyticsLocation,
+    sticker_pack_id: stickerPack.id
+  });
+  ActionSheetActionCreators.openLazy(import("./StickerPackDetailActionSheet"), "StickerPackDetailActionSheet", {
+    stickerPack,
+    analyticsPopoutType
+  });
+};
+export { r15 as AnalyticsPopoutType };

modules/stickers/native/premium/StickersPremiumUpsellAlert.tsx

@@ -0,0 +1,164 @@
+// Metro module 9644 (f9645).
+import { useEffect } from "react";
+import { Image as Image2, ScrollView, View } from "react-native";
+import IAPStore_android from "../../../../stores/native/IAPStore.android";
+import { AnalyticEvents, AnalyticsObjects, AnalyticsSections } from "../../../../Constants";
+import { NUM_FREE_GUILD_BOOSTS_WITH_PREMIUM, PRICE_PLACEHOLDER, SubscriptionPlans } from "../../../premium/PremiumConstants";
+import Module9645 from "../../../../_bundle/Module9645";
+import { intl, t } from "../../../../intl/index.native";
+import Module712 from "../../../../_bundle/Module712";
+import Module9646 from "../../../../_bundle/Module9646";
+import Module9647 from "../../../../_bundle/Module9647";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { Icon, ButtonColors } from "../../../../design/void/native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import Dispatcher from "../../../../Dispatcher";
+import BillingActionCreators from "../../../../actions/native/BillingActionCreators";
+import usePremiumPlanPrice from "../../../premium/native/hooks/usePremiumPlanPrice";
+import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import Alert from "../../../../components_native/common/Alert";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import openPremiumModal from "../../../../components_native/premium/openPremiumModal";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import Module7699 from "../../../../_bundle/Module7699";
+import Module9648 from "../../../../_bundle/Module9648";
+let c6379_16, useStyles;
+const PerkRow = function PerkRow(props) {
+  const { perk, isLastPerk } = props;
+  const styles = useStyles();
+  return <View style={[styles.perkRow, isLastPerk ? styles.lastPerkRow : void 0]}>
+    <Icon style={styles.perkIcon} source={perk.icon} disableColor={perk.color == null} color={perk.color} />
+    <Text style={styles.perkText} variant="text-md/medium" color="interactive-text-active">
+      {perk.description()}
+    </Text>
+  </View>;
+};
+c6379_16 = [{
+  icon: Module9645,
+  description: () => intl.string(t.uAfKTe),
+  color: Module712.unsafe_rawColors.PREMIUM_PERK_PURPLE
+}, {
+  icon: Module9646,
+  description: () => intl.formatToPlainString(t.aVSVBO, {
+    numFreeGuildSubscriptions: NUM_FREE_GUILD_BOOSTS_WITH_PREMIUM
+  })
+}, {
+  icon: Module9647,
+  description: () => intl.string(t.pqHIf7),
+  color: Module712.unsafe_rawColors.PREMIUM_PERK_GREEN
+}];
+useStyles = createStyles({
+  alert: {
+    paddingTop: 18
+  },
+  shortHeightAlert: {
+    height: 500
+  },
+  content: {
+    alignItems: "center"
+  },
+  closeContainer: {
+    flexDirection: "row-reverse",
+    width: "100%",
+    marginBottom: 16
+  },
+  description: {
+    textAlign: "center",
+    lineHeight: 20
+  },
+  perks: {
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    borderRadius: Module712.radii.sm,
+    marginTop: 16,
+    marginBottom: 0,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    width: "100%"
+  },
+  perkRow: {
+    paddingVertical: 10,
+    borderBottomColor: Module712.unsafe_rawColors.PRIMARY_560,
+    borderBottomWidth: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  lastPerkRow: {
+    borderBottomWidth: 0
+  },
+  perkIcon: {
+    width: 24,
+    marginRight: 20
+  },
+  perkText: {
+    lineHeight: 20,
+    flexShrink: 1
+  },
+  imageHeader: {
+    marginBottom: 12
+  }
+});
+export default function StickersPremiumUpsellAlert(props) {
+  let analyticsLocations;
+  const { onClose, analyticsLocation } = props;
+  analyticsLocations = void 0;
+  const styles = useStyles();
+  useEffect(() => {
+    if (!IAPStore_android.isReady()) {
+      Dispatcher.wait(() => BillingActionCreators.loadProducts());
+    }
+  }, []);
+  let monthlyPrice = usePremiumPlanPrice(SubscriptionPlans.PREMIUM_MONTH_TIER_2)?.priceString;
+  const height = useWindowDimensions_native().height;
+  analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const props2 = {
+    cancelText: intl.string(t.f3Pet9),
+    confirmColor: ButtonColors.GREEN,
+    confirmText: intl.string(t.o3Tnif),
+    onConfirm: function onConfirm() {
+      AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
+        location: {
+          ...analyticsLocation,
+          section: AnalyticsSections.STICKER_PREMIUM_TIER_2_UPSELL_MODAL,
+          object: AnalyticsObjects.BUTTON_CTA
+        }
+      });
+      openPremiumModal({
+        analyticsLocations
+      });
+    },
+    onClose,
+    onCancel: onClose,
+    style: [styles.alert, height <= 580 ? styles.shortHeightAlert : null],
+    children: null
+  };
+  const children = [<View style={styles.closeContainer}>
+    <PressableOpacity accessibilityRole="button" accessibilityLabel="close" onPress={onClose}>
+      <Icon source={Module7699} />
+    </PressableOpacity>
+  </View>, ,];
+  const props3 = {
+    style: styles.content,
+    onStartShouldSetResponder: () => true,
+    children: null
+  };
+  const children2 = [<Image2 source={Module9648} style={styles.imageHeader} />, , ,];
+  const TBsJfQ = t.TBsJfQ;
+  if (monthlyPrice == null) {
+    monthlyPrice = PRICE_PLACEHOLDER;
+  }
+  children2[1] = <Text style={styles.description} variant="text-md/medium">
+    {intl.format(TBsJfQ, {
+      monthlyPrice
+    })}
+  </Text>;
+  children2[2] = <View style={styles.perks}>
+    {c6379_16.map((item, index) => <PerkRow key={index} perk={item} isLastPerk={index === c6379_16.length - 1} />)}
+  </View>;
+  props3.children = children2;
+  children[1] = <ScrollView>
+    <View {...props3} />
+  </ScrollView>;
+  props2.children = children;
+  return <Alert {...props2} />;
+};

modules/stickers/native/premium/openStickersPremiumUpsellAlert.tsx

@@ -0,0 +1,40 @@
+// Metro module 9643 (f9644).
+import { AnalyticEvents, AnalyticsSections } from "../../../../Constants";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import { fetchPremiumSubscriptionPlans } from "../../../../actions/SubscriptionPlanActionCreators";
+import { fetchPaymentSources } from "../../../billing/actions/BillingActionCreators";
+import AlertActionCreators from "../../../../actions/native/AlertActionCreators";
+function $mk115519($env) {
+  return () => import("./StickersPremiumUpsellAlert").then($mk118134($env));
+}
+function $mk118134($env) {
+  return (a0) => {
+    let env31990 = {
+      $parent: $env
+    };
+    env31990[0] = a0.default;
+    return (a0) => env31990.$parent.$parent[6](env31990[0], {
+      ...a0,
+      analyticsLocation: env31990.$parent[0]
+    });
+  };
+}
+let env6378 = {};
+export default async function openStickersPremiumUpsellAlert(location2) {
+  let env30129;
+  const r12 = env6378;
+  let c26497_2 = r12;
+  const r27 = env30129 = {
+    $parent: r12
+  };
+  let c26497_1 = r27;
+  env30129[0] = location2;
+  AnalyticsUtils.track(AnalyticEvents.OPEN_MODAL, {
+    type: AnalyticsSections.STICKER_PREMIUM_TIER_2_UPSELL_MODAL,
+    location: location2
+  });
+  await Promise.all([fetchPremiumSubscriptionPlans(), fetchPaymentSources()]);
+  AlertActionCreators.openLazy({
+    importer: $mk115519(c26497_1)
+  });
+};

modules/stickers/native/showStickerDetailActionSheet.tsx

@@ -0,0 +1,9 @@
+// Metro module 9639 (f9640).
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+let c6374_3 = "sticker_detail_action_sheet";
+export function hideStickerDetailActionSheet() {
+  ActionSheetActionCreators.hideActionSheet(c6374_3);
+}
+export function showStickerDetailActionSheet(a0) {
+  ActionSheetActionCreators.openLazy(import("./StickerDetailActionSheet"), c6374_3, a0);
+}

modules/stickers/native/useStickerPickerListData.tsx

@@ -0,0 +1,113 @@
+// Metro module 9652 (f9653).
+import { useMemo } from "react";
+import { useStickerPickerStore } from "./StickerPickerStore";
+import { LABEL_HEIGHT, MIN_MARGIN, STICKER_SIZE, ROW_HEIGHT } from "./StickerPickerConstants";
+import { PADDING_VERTICAL } from "../../expression_picker/ExpressionPickerConstants";
+import { useStickerCategories } from "./StickersUtils";
+import Module12 from "../../../_bundle/Module12";
+import { intl, t } from "../../../intl/index.native";
+import { StickerCategoryTypes } from "../StickersTypes";
+import { shouldNSFWGateGuild } from "../../age_gate/native/AgeGateUtils";
+function $mk115521($env) {
+  return (a0) => $env[2].includes(a0.format_type);
+}
+let env6382 = {};
+const c6382_8 = {
+  STICKERS: 0,
+  0: "STICKERS",
+  NSFW: 1,
+  1: "NSFW"
+};
+const c6382_9 = LABEL_HEIGHT + 2 * PADDING_VERTICAL;
+export default function useStickerPickerListData(a0) {
+  let env17374 = {
+    $parent: env6382
+  };
+  const { channel, containerWidth } = a0;
+  env17374[0] = containerWidth;
+  const searchResults = a0.searchResults;
+  env17374[1] = searchResults;
+  const stickerFormats = a0.stickerFormats;
+  env17374[2] = stickerFormats;
+  env17374[3] = void 0;
+  env17374[4] = void 0;
+  const stickerCategories = useStickerCategories(channel);
+  env17374[3] = stickerCategories;
+  const r16 = (0, useStickerPickerStore)((a0) => a0.packToScrollTo);
+  env17374[4] = r16;
+  return useMemo(() => {
+    let packToScrollToIndex;
+    const r12 = env17374;
+    const rowSize = Math.floor((env17374[0] - MIN_MARGIN) / (STICKER_SIZE + MIN_MARGIN));
+    let c26501_0 = rowSize;
+    const sections = [];
+    let c26501_1 = sections;
+    const sectionHeights = [];
+    const sectionLabels = [];
+    let c26501_2 = sectionLabels;
+    const rowsBySection = [];
+    let c26501_3 = rowsBySection;
+    packToScrollToIndex = void 0;
+    const r14 = env17374[1];
+    if (r14 != null) {
+      let r48 = intl.string(t["zkoeq/"]);
+      if (r48 === void 0) {
+        r48 = "";
+      }
+      const stickersByRow = Module12.chunk(r14.filter($mk115521(r12)), rowSize);
+      rowsBySection.push({
+        type: c6382_8.STICKERS,
+        stickersByRow
+      });
+      sections.push(stickersByRow.length);
+      sectionLabels.push(r48);
+    } else {
+      let c26502_0;
+      env17374[3].map((item, index) => {
+        const r6 = env17374;
+        if (env17374[4] === item.id) {
+          packToScrollToIndex = index;
+        }
+        const r18 = item.type === StickerCategoryTypes.GUILD && shouldNSFWGateGuild(item.id);
+        const { stickers, name = "" } = item;
+        if (r18 === true) {
+          c26501_3.push({
+            type: c6382_8.NSFW,
+            stickersByRow: []
+          });
+          c26501_1.push(1);
+        } else {
+          const stickersByRow = Module12.chunk(stickers.filter($mk115521(r6)), c26501_0);
+          c26501_3.push({
+            type: c6382_8.STICKERS,
+            stickersByRow
+          });
+          c26501_1.push(stickersByRow.length);
+        }
+        c26501_2.push(name);
+      });
+      const push = sectionHeights.push;
+      c26502_0 = 0;
+      push.apply(sectionHeights, [...sections.map((section, index) => {
+        if (index === 0 && section === 0) {
+          return 0;
+        }
+        const r12 = section * ROW_HEIGHT + c6382_9 + 12 + c26502_0;
+        c26502_0 = r12;
+        return r12;
+      })]);
+    }
+    return {
+      sections,
+      sectionHeights,
+      sectionSize: c6382_9,
+      sectionFooterSize: 12,
+      sectionLabels,
+      rowHeight: ROW_HEIGHT,
+      rowSize,
+      rowsBySection,
+      packToScrollToIndex
+    };
+  }, [containerWidth, stickerCategories, stickerFormats, searchResults, r16]);
+};
+export { c6382_8 as StickerPickerSectionType };