yeet

modules/display_name_styles/DisplayNameStylesActionCreators.tsx

@@ -0,0 +1,24 @@
+// Metro module 14357 (f14358).
+import Dispatcher from "../../Dispatcher";
+export function markDisplayNameStyleFontSeen(a0) {
+  Dispatcher.dispatch({
+    type: "DISPLAY_NAME_STYLES_MARK_FONT_SEEN",
+    fontId: a0
+  });
+}
+export function markDisplayNameStyleEffectSeen(a0) {
+  Dispatcher.dispatch({
+    type: "DISPLAY_NAME_STYLES_MARK_EFFECT_SEEN",
+    effectId: a0
+  });
+}
+export function markDisplayNameStyleNewFontsBadgeDismissed() {
+  Dispatcher.dispatch({
+    type: "DISPLAY_NAME_STYLES_MARK_NEW_FONTS_BADGE_DISMISSED"
+  });
+}
+export function markDisplayNameStyleNewEffectsBadgeDismissed() {
+  Dispatcher.dispatch({
+    type: "DISPLAY_NAME_STYLES_MARK_NEW_EFFECTS_BADGE_DISMISSED"
+  });
+}

modules/display_name_styles/DisplayNameStylesConstants.tsx

@@ -0,0 +1,36 @@
+// Metro module 1886 (f1887).
+import { DisplayNameEffect } from "../../_bundle/Module1887";
+import { DisplayNameFont } from "../../_bundle/Module1888";
+let c1586_4, c1586_5;
+const r10 = [DisplayNameEffect.SOLID, DisplayNameEffect.GRADIENT, DisplayNameEffect.NEON, DisplayNameEffect.TOON, DisplayNameEffect.POP];
+const r9 = [DisplayNameFont.PLAYPEN_SANS, DisplayNameFont.ORBITRON, DisplayNameFont.NEW_ROCKER, DisplayNameFont.KALAM];
+const r8 = [DisplayNameEffect.GUMMY, DisplayNameEffect.PRISM];
+let c1586_2 = [1628845, 2417517, 1874155, 12790527, 16521573, 13018645, 695675, 1027403, 747943, 11080677, 14287177, 16332578];
+let c1586_3 = [[2797222, 16762000], [2535780, 9497343], [14966527, 2522592], [9452762, 2939534], [15709354, 14970082], [14631474, 12423167], [16095292, 15031015], [14963742, 6674404]].map((item) => ({
+  colors: item,
+  name: ""
+}));
+c1586_4 = [[15313365, 11132400, 12167150, 12184267], [16740290, 16076712, 16751574, 14248631], [16758138, 16749423, 16743544, 15756170], [12905829, 10018400, 7130467, 4570214], [8173823, 9363664, 10327285, 6737904], [14121983, 11889663, 14965989, 9137407]];
+c1586_5 = [[16683586, 3534206, 16769095, 16731346, 5793266], [16727357, 16747050, 16766023, 16732067, 8086015], [7997702, 13114898, 16013848, 16749824, 16766023], [8316888, 8178687, 8359167, 11890175, 15960792], [3528287, 1497266, 2147829, 2850047, 7032319], [11004065, 14282892, 16769162, 16762024, 15972057]];
+export { r10 as EFFECT_ORDER };
+export { r9 as FLYWHEEL_FONTS };
+export { r8 as FLYWHEEL_EFFECTS };
+export { c1586_2 as DISPLAY_NAME_STYLES_COLOR_PRESETS };
+export { c1586_3 as DISPLAY_NAME_STYLES_GRADIENT_PRESETS };
+export { c1586_4 as DISPLAY_NAME_STYLES_GUMMY_PRESETS };
+export const DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION = 0.78;
+export const DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS = 0.72;
+export const MIN_PRISM_GRADIENT_WIDTH = 38;
+export { c1586_5 as DISPLAY_NAME_STYLES_PRISM_PRESETS };
+export function getColorPresetsForEffect(a0) {
+  if (DisplayNameEffect.GUMMY === a0) {
+    return c1586_4;
+  }
+  if (DisplayNameEffect.PRISM === a0) {
+    return c1586_5;
+  }
+  if (DisplayNameEffect.GRADIENT !== a0 && DisplayNameEffect.GLOW !== a0) {
+    return c1586_2.map((item) => [item]);
+  }
+  return c1586_3.map((item) => item.colors);
+}

modules/display_name_styles/DisplayNameStylesContext.tsx

@@ -0,0 +1,6 @@
+// Metro module 4421 (f4422).
+import { createContext } from "react";
+const r14 = (0, createContext)({
+  overrideSettings: false
+});
+export { r14 as DisplayNameStylesContext };

modules/display_name_styles/DisplayNameStylesEffectOrder.tsx

@@ -0,0 +1,9 @@
+// Metro module 14354 (f14355).
+import { useMemo } from "react";
+import { EFFECT_ORDER, FLYWHEEL_EFFECTS } from "./DisplayNameStylesConstants";
+import { useIsDisplayNameStylesFlywheelSettersEnabled } from "./DisplayNameStylesFlywheelExperiment";
+let c10096_4 = [...EFFECT_ORDER, ...FLYWHEEL_EFFECTS];
+export function useVisibleEffectOrder() {
+  const isDisplayNameStylesFlywheelSettersEnabled = useIsDisplayNameStylesFlywheelSettersEnabled("effect-order");
+  return useMemo(() => isDisplayNameStylesFlywheelSettersEnabled ? c10096_4 : EFFECT_ORDER, [isDisplayNameStylesFlywheelSettersEnabled]);
+}

modules/display_name_styles/DisplayNameStylesFlywheelExperiment.tsx

@@ -0,0 +1,38 @@
+// Metro module 8382 (f8383).
+import { createApexExperiment } from "../experiments/apex/index";
+const apexExperiment = createApexExperiment({
+  kind: "user",
+  name: "2026-06-gummy-bears",
+  defaultConfig: {
+    enabled: false
+  },
+  variations: {
+    1: {
+      enabled: true
+    }
+  }
+});
+const apexExperiment2 = createApexExperiment({
+  kind: "user",
+  name: "2026-06-gummy-viewers",
+  defaultConfig: {
+    enabled: false
+  },
+  variations: {
+    1: {
+      enabled: true
+    }
+  }
+});
+export { apexExperiment as DisplayNameStylesFlywheelSettersExperiment };
+export { apexExperiment2 as DisplayNameStylesFlywheelViewersExperiment };
+export function useIsDisplayNameStylesFlywheelViewersEnabled(a0) {
+  return apexExperiment2.useConfig({
+    location: a0
+  }).enabled;
+}
+export function useIsDisplayNameStylesFlywheelSettersEnabled(a0) {
+  return apexExperiment.useConfig({
+    location: a0
+  }).enabled;
+}

modules/display_name_styles/DisplayNameStylesFontOrder.tsx

@@ -0,0 +1,11 @@
+// Metro module 14353 (f14354).
+import { useMemo } from "react";
+import { FLYWHEEL_FONTS } from "./DisplayNameStylesConstants";
+import { DisplayNameFont } from "../../_bundle/Module1888";
+import { useIsDisplayNameStylesFlywheelSettersEnabled } from "./DisplayNameStylesFlywheelExperiment";
+let c10095_3 = [DisplayNameFont.DEFAULT, DisplayNameFont.ZILLA_SLAB, DisplayNameFont.CHERRY_BOMB, DisplayNameFont.CHICLE, DisplayNameFont.MUSEO_MODERNO, DisplayNameFont.NEO_CASTEL, DisplayNameFont.PIXELIFY, DisplayNameFont.SINISTRE];
+let c10095_4 = [...c10095_3, ...FLYWHEEL_FONTS];
+export function useVisibleFontOrder() {
+  const isDisplayNameStylesFlywheelSettersEnabled = useIsDisplayNameStylesFlywheelSettersEnabled("font-order");
+  return useMemo(() => isDisplayNameStylesFlywheelSettersEnabled ? c10095_4 : c10095_3, [isDisplayNameStylesFlywheelSettersEnabled]);
+}

modules/display_name_styles/DisplayNameStylesSeenStore.tsx

@@ -0,0 +1,107 @@
+// Metro module 14356 (f14357).
+import Module589 from "../../_bundle/Module589";
+import Dispatcher from "../../Dispatcher";
+let c10098_0 = {
+  seenFontIds: new Set(),
+  seenEffectIds: new Set(),
+  newFontsBadgeDismissed: false,
+  newEffectsBadgeDismissed: false
+};
+class DisplayNameStylesSeenStore extends Module589.PersistedStore {
+  static displayName = "DisplayNameStylesSeenStore";
+  static persistKey = "DisplayNameStylesSeenStore";
+  static migrations = [(a0) => ({
+    ...a0,
+    newFontsBadgeDismissed: false,
+    newEffectsBadgeDismissed: false
+  })];
+  initialize(a0) {
+    const r8 = Set;
+    let r6 = a0?.seenFontIds;
+    if (r6 == null) {
+      r6 = [];
+    }
+    const r4 = {
+      seenFontIds: new r8(r6),
+      seenEffectIds: null,
+      newFontsBadgeDismissed: null,
+      newEffectsBadgeDismissed: null
+    };
+    const r13 = Set;
+    let r15 = a0?.seenEffectIds;
+    if (r15 == null) {
+      r15 = [];
+    }
+    r4.seenEffectIds = new r13(r15);
+    let newFontsBadgeDismissed = a0?.newFontsBadgeDismissed;
+    if (newFontsBadgeDismissed == null) {
+      newFontsBadgeDismissed = false;
+    }
+    r4.newFontsBadgeDismissed = newFontsBadgeDismissed;
+    let newEffectsBadgeDismissed = a0?.newEffectsBadgeDismissed;
+    if (newEffectsBadgeDismissed == null) {
+      newEffectsBadgeDismissed = false;
+    }
+    r4.newEffectsBadgeDismissed = newEffectsBadgeDismissed;
+    c10098_0 = r4;
+  }
+  getState() {
+    return {
+      seenFontIds: Array.from(c10098_0.seenFontIds),
+      seenEffectIds: Array.from(c10098_0.seenEffectIds),
+      newFontsBadgeDismissed: c10098_0.newFontsBadgeDismissed,
+      newEffectsBadgeDismissed: c10098_0.newEffectsBadgeDismissed
+    };
+  }
+  getSeenFonts() {
+    return c10098_0.seenFontIds;
+  }
+  getSeenEffects() {
+    return c10098_0.seenEffectIds;
+  }
+  getNewFontsBadgeDismissed() {
+    return c10098_0.newFontsBadgeDismissed;
+  }
+  getNewEffectsBadgeDismissed() {
+    return c10098_0.newEffectsBadgeDismissed;
+  }
+}
+const displayNameStylesSeenStore = new DisplayNameStylesSeenStore(Dispatcher, {
+  DISPLAY_NAME_STYLES_MARK_FONT_SEEN: function handleMarkFontSeen({ fontId }) {
+    if (c10098_0.seenFontIds.has(fontId)) {
+      return false;
+    }
+    c10098_0 = {
+      ...c10098_0,
+      seenFontIds: new Set([...c10098_0.seenFontIds, fontId])
+    };
+  },
+  DISPLAY_NAME_STYLES_MARK_EFFECT_SEEN: function handleMarkEffectSeen({ effectId }) {
+    if (c10098_0.seenEffectIds.has(effectId)) {
+      return false;
+    }
+    c10098_0 = {
+      ...c10098_0,
+      seenEffectIds: new Set([...c10098_0.seenEffectIds, effectId])
+    };
+  },
+  DISPLAY_NAME_STYLES_MARK_NEW_FONTS_BADGE_DISMISSED: function handleMarkNewFontsBadgeDismissed() {
+    if (c10098_0.newFontsBadgeDismissed) {
+      return false;
+    }
+    c10098_0 = {
+      ...c10098_0,
+      newFontsBadgeDismissed: true
+    };
+  },
+  DISPLAY_NAME_STYLES_MARK_NEW_EFFECTS_BADGE_DISMISSED: function handleMarkNewEffectsBadgeDismissed() {
+    if (c10098_0.newEffectsBadgeDismissed) {
+      return false;
+    }
+    c10098_0 = {
+      ...c10098_0,
+      newEffectsBadgeDismissed: true
+    };
+  }
+});
+export default displayNameStylesSeenStore;

modules/display_name_styles/DisplayNameStylesUtils.tsx

