@oxyhq/services 10.5.0 → 11.1.0

package/lib/commonjs/ui/screens/LanguageSelectorScreen.js

@@ -10,20 +10,27 @@ var _theme = require("@oxyhq/bloom/theme");
 var _core = require("@oxyhq/core");
 var _vectorIcons = require("@expo/vector-icons");
 var _bloom = require("@oxyhq/bloom");
-var _Header = _interopRequireDefault(require("../components/Header.js"));
+var _typography = require("@oxyhq/bloom/typography");
+var _searchInput = require("@oxyhq/bloom/search-input");
 var _settingsList = require("@oxyhq/bloom/settings-list");
+var _Header = _interopRequireDefault(require("../components/Header.js"));
 var _useI18n = require("../hooks/useI18n.js");
 var _OxyContext = require("../context/OxyContext.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Size (in dp) of the circular flag chip rendered as each row's leading icon.
+const FLAG_CHIP_SIZE = 40;
+// Selected-row check indicator size (dp).
+const CHECK_ICON_SIZE = 24;
+
 /**
  * LanguageSelectorScreen - Optimized for performance
- * 
+ *
  * Performance optimizations:
- * - useMemo for language items to prevent recreation on every render
+ * - useMemo for the filtered language list to prevent recreation on every render
  * - useCallback for handlers to prevent unnecessary re-renders
- * - Memoized current language section
+ * - Memoized component to prevent unnecessary re-renders
  */
 const LanguageSelectorScreen = ({
   goBack,
@@ -44,6 +51,7 @@ const LanguageSelectorScreen = ({
   const bloomTheme = (0, _theme.useTheme)();
   const normalizedTheme = (0, _core.normalizeTheme)(theme);
   const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [query, setQuery] = (0, _react.useState)('');
 
   // Memoize the language select handler to prevent recreation on every render
   const handleLanguageSelect = (0, _react.useCallback)(async languageId => {
@@ -95,35 +103,16 @@ const LanguageSelectorScreen = ({
     }
   }, [currentLanguage, isLoading, isAuthenticated, user?.id, oxyServices, setLanguage, t, onClose, goBack]);
 
-  // Memoize language items to prevent recreation on every render
-  const languageItems = (0, _react.useMemo)(() => _core.SUPPORTED_LANGUAGES.map(language => {
-    const isSelected = currentLanguage === language.id;
-    return {
-      id: language.id,
-      title: language.name,
-      description: language.nativeName,
-      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.languageFlag, {
-          backgroundColor: `${language.color}15`
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.flagEmoji,
-          children: language.flag
-        })
-      }),
-      onPress: () => handleLanguageSelect(language.id),
-      rightElement: isSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-        name: "checkmark-circle",
-        size: 24,
-        color: bloomTheme.colors.primary
-      }) : undefined,
-      showChevron: false
-    };
-  }), [currentLanguage, handleLanguageSelect, bloomTheme]);
+  // Filter the supported languages by the search query (name + native name).
+  const filteredLanguages = (0, _react.useMemo)(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) {
+      return _core.SUPPORTED_LANGUAGES;
+    }
+    return _core.SUPPORTED_LANGUAGES.filter(language => language.name.toLowerCase().includes(normalized) || language.nativeName.toLowerCase().includes(normalized));
+  }, [query]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.container, {
-      backgroundColor: bloomTheme.colors.background
-    }],
+    className: "flex-1 bg-bg",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
       title: "",
       subtitle: "",
@@ -132,85 +121,73 @@ const LanguageSelectorScreen = ({
       variant: "minimal",
       elevation: "none"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      style: styles.content,
-      contentContainerStyle: styles.contentContainer,
+      className: "flex-1",
+      contentContainerClassName: "px-screen-margin pt-space-24 pb-space-24",
       showsVerticalScrollIndicator: false,
       removeClippedSubviews: true,
+      keyboardShouldPersistTaps: "handled",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.titleContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.bigTitle, {
-            color: bloomTheme.colors.text
-          }],
+        className: "mb-space-16",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H1, {
+          className: "text-text",
+          style: styles.bigTitle,
           children: t('language.title')
-        }), t('language.subtitle') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.bigSubtitle, {
-            color: bloomTheme.colors.textSecondary
-          }],
+        }), t('language.subtitle') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+          className: "text-text-secondary mt-space-2",
+          style: styles.bigSubtitle,
           children: t('language.subtitle')
