@unif/react-native-design 0.19.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-design",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Unif 设计系统:theme + icons + utils + components",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -44,6 +44,11 @@
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "test": "jest --passWithNoTests",
+    "check:config": "node scripts/check-config.js",
+    "check:icons": "node scripts/check-icons-generated.js",
+    "check:runtime-peers": "node scripts/check-runtime-peers.js",
+    "create:runtime-harness": "node scripts/create-runtime-api-harness.js",
+    "runtime:image-fixture": "node scripts/runtime-image-fixture.js",
     "release": "release-it --only-version"
   },
   "keywords": [
@@ -65,14 +70,18 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "@babel/core": "^7.29.7",
     "@commitlint/config-conventional": "^21.0.1",
     "@eslint/compat": "^2.0.3",
     "@eslint/eslintrc": "^3.3.5",
-    "@eslint/js": "^10.0.1",
+    "@eslint/js": "^9.39.4",
     "@jest/globals": "^30.0.0",
-    "@react-native/babel-preset": "0.85.3",
-    "@react-native/eslint-config": "0.85.3",
-    "@react-native/jest-preset": "0.85.3",
+    "@react-native-community/cli": "20.1.0",
+    "@react-native-community/template": "0.86.2",
+    "@react-native/babel-preset": "0.86.2",
+    "@react-native/eslint-config": "0.86.2",
+    "@react-native/jest-preset": "0.86.2",
+    "@react-native/metro-config": "0.86.2",
     "@release-it/conventional-changelog": "^11.0.0",
     "@sbaiahmed1/react-native-blur": "^4.6.2",
     "@types/react": "^19.2.0",
@@ -80,34 +89,39 @@
     "del-cli": "^7.0.0",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-ft-flow": "^3.0.11",
     "eslint-plugin-prettier": "^5.5.5",
     "jest": "^30.3.0",
+    "jest-environment-node": "30.4.1",
     "lefthook": "^2.1.4",
     "prettier": "^3.8.1",
     "react": "19.2.3",
-    "react-native": "0.85.3",
+    "react-native": "0.86.2",
     "react-native-builder-bob": "^0.41.0",
-    "react-native-gesture-handler": "^3.0.0",
-    "react-native-reanimated": "^4.4.0",
-    "react-native-reanimated-carousel": "^5.0.0-beta.5",
+    "react-native-gesture-handler": "^3.1.0",
+    "react-native-reanimated": "~4.5.3",
+    "react-native-reanimated-carousel": "^5.0.0",
     "react-native-safe-area-context": "^5.7.0",
     "react-native-svg": "^15.15.5",
-    "react-native-worklets": "0.9.1",
+    "react-native-worklets": "^0.11.3",
     "release-it": "^20.0.1",
+    "semver": "^7.8.5",
+    "smol-toml": "^1.7.1",
     "turbo": "^2.8.21",
     "typescript": "^6.0.2"
   },
   "peerDependencies": {
     "@sbaiahmed1/react-native-blur": ">=4",
-    "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": ">=2",
-    "react-native-reanimated": ">=4",
-    "react-native-reanimated-carousel": ">=5.0.0-beta.0",
+    "react": ">=19.2.3 <20.0.0",
+    "react-native": ">=0.86.0 <0.87.0",
+    "react-native-gesture-handler": ">=3.0.0 <4.0.0",
+    "react-native-reanimated": ">=4.5.2 <4.6.0",
+    "react-native-reanimated-carousel": ">=5.0.0 <6.0.0",
     "react-native-safe-area-context": ">=5",
     "react-native-svg": ">=15",
-    "react-native-worklets": ">=0.9"
+    "react-native-worklets": ">=0.11.0 <0.12.0"
+  },
+  "engines": {
+    "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
   },
   "workspaces": [
     "example",

package/src/components/business/AvatarWithRing/AvatarWithRing.tsx

@@ -6,7 +6,7 @@ import Svg, {
   Rect,
   Stop,
 } from 'react-native-svg';
-import { avatarGradient, useTheme } from '../../../theme';
+import { avatarGradient, useFontScale, useTheme } from '../../../theme';
 import { useSvgId } from '../useSvgId';
 import { makeAvatarStyles } from './styles';
 import type { AvatarWithRingProps } from './types';
@@ -26,11 +26,18 @@ export function AvatarWithRing({
   testID,
 }: AvatarWithRingProps): React.JSX.Element {
   const { colors: c, shadow } = useTheme();
+  const fontScale = useFontScale();
   const id = useSvgId('av');
   const { inner, styles } = useMemo(
     () =>
-      makeAvatarStyles(size, ringColor ?? c.avatarRing, shadow.brandAvatar, c),
-    [size, ringColor, c, shadow.brandAvatar]
+      makeAvatarStyles(
+        size,
+        ringColor ?? c.avatarRing,
+        shadow.brandAvatar,
+        c,
+        fontScale
+      ),
+    [size, ringColor, c, shadow.brandAvatar, fontScale]
   );
   return (
     <View style={[styles.shell, style]} testID={testID}>
@@ -60,7 +67,7 @@ export function AvatarWithRing({
             fill={`url(#${id})`}
           />
         </Svg>
-        <Text style={[styles.label, { lineHeight: inner }]}>{label}</Text>
+        <Text style={styles.label}>{label}</Text>
       </View>
     </View>
   );

package/src/components/business/AvatarWithRing/styles.ts

@@ -1,19 +1,20 @@
 import { StyleSheet, type ViewStyle } from 'react-native';
-import { fw, r, type ColorTokens } from '../../../theme';
+import { fw, r, scaleFontMetric, type ColorTokens } from '../../../theme';
 import { createLogger } from '../../../utils/logger';
 
 const log = createLogger('AvatarWithRing');
 
 /**
- * 头像样式工厂 —— **非标 maker 签名**:`(size, ringColor, shadowStyle, c)` 4 参,
+ * 头像样式工厂 —— **非标 maker 签名**:`(size, ringColor, shadowStyle, c,
+ * fontScale)` 5 参,
  * 而非项目通用 `(c: ColorTokens, s: ShadowTokens) => StyleSheet` 2 参。
  *
  * **为何破例**:`size` / `ringColor` 是 **props 派生**(每次调用值不同,如 ring 宽度
  * = `size * 0.0625`、label 字号 = `size * 0.40`、inner 直径 = `size - ringWidth*2`),
- * 标准 `useThemedStyles(maker)` 按 `[colors, shadow]` memo 假设 maker 是模块顶层
- * 常量,无法承接 props 变化。改走调用点自带 `useMemo([size, ringColor, c,
- * shadow.brandAvatar])` 精确缓存,signature 因此带上 size/ringColor/shadow 三个
- * 运行期入参,c 仍传入用于 label 文字色。
+ * 标准 `useThemedStyles(maker)` 按 `[colors, shadow, fontScale, maker]` memo,且假设 maker
+ * 是模块顶层常量,无法承接 props 变化。改走调用点自带 `useMemo([size, ringColor, c,
+ * shadow.brandAvatar, fontScale])` 精确缓存,signature 因此带上
+ * size/ringColor/shadow/fontScale 四个运行期入参,c 仍传入用于 label 文字色。
  *
  * **不用 borderWidth + borderColor 实现 ring**:RN new arch (Fabric) 在
  * iOS 上对 `borderColor: rgba alpha + borderRadius: width/2`(完全圆)的组合
@@ -27,7 +28,8 @@ export const makeAvatarStyles = (
   size: number,
   ringColor: string,
   shadowStyle: ViewStyle,
-  c: ColorTokens
+  c: ColorTokens,
+  fontScale: number
 ) => {
   // 防御非法 size:NaN / 负数 / 0 会导致 inner 为负传入 SVG。
   // 最小合理值 = ringWidth*2 + 1(至少 1pt 圆心可见)。
@@ -68,10 +70,10 @@ export const makeAvatarStyles = (
       justifyContent: 'center',
     },
     label: {
-      fontSize: r(Math.round(safeSize * 0.4)),
+      fontSize: scaleFontMetric(r(Math.round(safeSize * 0.4)), fontScale),
       fontWeight: fw.bold,
       color: c.onPrimary,
-      letterSpacing: -0.5,
+      letterSpacing: scaleFontMetric(-0.5, fontScale),
       textAlign: 'center',
     },
   });

package/src/components/business/VersionPill/VersionPill.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Text, View } from 'react-native';
 import { useColors, useThemedStyles } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { A11Y_HIDDEN_PROPS } from '../../ui/shared/a11y';
+import { buildVersionPillLabel, resolveVersionStatus } from './content';
 import { makeVersionPillStyles } from './styles';
 import type { VersionPillProps } from './types';
 
+const log = createLogger('VersionPill');
+
 /** 版本徽章胶囊 —— success dot + 版本 + 分点 + build mono。 */
 export function VersionPill({
   version,
   build,
-  statusColor,
+  status,
   versionPrefix = '版本 ',
   buildPrefix = 'build ',
   style,
@@ -16,13 +21,24 @@ export function VersionPill({
 }: VersionPillProps): React.JSX.Element {
   const c = useColors();
   const styles = useThemedStyles(makeVersionPillStyles);
-  const dotColor = statusColor ?? c.success;
+  const resolvedStatus = resolveVersionStatus(status, c);
+  const statusDiagnosticKey = resolvedStatus.diagnostics.join(',');
+
+  useEffect(() => {
+    if (statusDiagnosticKey.length > 0) {
+      log.warn('VersionPill status.label 不能为空白，已回退为“状态未知”。');
+    }
+  }, [statusDiagnosticKey]);
   // build 的「省略」契约:undefined / null / "" 均视为空;字符串 "0" 不省略。
   const hasBuild = build != null && build !== '';
-  // 状态点用颜色传达语义,SR 无法感知;整个 pill 作为分组提供无障碍合并读出。
-  const a11yLabel = hasBuild
-    ? `${versionPrefix}${version},${buildPrefix}${build}`
-    : `${versionPrefix}${version}`;
+  // 可见状态补齐颜色之外的语义；外层仍负责把全部片段合并成单一读屏名称。
+  const a11yLabel = buildVersionPillLabel({
+    version,
+    build,
+    statusLabel: resolvedStatus.label,
+    versionPrefix,
+    buildPrefix,
+  });
   return (
     <View
       accessible
@@ -32,33 +48,23 @@ export function VersionPill({
     >
       {/* 状态点仅颜色通道,屏幕阅读器由外层容器统一朗读,此处隐藏 */}
       <View
-        style={[styles.dot, { backgroundColor: dotColor }]}
-        accessibilityElementsHidden
-        importantForAccessibility="no"
+        {...A11Y_HIDDEN_PROPS}
+        style={[styles.dot, { backgroundColor: resolvedStatus.color }]}
       />
-      <Text
-        style={styles.version}
-        accessibilityElementsHidden
-        importantForAccessibility="no"
-      >
+      <Text {...A11Y_HIDDEN_PROPS} style={styles.status}>
+        {resolvedStatus.label}
+      </Text>
+      <Text {...A11Y_HIDDEN_PROPS} style={styles.version}>
         {versionPrefix}
         {version}
       </Text>
       {hasBuild ? (
         <>
           {/* 分隔符「·」无语义,隐藏于无障碍树 */}
-          <Text
-            style={styles.sep}
-            accessibilityElementsHidden
-            importantForAccessibility="no"
-          >
+          <Text {...A11Y_HIDDEN_PROPS} style={styles.sep}>
             ·
           </Text>
-          <Text
-            style={styles.build}
-            accessibilityElementsHidden
-            importantForAccessibility="no"
-          >
+          <Text {...A11Y_HIDDEN_PROPS} style={styles.build}>
             {buildPrefix}
             {build}
           </Text>

package/src/components/business/VersionPill/content.ts

@@ -0,0 +1,47 @@
+import type { ColorTokens } from '../../../theme';
+import { normalizeNonBlankText } from '../../ui/shared/accessibilityName';
+import type { VersionStatus } from './types';
+
+type VersionStatusColors = Pick<ColorTokens, 'foregroundMuted' | 'success'>;
+
+type ResolvedVersionStatus = {
+  label: string;
+  color: string;
+  diagnostics: readonly string[];
+};
+
+export function resolveVersionStatus(
+  status: VersionStatus | undefined,
+  colors: VersionStatusColors
+): ResolvedVersionStatus {
+  if (status == null) {
+    return { label: '正常', color: colors.success, diagnostics: [] };
+  }
+  const label = normalizeNonBlankText(status.label);
+  return {
+    label: label ?? '状态未知',
+    color: status.color ?? colors.foregroundMuted,
+    diagnostics: label === undefined ? ['status.label'] : [],
+  };
+}
+
+type VersionPillLabelContent = {
+  version: string;
+  build: string | null | undefined;
+  statusLabel: string;
+  versionPrefix: string;
+  buildPrefix: string;
+};
+
+export function buildVersionPillLabel({
+  version,
+  build,
+  statusLabel,
+  versionPrefix,
+  buildPrefix,
+}: VersionPillLabelContent): string {
+  const versionLabel = `${versionPrefix}${version}`;
+  const buildLabel =
+    build != null && build !== '' ? `，${buildPrefix}${build}` : '';
+  return `${versionLabel}${buildLabel}，${statusLabel}`;
+}

package/src/components/business/VersionPill/index.ts

@@ -1,2 +1,2 @@
 export { VersionPill } from './VersionPill';
-export type { VersionPillProps } from './types';
+export type { VersionPillProps, VersionStatus } from './types';

package/src/components/business/VersionPill/styles.ts

@@ -28,6 +28,10 @@ export const makeVersionPillStyles = (c: ColorTokens) =>
       height: r(5),
       borderRadius: radius.pill,
     },
+    status: {
+      fontSize: type.microPlus,
+      color: c.foregroundMuted,
+    },
     version: {
       fontSize: type.microPlus,
       color: c.foregroundMuted,

package/src/components/business/VersionPill/types.ts

@@ -1,12 +1,17 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 
+export type VersionStatus = {
+  label: string;
+  color?: string;
+};
+
 export type VersionPillProps = {
   /** 版本号,如 "2.8.0"。 */
   version: string;
   /** 可选 build 号;值为 null/undefined/"" 时省略分点与 build 字。 */
   build?: string;
-  /** 状态点颜色,默认 c.success。 */
-  statusColor?: string;
+  /** 可见状态；缺省为 success 色的“正常”。 */
+  status?: VersionStatus;
   /**
    * 版本号前缀文案,默认 "版本 "。
    * 消费者可传 "v" / "Version " 等覆盖(含末尾空格)。

package/src/components/business/index.ts

@@ -24,4 +24,4 @@ export { AvatarWithRing } from './AvatarWithRing';
 export type { AvatarWithRingProps } from './AvatarWithRing';
 
 export { VersionPill } from './VersionPill';
-export type { VersionPillProps } from './VersionPill';
+export type { VersionPillProps, VersionStatus } from './VersionPill';

package/src/components/business/useSvgId.ts

@@ -1,17 +1,38 @@
 import { useId } from 'react';
 
+export function sanitizeSvgIdPart(value: string): string {
+  return value
+    .replace(/[^A-Za-z0-9_.-]+/gu, '-')
+    .replace(/^[.-]+|[.-]+$/gu, '');
+}
+
+export function buildSvgId(
+  prefix: string,
+  override: string | undefined,
+  reactId: string
+): string {
+  const cleanOverride =
+    override === undefined ? '' : sanitizeSvgIdPart(override);
+  const cleanPrefix = sanitizeSvgIdPart(prefix);
+  const cleanReactId = sanitizeSvgIdPart(reactId);
+  const automatic =
+    [cleanPrefix, cleanReactId].filter(Boolean).join('-') ||
+    ['svg-id', cleanReactId].filter(Boolean).join('-') ||
+    'svg-id';
+  const candidate = cleanOverride || automatic;
+  return /^[A-Za-z_]/u.test(candidate) ? candidate : `svg-id-${candidate}`;
+}
+
 /**
- * SVG 渐变 id 生成 hook —— 消毒 React 19 useId 中的冒号字符。
+ * SVG 渐变 id 生成 hook —— 消毒 prefix、override 与 React useId。
  *
- * Why:React 19 的 useId() 返回含冒号(`:r0:`)的字符串,不是合法的 SVG id 字符
- * (XML NCName 规则),直接用在 `<LinearGradient id>` / `<RadialGradient id>`
- * 会导致 SVG 引用失败。sanitize 后拼上 prefix 保证唯一且合法。
+ * Why:useId() 的字符串格式由 renderer 决定，caller 传入的 prefix 与 override
+ * 也可能包含空白或标点；统一消毒并保证合法首字符后，SVG 引用才能跨平台稳定。
  *
  * @param prefix  短前缀,区分同屏多 gradient(如 "gw" / "rh" / "av")。
- * @param override 可选:外部传入的 gradientId;有值时直接返回,跳过 useId 分配。
+ * @param override 可选:外部传入的 gradientId;消毒后非空时优先使用。
  */
 export function useSvgId(prefix: string, override?: string): string {
-  const autoId = useId();
-  if (override !== undefined) return override;
-  return `${prefix}-${autoId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const reactId = useId();
+  return buildSvgId(prefix, override, reactId);
 }

package/src/components/ui/Avatar/Avatar.tsx

@@ -1,14 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import { Image, Text, View } from 'react-native';
-import { useColors } from '../../../theme';
+import React from 'react';
+import { Text, View } from 'react-native';
+import { scaleFontMetric, useColors, useFontScale } from '../../../theme';
+import { resolveImageSource } from '../../../utils/imageSource';
+import { ImageAttempt } from '../shared/ImageAttempt';
 import { paletteFor, sizingFor, styles } from './styles';
 import type { AvatarProps } from './types';
 
 /**
  * 圆形头像 —— 5 档尺寸 × 4 种配色 × 可选图片 source。
  *
- * 传 source 且未失败时渲染 Image(onError 后自动 fallback 到 label 文字),
- * 否则渲染 label + variant 背景色。
+ * 合法 source 由 keyed ImageAttempt 独立持有失败状态；非法 source 或加载失败
+ * 时渲染 label + variant 背景色。
  */
 export function Avatar({
   label,
@@ -19,26 +21,19 @@ export function Avatar({
   testID,
 }: AvatarProps): React.JSX.Element {
   const c = useColors();
-  const [imageFailed, setImageFailed] = useState(false);
-
-  // [M-20] React 18+ 已移除 unmount 后 setState 的 warning,mountedRef 守卫为死码,删除。
-  // [L-44] source 变化时重置 imageFailed,否则换图 URL 后仍展示 fallback 文字。
-  // source 可能是对象形态({ uri }),按 uri 字段做细粒度比较。
-  const uri =
-    source != null && typeof source === 'object' && 'uri' in source
-      ? (source as { uri?: string }).uri
-      : null;
-  useEffect(() => {
-    setImageFailed(false);
-  }, [uri, source]);
-
-  const handleImageError = () => {
-    setImageFailed(true);
-  };
+  const fontScale = useFontScale();
   const dims = sizingFor(size);
   const palette = paletteFor(variant, c);
-
-  const showImage = source != null && !imageFailed;
+  const labelFontSize = scaleFontMetric(dims.fs, fontScale);
+  const resolvedSource = resolveImageSource(source);
+  const fallback = (
+    <Text
+      style={[styles.label, { fontSize: labelFontSize, color: palette.fg }]}
+      numberOfLines={1}
+    >
+      {label}
+    </Text>
+  );
 
   return (
     <View
@@ -56,20 +51,16 @@ export function Avatar({
       accessibilityLabel={label}
       testID={testID}
     >
-      {showImage ? (
-        <Image
-          source={source}
-          onError={handleImageError}
+      {resolvedSource === undefined ? (
+        fallback
+      ) : (
+        <ImageAttempt
+          key={resolvedSource.key}
+          source={resolvedSource.source}
+          fallback={fallback}
           style={styles.image}
           resizeMode="cover"
         />
-      ) : (
-        <Text
-          style={[styles.label, { fontSize: dims.fs, color: palette.fg }]}
-          numberOfLines={1}
-        >
-          {label}
-        </Text>
       )}
     </View>
   );

package/src/components/ui/Avatar/types.ts

@@ -23,8 +23,12 @@ export type AvatarProps = {
   /** 配色变体，默认 'neutral' */
   variant?: AvatarVariant;
   /**
-   * 真实头像图片（URL `{ uri: '...' }` 或 `require(...)`）。
-   * 提供时优先渲染 image；onError 触发后自动 fallback 到 label。
+   * 真实头像图片（URL `{ uri: '...' }`、URI source 数组或 `require(...)`）。
+   * 运行时先校验并生成 immutable semantic snapshot；非法 source 直接 fallback。
+   * Web 对 URI source 数组明确使用首个 candidate，native 保留完整数组。
+   * class / custom prototype 只读取 own enumerable data，继承属性与 accessor 无效。
+   * 等价 source 沿用同一 keyed attempt，真实字段变化才重试；失败 state 不跨
+   * attempt 共享。
    */
   source?: ImageSourcePropType;
   /** 容器附加样式(margin / position 等布局微调)。 */

package/src/components/ui/Button/Button.tsx

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Text } from 'react-native';
-import { useThemedStyles } from '../../../theme';
+import { scaleFontMetric, useFontScale, useThemedStyles } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
 import { Icon } from '../Icon';
+import { normalizeNonBlankText } from '../shared/accessibilityName';
 import { ButtonBase } from './ButtonBase';
 import { makeStyles } from './styles';
 import type { ButtonProps } from './types';
 
+const log = createLogger('Button');
+
 /**
  * 7 variant × 3 size 文本按钮。
  * 内部组合 ButtonBase + content(label + 可选 leftIcon / rightIcon),
@@ -26,37 +30,52 @@ export function Button({
   style,
   testID,
   accessibilityHint,
+  accessibilityState,
 }: ButtonProps): React.JSX.Element {
   const styles = useThemedStyles(makeStyles);
+  const fontScale = useFontScale();
+  const accessibleName = normalizeNonBlankText(label);
+  const hasBlankLabel = accessibleName === undefined;
+
+  useEffect(() => {
+    if (hasBlankLabel) {
+      log.warn('Button label 不能为空白，当前 action 已禁用。');
+    }
+  }, [hasBlankLabel]);
+
   return (
     <ButtonBase
       onPress={onPress}
       size={size}
       variant={variant}
       block={block}
-      disabled={disabled}
+      disabled={disabled === true || hasBlankLabel}
       loading={loading}
-      accessibilityLabel={label}
+      accessibilityLabel={accessibleName}
       accessibilityHint={accessibilityHint}
+      accessibilityState={accessibilityState}
       style={style}
       testID={testID}
     >
-      {({ sizing, palette }) => (
-        <>
-          {leftIcon ? (
-            <Icon name={leftIcon} size={sizing.fs + 2} color={palette.fg} />
-          ) : null}
-          <Text
-            style={[styles.label, { color: palette.fg, fontSize: sizing.fs }]}
-            numberOfLines={1}
-          >
-            {label}
-          </Text>
-          {rightIcon ? (
-            <Icon name={rightIcon} size={sizing.fs + 2} color={palette.fg} />
-          ) : null}
-        </>
-      )}
+      {({ sizing, palette }) => {
+        const textSize = scaleFontMetric(sizing.fs, fontScale);
+        return (
+          <>
+            {leftIcon ? (
+              <Icon name={leftIcon} size={sizing.fs + 2} color={palette.fg} />
+            ) : null}
+            <Text
+              style={[styles.label, { color: palette.fg, fontSize: textSize }]}
+              numberOfLines={1}
+            >
+              {label}
+            </Text>
+            {rightIcon ? (
+              <Icon name={rightIcon} size={sizing.fs + 2} color={palette.fg} />
+            ) : null}
+          </>
+        );
+      }}
     </ButtonBase>
   );
 }