@@ -0,0 +1,111 @@
+// Metro module 1885 (f1886).
+import _slicedToArray from "../../_bundle/_slicedToArray";
+import { DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS, DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION, FLYWHEEL_EFFECTS, FLYWHEEL_FONTS, getColorPresetsForEffect } from "./DisplayNameStylesConstants";
+import { DisplayNameEffect } from "../../_bundle/Module1887";
+import Module689 from "../../_bundle/Module689";
+import { int2hex } from "../../_bundle/int2hslRaw";
+import { DisplayNameFont } from "../../_bundle/Module1888";
+let c1585_9 = [{
+  hueShift: -18,
+  saturation: 0.54,
+  lightness: 0.72
+}, {
+  hueShift: -5,
+  saturation: 0.66,
+  lightness: 0.6
+}, {
+  hueShift: 9,
+  saturation: 0.56,
+  lightness: 0.68
+}, {
+  hueShift: 22,
+  saturation: 0.6,
+  lightness: 0.63
+}];
+export function getEffectColorCount(a0) {
+  if (DisplayNameEffect.GRADIENT === a0) {
+    return 2;
+  }
+  if (DisplayNameEffect.GUMMY === a0) {
+    return 4;
+  }
+  if (DisplayNameEffect.PRISM === a0) {
+    return 5;
+  }
+  return 1;
+}
+export function generateColorVariants(a0) {
+  const r10 = Module689(a0).alpha(1);
+  const r13 = r10.get("hsl.l");
+  const r24 = Math.min(1, 1.2 * r10.get("hsl.s"));
+  const r29 = Math.min(0.6, r13 + 0.1);
+  return {
+    main: a0,
+    light1: r10.set("hsl.l", Math.min(1, 1.2 * r13)).hex(),
+    light2: r10.set("hsl.l", Math.min(1, 1.6 * r13)).hex(),
+    dark1: r10.set("hsl.l", Math.max(0, 0.6 * r13)).hex(),
+    dark2: r10.set("hsl.l", Math.max(0, 0.2 * r13)).hex(),
+    toonStroke: r10.set("hsl.l", Math.max(0.12, 0.4 * r13)).hex(),
+    neonStroke: r10.set("hsl.s", r24).set("hsl.l", r29).hex()
+  };
+}
+export function wrapHue(a0) {
+  return (a0 % 360 + 360) % 360;
+}
+export { c1585_9 as GUMMY_STRIPES };
+export function buildGummyColors(a0) {
+  const [r20, r7, r21] = Module689(int2hex(a0)).hsl();
+  const r25 = Number.isNaN(r20) ? 0 : r20;
+  let c13281_0 = _slicedToArray([r25, r7, r21], 1)[0];
+  return c1585_9.map((item) => Module689.hsl(((c13281_0 + item.hueShift) % 360 + 360) % 360, item.saturation, item.lightness).num());
+}
+export function rebuildGummySourceColor(a0) {
+  const r9 = a0[0];
+  if (r9 == null) {
+    return Module689.hsl(0, DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION, DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS).num();
+  }
+  const [r23, r24, r25] = Module689(int2hex(r9)).hsl();
+  return Module689.hsl(((_slicedToArray([Number.isNaN(r23) ? 0 : r23, r24, r25], 1)[0] - c1585_9[0].hueShift) % 360 + 360) % 360, DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION, DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS).num();
+}
+export function hueToGummyColor(a0) {
+  return Module689.hsl(a0, DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION, DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS).num();
+}
+export function parseServerDisplayNameStyles(a0) {
+  return a0 != null ? {
+    fontId: a0.font_id,
+    effectId: a0.effect_id,
+    colors: a0.colors
+  } : null;
+}
+export function generateRandomDisplayNameStyles(a0, a1) {
+  const effectId = a1[Math.floor(Math.random() * a1.length)];
+  const fontId = a0[Math.floor(Math.random() * a0.length)];
+  const colorPresetsForEffect = getColorPresetsForEffect(effectId);
+  return {
+    fontId,
+    effectId,
+    colors: [...colorPresetsForEffect[Math.floor(Math.random() * colorPresetsForEffect.length)]]
+  };
+}
+export function applyFlywheelViewingFallback(a0, a1) {
+  if (!a1 && a0 != null) {
+    const fontId = FLYWHEEL_FONTS.includes(a0.fontId) ? DisplayNameFont.DEFAULT : a0.fontId;
+    const effectId = FLYWHEEL_EFFECTS.includes(a0.effectId) ? DisplayNameEffect.SOLID : a0.effectId;
+    return fontId === a0.fontId ? effectId !== a0.effectId ? {
+      ...a0,
+      fontId,
+      effectId
+    } : a0 : {
+      ...a0,
+      fontId,
+      effectId
+    };
+  }
+  return a0;
+}
+export function hasNonLatinLetters(a0) {
+  if (a0 == null) {
+    return false;
+  }
+  return /(?:[\0-@\[-`\{-\xA9\xAB-\xB9\xBB-\xBF\xD7\xF7\u02B9-\u02DF\u02E5-\u1CFF\u1D26-\u1D2B\u1D5D-\u1D61\u1D66-\u1D6A\u1D78\u1DBF-\u1DFF\u1F00-\u2070\u2072-\u207E\u2080-\u208F\u209D-\u2129\u212C-\u2131\u2133-\u214D\u214F-\u215F\u2189-\u2C5F\u2C80-\uA721\uA788-\uA78A\uA7CE\uA7CF\uA7D2\uA7D4\uA7DD-\uA7F1\uA800-\uAB2F\uAB5B\uAB65\uAB6A-\uD7FF\uE000-\uFAFF\uFB07-\uFF20\uFF3B-\uFF40\uFF5B-\uFFFF]|[\uD800\uD802-\uD836\uD838-\uDBFF][\uDC00-\uDFFF]|\uD801[\uDC00-\uDF7F\uDF86\uDFB1\uDFBB-\uDFFF]|\uD837[\uDC00-\uDEFF\uDF1F-\uDF24\uDF2B-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/.test(a0.replace(/(?:[\0-@\[-`\{-\xA9\xAB-\xB4\xB6-\xB9\xBB-\xBF\xD7\xF7\u02C2-\u02C5\u02D2-\u02DF\u02E5-\u02EB\u02ED\u02EF-\u036F\u0375\u0378\u0379\u037E\u0380-\u0385\u0387\u038B\u038D\u03A2\u03F6\u0482-\u0489\u0530\u0557\u0558\u055A-\u055F\u0589-\u05CF\u05EB-\u05EE\u05F3-\u061F\u064B-\u066D\u0670\u06D4\u06D6-\u06E4\u06E7-\u06ED\u06F0-\u06F9\u06FD\u06FE\u0700-\u070F\u0711\u0730-\u074C\u07A6-\u07B0\u07B2-\u07C9\u07EB-\u07F3\u07F6-\u07F9\u07FB-\u07FF\u0816-\u0819\u081B-\u0823\u0825-\u0827\u0829-\u083F\u0859-\u085F\u086B-\u086F\u0888\u088F-\u089F\u08CA-\u0903\u093A-\u093C\u093E-\u094F\u0951-\u0957\u0962-\u0970\u0981-\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA-\u09BC\u09BE-\u09CD\u09CF-\u09DB\u09DE\u09E2-\u09EF\u09F2-\u09FB\u09FD-\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A-\u0A58\u0A5D\u0A5F-\u0A71\u0A75-\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA-\u0ABC\u0ABE-\u0ACF\u0AD1-\u0ADF\u0AE2-\u0AF8\u0AFA-\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A-\u0B3C\u0B3E-\u0B5B\u0B5E\u0B62-\u0B70\u0B72-\u0B82\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BCF\u0BD1-\u0C04\u0C0D\u0C11\u0C29\u0C3A-\u0C3C\u0C3E-\u0C57\u0C5B\u0C5C\u0C5E\u0C5F\u0C62-\u0C7F\u0C81-\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA-\u0CBC\u0CBE-\u0CDC\u0CDF\u0CE2-\u0CF0\u0CF3-\u0D03\u0D0D\u0D11\u0D3B\u0D3C\u0D3E-\u0D4D\u0D4F-\u0D53\u0D57-\u0D5E\u0D62-\u0D79\u0D80-\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0E00\u0E31\u0E34-\u0E3F\u0E47-\u0E80\u0E83\u0E85\u0E8B\u0EA4\u0EA6\u0EB1\u0EB4-\u0EBC\u0EBE\u0EBF\u0EC5\u0EC7-\u0EDB\u0EE0-\u0EFF\u0F01-\u0F3F\u0F48\u0F6D-\u0F87\u0F8D-\u0FFF\u102B-\u103E\u1040-\u104F\u1056-\u1059\u105E-\u1060\u1062-\u1064\u1067-\u106D\u1071-\u1074\u1082-\u108D\u108F-\u109F\u10C6\u10C8-\u10CC\u10CE\u10CF\u10FB\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B-\u137F\u1390-\u139F\u13F6\u13F7\u13FE-\u1400\u166D\u166E\u1680\u169B-\u169F\u16EB-\u16F0\u16F9-\u16FF\u1712-\u171E\u1732-\u173F\u1752-\u175F\u176D\u1771-\u177F\u17B4-\u17D6\u17D8-\u17DB\u17DD-\u181F\u1879-\u187F\u1885\u1886\u18A9\u18AB-\u18AF\u18F6-\u18FF\u191F-\u194F\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19FF\u1A17-\u1A1F\u1A55-\u1AA6\u1AA8-\u1B04\u1B34-\u1B44\u1B4D-\u1B82\u1BA1-\u1BAD\u1BB0-\u1BB9\u1BE6-\u1BFF\u1C24-\u1C4C\u1C50-\u1C59\u1C7E\u1C7F\u1C8B-\u1C8F\u1CBB\u1CBC\u1CC0-\u1CE8\u1CED\u1CF4\u1CF7-\u1CF9\u1CFB-\u1CFF\u1DC0-\u1DFF\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FBD\u1FBF-\u1FC1\u1FC5\u1FCD-\u1FCF\u1FD4\u1FD5\u1FDC-\u1FDF\u1FED-\u1FF1\u1FF5\u1FFD-\u2070\u2072-\u207E\u2080-\u208F\u209D-\u2101\u2103-\u2106\u2108\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u212E\u213A\u213B\u2140-\u2144\u214A-\u214D\u214F-\u2182\u2185-\u2BFF\u2CE5-\u2CEA\u2CEF-\u2CF1\u2CF4-\u2CFF\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D70-\u2D7F\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF-\u2E2E\u2E30-\u3004\u3007-\u3030\u3036-\u303A\u303D-\u3040\u3097-\u309C\u30A0\u30FB\u3100-\u3104\u3130\u318F-\u319F\u31C0-\u31EF\u3200-\u33FF\u4DC0-\u4DFF\uA48D-\uA4CF\uA4FE\uA4FF\uA60D-\uA60F\uA620-\uA629\uA62C-\uA63F\uA66F-\uA67E\uA69E\uA69F\uA6E6-\uA716\uA720\uA721\uA789\uA78A\uA7CE\uA7CF\uA7D2\uA7D4\uA7DD-\uA7F1\uA802\uA806\uA80B\uA823-\uA83F\uA874-\uA881\uA8B4-\uA8F1\uA8F8-\uA8FA\uA8FC\uA8FF-\uA909\uA926-\uA92F\uA947-\uA95F\uA97D-\uA983\uA9B3-\uA9CE\uA9D0-\uA9DF\uA9E5\uA9F0-\uA9F9\uA9FF\uAA29-\uAA3F\uAA43\uAA4C-\uAA5F\uAA77-\uAA79\uAA7B-\uAA7D\uAAB0\uAAB2-\uAAB4\uAAB7\uAAB8\uAABE\uAABF\uAAC1\uAAC3-\uAADA\uAADE\uAADF\uAAEB-\uAAF1\uAAF5-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F\uAB5B\uAB6A-\uAB6F\uABE3-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uD7FF\uE000-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB1E\uFB29\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBB2-\uFBD2\uFD3E-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFC-\uFE6F\uFE75\uFEFD-\uFF20\uFF3B-\uFF40\uFF5B-\uFF65\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFFF]|\uD800[\uDC0C\uDC27\uDC3B\uDC3E\uDC4E\uDC4F\uDC5E-\uDC7F\uDCFB-\uDE7F\uDE9D-\uDE9F\uDED1-\uDEFF\uDF20-\uDF2C\uDF41\uDF4A-\uDF4F\uDF76-\uDF7F\uDF9E\uDF9F\uDFC4-\uDFC7\uDFD0-\uDFFF]|\uD801[\uDC9E-\uDCAF\uDCD4-\uDCD7\uDCFC-\uDCFF\uDD28-\uDD2F\uDD64-\uDD6F\uDD7B\uDD8B\uDD93\uDD96\uDDA2\uDDB2\uDDBA\uDDBD-\uDDBF\uDDF4-\Line truncated
+}

modules/display_name_styles/getDisplayNameStylesFontName.tsx

@@ -0,0 +1,25 @@
+// Metro module 13714 (f13715).
+import { DisplayNameFont } from "../../_bundle/Module1888";
+import DisplayNameStyles_messages from "./intl/DisplayNameStyles.messages";
+const r12 = {};
+r12[DisplayNameFont.DEFAULT] = DisplayNameStyles_messages.ZEL6mz;
+r12[DisplayNameFont.CHERRY_BOMB] = DisplayNameStyles_messages.rN7cuX;
+r12[DisplayNameFont.CHICLE] = DisplayNameStyles_messages.CbHHnL;
+r12[DisplayNameFont.MUSEO_MODERNO] = DisplayNameStyles_messages.iEcEKO;
+r12[DisplayNameFont.NEO_CASTEL] = DisplayNameStyles_messages.DL7jLZ;
+r12[DisplayNameFont.PIXELIFY] = DisplayNameStyles_messages.jq4aRp;
+r12[DisplayNameFont.SINISTRE] = DisplayNameStyles_messages.jV9DN4;
+r12[DisplayNameFont.ZILLA_SLAB] = DisplayNameStyles_messages.KMR8rT;
+r12[DisplayNameFont.PLAYPEN_SANS] = DisplayNameStyles_messages.RP8HFf;
+r12[DisplayNameFont.ORBITRON] = DisplayNameStyles_messages.pwbAIk;
+r12[DisplayNameFont.NEW_ROCKER] = DisplayNameStyles_messages["Llo/Ia"];
+r12[DisplayNameFont.KALAM] = DisplayNameStyles_messages.t9Les4;
+let c9529_2 = r12;
+export default function getDisplayNameStylesFontName(a0) {
+  let r4 = c9529_2[a0];
+  if (r4 == null) {
+    r4 = DisplayNameStyles_messages.ZEL6mz;
+  }
+  return r4;
+};
+export { c9529_2 as DISPLAY_NAME_STYLES_FONT_NAMES };

modules/display_name_styles/hooks/useDisplayNameStyles.tsx

@@ -0,0 +1,42 @@
+// Metro module 4419 (f4420).
+import { useContext } from "react";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import UserStore from "../../../stores/UserStore";
+import { useDisplayNameStylesEnabled } from "./useDisplayNameStylesEnabled";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import GuildIDContext from "../../guild/GuildIDContext";
+export default function useDisplayNameStyles(r3 = {}) {
+  let r36, r37;
+  const userId = r3.userId;
+  let guildId2 = r3.guildId;
+  let guildId = guildId2;
+  const { pendingDisplayNameStyles, ignoreDisabledStylesSetting = false } = r3;
+  const displayNameStylesEnabled = useDisplayNameStylesEnabled({
+    location: "useDisplayNameStyles"
+  });
+  const stateFromStores = useStateFromStores([UserStore], () => userId != null ? UserStore.getUser(userId) : UserStore.getCurrentUser());
+  const context = useContext(GuildIDContext);
+  if (guildId2 == null) {
+    guildId = context;
+    guildId2 = context;
+  }
+  L23: {
+    const stateFromStores2 = useStateFromStores([GuildMemberStore], () => guildId != null ? stateFromStores != null ? GuildMemberStore.getMember(guildId, stateFromStores.id) : null : null);
+    if (!displayNameStylesEnabled) {
+      r36 = null;
+      if (!ignoreDisabledStylesSetting) {
+        break L23;
+      }
+    }
+    if (pendingDisplayNameStyles !== void 0) {
+      r37 = pendingDisplayNameStyles === null ? guildId2 != null ? stateFromStores?.displayNameStyles : pendingDisplayNameStyles : pendingDisplayNameStyles;
+    } else {
+      r37 = stateFromStores2?.displayNameStyles;
+      if (r37 == null) {
+        r37 = stateFromStores?.displayNameStyles;
+      }
+    }
+    r36 = r37;
+  }
+  return r36;
+};

modules/display_name_styles/hooks/useDisplayNameStylesAccessibleColors.tsx

@@ -0,0 +1,26 @@
+// Metro module 8384 (f8385).
+import { useMemo } from "react";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { useDisplayNameStylesEffectConfig } from "./useDisplayNameStylesEffectConfigs";
+import { getAccessibleForegroundColor } from "../../../utils/ColorUtils";
+import Module689 from "../../../_bundle/Module689";
+export function useDisplayNameStylesAccessibleColors({ displayNameStyles, backgroundColor }) {
+  let SOLID, displayNameStylesEffectConfig;
+  SOLID = void 0;
+  displayNameStylesEffectConfig = void 0;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.desaturateUserColors ? AccessibilityStore.saturation : 1);
+  let r17 = displayNameStyles?.effectId;
+  if (r17 == null) {
+    r17 = DisplayNameEffect.SOLID;
+  }
+  SOLID = r17;
+  displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(SOLID);
+  return useMemo(() => displayNameStyles == null ? [] : displayNameStyles.colors.map((color) => getAccessibleForegroundColor({
+    foreground: Module689(color),
+    background: SOLID === DisplayNameEffect.TOON ? Module689("#333") : Module689(backgroundColor),
+    ratio: displayNameStylesEffectConfig.minContrastRatio,
+    saturationFactor: stateFromStores
+  }).hex()), [displayNameStyles, SOLID, displayNameStylesEffectConfig.minContrastRatio, stateFromStores, backgroundColor]);
+}

modules/display_name_styles/hooks/useDisplayNameStylesEffectConfigs.tsx

@@ -0,0 +1,53 @@
+// Metro module 8385 (f8386).
+import { useMemo } from "react";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import useDisplayNameStylesEffectDefaultColors_native from "./useDisplayNameStylesEffectDefaultColors.native";
+import { intl } from "../../../intl/index.native";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+const r17 = {};
+r17[DisplayNameEffect.SOLID] = DisplayNameStyles_messages.OpWJ3f;
+r17[DisplayNameEffect.GRADIENT] = DisplayNameStyles_messages["i9e/u1"];
+r17[DisplayNameEffect.NEON] = DisplayNameStyles_messages.x68b1F;
+r17[DisplayNameEffect.TOON] = DisplayNameStyles_messages.otpeeM;
+r17[DisplayNameEffect.POP] = DisplayNameStyles_messages.cjQOKb;
+r17[DisplayNameEffect.GUMMY] = DisplayNameStyles_messages.x9Gtie;
+r17[DisplayNameEffect.PRISM] = DisplayNameStyles_messages["/M7psm"];
+let c5377_4 = r17;
+const r67 = {};
+r67[DisplayNameEffect.SOLID] = 3;
+r67[DisplayNameEffect.GRADIENT] = 2.5;
+r67[DisplayNameEffect.GLOW] = 2.5;
+r67[DisplayNameEffect.PRISM] = 2.5;
+r67[DisplayNameEffect.NEON] = 3;
+r67[DisplayNameEffect.TOON] = 3;
+r67[DisplayNameEffect.POP] = 3;
+r67[DisplayNameEffect.GUMMY] = 3;
+let c5377_5 = r67;
+export { c5377_4 as DISPLAY_NAME_STYLES_EFFECT_NAMES };
+export function useDisplayNameStylesEffectConfig(a0) {
+  const effectId = a0;
+  const defaultColors = useDisplayNameStylesEffectDefaultColors_native()[a0];
+  return useMemo(() => {
+    let r7 = c5377_4[effectId];
+    if (r7 == null) {
+      r7 = DisplayNameStyles_messages.OpWJ3f;
+    }
+    const r18 = {
+      name: intl.string(r7),
+      defaultColors,
+      previewStyles: {
+        fontId: DisplayNameFont.DEFAULT,
+        effectId,
+        colors: defaultColors
+      },
+      minContrastRatio: null
+    };
+    let minContrastRatio = c5377_5[effectId];
+    if (minContrastRatio == null) {
+      minContrastRatio = 3;
+    }
+    r18.minContrastRatio = minContrastRatio;
+    return r18;
+  }, [a0, defaultColors]);
+}

modules/display_name_styles/hooks/useDisplayNameStylesEffectDefaultColors.native.tsx

@@ -0,0 +1,28 @@
+// Metro module 8386 (f8387).
+import { useMemo } from "react";
+import { DISPLAY_NAME_STYLES_GRADIENT_PRESETS, DISPLAY_NAME_STYLES_GUMMY_PRESETS, DISPLAY_NAME_STYLES_PRISM_PRESETS } from "../DisplayNameStylesConstants";
+import { hex2int } from "../../../_bundle/int2hslRaw";
+import { useToken } from "../../../design/tokens/native/useToken";
+import Module712 from "../../../_bundle/Module712";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+export default function useDisplayNameStylesEffectDefaultColors() {
+  const r17 = hex2int(useToken(Module712.colors.TEXT_DEFAULT));
+  let c16551_0 = r17;
+  return useMemo(() => {
+    const r3 = {};
+    const SOLID = DisplayNameEffect.SOLID;
+    r3[SOLID] = [c16551_0];
+    r3[DisplayNameEffect.GRADIENT] = [...DISPLAY_NAME_STYLES_GRADIENT_PRESETS[0].colors];
+    r3[DisplayNameEffect.GLOW] = [...DISPLAY_NAME_STYLES_GRADIENT_PRESETS[0].colors];
+    r3[DisplayNameEffect.GUMMY] = [...DISPLAY_NAME_STYLES_GUMMY_PRESETS[0]];
+    r3[DisplayNameEffect.PRISM] = [...DISPLAY_NAME_STYLES_PRISM_PRESETS[0]];
+    r3[DisplayNameEffect.TOON] = [15999128];
+    r3[DisplayNameEffect.NEON] = [6888941];
+    r3[DisplayNameEffect.POP] = [1036166];
+    r3[DisplayNameEffect.TEST_1] = [c16551_0];
+    r3[DisplayNameEffect.TEST_2] = [c16551_0];
+    r3[DisplayNameEffect.TEST_3] = [c16551_0];
+    r3[DisplayNameEffect.TEST_4] = [c16551_0];
+    return r3;
+  }, [r17]);
+};

modules/display_name_styles/hooks/useDisplayNameStylesEnabled.tsx

@@ -0,0 +1,13 @@
+// Metro module 4420 (f4421).
+import { useContext } from "react";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { DisplayNameStylesContext } from "../DisplayNameStylesContext";
+export function useDisplayNameStylesEnabled() {
+  let r10 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.displayNameStylesEnabled);
+  const context = useContext(DisplayNameStylesContext);
+  if (!r10) {
+    r10 = context.overrideSettings;
+  }
+  return r10;
+}

modules/display_name_styles/hooks/useDisplayNameStylesHandleApply.tsx

@@ -0,0 +1,35 @@
+// Metro module 14352 (f14353).
+import { useCallback } from "react";
+import { AnalyticEvents } from "../../../Constants";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { setTryItOutDisplayNameStyles } from "../../user_profile/UserProfileActionCreators";
+import { setPendingChanges } from "../../user_profile/UserProfileSettingsActionCreators";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+export function useDisplayNameStylesHandleApply({ hasChanges, selectedFontId, selectedEffectId, selectedColors, defaultColor, guildId, isTryItOut, onClose }) {
+  return useCallback(() => {
+    if (hasChanges) {
+      const displayNameStyles = {
+        fontId: selectedFontId,
+        effectId: selectedEffectId,
+        colors: selectedEffectId === DisplayNameEffect.SOLID && selectedColors.length > 0 && selectedColors[0] === defaultColor ? [] : selectedColors
+      };
+      if (isTryItOut) {
+        setTryItOutDisplayNameStyles(displayNameStyles);
+      } else {
+        setPendingChanges({
+          guildId,
+          displayNameStyles
+        });
+      }
+      AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_APPLIED, {
+        font_name: DisplayNameFont[selectedFontId],
+        effect_name: DisplayNameEffect[selectedEffectId],
+        colors: selectedColors
+      });
+      if (onClose != null) {
+        onClose();
+      }
+    }
+  }, [hasChanges, selectedFontId, selectedEffectId, selectedColors, defaultColor, onClose, guildId, isTryItOut]);
+}

modules/display_name_styles/hooks/useDisplayNameStylesNewItems.tsx

@@ -0,0 +1,44 @@
+// Metro module 14355 (f14356).
+import { useMemo, useCallback } from "react";
+import DisplayNameStylesSeenStore from "../DisplayNameStylesSeenStore";
+import { FLYWHEEL_EFFECTS, FLYWHEEL_FONTS } from "../DisplayNameStylesConstants";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { markDisplayNameStyleFontSeen, markDisplayNameStyleEffectSeen, markDisplayNameStyleNewFontsBadgeDismissed, markDisplayNameStyleNewEffectsBadgeDismissed } from "../DisplayNameStylesActionCreators";
+export function useDisplayNameStylesNewFonts(a0) {
+  let c21170_0 = a0;
+  const stateFromStores = useStateFromStores([DisplayNameStylesSeenStore], () => DisplayNameStylesSeenStore.getSeenFonts());
+  return {
+    dotFontIds: useMemo(() => new Set(c21170_0.filter((item) => FLYWHEEL_FONTS.includes(item) && !stateFromStores.has(item))), [a0, stateFromStores]),
+    dismissFontDot: useCallback((a0) => {
+      markDisplayNameStyleFontSeen(a0);
+    }, [])
+  };
+}
+export function useDisplayNameStylesNewEffects(a0) {
+  let c21171_0 = a0;
+  const stateFromStores2 = useStateFromStores([DisplayNameStylesSeenStore], () => DisplayNameStylesSeenStore.getSeenEffects());
+  return {
+    dotEffectIds: useMemo(() => new Set(c21171_0.filter((item) => FLYWHEEL_EFFECTS.includes(item) && !stateFromStores2.has(item))), [a0, stateFromStores2]),
+    dismissEffectDot: useCallback((a0) => {
+      markDisplayNameStyleEffectSeen(a0);
+    }, [])
+  };
+}
+export function useDisplayNameStylesNewFontsBadge(a0) {
+  const stateFromStores3 = useStateFromStores([DisplayNameStylesSeenStore], () => DisplayNameStylesSeenStore.getNewFontsBadgeDismissed());
+  return {
+    showFontsBadge: useMemo(() => a0.some((item) => FLYWHEEL_FONTS.includes(item)), [a0]) && !stateFromStores3,
+    dismissFontsBadge: useCallback(() => {
+      markDisplayNameStyleNewFontsBadgeDismissed();
+    }, [])
+  };
+}
+export function useDisplayNameStylesNewEffectsBadge(a0) {
+  const stateFromStores3 = useStateFromStores([DisplayNameStylesSeenStore], () => DisplayNameStylesSeenStore.getNewEffectsBadgeDismissed());
+  return {
+    showEffectsBadge: useMemo(() => a0.some((item) => FLYWHEEL_EFFECTS.includes(item)), [a0]) && !stateFromStores3,
+    dismissEffectsBadge: useCallback(() => {
+      markDisplayNameStyleNewEffectsBadgeDismissed();
+    }, [])
+  };
+}

modules/display_name_styles/hooks/useDisplayNameStylesPendingName.tsx

@@ -0,0 +1,29 @@
+// Metro module 14351 (f14352).
+import UserProfileSettingsStore from "../../user_profile/UserProfileSettingsStore";
+import GuildMemberStore from "../../../stores/GuildMemberStore";
+import UserUtils from "../../../utils/UserUtils";
+import { useStateFromStores } from "../../../_bundle/Module589";
+export function useDisplayNameStylesPendingName(a0, a1) {
+  const name = UserUtils.useName(a0);
+  let r20 = useStateFromStores([UserProfileSettingsStore, GuildMemberStore], () => {
+    let r9;
+    const pendingChanges = UserProfileSettingsStore.getPendingChanges(a1);
+    if (a1 != null) {
+      let pendingNickname = pendingChanges.pendingNickname;
+      if (pendingNickname == null) {
+        pendingNickname = GuildMemberStore.getNick(a1, a0?.id);
+      }
+      r9 = pendingNickname;
+    } else {
+      r9 = pendingChanges.pendingGlobalName;
+    }
+    return r9;
+  }, [a1, a0]);
+  if (r20 == null) {
+    r20 = name;
+  }
+  if (r20 == null) {
+    r20 = "";
+  }
+  return r20;
+}

modules/display_name_styles/intl/DisplayNameStyles.messages.js

@@ -0,0 +1,132 @@
+// Metro module 2581 (f2582).
+import { loadJsonAsset } from "../../asset_json/native/AssetJsonUtils";
+import * as _Module2582 from "../../../_bundle/Module2582";
+import * as _Module2583 from "../../../_bundle/Module2583";
+import * as _Module2584 from "../../../_bundle/Module2584";
+import * as _Module2585 from "../../../_bundle/Module2585";
+import * as _Module2586 from "../../../_bundle/Module2586";
+import * as _Module2587 from "../../../_bundle/Module2587";
+import * as _Module2588 from "../../../_bundle/Module2588";
+import * as _Module2589 from "../../../_bundle/Module2589";
+import * as _Module2590 from "../../../_bundle/Module2590";
+import * as _Module2591 from "../../../_bundle/Module2591";
+import * as _Module2592 from "../../../_bundle/Module2592";
+import * as _Module2593 from "../../../_bundle/Module2593";
+import * as _Module2594 from "../../../_bundle/Module2594";
+import * as _Module2595 from "../../../_bundle/Module2595";
+import * as _Module2596 from "../../../_bundle/Module2596";
+import * as _Module2597 from "../../../_bundle/Module2597";
+import * as _Module2598 from "../../../_bundle/Module2598";
+import * as _Module2599 from "../../../_bundle/Module2599";
+import * as _Module2600 from "../../../_bundle/Module2600";
+import * as _Module2601 from "../../../_bundle/Module2601";
+import * as _Module2602 from "../../../_bundle/Module2602";
+import * as _Module2603 from "../../../_bundle/Module2603";
+import * as _Module2604 from "../../../_bundle/Module2604";
+import * as _Module2605 from "../../../_bundle/Module2605";
+import * as _Module2606 from "../../../_bundle/Module2606";
+import * as _Module2607 from "../../../_bundle/Module2607";
+import * as _Module2608 from "../../../_bundle/Module2608";
+import * as _Module2609 from "../../../_bundle/Module2609";
+import * as _Module2610 from "../../../_bundle/Module2610";
+import * as _Module2611 from "../../../_bundle/Module2611";
+import * as _Module2612 from "../../../_bundle/Module2612";
+import { createLoader, makeMessagesProxy } from "../../../_bundle/Module1274";
+const loader = createLoader({
+  bg: () => loadJsonAsset(_Module2582).then((result) => ({
+    default: result
+  })),
+  cs: () => loadJsonAsset(_Module2583).then((result) => ({
+    default: result
+  })),
+  da: () => loadJsonAsset(_Module2584).then((result) => ({
+    default: result
+  })),
+  de: () => loadJsonAsset(_Module2585).then((result) => ({
+    default: result
+  })),
+  el: () => loadJsonAsset(_Module2586).then((result) => ({
+    default: result
+  })),
+  "en-GB": () => loadJsonAsset(_Module2587).then((result) => ({
+    default: result
+  })),
+  "es-419": () => loadJsonAsset(_Module2588).then((result) => ({
+    default: result
+  })),
+  "es-ES": () => loadJsonAsset(_Module2589).then((result) => ({
+    default: result
+  })),
+  fi: () => loadJsonAsset(_Module2590).then((result) => ({
+    default: result
+  })),
+  fr: () => loadJsonAsset(_Module2591).then((result) => ({
+    default: result
+  })),
+  hi: () => loadJsonAsset(_Module2592).then((result) => ({
+    default: result
+  })),
+  hr: () => loadJsonAsset(_Module2593).then((result) => ({
+    default: result
+  })),
+  hu: () => loadJsonAsset(_Module2594).then((result) => ({
+    default: result
+  })),
+  it: () => loadJsonAsset(_Module2595).then((result) => ({
+    default: result
+  })),
+  ja: () => loadJsonAsset(_Module2596).then((result) => ({
+    default: result
+  })),
+  ko: () => loadJsonAsset(_Module2597).then((result) => ({
+    default: result
+  })),
+  lt: () => loadJsonAsset(_Module2598).then((result) => ({
+    default: result
+  })),
+  nl: () => loadJsonAsset(_Module2599).then((result) => ({
+    default: result
+  })),
+  no: () => loadJsonAsset(_Module2600).then((result) => ({
+    default: result
+  })),
+  pl: () => loadJsonAsset(_Module2601).then((result) => ({
+    default: result
+  })),
+  "pt-BR": () => loadJsonAsset(_Module2602).then((result) => ({
+    default: result
+  })),
+  ro: () => loadJsonAsset(_Module2603).then((result) => ({
+    default: result
+  })),
+  ru: () => loadJsonAsset(_Module2604).then((result) => ({
+    default: result
+  })),
+  "sv-SE": () => loadJsonAsset(_Module2605).then((result) => ({
+    default: result
+  })),
+  th: () => loadJsonAsset(_Module2606).then((result) => ({
+    default: result
+  })),
+  tr: () => loadJsonAsset(_Module2607).then((result) => ({
+    default: result
+  })),
+  uk: () => loadJsonAsset(_Module2608).then((result) => ({
+    default: result
+  })),
+  vi: () => loadJsonAsset(_Module2609).then((result) => ({
+    default: result
+  })),
+  "zh-CN": () => loadJsonAsset(_Module2610).then((result) => ({
+    default: result
+  })),
+  "zh-TW": () => loadJsonAsset(_Module2611).then((result) => ({
+    default: result
+  })),
+  "en-US": () => loadJsonAsset(_Module2612).then((result) => ({
+    default: result
+  }))
+}, "en-US");
+const r51 = makeMessagesProxy(loader);
+export default r51;
+export { loader as messagesLoader };

modules/display_name_styles/native/DisplayNameStylesColorPickerSheet.tsx

@@ -0,0 +1,139 @@
+// Metro module 14367 (f14368).
+import { useMemo, useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { getColorPresetsForEffect } from "../DisplayNameStylesConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
+import useDisplayNameStylesEffectDefaultColors_native from "../hooks/useDisplayNameStylesEffectDefaultColors.native";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import showCustomColorPickerActionSheet from "../../color_picker/native/showCustomColorPickerActionSheet";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import Module12 from "../../../_bundle/Module12";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { EyeDropperIcon } from "../../../design/components/Icon/native/redesign/generated/EyeDropperIcon";
+const useStyles = createStyles({
+  header: {
+    paddingTop: 4
+  },
+  headerTrailing: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingBottom: Module712.space.PX_16
+  },
+  presetGrid: {
+    gap: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_16
+  },
+  presetRow: {
+    gap: Module712.space.PX_16,
+    flexDirection: "row",
+    justifyContent: "center"
+  },
+  presetColor: {
+    width: 40,
+    height: 40,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 2,
+    borderColor: "transparent"
+  },
+  presetColorSelected: {
+    borderColor: Module712.colors.CONTROL_BRAND_FOREGROUND
+  },
+  buttonsContainer: {
+    flexDirection: "row",
+    gap: Module712.space.PX_16
+  },
+  button: {
+    flex: 1
+  }
+});
+export default function DisplayNameStylesColorPickerSheet(props) {
+  let state, setState, memo, callback;
+  const { selectedColor, selectedEffectId, onSelectColor } = props;
+  state = void 0;
+  setState = void 0;
+  memo = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
+  const r34 = useDisplayNameStylesEffectDefaultColors_native()[selectedEffectId];
+  let c21181_4 = r34;
+  const memo2 = useMemo(() => getColorPresetsForEffect(selectedEffectId).map((item) => item[0]), [selectedEffectId]);
+  [state, setState] = useState(selectedColor);
+  memo = useMemo(() => state !== selectedColor, [state, selectedColor]);
+  callback = useCallback((a0) => {
+    setState(a0);
+  }, []);
+  const callback3 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+    onSelectColor(c21181_4[0]);
+    ActionSheetActionCreators.hideActionSheet();
+  }, [r34, onSelectColor]);
+  const callback2 = useCallback(() => {
+    showCustomColorPickerActionSheet({
+      color: state,
+      onSelect: (a0) => {
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+        onSelectColor(a0);
+        ActionSheetActionCreators.hideActionSheet();
+      },
+      actionButtonVariant: "primary"
+    });
+  }, [state, onSelectColor]);
+  const callback4 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (memo) {
+      onSelectColor(state);
+      AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_COLOR_SELECTED, {
+        default: state === c21181_4[0],
+        colors: [state]
+      });
+    }
+    ActionSheetActionCreators.hideActionSheet();
+  }, [memo, state, onSelectColor, r34]);
+  return <BottomSheet ref={bottomSheetRef} header={<View style={styles.header}>
+    <BottomSheetTitleHeader title={intl.string(DisplayNameStyles_messages["6OxgN7"])} trailing={<View style={styles.headerTrailing}>
+      <Button text={intl.string(t.XqMe3N)} onPress={callback4} variant="primary" size="sm" />
+    </View>} />
+  </View>}>
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <View style={styles.presetGrid}>
+          {Module12.chunk(memo2.slice(0, 12), 6).map((item, index) => {
+            let c27735_0 = index;
+            return <View key={index} style={styles.presetRow}>
+              {item.map((item, index) => {
+                return <Pressable key={6 * c27735_0 + index} onPress={() => callback(item)} style={[styles.presetColor, {
+                  backgroundColor: int2hex(item)
+                }, item === state && styles.presetColorSelected]} accessibilityRole="button" accessibilityLabel={int2hex(item)} />;
+              })}
+            </View>;
+          })}
+        </View>
+        <View style={styles.buttonsContainer}>
+          {selectedEffectId === DisplayNameEffect.SOLID && <View style={styles.button}>
+            <Button text={intl.string(DisplayNameStyles_messages.gIeJTK)} onPress={callback3} variant="secondary" size="md" grow />
+          </View>}
+          <View style={styles.button}>
+            <Button text={intl.string(t["FHBa/1"])} onPress={callback2} variant="secondary" size="md" icon={<EyeDropperIcon size="sm" />} grow />
+          </View>
+        </View>
+      </View>
+    </View>
+  </BottomSheet>;
+};