-        })]
+        }) : null]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.sectionContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.materialCard, {
-            backgroundColor: bloomTheme.colors.card
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
-            children: languageItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
-              icon: item.icon,
-              title: item.title,
-              description: item.description,
-              onPress: item.onPress,
-              rightElement: item.rightElement,
-              showChevron: false
-            }, item.id))
-          })
+        className: "mb-space-16",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchInput.SearchInput, {
+          value: query,
+          onChangeText: setQuery,
+          onClearText: () => setQuery(''),
+          label: t('language.search') || 'Search languages'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
+        children: filteredLanguages.map(language => {
+          const isSelected = currentLanguage === language.id;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              className: "bg-fill-secondary items-center justify-center",
+              style: styles.languageFlag,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+                style: styles.flagEmoji,
+                children: language.flag
+              })
+            }),
+            title: language.name,
+            description: language.nativeName,
+            onPress: () => handleLanguageSelect(language.id),
+            rightElement: isSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+              name: "checkmark-circle",
+              size: CHECK_ICON_SIZE,
+              color: bloomTheme.colors.primary
+            }) : undefined,
+            showChevron: false
+          }, language.id);
         })
       })]
     })]
   });
 };
+
+// StyleSheet retained ONLY for measured layout (sizes / line metrics) — no colors.
 const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    flex: 1
-  },
-  contentContainer: {
-    padding: 16,
-    paddingTop: 24
-  },
-  titleContainer: {
-    marginBottom: 32,
-    paddingTop: 0
-  },
   bigTitle: {
     fontSize: 34,
-    fontWeight: _reactNative.Platform.OS === 'web' ? 'bold' : undefined,
     lineHeight: 40,
-    marginBottom: 8,
     letterSpacing: -0.5
   },
   bigSubtitle: {
     fontSize: 16,
-    lineHeight: 22,
-    opacity: 0.7,
-    marginTop: 4
-  },
-  sectionContainer: {
-    marginBottom: 8
-  },
-  materialCard: {
-    borderRadius: 12,
-    overflow: 'hidden'
+    lineHeight: 22
   },
   languageFlag: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center'
