chore: upgrade design-system-react-native to 0.11.0 and deprecate replaced components

app/component-library/components-temp/ButtonFilter/ButtonFilter.tsx

@@ -5,6 +5,12 @@
 
 import { ButtonFilterProps } from './ButtonFilter.types';
 
+/**
+ * @deprecated Please update your code to use `ButtonFilter` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonFilter/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const ButtonFilter = ({
   children,
   isActive = false,
@@ -38,4 +44,4 @@
   );
 };
 
 export default ButtonFilter;

app/component-library/components-temp/MainActionButton/MainActionButton.tsx

@@ -13,6 +13,12 @@
 import { MainActionButtonProps } from './MainActionButton.types';
 import styleSheet from './MainActionButton.styles';
 
+/**
+ * @deprecated Please update your code to use `MainActionButton` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/MainActionButton/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const MainActionButton = ({
   iconName,
   label,
@@ -65,4 +71,4 @@
   );
 };
 
 export default MainActionButton;

app/component-library/components-temp/TabEmptyState/TabEmptyState.tsx

@@ -14,6 +14,12 @@ import {
 
 import type { TabEmptyStateProps } from './TabEmptyState.types';
 
+/**
+ * @deprecated Please update your code to use `TabEmptyState` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/TabEmptyState/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 export const TabEmptyState: React.FC<TabEmptyStateProps> = ({
   icon,
   description,

app/component-library/components/Banners/Banner/Banner.tsx

@@ -7,15 +7,23 @@
 // Internal dependencies.
 import { BannerProps, BannerVariant } from './Banner.types';
 
+/**
+ * @deprecated Please update your code to use `BannerAlert` from `@metamask/design-system-react-native`.
+ * The `BannerVariant.Tip` variant is unused and will be removed.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerAlert/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md Migration docs}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const Banner = (bannerProps: BannerProps) => {
   switch (bannerProps.variant) {
     case BannerVariant.Alert:
       return <BannerAlert {...bannerProps} />;
     case BannerVariant.Tip:
       return <BannerTip {...bannerProps} />;
     default:
       throw new Error('Invalid Banner Variant');
   }
 };
 
 export default Banner;

app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx

@@ -24,6 +24,12 @@
   TESTID_BANNER_CLOSE_BUTTON_ICON,
 } from './BannerBase.constants';
 
+/**
+ * @deprecated Please update your code to use `BannerBase` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerBase/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BannerBase: React.FC<BannerBaseProps> = ({
   style,
   startAccessory,
@@ -81,4 +87,4 @@
   );
 };
 
 export default BannerBase;

app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.tsx

@@ -18,6 +18,13 @@
   BANNERALERT_TEST_ID,
 } from './BannerAlert.constants';
 
+/**
+ * @deprecated Please update your code to use `BannerAlert` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerAlert/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md Migration docs}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BannerAlert: React.FC<BannerAlertProps> = ({
   style,
   severity = DEFAULT_BANNERALERT_SEVERITY,
@@ -34,7 +41,7 @@
   );
 
   return (
     <BannerBase
       style={styles.base}
       startAccessory={severityIcon}
       testID={BANNERALERT_TEST_ID}
@@ -43,4 +50,4 @@
   );
 };
 
 export default BannerAlert;

app/component-library/components/Banners/Banner/variants/BannerTip/BannerTip.tsx

@@ -17,6 +17,12 @@
   BANNERTIP_TEST_ID,
 } from './BannerTip.constants';
 
+/**
+ * @deprecated This component is unused and will be removed.
+ * Please use `BannerBase` from `@metamask/design-system-react-native` instead.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerBase/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BannerTip: React.FC<BannerTipProps> = ({
   style,
   logoType = DEFAULT_BANNERTIP_LOGOTYPE,
@@ -35,7 +41,7 @@
   );
 
   return (
     <BannerBase
       style={styles.base}
       startAccessory={foxLogo}
       testID={BANNERTIP_TEST_ID}
@@ -44,4 +50,4 @@
   );
 };
 
 export default BannerTip;

app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx

@@ -31,6 +31,12 @@
   BottomSheetDialogRef,
 } from './foundation/BottomSheetDialog';
 
+/**
+ * @deprecated Please update your code to use `BottomSheet` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BottomSheet/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
   (
     {
@@ -149,7 +155,7 @@
             isInteractable && bottomSheetDialogRef.current?.onCloseDialog();
           }}
         />
         <BottomSheetDialog
           isInteractable={isInteractable}
           onClose={onCloseCB}
           onOpen={onOpenCB}
@@ -159,10 +165,10 @@
           keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}
         >
           {children}
         </BottomSheetDialog>
       </KeyboardAvoidingView>
     );
   },
 );
 
 export default BottomSheet;

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx

@@ -47,6 +47,12 @@
   BottomSheetDialogProps,
 } from './BottomSheetDialog.types';
 
+/**
+ * @deprecated Please update your code to use `BottomSheetDialog` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BottomSheetDialog/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BottomSheetDialog = forwardRef<
   BottomSheetDialogRef,
   BottomSheetDialogProps
@@ -257,4 +263,4 @@
   },
 );
 
 export default BottomSheetDialog;

app/component-library/components/Icons/Icon/Icon.tsx

@@ -16,6 +16,7 @@ import { DEFAULT_ICON_SIZE, DEFAULT_ICON_COLOR } from './Icon.constants';
  * @deprecated Please update your code to use `Icon` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Icon/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md Migration docs}
  */
 const Icon = ({
   size = DEFAULT_ICON_SIZE,

app/component-library/components/List/ListItem/ListItem.tsx

@@ -16,6 +16,12 @@
   TESTID_LISTITEM_GAP,
 } from './ListItem.constants';
 
+/**
+ * @deprecated Please update your code to use `ListItem` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ListItem/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const ListItem: React.FC<ListItemProps> = ({
   style,
   children,
@@ -60,4 +66,4 @@
   );
 };
 
 export default ListItem;

app/component-library/components/Texts/Text/Text.tsx

@@ -16,6 +16,7 @@ import { DEFAULT_TEXT_COLOR, DEFAULT_TEXT_VARIANT } from './Text.constants';
  * @deprecated Please update your code to use `Text` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Text/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md Migration docs}
  */
 const Text: React.FC<TextProps> = ({
   variant = DEFAULT_TEXT_VARIANT,

app/components/UI/Bridge/components/InputStepper/index.tsx

@@ -4,6 +4,7 @@ import Input from '../../../../../component-library/components/Form/TextField/fo
 import {
   ButtonIcon,
   ButtonIconSize,
+  ButtonIconVariant,
   IconColor,
   IconName,
   Text,
@@ -42,7 +43,7 @@ export const InputStepper = ({
         <ButtonIcon
           size={ButtonIconSize.Lg}
           iconName={IconName.Minus}
-          isFloating
+          variant={ButtonIconVariant.Floating}
           style={tw.style(minusPressed ? 'bg-muted-pressed' : 'bg-muted')}
           iconProps={{ color: IconColor.IconDefault }}
           onPressIn={() => setMinusPressed(true)}
@@ -72,7 +73,7 @@ export const InputStepper = ({
         <ButtonIcon
           size={ButtonIconSize.Lg}
           iconName={IconName.Add}
-          isFloating
+          variant={ButtonIconVariant.Floating}
           style={tw.style(plusPressed ? 'bg-muted-pressed' : 'bg-muted')}
           iconProps={{ color: IconColor.IconDefault }}
           onPressIn={() => setPlusPressed(true)}

app/components/Views/Login/__snapshots__/index.test.tsx.snap

@@ -153,6 +153,9 @@ exports[`Login renders matching snapshot 1`] = `
                   "letterSpacing": 0,
                   "lineHeight": 24,
                 },
+                {
+                  "lineHeight": 0,
+                },
                 {
                   "textAlignVertical": "center",
                 },

app/components/Views/ManualBackupStep1/__snapshots__/index.test.tsx.snap

@@ -539,7 +539,7 @@ exports[`ManualBackupStep1 matches snapshot 1`] = `
                   "text-body-md",
                   "font-default-medium",
                   "text-default",
-                  "shrink grow-0 flex-wrap text-center  text-primary-inverse",
+                  "shrink grow-0 flex-wrap text-center  text-primary-inverse ",
                 ],
                 undefined,
               ]
@@ -1094,7 +1094,7 @@ exports[`ManualBackupStep1 theme appearance renders with dark theme 1`] = `
                   "text-body-md",
                   "font-default-medium",
                   "text-default",
-                  "shrink grow-0 flex-wrap text-center  text-primary-inverse",
+                  "shrink grow-0 flex-wrap text-center  text-primary-inverse ",
                 ],
                 undefined,
               ]
@@ -1649,7 +1649,7 @@ exports[`ManualBackupStep1 theme appearance renders with light theme on Android
                   "text-body-md",
                   "font-default-medium",
                   "text-default",
-                  "shrink grow-0 flex-wrap text-center  text-primary-inverse",
+                  "shrink grow-0 flex-wrap text-center  text-primary-inverse ",
                 ],
                 undefined,
               ]

app/components/Views/ManualBackupStep1/index.tsx

@@ -83,7 +83,7 @@ const ManualBackupStep1 = () => {
   );
 
   const [seedPhraseHidden, setSeedPhraseHidden] = useState(true);
-  const [password, setPassword] = useState<string | undefined>(undefined);
+  const [password, setPassword] = useState('');
   const [warningIncorrectPassword, setWarningIncorrectPassword] = useState<
     string | undefined
   >(undefined);

app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx

@@ -269,7 +269,7 @@
 
   const renderWarning = () => (
     <Box testID={RevealSeedViewSelectorsIDs.SEED_PHRASE_WARNING_ID}>
       <Banner
         variant={BannerVariant.Alert}
         severity={BannerAlertSeverity.Error}
         title={
@@ -335,6 +335,7 @@
         ) : (
           <Box twClassName="p-5 pb-0">
             <PasswordEntry
+              password={password}
               onPasswordChange={setPassword}
               onSubmit={tryUnlock}
               warningMessage={warningIncorrectPassword}

app/components/Views/RevealPrivateCredential/components/PasswordEntry.tsx

@@ -16,6 +16,7 @@ import { PasswordEntryProps } from '../types';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 
 const PasswordEntry = ({
+  password,
   onPasswordChange,
   onSubmit,
   warningMessage,
@@ -36,6 +37,7 @@ const PasswordEntry = ({
         {strings('reveal_credential.enter_password')}
       </Text>
       <TextField
+        value={password}
         placeholder={'Password'}
         placeholderTextColor={colors.text.muted}
         onChangeText={onPasswordChange}

app/components/Views/RevealPrivateCredential/types.ts

@@ -49,6 +49,7 @@ export interface SeedPhraseConcealerProps {
 }
 
 export interface PasswordEntryProps {
+  password: string;
   onPasswordChange: (password: string) => void;
   onSubmit: () => void;
   warningMessage: string;

package.json

@@ -226,7 +226,7 @@
     "@metamask/core-backend": "^6.2.0",
     "@metamask/delegation-controller": "^2.0.2",
     "@metamask/delegation-deployments": "^0.15.0",
-    "@metamask/design-system-react-native": "^0.10.0",
+    "@metamask/design-system-react-native": "^0.11.0",
     "@metamask/design-system-twrnc-preset": "^0.3.0",
     "@metamask/design-tokens": "^8.2.2",
     "@metamask/earn-controller": "^10.0.0",

yarn.lock

@@ -8135,11 +8135,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/design-system-react-native@npm:^0.10.0":
-  version: 0.10.0
-  resolution: "@metamask/design-system-react-native@npm:0.10.0"
+"@metamask/design-system-react-native@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@metamask/design-system-react-native@npm:0.11.0"
   dependencies:
-    "@metamask/design-system-shared": "npm:^0.3.0"
+    "@metamask/design-system-shared": "npm:^0.4.0"
     fast-text-encoding: "npm:^1.0.6"
     react-native-jazzicon: "npm:^0.1.2"
   peerDependencies:
@@ -8152,16 +8152,16 @@ __metadata:
     react-native-gesture-handler: ">=1.10.3"
     react-native-reanimated: ">=3.3.0"
     react-native-safe-area-context: ">=4.0.0"
-  checksum: 10/4b105db890392d9f363ad5a573249980a621a3edb6e6d371cef8e78f8ade378d98c24a1f4d814c815a4f8e30e2978a8c69571f61e9b0983289d1c08e28f02da2
+  checksum: 10/d30aa86379138b689a821af25f7c56a8a4dbaaa3378ce4daf668122babfd0c254b8ea319a9b2e9202f2c58d86caca2eb6b888f13e063e83100da4136bad0b378
   languageName: node
   linkType: hard
 
-"@metamask/design-system-shared@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "@metamask/design-system-shared@npm:0.3.0"
+"@metamask/design-system-shared@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@metamask/design-system-shared@npm:0.4.0"
   dependencies:
     "@metamask/utils": "npm:^11.10.0"
-  checksum: 10/2be032b91b10d03ca4e02ba9ff5afc9db763fb865161add83a7e28ef83f165cc3c3edba03f5d600ec95e3014afd0077abcadd75e613792e77c709760813ff749
+  checksum: 10/e7799c011360295b6ae1cb458cd069e2df2ce27e836a6c604c3f2488ef7b76d00709afadc5c9462e47cb81a379751fd9da8684dcc704244e180870aa293cdd2b
   languageName: node
   linkType: hard
 
@@ -35536,7 +35536,7 @@ __metadata:
     "@metamask/core-backend": "npm:^6.2.0"
     "@metamask/delegation-controller": "npm:^2.0.2"
     "@metamask/delegation-deployments": "npm:^0.15.0"
-    "@metamask/design-system-react-native": "npm:^0.10.0"
+    "@metamask/design-system-react-native": "npm:^0.11.0"
     "@metamask/design-system-twrnc-preset": "npm:^0.3.0"
     "@metamask/design-tokens": "npm:^8.2.2"
     "@metamask/earn-controller": "npm:^10.0.0"