modules/display_name_styles/native/DisplayNameStylesColorSwatch.tsx

@@ -0,0 +1,40 @@
+// Metro module 13715 (f13716).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import GummyStripes from "./effects/GummyStripes";
+import Module4611 from "../../../_bundle/Module4611";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+const useStyles = createStyles({
+  colorSwatch: {
+    width: 24,
+    height: 24,
+    borderRadius: Module712.radii.xs
+  },
+  gummySwatch: {
+    flexDirection: "row",
+    overflow: "hidden"
+  }
+});
+export default function DisplayNameStylesColorSwatch(props) {
+  const { colors, effectId } = props;
+  const styles = useStyles();
+  if (effectId === DisplayNameEffect.GUMMY && colors.length > 0) {
+    return <View style={[styles.colorSwatch, styles.gummySwatch]}>
+      <GummyStripes colors={colors} />
+    </View>;
+  }
+  if (colors.length >= 2) {
+    return <Module4611 colors={colors.map((color) => int2hex(color))} start={{
+      x: 0,
+      y: 0
+    }} end={{
+      x: 1,
+      y: 0
+    }} style={styles.colorSwatch} />;
+  }
+  return <View style={[styles.colorSwatch, {
+    backgroundColor: colors.length > 0 ? int2hex(colors[0]) : "#000000"
+  }]} />;
+};