+    width: FLAG_CHIP_SIZE,
+    height: FLAG_CHIP_SIZE,
+    borderRadius: FLAG_CHIP_SIZE / 2
   },
   flagEmoji: {
     fontSize: 20

package/lib/commonjs/ui/screens/LanguageSelectorScreen.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_theme","_core","_vectorIcons","_bloom","_Header","_interopRequireDefault","_settingsList","_useI18n","_OxyContext","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LanguageSelectorScreen","goBack","onClose","theme","user","currentLanguage","setLanguage","oxyServices","isAuthenticated","useOxy","useI18n","bloomTheme","useTheme","normalizedTheme","normalizeTheme","isLoading","setIsLoading","useState","handleLanguageSelect","useCallback","languageId","serverSyncFailed","id","updateProfile","language","__DEV__","console","warn","Error","message","selectedLang","SUPPORTED_LANGUAGES","find","lang","toast","success","name","error","languageItems","useMemo","map","isSelected","title","description","nativeName","icon","jsx","View","style","styles","languageFlag","backgroundColor","color","children","Text","flagEmoji","flag","onPress","rightElement","Ionicons","size","colors","primary","undefined","showChevron","jsxs","container","background","subtitle","onBack","variant","elevation","ScrollView","content","contentContainerStyle","contentContainer","showsVerticalScrollIndicator","removeClippedSubviews","titleContainer","bigTitle","text","bigSubtitle","textSecondary","sectionContainer","materialCard","card","SettingsListGroup","item","SettingsListItem","StyleSheet","create","flex","padding","paddingTop","marginBottom","fontSize","fontWeight","Platform","OS","lineHeight","letterSpacing","opacity","marginTop","borderRadius","overflow","width","height","alignItems","justifyContent","_default","exports","React","memo"],"sourceRoot":"../../../../src","sources":["ui/screens/LanguageSelectorScreen.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_theme","_core","_vectorIcons","_bloom","_typography","_searchInput","_settingsList","_Header","_interopRequireDefault","_useI18n","_OxyContext","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FLAG_CHIP_SIZE","CHECK_ICON_SIZE","LanguageSelectorScreen","goBack","onClose","theme","user","currentLanguage","setLanguage","oxyServices","isAuthenticated","useOxy","useI18n","bloomTheme","useTheme","normalizedTheme","normalizeTheme","isLoading","setIsLoading","useState","query","setQuery","handleLanguageSelect","useCallback","languageId","serverSyncFailed","id","updateProfile","language","__DEV__","console","warn","Error","message","selectedLang","SUPPORTED_LANGUAGES","find","lang","toast","success","name","error","filteredLanguages","useMemo","normalized","trim","toLowerCase","filter","includes","nativeName","jsxs","View","className","children","jsx","title","subtitle","onBack","variant","elevation","ScrollView","contentContainerClassName","showsVerticalScrollIndicator","removeClippedSubviews","keyboardShouldPersistTaps","H1","style","styles","bigTitle","Text","bigSubtitle","SearchInput","value","onChangeText","onClearText","label","SettingsListGroup","map","isSelected","SettingsListItem","icon","languageFlag","flagEmoji","flag","description","onPress","rightElement","Ionicons","size","color","colors","primary","undefined","showChevron","StyleSheet","create","fontSize","lineHeight","letterSpacing","width","height","borderRadius","_default","exports","React","memo"],"sourceRoot":"../../../../src","sources":["ui/screens/LanguageSelectorScreen.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/screens/LearnMoreUsernamesScreen.js

@@ -6,227 +6,127 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
-var _vectorIcons = require("@expo/vector-icons");
 var _theme = require("@oxyhq/bloom/theme");
+var _typography = require("@oxyhq/bloom/typography");
+var _iconCircle = require("@oxyhq/bloom/icon-circle");
+var _accordion = require("@oxyhq/bloom/accordion");
+var Icons = _interopRequireWildcard(require("@oxyhq/bloom/icons"));
+var _Header = _interopRequireDefault(require("../components/Header.js"));
 var _useI18n = require("../hooks/useI18n.js");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const INFO_SECTIONS = [{
   id: 'what',
   titleKey: 'learnMoreUsernames.sections.what.title',
   contentKey: 'learnMoreUsernames.sections.what.content',
-  icon: 'at-outline'
+  Icon: Icons.At_Stroke2_Corner0_Rounded
 }, {
   id: 'rules',
   titleKey: 'learnMoreUsernames.sections.rules.title',
   contentKey: 'learnMoreUsernames.sections.rules.content',
-  icon: 'list-outline'
+  Icon: Icons.BulletList_Stroke2_Corner0_Rounded
 }, {
   id: 'unique',
   titleKey: 'learnMoreUsernames.sections.unique.title',
   contentKey: 'learnMoreUsernames.sections.unique.content',
-  icon: 'finger-print-outline'
+  Icon: Icons.Key_Stroke2_Corner2_Rounded
 }, {
   id: 'change',
   titleKey: 'learnMoreUsernames.sections.change.title',
   contentKey: 'learnMoreUsernames.sections.change.content',
-  icon: 'refresh-outline'
+  Icon: Icons.ArrowRotateClockwise_Stroke2_Corner0_Rounded
 }, {
   id: 'tips',
   titleKey: 'learnMoreUsernames.sections.tips.title',
   contentKey: 'learnMoreUsernames.sections.tips.content',
-  icon: 'bulb-outline'
+  Icon: Icons.Sparkle_Stroke2_Corner0_Rounded
 }];
 const LearnMoreUsernamesScreen = ({
-  theme
+  onClose,
+  goBack
 }) => {
   const bloomTheme = (0, _theme.useTheme)();
   const {
     t
   } = (0, _useI18n.useI18n)();
-  const [expandedIds, setExpandedIds] = (0, _react.useState)(new Set(['what'])); // Start with first section expanded
-
-  const toggleExpanded = (0, _react.useCallback)(id => {
-    setExpandedIds(prev => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
+  // Start with the first section expanded.
+  const [expandedIds, setExpandedIds] = (0, _react.useState)(['what']);
+  const handleAccordionChange = (0, _react.useCallback)(value => {
+    if (Array.isArray(value)) {
+      setExpandedIds(value);
+    } else if (value == null) {
+      setExpandedIds([]);
+    } else {
+      setExpandedIds([value]);
+    }
   }, []);
-  const styles = (0, _react.useMemo)(() => createStyles(), []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.container, {
-      backgroundColor: bloomTheme.colors.background
-    }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      style: styles.content,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    className: "flex-1 bg-bg",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+      title: t('learnMoreUsernames.introTitle'),
+      onBack: goBack || onClose,
+      variant: "minimal",
+      elevation: "subtle"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      className: "flex-1 px-screen-margin",
       showsVerticalScrollIndicator: false,
-      contentContainerStyle: styles.contentContainer,
+      contentContainerClassName: "pb-space-32",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.introSection,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.introIcon, {
-            backgroundColor: `${bloomTheme.colors.primary}15`
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: "at",
-            size: 32,
-            color: bloomTheme.colors.primary
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.introTitle, {
-            color: bloomTheme.colors.text
-          }],
-          children: t('learnMoreUsernames.introTitle')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.introText, {
-            color: bloomTheme.colors.textSecondary
-          }],
+        className: "items-center py-space-24 gap-space-12",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconCircle.IconCircle, {
+          icon: Icons.At_Stroke2_Corner0_Rounded
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+          className: "font-sans text-body text-text-secondary text-center",
           children: t('learnMoreUsernames.introText')
         })]
-      }), INFO_SECTIONS.map((section, index) => {
-        const isExpanded = expandedIds.has(section.id);
-        const sectionTitle = t(section.titleKey);
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.section, {
-            backgroundColor: bloomTheme.colors.backgroundSecondary,
-            borderColor: bloomTheme.colors.border
-          }, index === 0 && styles.sectionFirst],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-            style: styles.sectionHeader,
-            onPress: () => toggleExpanded(section.id),
-            accessibilityRole: "button",
-            accessibilityLabel: sectionTitle,
-            accessibilityHint: isExpanded ? t('learnMoreUsernames.collapseHint') : t('learnMoreUsernames.expandHint'),
-            accessibilityState: {
-              expanded: isExpanded
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.sectionIconContainer, {
-                backgroundColor: `${bloomTheme.colors.primary}15`
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-                name: section.icon,
-                size: 20,
-                color: bloomTheme.colors.primary
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_accordion.Accordion, {
+        type: "multiple",
+        value: expandedIds,
+        onValueChange: handleAccordionChange,
+        children: INFO_SECTIONS.map(({
+          id,
+          titleKey,
+          contentKey,
+          Icon
+        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_accordion.AccordionItem, {
+          value: id,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_accordion.AccordionTrigger, {
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              className: "bg-fill-secondary rounded-radius-12",
+              style: styles.iconSquare,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+                size: "md",
+                style: {
+                  color: bloomTheme.colors.primary
+                }
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.sectionTitle, {
-                color: bloomTheme.colors.text
-              }],
-              children: sectionTitle
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-              name: isExpanded ? 'chevron-up' : 'chevron-down',
-              size: 20,
-              color: bloomTheme.colors.textSecondary
-            })]
-          }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.sectionContent, {
-              borderTopColor: bloomTheme.colors.border
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.sectionText, {
-                color: bloomTheme.colors.textSecondary
-              }],
-              children: t(section.contentKey)
+            }),
+            children: t(titleKey)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_accordion.AccordionContent, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+              className: "font-sans text-bodyMedium text-text-secondary",
+              children: t(contentKey)
             })
           })]