modules/display_name_styles/native/DisplayNameStylesEditPreview.tsx

@@ -0,0 +1,102 @@
+// Metro module 14368 (f14369).
+import { useMemo } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useGuildMemberAndUserPendingNameplate } from "../../profile_customization/ProfileCustomizationUtils";
+import { getNameplateData } from "../../collectibles/nameplates/utils";
+import UserProfilePreview from "../../user_profile/native/UserProfilePreview";
+import { intl } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { NameplatePreview } from "../../collectibles/nameplates/native/NameplatePreview";
+import { calendarFormat } from "../../../utils/DateUtils";
+import { Avatar, AvatarSizes } from "../../../design/void/native";
+import UsernameWithEffects from "./UsernameWithEffects";
+import { EffectDisplayType } from "../types";
+import { Text } from "../../../design/components/Text/native/Text";
+let useStyles;
+const ChatPreview = function ChatPreview(props) {
+  const { user, displayName, displayNameStyles, guildId } = props;
+  const styles = useStyles();
+  return <View style={styles.chatContainer} pointerEvents="none">
+    <Avatar user={user} size={AvatarSizes.NORMAL} guildId={guildId} />
+    <View style={styles.chatContent}>
+      <View style={styles.chatHeader}>
+        <UsernameWithEffects userId={user.id} guildId={guildId} userName={displayName} variant="text-md/semibold" effectDisplayType={EffectDisplayType.PLAIN} lineClamp={1} pendingDisplayNameStyles={displayNameStyles} />
+        <Text variant="text-xs/medium" color="text-muted" style={styles.chatTimestamp}>
+          {useMemo(() => calendarFormat(new Date(), true), [])}
+        </Text>
+      </View>
+      <Text variant="text-md/normal" color="text-default" style={styles.chatMessageText}>
+        {intl.string(DisplayNameStyles_messages.h5Cuej)}
+      </Text>
+    </View>
+  </View>;
+};
+useStyles = createStyles({
+  previewSection: {
+    marginBottom: Module712.space.PX_24,
+    alignItems: "center",
+    alignSelf: "center",
+    width: "100%",
+    maxWidth: 360
+  },
+  chatPreviewWrapper: {
+    marginTop: -18,
+    alignSelf: "flex-end",
+    width: 260,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  nameplatePreviewWrapper: {
+    marginTop: -6,
+    width: 260
+  },
+  chatContainer: {
+    flexDirection: "row",
+    borderRadius: Module712.radii.sm,
+    padding: Module712.space.PX_16,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    gap: Module712.space.PX_12
+  },
+  chatContent: {
+    flex: 1
+  },
+  chatHeader: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 6
+  },
+  chatTimestamp: {
+    marginTop: -8
+  },
+  chatMessageText: {}
+});
+export default function DisplayNameStylesEditPreview(props) {
+  const { user, displayName, guildId, selectedFontId, selectedEffectId, selectedColors } = props;
+  const styles = useStyles();
+  const guildMemberAndUserPendingNameplate = useGuildMemberAndUserPendingNameplate(user, guildId);
+  const { userNameplate, guildNameplate, pendingNameplate } = guildMemberAndUserPendingNameplate;
+  let r15 = getNameplateData(guildNameplate);
+  const memo = useMemo(() => ({
+    fontId: selectedFontId,
+    effectId: selectedEffectId,
+    colors: selectedColors
+  }), [selectedFontId, selectedEffectId, selectedColors]);
+  const r50 = [<UserProfilePreview user={user} displayName={displayName} guildId={guildId} displayNameStylesOverride={memo} compact hideFrame maxWidth={320} accessibilityLabel={intl.string(DisplayNameStyles_messages.zoh6MT)} />, <View style={styles.chatPreviewWrapper}>
+    <ChatPreview user={user} displayName={displayName} displayNameStyles={memo} guildId={guildId} />
+  </View>, ,];
+  const r2 = pendingNameplate == null;
+  let nameplateData = void 0;
+  if (r2) {
+    if (r15 == null) {
+      r15 = userNameplate;
+    }
+    nameplateData = r15;
+  }
+  r50[2] = <View style={styles.nameplatePreviewWrapper}>
+    <NameplatePreview user={user} nameplate={pendingNameplate} nameplateData={nameplateData} guildId={guildId} pendingDisplayNameStyles={memo} pendingGlobalName={displayName} />
+  </View>;
+  return <View style={styles.previewSection}>{r50}</View>;
+};

modules/display_name_styles/native/DisplayNameStylesEditScreen.tsx

@@ -0,0 +1,402 @@
+// Metro module 14350 (f14351).
+import { useCallback, useState, useMemo } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import UserStore from "../../../stores/UserStore";
+import { AnalyticEvents } from "../../../Constants";
+import { MEDIA_PICKER_SEND_BUTTON_SPRING } from "../../media_keyboard/native/MediaKeyboardConstants";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useRoute, useNavigation } from "../../../_bundle/Module1481";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useDisplayNameStylesPendingName } from "../hooks/useDisplayNameStylesPendingName";
+import { useGuildMemberOrUserPendingDisplayNameStyles } from "../../profile_customization/ProfileCustomizationUtils";
+import useDisplayNameStyles from "../hooks/useDisplayNameStyles";
+import useTheme from "../../../hooks/useTheme";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+import { getEffectColorCount, generateRandomDisplayNameStyles } from "../DisplayNameStylesUtils";
+import { useIsDisplayNameStylesFlywheelSettersEnabled } from "../DisplayNameStylesFlywheelExperiment";
+import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import useDisplayNameStylesEffectDefaultColors_native from "../hooks/useDisplayNameStylesEffectDefaultColors.native";
+import { areArraysShallowEqual } from "../../../_bundle/shallowEqual";
+import { useDisplayNameStylesHandleApply } from "../hooks/useDisplayNameStylesHandleApply";
+import { useVisibleFontOrder } from "../DisplayNameStylesFontOrder";
+import { useVisibleEffectOrder } from "../DisplayNameStylesEffectOrder";
+import { useDisplayNameStylesNewFontsBadge, useDisplayNameStylesNewEffectsBadge } from "../hooks/useDisplayNameStylesNewItems";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import { setTryItOutDisplayNameStyles } from "../../user_profile/UserProfileActionCreators";
+import { setPendingChanges } from "../../user_profile/UserProfileSettingsActionCreators";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import * as _asyncRequire from "../../../_bundle/asyncRequire";
+import { intl, t } from "../../../intl/index.native";
+import getDisplayNameStylesFontName from "../getDisplayNameStylesFontName";
+import { ThemeContextProvider } from "../../../_bundle/Module3901";
+import { DisplayNameStylesContext } from "../DisplayNameStylesContext";
+import DisplayNameStylesEditPreview from "./DisplayNameStylesEditPreview";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Text } from "../../../design/components/Text/native/Text";
+import { NewTag } from "../../../design/void/native";
+import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+import DisplayNameStylesColorSwatch from "./DisplayNameStylesColorSwatch";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { DiceIcon } from "../../../design/components/Icon/native/redesign/generated/DiceIcon";
+import { DenyIcon } from "../../../design/components/Icon/native/redesign/generated/DenyIcon";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import ReanimatedRexport, { useAnimatedProps, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import * as _spring from "../../../design/animation/reanimated/spring/spring";
+let c10092_14, useStyles, __initData, __initData2;
+const ApplyButton = function ApplyButton(props) {
+  const { onPress, visible } = props;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const bottom = useSafeAreaInsets_native().bottom;
+  const r26 = function() {
+    return {
+      pointerEvents: visible ? "box-none" : "none"
+    };
+  };
+  r26.__closure = {
+    visible
+  };
+  r26.__workletHash = 2349569076845;
+  r26.__initData = __initData;
+  const animatedProps = useAnimatedProps(r26);
+  const r32 = function() {
+    const r2 = visible ? 1 : 0;
+    const r1 = visible ? 0 : 60;
+    const r0 = visible ? 1 : 0.9;
+    return {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      marginHorizontal: Module712.space.PX_16,
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      transform: [{
+        translateY: stateFromStores ? r1 : _spring.withSpring(r1, MEDIA_PICKER_SEND_BUTTON_SPRING)
+      }, {
+        scale: stateFromStores ? r0 : _spring.withSpring(r0, MEDIA_PICKER_SEND_BUTTON_SPRING)
+      }],
+      opacity: stateFromStores ? r2 : _spring.withSpring(r2, MEDIA_PICKER_SEND_BUTTON_SPRING)
+    };
+  };
+  r32.__closure = {
+    visible,
+    tokens: Module712,
+    reducedMotion: stateFromStores,
+    withSpring: _spring.withSpring,
+    MEDIA_PICKER_SEND_BUTTON_SPRING
+  };
+  r32.__workletHash = 16786362025671;
+  r32.__initData = __initData2;
+  return <ReanimatedRexport.View style={useAnimatedStyle(r32)}>
+    <ReanimatedRexport.View style={{
+      marginBottom: bottom
+    }} animatedProps={animatedProps}>
+      <Button variant="primary" onPress={useCallback(() => {
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+        onPress();
+      }, [onPress])} size="lg" text={intl.string(t["1Qm822"])} />
+    </ReanimatedRexport.View>
+  </ReanimatedRexport.View>;
+};
+c10092_14 = [DisplayNameEffect.GRADIENT, DisplayNameEffect.GUMMY, DisplayNameEffect.PRISM];
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  contentContainer: {
+    padding: Module712.space.PX_16
+  },
+  fieldButtonGroup: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderRadius: Module712.radii.md
+  },
+  fieldButton: {
+    padding: Module712.space.PX_12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  fieldButtonBorder: {
+    borderTopWidth: 1,
+    borderTopColor: Module712.colors.BORDER_SUBTLE
+  },
+  fieldButtonLabel: {
+    flex: 1,
+    marginRight: Module712.space.PX_12
+  },
+  fieldButtonChevron: {
+    flexDirection: "row",
+    gap: Module712.space.PX_8,
+    flexShrink: 0
+  },
+  fieldButtonTrailing: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  buttonContainer: {
+    marginVertical: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_16,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    borderTopWidth: 1,
+    borderTopColor: Module712.colors.BORDER_MUTED,
+    gap: Module712.space.PX_16
+  }
+});
+__initData = {
+  code: "function DisplayNameStylesEditScreenTsx1(){const{visible}=this.__closure;return{pointerEvents:visible?'box-none':'none'};}"
+};
+__initData2 = {
+  code: "function DisplayNameStylesEditScreenTsx2(){const{visible,tokens,reducedMotion,withSpring,MEDIA_PICKER_SEND_BUTTON_SPRING}=this.__closure;const targetOpacity=visible?1:0;const targetTranslateY=visible?0:60;const targetScale=visible?1:0.9;return{position:'absolute',bottom:0,left:0,right:0,marginHorizontal:tokens.space.PX_16,flexDirection:'column',justifyContent:'flex-end',transform:[{translateY:reducedMotion?targetTranslateY:withSpring(targetTranslateY,MEDIA_PICKER_SEND_BUTTON_SPRING)},{scale:reducedMotion?targetScale:withSpring(targetScale,MEDIA_PICKER_SEND_BUTTON_SPRING)}],opacity:reducedMotion?targetOpacity:withSpring(targetOpacity,MEDIA_PICKER_SEND_BUTTON_SPRING)};}"
+};
+export default function DisplayNameStylesEditScreen() {
+  let displayNameStylesPendingName, c21165_5, c21165_10, displayNameStylesEffectConfig, c21165_12, c21165_13, callback, memo, visibleFontOrder, visibleEffectOrder, showFontsBadge, dismissFontsBadge, showEffectsBadge, dismissEffectsBadge;
+  const styles = useStyles();
+  const route = useRoute();
+  const navigation = useNavigation();
+  let params = route.params;
+  if (params == null) {
+    params = {};
+  }
+  const { guildId, isTryItOut } = params;
+  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  displayNameStylesPendingName = useDisplayNameStylesPendingName(stateFromStores2, guildId);
+  const styles3 = useGuildMemberOrUserPendingDisplayNameStyles(stateFromStores2, guildId);
+  const { guildDisplayNameStyles, pendingDisplayNameStyles, tryItOutDisplayNameStyles } = styles3;
+  const styles2 = useDisplayNameStyles({
+    userId: stateFromStores2?.id,
+    guildId,
+    pendingDisplayNameStyles: isTryItOut ? tryItOutDisplayNameStyles : pendingDisplayNameStyles,
+    ignoreDisabledStylesSetting: true
+  });
+  c21165_5 = styles2;
+  const theme = useTheme();
+  let r86 = styles2?.fontId;
+  if (r86 == null) {
+    r86 = DisplayNameFont.DEFAULT;
+  }
+  const [state, setState] = useState(r86);
+  let r95 = styles2?.effectId;
+  if (r95 == null) {
+    r95 = DisplayNameEffect.SOLID;
+  }
+  const [state2, setState2] = useState(r95);
+  const r105 = getEffectColorCount(state2) > 1;
+  c21165_10 = r105;
+  const isDisplayNameStylesFlywheelSettersEnabled = useIsDisplayNameStylesFlywheelSettersEnabled("DisplayNameStylesEditScreen");
+  displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(state2);
+  c21165_12 = useDisplayNameStylesEffectDefaultColors_native();
+  let r116 = styles2?.colors;
+  if (r116 == null) {
+    r116 = [];
+  }
+  c21165_13 = r116;
+  const [state3, setState3] = useState(r116.length > 0 && !r105 ? r116[0] : displayNameStylesEffectConfig.defaultColors[0]);
+  const [state4, setState4] = useState(() => Object.fromEntries(c10092_14.map((item) => {
+    const r1 = [item, ,];
+    let r2 = c21165_13;
+    if (!(r2.length > 0 && state2 === item)) {
+      r2 = c21165_12[item];
+    }
+    r1[1] = r2;
+    return r1;
+  })));
+  callback = useCallback((c27728_0, c27728_1) => {
+    setState4((prevState4) => {
+      const r0 = {
+        ...prevState4
+      };
+      r0[c27728_0] = c27728_1;
+      return r0;
+    });
+  }, []);
+  memo = useMemo(() => {
+    let r1;
+    if (c21165_10) {
+      let r6 = state4[state2];
+      if (r6 == null) {
+        r6 = displayNameStylesEffectConfig.defaultColors;
+      }
+      r1 = r6;
+    } else {
+      r1 = [state3];
+    }
+    return r1;
+  }, [r105, state4, state2, displayNameStylesEffectConfig.defaultColors, state3]);
+  const memo2 = useMemo(() => {
+    let r9 = state !== c21165_5?.fontId || state2 !== c21165_5?.effectId;
+    if (!r9) {
+      let r19 = c21165_5?.colors;
+      if (r19 == null) {
+        r19 = [];
+      }
+      r9 = !areArraysShallowEqual(memo, r19);
+    }
+    return r9;
+  }, [styles2, state, state2, memo]);
+  const displayNameStylesHandleApply = useDisplayNameStylesHandleApply({
+    hasChanges: memo2,
+    selectedFontId: state,
+    selectedEffectId: state2,
+    selectedColors: memo,
+    defaultColor: displayNameStylesEffectConfig.defaultColors[0],
+    guildId,
+    isTryItOut,
+    onClose: () => navigation.goBack()
+  });
+  visibleFontOrder = useVisibleFontOrder();
+  visibleEffectOrder = useVisibleEffectOrder();
+  const displayNameStylesNewFontsBadge = useDisplayNameStylesNewFontsBadge(visibleFontOrder);
+  showFontsBadge = displayNameStylesNewFontsBadge.showFontsBadge;
+  dismissFontsBadge = displayNameStylesNewFontsBadge.dismissFontsBadge;
+  const displayNameStylesNewEffectsBadge = useDisplayNameStylesNewEffectsBadge(visibleEffectOrder);
+  showEffectsBadge = displayNameStylesNewEffectsBadge.showEffectsBadge;
+  dismissEffectsBadge = displayNameStylesNewEffectsBadge.dismissEffectsBadge;
+  const callback3 = useCallback(() => {
+    const styles = generateRandomDisplayNameStyles(visibleFontOrder, visibleEffectOrder);
+    const { fontId, effectId, colors } = styles;
+    setState(fontId);
+    setState2(effectId);
+    if (getEffectColorCount(effectId) > 1) {
+      callback(effectId, colors);
+    } else {
+      setState3(colors[0]);
+    }
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_SURPRISE_ME);
+  }, [callback, visibleFontOrder, visibleEffectOrder]);
+  const callback4 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (isTryItOut) {
+      setTryItOutDisplayNameStyles(null);
+    } else {
+      setPendingChanges({
+        displayNameStyles: null
+      });
+    }
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_REMOVED);
+    navigation.goBack();
+  }, [navigation, isTryItOut]);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    setPendingChanges({
+      guildId,
+      displayNameStyles: null
+    });
+    navigation.goBack();
+  }, [guildId, navigation]);
+  const callback5 = useCallback(() => {
+    if (showFontsBadge) {
+      dismissFontsBadge();
+    }
+    ActionSheetActionCreators.openLazy(import("./DisplayNameStylesFontPickerSheet"), "DisplayNameStylesFontPickerSheet", {
+      selectedFontId: state,
+      onSelectFont: setState,
+      displayName: displayNameStylesPendingName
+    });
+  }, [state, displayNameStylesPendingName, showFontsBadge, dismissFontsBadge]);
+  const callback7 = useCallback(() => {
+    if (showEffectsBadge) {
+      dismissEffectsBadge();
+    }
+    ActionSheetActionCreators.openLazy(import("./DisplayNameStylesEffectPickerSheet"), "DisplayNameStylesEffectPickerSheet", {
+      userId: stateFromStores2?.id,
+      selectedEffectId: state2,
+      onSelectEffect: setState2
+    });
+  }, [state2, stateFromStores2?.id, showEffectsBadge, dismissEffectsBadge]);
+  const callback6 = useCallback(() => {
+    if (state2 === DisplayNameEffect.GUMMY) {
+      ActionSheetActionCreators.openLazy(import("./DisplayNameStylesGummyColorPickerSheet"), "DisplayNameStylesGummyColorPickerSheet", {
+        selectedColors: memo,
+        onSelectColors: (a0) => callback(DisplayNameEffect.GUMMY, a0)
+      });
+    } else if (c21165_10) {
+      ActionSheetActionCreators.openLazy(_asyncRequire(dependencyMap[36], dependencyMap.paths), "DisplayNameStylesGradientPickerSheet", {
+        selectedColors: memo,
+        selectedEffectId: state2,
+        onSelectColors: (a0) => callback(state2, a0)
+      });
+    } else {
+      ActionSheetActionCreators.openLazy(_asyncRequire(dependencyMap[37], dependencyMap.paths), "DisplayNameStylesColorPickerSheet", {
+        selectedColor: state3,
+        selectedEffectId: state2,
+        onSelectColor: setState3
+      });
+    }
+  }, [r105, memo, state3, state2, callback]);
+  const r47 = intl.string(getDisplayNameStylesFontName(state));
+  const r191 = stateFromStores2 == null;
+  let r192 = null;
+  if (!r191) {
+    const Provider = DisplayNameStylesContext.Provider;
+    const contentContainerStyle = {
+      ...styles.contentContainer,
+      paddingBottom: memo2 ? 70 : 0
+    };
+    const r217 = [<DisplayNameStylesEditPreview user={stateFromStores2} displayName={displayNameStylesPendingName} guildId={guildId} selectedFontId={state} selectedEffectId={state2} selectedColors={memo} />, , ,];
+    const r49 = intl.string(DisplayNameStyles_messages["0JCuGm"]);
+    const r288 = [<Pressable onPress={callback5} style={styles.fieldButton} accessibilityRole="button" accessibilityLabel={showFontsBadge ? `${r49}, ${r47}, ${intl.string(t.y2b7CA)}` : `${r49}, ${r47}`}>
+      <View>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages["0JCuGm"])}
+        </Text>
+        <Text variant="text-md/normal" color="text-subtle">{r47}</Text>
+      </View>
+      {showFontsBadge ? <View style={styles.fieldButtonTrailing}>
+        <NewTag />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View> : <ChevronSmallRightIcon color="icon-muted" />}
+    </Pressable>, , ,];
+    const r300 = intl.string(DisplayNameStyles_messages.RVtMxT);
+    const name = displayNameStylesEffectConfig.name;
+    r288[1] = <Pressable onPress={callback7} style={[styles.fieldButton, styles.fieldButtonBorder]} accessibilityRole="button" accessibilityLabel={showEffectsBadge ? `${r300}, ${name}, ${intl.string(t.y2b7CA)}` : `${r300}, ${name}`}>
+      <View>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages.RVtMxT)}
+        </Text>
+        <Text variant="text-md/normal" color="text-subtle">{displayNameStylesEffectConfig.name}</Text>
+      </View>
+      {showEffectsBadge ? <View style={styles.fieldButtonTrailing}>
+        <NewTag />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View> : <ChevronSmallRightIcon color="icon-muted" />}
+    </Pressable>;
+    r288[2] = <Pressable onPress={callback6} style={[styles.fieldButton, styles.fieldButtonBorder]} accessibilityRole="button" accessibilityLabel={intl.string(DisplayNameStyles_messages["6OxgN7"])}>
+      <View style={styles.fieldButtonLabel}>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages["6OxgN7"])}
+        </Text>
+        <Text variant={isDisplayNameStylesFlywheelSettersEnabled ? "text-sm/normal" : "text-md/normal"} color="text-subtle" lineClamp={1}>
+          {memo.map((item) => int2hex(item)).join(", ")}
+        </Text>
+      </View>
+      <View style={styles.fieldButtonChevron}>
+        <DisplayNameStylesColorSwatch colors={memo} effectId={state2} />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View>
+    </Pressable>;
+    r217[1] = <View style={styles.fieldButtonGroup}>{r288}</View>;
+    r217[2] = <View style={styles.buttonContainer}>
+      <Button text={intl.string(DisplayNameStyles_messages.NOGFds)} onPress={callback3} variant="tertiary" size="lg" grow icon={<DiceIcon />} iconPosition="start" />
+      {guildId == null && styles2 != null && <Button text={intl.string(DisplayNameStyles_messages.ymq8WQ)} onPress={callback4} variant="tertiary" size="lg" grow icon={<DenyIcon />} iconPosition="start" />}
+      {guildId != null && (guildDisplayNameStyles != null || pendingDisplayNameStyles != null) && <Button text={intl.string(DisplayNameStyles_messages["j/KRxc"])} onPress={callback2} variant="tertiary" size="lg" grow icon={<DenyIcon />} iconPosition="start" />}
+    </View>;
+    r192 = <ThemeContextProvider theme={theme}>
+      <Provider value={{
+        overrideSettings: true
+      }}>
+        <View style={styles.container}>
+          <ScrollView contentContainerStyle={contentContainerStyle}>{r217}</ScrollView>
+          <ApplyButton onPress={displayNameStylesHandleApply} visible={memo2} />
+        </View>
+      </Provider>
+    </ThemeContextProvider>;
+  }
+  return r192;
+};

modules/display_name_styles/native/DisplayNameStylesEffectPickerSheet.tsx

@@ -0,0 +1,161 @@
+// Metro module 14359 (f14360).
+import { useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { FLYWHEEL_EFFECTS } from "../DisplayNameStylesConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
+import { useVisibleEffectOrder } from "../DisplayNameStylesEffectOrder";
+import { useDisplayNameStylesNewEffects } from "../hooks/useDisplayNameStylesNewItems";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { Stack } from "../../../design/components/Stack/native/Stack.native";
+import { DISPLAY_NAME_STYLES_EFFECT_NAMES, useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import UsernameWithEffects from "./UsernameWithEffects";
+import { EffectDisplayType } from "../types";
+import { Text } from "../../../design/components/Text/native/Text";
+let useStyles;
+const EffectTile = function EffectTile(props) {
+  const { userId: userId2, effectId } = props;
+  let selected = props.selected;
+  let showNewDot = props.showNewDot;
+  const onClick2 = props.onClick;
+  const styles = useStyles();
+  let r27 = DISPLAY_NAME_STYLES_EFFECT_NAMES[effectId];
+  if (r27 == null) {
+    r27 = DisplayNameStyles_messages.OpWJ3f;
+  }
+  const userName = intl.string(r27);
+  const displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(effectId);
+  let r10 = FLYWHEEL_EFFECTS.includes(effectId);
+  const props2 = {
+    onPress: onClick2,
+    accessibilityRole: "button",
+    accessibilityLabel: r10 ? `${userName}, ${intl.string(t.oW0eUd)}` : userName,
+    accessibilityState: {
+      selected
+    },
+    children: null
+  };
+  const style = [styles.effectCard, ,];
+  if (selected) {
+    selected = styles.effectCardSelected;
+  }
+  style[1] = selected;
+  const r67 = [<UsernameWithEffects userId={userId2} userName={userName} effectDisplayType={EffectDisplayType.STATIC} pendingDisplayNameStyles={displayNameStylesEffectConfig.previewStyles} style={styles.effectName} variant="text-md/semibold" />, , ,];
+  if (showNewDot) {
+    showNewDot = <View style={styles.tileNewDot} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
+  }
+  r67[1] = showNewDot;
+  if (r10) {
+    r10 = <Text variant="text-xs/normal" color="text-subtle" style={styles.betaCaption}>
+      {intl.string(t.oW0eUd)}
+    </Text>;
+  }
+  r67[2] = r10;
+  props2.children = <View style={style}>{r67}</View>;
+  return <Pressable key={effectId} {...props2} />;
+};
+useStyles = createStyles({
+  header: {
+    paddingTop: 4
+  },
+  headerTrailing: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: Module712.space.PX_8,
+    paddingLeft: Module712.space.PX_16,
+    alignItems: "center"
+  },
+  gridContainer: {
+    flexWrap: "wrap",
+    width: 350
+  },
+  effectCard: {
+    width: 109,
+    height: 80,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  effectCardSelected: {
+    borderColor: Module712.colors.CONTROL_BRAND_FOREGROUND
+  },
+  effectName: {
+    textAlign: "center"
+  },
+  tileNewDot: {
+    position: "absolute",
+    top: Module712.space.PX_8,
+    right: Module712.space.PX_8,
+    width: Module712.space.PX_8,
+    height: Module712.space.PX_8,
+    borderRadius: Module712.space.PX_8 / 2,
+    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND,
+    shadowColor: Module712.colors.BADGE_BACKGROUND_BRAND,
+    shadowRadius: Module712.space.PX_4,
+    shadowOpacity: 1,
+    elevation: 4
+  },
+  betaCaption: {
+    position: "absolute",
+    bottom: Module712.space.PX_4,
+    left: 0,
+    right: 0,
+    textAlign: "center"
+  }
+});
+export default function DisplayNameStylesEffectPickerSheet(props) {
+  const { userId, selectedEffectId, onSelectEffect } = props;
+  const styles = useStyles();
+  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
+  const visibleEffectOrder = useVisibleEffectOrder();
+  const displayNameStylesNewEffects = useDisplayNameStylesNewEffects(visibleEffectOrder);
+  const { dotEffectIds, dismissEffectDot } = displayNameStylesNewEffects;
+  const [state, setState] = useState(selectedEffectId);
+  const r2 = state !== selectedEffectId;
+  let c21175_6 = r2;
+  const callback = useCallback((a0) => {
+    setState(a0);
+  }, []);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (c21175_6) {
+      onSelectEffect(state);
+    }
+    ActionSheetActionCreators.hideActionSheet();
+  }, [r2, state, onSelectEffect]);
+  return userId != null ? <BottomSheet ref={bottomSheetRef} header={<View style={styles.header}>
+    <BottomSheetTitleHeader title={intl.string(DisplayNameStyles_messages.RVtMxT)} trailing={<View style={styles.headerTrailing}>
+      <Button text={intl.string(t.XqMe3N)} onPress={callback2} variant="primary" size="sm" />
+    </View>} />
+  </View>}>
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Stack direction="horizontal" spacing={8} style={styles.gridContainer}>
+          {visibleEffectOrder.map((item) => {
+            return <EffectTile key={item} userId={userId} effectId={item} selected={item === state} showNewDot={dotEffectIds.has(item)} onClick={() => {
+              callback(item);
+              if (dotEffectIds.has(item)) {
+                dismissEffectDot(item);
+              }
+            }} />;
+          })}
+        </Stack>
+      </View>
+    </View>
+  </BottomSheet> : null;
+};