-        }, section.id);
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.footer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.footerText, {
-            color: bloomTheme.colors.textSecondary
-          }],
-          children: t('learnMoreUsernames.footer')
-        })
+        }, id))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+        className: "font-sans text-caption text-text-tertiary text-center mt-space-16",
+        children: t('learnMoreUsernames.footer')
       })]
-    })
+    })]
   });
 };
-const createStyles = () => _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    flex: 1
-  },
-  contentContainer: {
-    padding: 16,
-    paddingBottom: 32
-  },
-  introSection: {
-    alignItems: 'center',
-    paddingVertical: 24,
-    paddingHorizontal: 16
-  },
-  introIcon: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 16
-  },
-  introTitle: {
-    fontSize: 24,
-    fontWeight: '700',
-    marginBottom: 8,
-    textAlign: 'center'
-  },
-  introText: {
-    fontSize: 16,
-    lineHeight: 24,
-    textAlign: 'center'
-  },
-  section: {
-    borderRadius: 12,
-    borderWidth: 1,
-    marginBottom: 12,
-    overflow: 'hidden'
-  },
-  sectionFirst: {
-    marginTop: 8
-  },
-  sectionHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16
-  },
-  sectionIconContainer: {
+
+// Measured layout only (no color): fixed-size square that hosts the leading
+// section icon inside the accordion trigger. Color comes from the
+// `bg-fill-secondary` token class on the View.
+const styles = _reactNative.StyleSheet.create({
+  iconSquare: {
     width: 36,
     height: 36,
-    borderRadius: 18,
     alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12
-  },
-  sectionTitle: {
-    flex: 1,
-    fontSize: 16,
-    fontWeight: '600',
-    marginRight: 12
-  },
-  sectionContent: {
-    padding: 16,
-    paddingTop: 12,
-    borderTopWidth: 1
-  },
-  sectionText: {
-    fontSize: 14,
-    lineHeight: 22
-  },
-  footer: {
-    marginTop: 16,
-    paddingHorizontal: 16
-  },
-  footerText: {
-    fontSize: 14,
-    textAlign: 'center',
-    lineHeight: 20
+    justifyContent: 'center'
   }
 });
 var _default = exports.default = LearnMoreUsernamesScreen;