modules/display_name_styles/native/DisplayNameStylesFlywheelMobileActionSheet.tsx

@@ -0,0 +1,127 @@
+// Metro module 15764 (f15765).
+import { useRef, useContext, useCallback } from "react";
+import { View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import { Fonts, UserSettingsSections } from "../../../Constants";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import { AccessibilityPreferencesContext } from "../../../_bundle/Module3908";
+import * as _shared from "../../../design/shared";
+import useTheme from "../../../hooks/useTheme";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { intl, t } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { openUserSettings } from "../../user_settings/core/native/openUserSettings";
+import { runAfterInteractions } from "../../../utils/native/RunAfterInteractionsUtils";
+import { UNSAFE_markDismissibleContentAsDismissed } from "../../dismissible_content/DismissibleContentUnsafeUtils";
+import { DismissibleContent } from "../../../_bundle/Module1358";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import { ActionSheetHeaderBar } from "../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
+import { DisplayNameStylesV2AbstractUI } from "../../../design/assets/native";
+import { isIOS } from "../../../utils/PlatformUtils";
+import FastImage from "../../../components_native/common/FastImage";
+import Module15765 from "../../../_bundle/Module15765";
+import { APNGPlayer } from "../../image/native/APNGPlayer.android";
+import { BetaTag } from "../../../design/void/native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+const useStyles = createStyles(() => ({
+  content: {
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_16
+  },
+  imageContainer: {
+    width: "100%",
+    height: 162,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: Module712.space.PX_24
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  betaTag: {
+    marginLeft: 0
+  },
+  title: {
+    textAlign: "center",
+    fontFamily: Fonts.GINTO_NORD_EXTRA_BOLD,
+    textTransform: "uppercase",
+    marginTop: Module712.space.PX_12,
+    marginBottom: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_12
+  },
+  subtitle: {
+    textAlign: "center",
+    marginTop: Module712.space.PX_12,
+    marginBottom: Module712.space.PX_32
+  },
+  actions: {
+    gap: Module712.space.PX_12,
+    width: "100%"
+  }
+}));
+export default function DisplayNameStylesFlywheelMobileActionSheet(props) {
+  const markAsDismissed = props.markAsDismissed;
+  const ref = useRef(null);
+  const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
+  const isThemeDark = _shared.isThemeDark(useTheme());
+  const styles = useStyles();
+  const canUsePremiumProfileCustomization = PremiumUtils.canUsePremiumProfileCustomization(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
+  const r17 = canUsePremiumProfileCustomization ? intl.string(DisplayNameStyles_messages.TyUdka) : intl.string(DisplayNameStyles_messages.dluV0R);
+  const callback = useCallback(() => {
+    openUserSettings({
+      screen: canUsePremiumProfileCustomization ? UserSettingsSections.PROFILE_CUSTOMIZATION : UserSettingsSections.PROFILE_CUSTOMIZATION_TRY_IT_OUT
+    }, () => {
+      runAfterInteractions(() => {
+        openUserSettings({
+          screen: UserSettingsSections.DISPLAY_NAME_STYLES
+        }, () => {
+          markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+          UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.DISPLAY_NAME_STYLES_FLYWHEEL_MOBILE_PROFILE_COACHMARK, {
+            dismissAction: ContentDismissActionType.INDIRECT_ACTION
+          });
+        });
+      });
+    });
+  }, [canUsePremiumProfileCustomization, markAsDismissed]);
+  const callback2 = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  const callback3 = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  const r84 = [<ActionSheetHeaderBar onPress={() => {
+    const current = ref.current;
+    if (current != null) {
+      current.closeActionSheet();
+    }
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }} />, <View style={styles.imageContainer}>
+    {enabled && <DisplayNameStylesV2AbstractUI resizeMode="contain" />}
+    {enabled ? !enabled : isIOS() ? <FastImage source={{
+      uri: Module15765
+    }} style={styles.image} resizeMode="contain" enableAnimation={!enabled} /> : <APNGPlayer url={Module15765} style={styles.image} autoplay />}
+  </View>, <BetaTag style={styles.betaTag} />, , , ,];
+  let color = "text-overlay-dark";
+  r84[3] = <Text variant="display-md" style={styles.title} color={isThemeDark ? "text-overlay-light" : "text-overlay-dark"}>
+    {intl.string(DisplayNameStyles_messages.Uzms61)}
+  </Text>;
+  if (isThemeDark) {
+    color = "text-overlay-light";
+  }
+  r84[4] = <Text variant="text-lg/medium" style={styles.subtitle} color={color}>{r17}</Text>;
+  r84[5] = <View style={styles.actions}>
+    <Button text={intl.string(t["4P5I8V"])} variant="primary" size="lg" onPress={callback} />
+    <Button text={intl.string(t.TulDPl)} variant="secondary" size="lg" onPress={callback2} />
+  </View>;
+  return <BottomSheet ref={ref} onDismiss={callback3} startExpanded handleDisabled>
+    <SafeAreaPaddingView bottom>
+      <View style={styles.content}>{r84}</View>
+    </SafeAreaPaddingView>
+  </BottomSheet>;
+};

modules/display_name_styles/native/DisplayNameStylesFlywheelProfileCoachmark.tsx

@@ -0,0 +1,53 @@
+// Metro module 15632 (f15633).
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { intl } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { useCoachmark } from "../../../design/components/Coachmark/native/useCoachmark.native";
+import { DisplayNameLockeAbstractUI } from "../../../design/assets/native";
+import { BetaTag } from "../../../design/void/native";
+let useStyles;
+const CoachmarkImage = function CoachmarkImage() {
+  const styles = useStyles();
+  return <View style={styles.coachmarkImageContainer}>
+    <DisplayNameLockeAbstractUI width={160} height={68} resizeMode="contain" />
+    <BetaTag style={styles.betaTag} />
+  </View>;
+};
+useStyles = createStyles({
+  coachmarkImageContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: Module712.space.PX_12
+  },
+  betaTag: {
+    marginLeft: 0
+  }
+});
+export default function DisplayNameStylesFlywheelProfileCoachmark({ targetRef, visible, markAsDismissed }) {
+  let title, description, callback;
+  title = void 0;
+  description = void 0;
+  callback = void 0;
+  const canUsePremiumProfileCustomization = PremiumUtils.canUsePremiumProfileCustomization(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
+  title = canUsePremiumProfileCustomization ? intl.string(DisplayNameStyles_messages.h6sykk) : intl.string(DisplayNameStyles_messages.M5amXH);
+  description = canUsePremiumProfileCustomization ? intl.string(DisplayNameStyles_messages.TyUdka) : intl.string(DisplayNameStyles_messages.dluV0R);
+  callback = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  useCoachmark(targetRef, useMemo(() => ({
+    title,
+    description,
+    visible,
+    position: "bottom",
+    onDismiss: callback,
+    renderImgComponent: () => <CoachmarkImage />
+  }), [title, description, visible, callback]));
+  return null;
+};

modules/display_name_styles/native/DisplayNameStylesFontPickerSheet.tsx

@@ -0,0 +1,182 @@
+// Metro module 14358 (f14359).
+import { useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { FLYWHEEL_FONTS } from "../DisplayNameStylesConstants";
+import { Fonts } from "../../../_bundle/Module505";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
+import { useVisibleFontOrder } from "../DisplayNameStylesFontOrder";
+import { useDisplayNameStylesNewFonts } from "../hooks/useDisplayNameStylesNewItems";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+import * as _DisplayNameStylesUtils from "../DisplayNameStylesUtils";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { Stack } from "../../../design/components/Stack/native/Stack.native";
+import getDisplayNameStylesFontName from "../getDisplayNameStylesFontName";
+import { DISPLAY_NAME_STYLES_FONT_FAMILY_MAP } from "./useDisplayNameStylesFont";
+import { Text } from "../../../design/components/Text/native/Text";
+import { CircleInformationIcon } from "../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
+const useStyles = createStyles({
+  header: {
+    paddingTop: 4
+  },
+  headerTrailing: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: Module712.space.PX_8,
+    alignItems: "center"
+  },
+  gridContainer: {
+    flexWrap: "wrap",
+    maxWidth: 350
+  },
+  fontCard: {
+    width: 79,
+    height: 79,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  fontCardSelected: {
+    borderColor: Module712.colors.CONTROL_BRAND_FOREGROUND
+  },
+  fontText: {
+    fontSize: 24,
+    lineHeight: 34,
+    textAlign: "center",
+    textAlignVertical: "center"
+  },
+  tileNewDot: {
+    position: "absolute",
+    top: Module712.space.PX_8,
+    right: Module712.space.PX_8,
+    width: Module712.space.PX_8,
+    height: Module712.space.PX_8,
+    borderRadius: Module712.space.PX_8 / 2,
+    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND,
+    shadowColor: Module712.colors.BADGE_BACKGROUND_BRAND,
+    shadowRadius: Module712.space.PX_4,
+    shadowOpacity: 1,
+    elevation: 4
+  },
+  betaCaption: {
+    position: "absolute",
+    bottom: Module712.space.PX_4,
+    left: 0,
+    right: 0,
+    textAlign: "center"
+  },
+  nonLatinDisclaimer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8,
+    paddingHorizontal: Module712.space.PX_12,
+    paddingVertical: Module712.space.PX_8,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    borderRadius: Module712.radii.sm,
+    marginTop: Module712.space.PX_16
+  },
+  disclaimerText: {
+    flex: 1
+  }
+});
+export default function DisplayNameStylesFontPickerSheet(props) {
+  const { selectedFontId, onSelectFont, displayName } = props;
+  const styles = useStyles();
+  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
+  const visibleFontOrder = useVisibleFontOrder();
+  const displayNameStylesNewFonts = useDisplayNameStylesNewFonts(visibleFontOrder);
+  const { dotFontIds, dismissFontDot } = displayNameStylesNewFonts;
+  const [state, setState] = useState(selectedFontId);
+  let r11 = state !== DisplayNameFont.DEFAULT;
+  const hasNonLatinLetters = _DisplayNameStylesUtils.hasNonLatinLetters(displayName);
+  const r2 = state !== selectedFontId;
+  let c21174_6 = r2;
+  const callback = useCallback((a0) => {
+    setState(a0);
+  }, []);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (c21174_6) {
+      onSelectFont(state);
+    }
+    ActionSheetActionCreators.hideActionSheet();
+  }, [r2, state, onSelectFont]);
+  const props2 = {
+    ref: bottomSheetRef,
+    header: <View style={styles.header}>
+      <BottomSheetTitleHeader title={intl.string(DisplayNameStyles_messages["0JCuGm"])} trailing={<View style={styles.headerTrailing}>
+        <Button text={intl.string(t.XqMe3N)} onPress={callback2} variant="primary" size="sm" />
+      </View>} />
+    </View>,
+    children: null
+  };
+  const r106 = [<Stack direction="horizontal" align="center" justify="center" spacing={8} style={styles.gridContainer}>
+    {visibleFontOrder.map((item) => {
+      const r19 = intl.string(getDisplayNameStylesFontName(item));
+      let fontFamily = DISPLAY_NAME_STYLES_FONT_FAMILY_MAP[item];
+      if (fontFamily == null) {
+        fontFamily = Fonts.PRIMARY_SEMIBOLD;
+      }
+      let r11 = dotFontIds.has(item);
+      let c27729_1 = r11;
+      let r32 = FLYWHEEL_FONTS.includes(item);
+      const accessibilityLabel = r32 ? `${r19}, ${intl.string(t.oW0eUd)}` : r19;
+      const selected = item === state;
+      const style = [styles.fontCard, selected && styles.fontCardSelected];
+      const r66 = [<Text variant="text-lg/semibold" color={selected ? "mobile-text-heading-primary" : "text-default"} style={[styles.fontText, {
+        fontFamily
+      }]}>Gg</Text>, , ,];
+      if (r11) {
+        r11 = <View style={styles.tileNewDot} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
+      }
+      r66[1] = r11;
+      if (r32) {
+        r32 = <Text variant="text-xs/normal" color="text-subtle" style={styles.betaCaption}>
+          {intl.string(t.oW0eUd)}
+        </Text>;
+      }
+      r66[2] = r32;
+      return <Pressable key={item} onPress={() => {
+        callback(item);
+        if (c27729_1) {
+          dismissFontDot(item);
+        }
+      }} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={{
+        selected
+      }}>
+        <View style={style}>{r66}</View>
+      </Pressable>;
+    })}
+  </Stack>, ,];
+  if (r11) {
+    r11 = hasNonLatinLetters;
+  }
+  if (r11) {
+    r11 = <View style={styles.nonLatinDisclaimer}>
+      <CircleInformationIcon size="sm" />
+      <Text variant="text-xs/normal" color="text-subtle" style={styles.disclaimerText}>
+        {intl.string(DisplayNameStyles_messages["+O1xL2"])}
+      </Text>
+    </View>;
+  }
+  r106[1] = r11;
+  props2.children = <View style={styles.container}>
+    <View style={styles.contentContainer}>{r106}</View>
+  </View>;
+  return <BottomSheet {...props2} />;
+};

modules/display_name_styles/native/DisplayNameStylesGradientPickerSheet.tsx

@@ -0,0 +1,170 @@
+// Metro module 14364 (f14365).
+import { useMemo, useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { getColorPresetsForEffect } from "../DisplayNameStylesConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import { getEffectColorCount } from "../DisplayNameStylesUtils";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import showCustomColorPickerActionSheet from "../../color_picker/native/showCustomColorPickerActionSheet";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../intl/index.native";
+import Module4611 from "../../../_bundle/Module4611";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+import { EyeDropperIcon } from "../../../design/components/Icon/native/redesign/generated/EyeDropperIcon";
+import Module12 from "../../../_bundle/Module12";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+const useStyles = createStyles({
+  body: {
+    paddingVertical: Module712.space.PX_12,
+    paddingHorizontal: Module712.space.PX_12,
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: Module712.space.PX_16
+  },
+  gradientContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_8
+  },
+  dropperContainer: {
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    position: "absolute",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  dropper: {
+    borderColor: "white",
+    padding: Module712.space.PX_8,
+    borderRadius: Module712.radii.round,
+    borderWidth: 1
+  },
+  gradient: {
+    height: 50,
+    width: "100%",
+    borderRadius: Module712.radii.sm
+  },
+  optionContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    paddingHorizontal: Module712.space.PX_4
+  },
+  swatchWrapper: {
+    width: "25%",
+    padding: 2
+  },
+  pressable: {
+    height: 40,
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden",
+    borderWidth: 2,
+    borderColor: "transparent"
+  },
+  selected: {
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  },
+  option: {
+    flex: 1
+  }
+});
+export default function DisplayNameStylesColorPickerSheet(props) {
+  let state, setState, callback, callback2;
+  const { selectedColors, selectedEffectId, onSelectColors } = props;
+  state = void 0;
+  setState = void 0;
+  callback = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(selectedEffectId);
+  const effectColorCount = getEffectColorCount(selectedEffectId);
+  const memo = useMemo(() => getColorPresetsForEffect(selectedEffectId), [selectedEffectId]);
+  [state, setState] = useState(selectedColors);
+  const callback3 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    onSelectColors(state);
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_COLOR_SELECTED, {
+      default: false,
+      colors: state
+    });
+    ActionSheetActionCreators.hideActionSheet();
+  }, [state, onSelectColors]);
+  const callback4 = useCallback(() => {
+    let r8 = memo[0];
+    if (r8 == null) {
+      r8 = displayNameStylesEffectConfig.defaultColors;
+    }
+    setState([...r8]);
+  }, [memo, displayNameStylesEffectConfig.defaultColors]);
+  callback = useCallback((a0) => {
+    let color = state[a0];
+    if (color == null) {
+      color = 0;
+    }
+    showCustomColorPickerActionSheet({
+      color,
+      onSelect: (c30739_0) => {
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+        setState((prevState) => prevState.map((item, index) => index === a0 ? c30739_0 : item));
+      },
+      actionButtonVariant: "primary"
+    }, "stack");
+  }, [state]);
+  callback2 = useCallback((a0) => {
+    setState([...a0]);
+  }, []);
+  return <BottomSheet header={<BottomSheetTitleHeader title={displayNameStylesEffectConfig.name} trailing={<Button variant="primary" size="sm" text={intl.string(t.XqMe3N)} onPress={callback3} />} />}>
+    <View style={styles.body}>
+      <View style={styles.gradientContainer}>
+        <Module4611 style={styles.gradient} colors={state.map((item) => int2hex(item))} start={{
+          x: 0,
+          y: 0
+        }} end={{
+          x: 1,
+          y: 0
+        }} />
+        <View style={styles.dropperContainer}>
+          {Array.from({
+            length: effectColorCount
+          }).map((item, index) => {
+            return <Pressable key={index} style={styles.dropper} onPress={() => callback(index)} accessibilityLabel={intl.formatToPlainString(t.n5Ve0L, {
+              number: index + 1
+            })} accessibilityRole="button">
+              <EyeDropperIcon color="white" size="sm" />
+            </Pressable>;
+          })}
+        </View>
+      </View>
+      <View style={styles.optionContainer}>
+        {memo.map((a0, index) => {
+          let r14 = Module12.isEqual(a0, state);
+          const style = [styles.pressable, ,];
+          if (r14) {
+            r14 = styles.selected;
+          }
+          style[1] = r14;
+          return <View key={index} style={styles.swatchWrapper}>
+            <PressableOpacity style={style} onPress={() => callback2(a0)}>
+              <Module4611 style={styles.option} colors={a0.map((item) => int2hex(item))} start={{
+                x: 0,
+                y: 0
+              }} end={{
+                x: 1,
+                y: 0
+              }} />
+            </PressableOpacity>
+          </View>;
+        })}
+      </View>
+      <Button text={intl.string(t.yBZMsQ)} onPress={callback4} variant="secondary" />
+    </View>
+  </BottomSheet>;
+};

modules/display_name_styles/native/DisplayNameStylesGummyColorPickerSheet.tsx

@@ -0,0 +1,158 @@
+// Metro module 14360 (f14361).
+import { useState, useCallback } from "react";
+import { Pressable, View, StyleSheet } from "react-native";
+import { DISPLAY_NAME_STYLES_GUMMY_PRESETS } from "../DisplayNameStylesConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { hueToGummyColor, rebuildGummySourceColor, buildGummyColors } from "../DisplayNameStylesUtils";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { areArraysShallowEqual } from "../../../_bundle/shallowEqual";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import showGummyCustomColorSheet from "./showGummyCustomColorSheet";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../intl/index.native";
+import GummyStripes from "./effects/GummyStripes";
+import { PencilIcon } from "../../../design/components/Icon/native/redesign/generated/PencilIcon";
+let c10102_11 = hueToGummyColor(0);
+const useStyles = createStyles({
+  body: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_12,
+    paddingBottom: Module712.space.PX_16,
+    gap: Module712.space.PX_16,
+    alignItems: "center"
+  },
+  colorRowInset: {
+    paddingHorizontal: Module712.space.PX_4,
+    alignSelf: "stretch"
+  },
+  optionContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  swatchWrapper: {
+    width: "25%",
+    padding: 2
+  },
+  swatch: {
+    height: 40,
+    flexDirection: "row",
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden",
+    borderWidth: 2,
+    borderColor: "transparent"
+  },
+  swatchSelected: {
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  },
+  customSwatchEmpty: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_NORMAL
+  },
+  customIconOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  customIconScrim: {
+    width: 28,
+    height: 28,
+    borderRadius: Module712.radii.round,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export default function DisplayNameStylesGummyColorPickerSheet(props) {
+  let state, setState, state2, setState2, c21176_8, callback;
+  const { selectedColors, onSelectColors } = props;
+  state = void 0;
+  setState = void 0;
+  state2 = void 0;
+  setState2 = void 0;
+  c21176_8 = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  const displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(DisplayNameEffect.GUMMY);
+  let c21176_3 = selectedColors.length > 0 && !DISPLAY_NAME_STYLES_GUMMY_PRESETS.some((item) => areArraysShallowEqual(item, selectedColors));
+  [state, setState] = useState(() => c21176_3 ? rebuildGummySourceColor(selectedColors) : c10102_11);
+  [state2, setState2] = useState(() => {
+    let r6 = selectedColors;
+    if (!(selectedColors.length > 0)) {
+      r6 = buildGummyColors(c10102_11);
+    }
+    return r6;
+  });
+  const r51 = DISPLAY_NAME_STYLES_GUMMY_PRESETS.findIndex((item) => areArraysShallowEqual(item, state2));
+  c21176_8 = r51;
+  const r52 = r51 >= 0;
+  const callback4 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+    showGummyCustomColorSheet({
+      initialColor: state,
+      onSelect: (a0) => {
+        setState(a0);
+        setState2(buildGummyColors(a0));
+      }
+    });
+  }, [state]);
+  callback = useCallback((a0) => {
+    setState2([...a0]);
+  }, []);
+  const callback3 = useCallback(() => {
+    setState2([...DISPLAY_NAME_STYLES_GUMMY_PRESETS[0]]);
+    setState(c10102_11);
+  }, []);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    onSelectColors(state2);
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_COLOR_SELECTED, {
+      default: false,
+      colors: state2
+    });
+    ActionSheetActionCreators.hideActionSheet();
+  }, [state2, onSelectColors]);
+  const props2 = {
+    header: <BottomSheetTitleHeader title={displayNameStylesEffectConfig.name} trailing={<Button variant="primary" size="sm" text={intl.string(t.XqMe3N)} onPress={callback2} />} />,
+    children: null
+  };
+  const style = [styles.swatch, ,];
+  const selected = !r52;
+  style[1] = r52 ? selected : styles.swatchSelected;
+  props2.children = <View style={styles.body}>
+    <View style={[styles.colorRowInset, styles.optionContainer]}>
+      <View style={styles.swatchWrapper}>
+        <Pressable style={style} onPress={callback4} accessibilityRole="button" accessibilityState={{
+          selected
+        }} accessibilityLabel={intl.string(t["FHBa/1"])}>
+          {r52 ? <View style={styles.customSwatchEmpty} /> : <GummyStripes colors={state2} />}
+          <View style={styles.customIconOverlay} pointerEvents="none">
+            <View style={styles.customIconScrim}>
+              <PencilIcon color="white" size="sm" />
+            </View>
+          </View>
+        </Pressable>
+      </View>
+      {DISPLAY_NAME_STYLES_GUMMY_PRESETS.map((item, index) => {
+        const selected = c21176_8 === index;
+        return <View key={index} style={styles.swatchWrapper}>
+          <Pressable style={[styles.swatch, selected && styles.swatchSelected]} onPress={() => callback(item)} accessibilityRole="button" accessibilityState={{
+            selected
+          }}>
+            <GummyStripes colors={item} />
+          </Pressable>
+        </View>;
+      })}
+    </View>
+    <Button text={intl.string(t.yBZMsQ)} onPress={callback3} variant="secondary" />
+  </View>;
+  return <BottomSheet {...props2} />;
+};

modules/display_name_styles/native/DisplayNameStylesGummyCustomColorSheet.tsx

@@ -0,0 +1,65 @@
+// Metro module 14362 (f14363).
+import { useCallback } from "react";
+import { View } from "react-native";
+import { DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS, DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION } from "../DisplayNameStylesConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useSharedValue } from "../../reanimated/ReanimatedRexport";
+import { wrapHue, hueToGummyColor } from "../DisplayNameStylesUtils";
+import { int2hslRaw } from "../../../_bundle/int2hslRaw";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../intl/index.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import GummyStripesFromHue from "./effects/GummyStripesFromHue";
+import HuePicker from "../../color_picker/native/HuePicker";
+const useStyles = createStyles({
+  body: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_12,
+    paddingBottom: Module712.space.PX_16,
+    gap: Module712.space.PX_16,
+    alignItems: "center"
+  },
+  huePickerInset: {
+    paddingHorizontal: Module712.space.PX_4 + 2,
+    alignSelf: "stretch"
+  },
+  previewWrapper: {
+    width: "25%",
+    padding: 2
+  },
+  preview: {
+    height: 40,
+    flexDirection: "row",
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden"
+  }
+});
+export default function DisplayNameStylesGummyCustomColorSheet(props) {
+  const { initialColor, onSelect } = props;
+  const styles = useStyles();
+  const sharedValue = useSharedValue(wrapHue(int2hslRaw(initialColor).h));
+  const callback = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+  }, []);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    onSelect(hueToGummyColor(sharedValue.get()));
+    ActionSheetActionCreators.hideActionSheet();
+  }, [sharedValue, onSelect]);
+  return <BottomSheet header={<BottomSheetTitleHeader title={intl.string(t.WTqQ5e)} trailing={<Button variant="primary" size="sm" text={intl.string(t.XqMe3N)} onPress={callback2} />} />}>
+    <View style={styles.body}>
+      <View style={styles.previewWrapper}>
+        <View style={styles.preview}>
+          <GummyStripesFromHue hue={sharedValue} />
+        </View>
+      </View>
+      <View style={styles.huePickerInset}>
+        <HuePicker hue={sharedValue} onPanFinalize={callback} saturation={DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION} lightness={DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS} fullWidth />
+      </View>
+    </View>
+  </BottomSheet>;
+};

modules/display_name_styles/native/UsernameWithEffects.tsx

@@ -0,0 +1,261 @@
+// Metro module 8380 (f8381).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { PixelRatio, StyleSheet, View, processColor } from "react-native";
+import { MIN_PRISM_GRADIENT_WIDTH } from "../DisplayNameStylesConstants";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { isIOS } from "../../../_bundle/Module501";
+import { isIosFabric } from "../../../utils/native/FabricUtils";
+import { EffectDisplayType } from "../types";
+import useDisplayNameStyles from "../hooks/useDisplayNameStyles";
+import { useIsDisplayNameStylesFlywheelViewersEnabled } from "../DisplayNameStylesFlywheelExperiment";
+import { applyFlywheelViewingFallback, generateColorVariants } from "../DisplayNameStylesUtils";
+import { useDisplayNameStylesEnabled } from "../hooks/useDisplayNameStylesEnabled";
+import { useDisplayNameStylesFont } from "./useDisplayNameStylesFont";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { useDisplayNameStylesAccessibleColors } from "../hooks/useDisplayNameStylesAccessibleColors";
+import { TextStyleSheet, Text } from "../../../design/components/Text/native/Text";
+import { useTypographyVariantRemap } from "../../../_bundle/Module4194";
+import { getNodeText } from "../../../design/utils/shared/getNodeText";
+import PerLetterEffect from "./effects/PerLetterEffect";
+import { isNotNullish } from "../../../utils/GlobalUtils";
+import { HermesBuiltin } from "../../../_hermes/prelude";
+const r29 = {};
+r29[DisplayNameEffect.NEON] = 1;
+r29[DisplayNameEffect.TOON] = 1.6;
+r29[DisplayNameEffect.POP] = 1.2;
+let c5373_11 = r29;
+const useStyles = createStyles((a0, a1) => {
+  let r59;
+  const r19 = PixelRatio.get();
+  const r4 = 0.04 * a1;
+  const textShadowRadius = 4 + 0.12 * a1;
+  const r16 = c5373_11[DisplayNameEffect.NEON] + 0.04 * a1;
+  const r9 = c5373_11[DisplayNameEffect.TOON] + 0.04 * a1;
+  const r40 = c5373_11[DisplayNameEffect.POP] + 0.04 * a1;
+  const r47 = Math.floor(r9 / 2) / r19;
+  const neon = {
+    color: Module712.colors.WHITE,
+    textShadowColor: a0,
+    textShadowRadius,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    }
+  };
+  if (isIOS()) {
+    const top = -r16 / 2;
+    const marginVertical = -textShadowRadius;
+    r59 = {
+      top,
+      left: top,
+      padding: textShadowRadius,
+      marginVertical,
+      marginLeft: marginVertical,
+      marginRight: marginVertical - r16
+    };
+  } else {
+    r59 = {
+      left: -r16,
+      paddingRight: textShadowRadius,
+      marginRight: -textShadowRadius - r16
+    };
+  }
+  HermesBuiltin.copyDataProperties(neon, r59);
+  return {
+    neon,
+    popContainer: {
+      position: "relative",
+      top: isIOS() ? -r40 / 2 : 0,
+      left: isIOS() ? -r40 / 2 : 0,
+      marginRight: isIOS() ? -r40 : 0
+    },
+    popBackLayer: {
+      color: a0,
+      position: "absolute",
+      ...isIosFabric() ? {
+        top: 1.2 + r4
+      } : {
+        transform: [{
+          translateY: 1.2 + r4
+        }]
+      }
+    },
+    popFrontLayer: {
+      color: Module712.colors.WHITE
+    },
+    toon: {
+      color: Module712.colors.WHITE,
+      top: isIOS() ? -r9 / 2 : 0,
+      left: isIOS() ? -r9 / 2 : -r47,
+      marginRight: isIOS() ? -r9 : -r47
+    }
+  };
+});
+const r51 = Module19.memo(function({ userId, guildId, userName, effectDisplayType = EffectDisplayType.STATIC, pendingDisplayNameStyles, defaultColor, ignoreDisabledStylesSetting = false, ...props }) {
+  let r164, gradientAngle, gradientColors, gradientLength, textStrokeColor, textStrokeWidth2;
+  const styles = useDisplayNameStyles({
+    userId,
+    guildId,
+    pendingDisplayNameStyles,
+    ignoreDisabledStylesSetting
+  });
+  const displayNameStyles = applyFlywheelViewingFallback(styles, useIsDisplayNameStylesFlywheelViewersEnabled("UsernameWithEffects"));
+  const displayNameStylesEnabled = useDisplayNameStylesEnabled({
+    location: "UsernameWithEffects"
+  });
+  const displayNameStylesFont = useDisplayNameStylesFont({
+    displayNameStyles,
+    ignoreDisabledStylesSetting
+  });
+  const token = useToken(Module712.colors.BACKGROUND_BASE_LOW);
+  const token2 = useToken(Module712.colors.WHITE);
+  const displayNameStylesAccessibleColors = useDisplayNameStylesAccessibleColors({
+    displayNameStyles,
+    backgroundColor: token
+  });
+  const color = displayNameStylesAccessibleColors.length > 0 ? displayNameStylesAccessibleColors[0] : void 0;
+  let r85 = displayNameStyles?.effectId;
+  if (r85 == null) {
+    r85 = DisplayNameEffect.SOLID;
+  }
+  const r27 = color != null ? generateColorVariants(color) : null;
+  const r100 = TextStyleSheet[useTypographyVariantRemap(props.variant, false)];
+  const r104 = StyleSheet.flatten(props.style);
+  let r106 = r104?.fontSize;
+  if (r106 == null) {
+    r106 = r100?.fontSize;
+  }
+  if (r106 == null) {
+    r106 = 16;
+  }
+  let c16548_1 = r106;
+  let r29 = r104?.lineHeight;
+  if (r29 == null) {
+    r29 = r100?.lineHeight;
+  }
+  if (r29 == null) {
+    r29 = 1.25 * r106;
+  }
+  const memo = useMemo(() => {
+    let r13 = getNodeText(userName)?.length;
+    if (r13 == null) {
+      r13 = 10;
+    }
+    return r13 * c16548_1 * 0.6;
+  }, [userName, r106]);
+  const r118 = c5373_11[r85];
+  const textStrokeWidth = r118 != null ? r118 + 0.04 * r106 : void 0;
+  let r125 = r27?.main;
+  if (r125 == null) {
+    r125 = "";
+  }
+  const styles2 = useStyles(r125, r106);
+  if (!(!displayNameStylesEnabled && !ignoreDisabledStylesSetting) && styles != null) {
+    if (effectDisplayType !== EffectDisplayType.PLAIN && r27 != null) {
+      const textStyle = [props.style, displayNameStylesFont != null && {
+        fontFamily: displayNameStylesFont
+      }];
+      if (r85 === DisplayNameEffect.GUMMY) {
+        let name = getNodeText(userName);
+        if (name == null) {
+          name = "";
+        }
+        return <PerLetterEffect name={name} textStyle={textStyle} textProps={{
+          ...props,
+          gradientColors: void 0,
+          gradientLength: memo,
+          gradientMode: "clamp",
+          gradientAngle: void 0,
+          textStrokeWidth: void 0,
+          textStrokeColor: void 0
+        }} colors={displayNameStylesAccessibleColors} />;
+      }
+      L72: {
+        if (DisplayNameEffect.GRADIENT !== r85 && DisplayNameEffect.PRISM !== r85) {
+          if (DisplayNameEffect.NEON === r85) {
+            const r220 = processColor(r27?.neonStroke);
+            const r222 = r220 ?? void 0;
+            const r224 = [textStyle, styles2.neon];
+            textStrokeColor = r222;
+            gradientLength = memo;
+            r164 = r224;
+            textStrokeWidth2 = textStrokeWidth;
+            gradientAngle = void 0;
+            gradientColors = void 0;
+            break L72;
+          }
+          if (DisplayNameEffect.POP === r85) {
+            const r34 = processColor(r27?.dark2);
+            const r33 = processColor(r27?.main);
+            const r187 = r27 != null;
+            gradientLength = memo;
+            r164 = textStyle;
+            textStrokeColor = void 0;
+            textStrokeWidth2 = void 0;
+            gradientAngle = void 0;
+            gradientColors = void 0;
+            if (!r187) {
+              break L72;
+            }
+            return <View style={styles2.popContainer}>
+              <Text {...props} textStrokeWidth={textStrokeWidth} textStrokeColor={r33 ?? void 0} style={[textStyle, styles2.popBackLayer]}>{userName}</Text>
+              <Text {...props} textStrokeWidth={textStrokeWidth} textStrokeColor={r34 ?? void 0} style={[textStyle, styles2.popFrontLayer]}>{userName}</Text>
+            </View>;
+          }
+          if (DisplayNameEffect.TOON === r85) {
+            const r28 = [textStyle, styles2.toon];
+            const r172 = [processColor(token2), processColor(r27.light2), processColor(r27.light1), processColor(r27.main)];
+            const r180 = processColor(r27.toonStroke);
+            const r181 = r180 ?? void 0;
+            gradientAngle = 90;
+            textStrokeColor = r181;
+            gradientLength = r29;
+            r164 = r28;
+            textStrokeWidth2 = textStrokeWidth;
+            gradientColors = r172;
+            break L72;
+          }
+          DisplayNameEffect.SOLID;
+          r164 = [textStyle, {
+            color
+          }];
+          gradientLength = memo;
+          textStrokeColor = void 0;
+          textStrokeWidth2 = void 0;
+          gradientAngle = void 0;
+          gradientColors = void 0;
+        } else {
+          const r232 = displayNameStylesAccessibleColors.map((displayNameStylesAccessibleColor) => processColor(displayNameStylesAccessibleColor)).filter(isNotNullish);
+          const r237 = r85 === DisplayNameEffect.PRISM ? 0 : 45;
+          const PRISM = DisplayNameEffect.PRISM;
+          gradientLength = memo;
+          r164 = textStyle;
+          textStrokeColor = void 0;
+          textStrokeWidth2 = void 0;
+          gradientAngle = r237;
+          gradientColors = r232;
+          if (r85 === PRISM) {
+            const r243 = r232.length > 0 ? [...r232, r232[0]] : r232;
+            gradientLength = Math.max(memo, MIN_PRISM_GRADIENT_WIDTH);
+            gradientColors = r243;
+            r164 = textStyle;
+            textStrokeColor = void 0;
+            textStrokeWidth2 = void 0;
+            gradientAngle = r237;
+          }
+        }
+      }
+      return <Text {...props} gradientColors={gradientColors} gradientLength={gradientLength} gradientMode="clamp" style={[r164]} gradientAngle={gradientAngle} textStrokeWidth={textStrokeWidth2} textStrokeColor={textStrokeColor}>{userName}</Text>;
+    }
+    return <Text {...props} gradientLength={memo} gradientMode="clamp" style={[props.style, displayNameStylesFont != null && {
+      fontFamily: displayNameStylesFont,
+      lineHeight: void 0
+    }]} color={defaultColor}>{userName}</Text>;
+  }
+  return <Text {...props} color={defaultColor}>{userName}</Text>;
+});
+export default r51;
+export const AVERAGE_FONT_WIDTH_RATIO = 0.6;

modules/display_name_styles/native/createDisplayNameStylesMobile.tsx

@@ -0,0 +1,19 @@
+// Metro module 12392 (f12393).
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import UserStore from "../../../stores/UserStore";
+export function createDisplayNameStylesMobile(a0, a1) {
+  const currentUser = UserStore.getCurrentUser();
+  let displayNameStyles = a0.displayNameStyles;
+  if (currentUser != null && currentUser.id === a0.id) {
+    displayNameStyles = currentUser.displayNameStyles;
+  }
+  let fontId = a1 == null ? void 0 : a1.displayNameStyles?.fontId;
+  if (fontId == null) {
+    fontId = displayNameStyles?.fontId;
+  }
+  if (fontId != null && AccessibilityStore.displayNameStylesEnabled) {
+    return {
+      fontId
+    };
+  }
+}

modules/display_name_styles/native/effects/GummyStripes.tsx

@@ -0,0 +1,21 @@
+// Metro module 13716 (f13717).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { int2hex } from "../../../../_bundle/int2hslRaw";
+const useStyles = createStyles({
+  stripe: {
+    flex: 1
+  },
+  stripeOverlap: {
+    marginLeft: -1
+  }
+});
+export default function GummyStripes(props) {
+  const colors = props.colors;
+  const styles = useStyles();
+  return <>
+    {colors.map((color, index) => <View key={index} style={[styles.stripe, index > 0 && styles.stripeOverlap, {
+      backgroundColor: int2hex(color)
+    }]} />)}
+  </>;
+};

modules/display_name_styles/native/effects/GummyStripesFromHue.tsx

@@ -0,0 +1,56 @@
+// Metro module 14363 (f14364).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { GUMMY_STRIPES } from "../../DisplayNameStylesUtils";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import * as _ColorPickerUtils from "../../../color_picker/native/ColorPickerUtils";
+let useStyles, __initData;
+const AnimatedStripe = function AnimatedStripe(props) {
+  const { hue, shift, saturation, lightness } = props;
+  let overlap = props.overlap;
+  const styles = useStyles();
+  const c = function c() {
+    const r32 = _slicedToArray(_ColorPickerUtils.hslToRgbWorklet({
+      h: ((hue.get() + shift) % 360 + 360) % 360,
+      s: saturation,
+      l: lightness
+    }), 3);
+    return {
+      backgroundColor: `rgb(${r32[0]}, ${r32[1]}, ${r32[2]})`
+    };
+  };
+  c.__closure = {
+    hue,
+    shift,
+    hslToRgbWorklet: _ColorPickerUtils.hslToRgbWorklet,
+    saturation,
+    lightness
+  };
+  c.__workletHash = 8497009401863;
+  c.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(c);
+  const style = [styles.stripe, , ,];
+  if (overlap) {
+    overlap = styles.stripeOverlap;
+  }
+  style[1] = overlap;
+  style[2] = animatedStyle;
+  return <ReanimatedRexport.View style={style} />;
+};
+useStyles = createStyles({
+  stripe: {
+    flex: 1
+  },
+  stripeOverlap: {
+    marginLeft: -1
+  }
+});
+__initData = {
+  code: "function GummyStripesFromHueTsx1(){const{hue,shift,hslToRgbWorklet,saturation,lightness}=this.__closure;const h=((hue.get()+shift)%360+360)%360;const[r,g,b]=hslToRgbWorklet({h:h,s:saturation,l:lightness});return{backgroundColor:\"rgb(\"+r+\", \"+g+\", \"+b+\")\"};}"
+};
+export default function GummyStripesFromHue(props) {
+  const hue2 = props.hue;
+  return <>
+    {GUMMY_STRIPES.map((item, index) => <AnimatedStripe key={index} hue={hue2} shift={item.hueShift} saturation={item.saturation} lightness={item.lightness} overlap={index > 0} />)}
+  </>;
+};

modules/display_name_styles/native/effects/PerLetterEffect.tsx

@@ -0,0 +1,42 @@
+// Metro module 8387 (f8388).
+import { useMemo } from "react";
+import { Text, View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module8388 from "../../../../_bundle/Module8388";
+import { splitGraphemes } from "../../../../utils/native/StringUtils";
+import * as _Text from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    overflow: "hidden"
+  }
+});
+export default function PerLetterEffect(props) {
+  const { name, textStyle, textProps, colors } = props;
+  const styles = useStyles();
+  const memo = useMemo(() => {
+    let c26198_0 = Module8388();
+    let c26198_1 = 0;
+    return splitGraphemes(name).map((item, index) => {
+      c26198_0.lastIndex = 0;
+      const r10 = c26198_0.test(item) || item.trim().length === 0;
+      const color = colors != null ? colors.length > 0 ? r10 ? void 0 : colors[c26198_1 % colors.length] : void 0 : void 0;
+      if (!r10) {
+        c26198_1 = c26198_1 + 1;
+      }
+      return <Text key={index} style={color != null ? {
+        color
+      } : void 0}>
+        {item}
+      </Text>;
+    });
+  }, [name, colors]);
+  let accessibilityLabel = textProps.accessibilityLabel;
+  if (accessibilityLabel == null) {
+    accessibilityLabel = name;
+  }
+  return <View style={styles.container}>
+    <_Text.Text {...textProps} textBreakStrategy="simple" accessible accessibilityLabel={accessibilityLabel} style={[textStyle, {
+      lineHeight: void 0
+    }]}>{memo}</_Text.Text>
+  </View>;
+};

modules/display_name_styles/native/showGummyCustomColorSheet.tsx

@@ -0,0 +1,7 @@
+// Metro module 14361 (f14362).
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+let c10103_3 = "DisplayNameStylesGummyCustomColorSheet";
+export default function showGummyCustomColorSheet(a0) {
+  ActionSheetActionCreators.openLazy(import("./DisplayNameStylesGummyCustomColorSheet"), c10103_3, a0, "stack");
+};
+export const DISPLAY_NAME_STYLES_GUMMY_CUSTOM_COLOR_SHEET_KEY = "DisplayNameStylesGummyCustomColorSheet";

modules/display_name_styles/native/useDisplayNameStylesFont.tsx

@@ -0,0 +1,33 @@
+// Metro module 8383 (f8384).
+import { FLYWHEEL_FONTS } from "../DisplayNameStylesConstants";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+import { useDisplayNameStylesEnabled } from "../hooks/useDisplayNameStylesEnabled";
+import { useIsDisplayNameStylesFlywheelViewersEnabled } from "../DisplayNameStylesFlywheelExperiment";
+const r14 = {};
+r14[DisplayNameFont.CHERRY_BOMB] = "Sakura-Normal";
+r14[DisplayNameFont.CHICLE] = "Jellybean-Normal";
+r14[DisplayNameFont.MUSEO_MODERNO] = "Modern-Medium";
+r14[DisplayNameFont.NEO_CASTEL] = "Medieval-Normal";
+r14[DisplayNameFont.PIXELIFY] = "8Bit-Normal";
+r14[DisplayNameFont.SINISTRE] = "Vampyre-Normal";
+r14[DisplayNameFont.ZILLA_SLAB] = "Tempo-SemiBold";
+r14[DisplayNameFont.PLAYPEN_SANS] = "MonkeyBars-Bold";
+r14[DisplayNameFont.ORBITRON] = "Mainframe-Bold";
+r14[DisplayNameFont.NEW_ROCKER] = "Headbang-Normal";
+r14[DisplayNameFont.KALAM] = "Journal-Bold";
+let c5375_3 = r14;
+export { c5375_3 as DISPLAY_NAME_STYLES_FONT_FAMILY_MAP };
+export function useDisplayNameStylesFont({ displayNameStyles, ignoreDisabledStylesSetting = false }) {
+  L7: {
+    const displayNameStylesEnabled = useDisplayNameStylesEnabled({
+      location: "useDisplayNameStylesFont-native"
+    });
+    const isDisplayNameStylesFlywheelViewersEnabled = useIsDisplayNameStylesFlywheelViewersEnabled("useDisplayNameStylesFont-native");
+    if (!(!displayNameStylesEnabled && !ignoreDisabledStylesSetting) && displayNameStyles != null) {
+      if (!isDisplayNameStylesFlywheelViewersEnabled && FLYWHEEL_FONTS.includes(displayNameStyles.fontId)) {
+        break L7;
+      }
+      return c5375_3[displayNameStyles.fontId];
+    }
+  }
+}

modules/display_name_styles/types.tsx

@@ -0,0 +1,19 @@
+// Metro module 8381 (f8382).
+const r10 = {
+  TEAL: "#18b491",
+  CYAN: "#3598db",
+  VIOLET: "#995ab8",
+  PINK: "#e91d63",
+  YELLOW: "#f1c410",
+  ORANGE: "#e74c3c"
+};
+const r17 = {
+  PLAIN: 0,
+  0: "PLAIN",
+  STATIC: 1,
+  1: "STATIC",
+  ANIMATED: 2,
+  2: "ANIMATED"
+};
+export { r10 as DisplayNameStyleColorPreset };
+export { r17 as EffectDisplayType };