@metamask/design-system-react-native 0.37.0 → 0.38.1

package/CHANGELOG.md

@@ -7,6 +7,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.38.1]
+
+### Changed
+
+- Removed bottom border from `BottomSheet` to align with updated Figma designs ([#1413](https://github.com/MetaMask/metamask-design-system/pull/1413))
+
+## [0.38.0]
+
+### Added
+
+- Added `KeyValueSelect` for pressable key/value rows with a non-interactive `SelectButton` value (opens a picker or bottom sheet via `onPress`) ([#1410](https://github.com/MetaMask/metamask-design-system/pull/1410))
+- Added `HelpText` for field-level helper and validation copy with optional `HelpTextSeverity` coloring ([#1405](https://github.com/MetaMask/metamask-design-system/pull/1405))
+- Added `showIcon` to `HelpText` (default `false`) to render a leading `IconAlert` when `severity` is set ([#1409](https://github.com/MetaMask/metamask-design-system/pull/1409))
+- Added `isHidden` / `length` support on string slots for `Content`, `ListItem`, `TitleHub`, and `KeyValueRow` via `SensitiveText` (e.g. `valueProps`, `amountProps`, `valueTextProps`) ([#1406](https://github.com/MetaMask/metamask-design-system/pull/1406))
+
+### Changed
+
+- **BREAKING:** `KeyValueRow` now defaults to `px-4` (16px) horizontal padding so rows align with other full-width list surfaces without a parent padding wrapper ([#1410](https://github.com/MetaMask/metamask-design-system/pull/1410))
+  - Call sites that already wrap rows in `px-4` / `paddingHorizontal={4}` will double-pad unless that wrapper padding is removed
+  - Flush rows can override with `twClassName="px-0"`
+  - See [Migration Guide](./MIGRATION.md#from-version-0370-to-0380)
+- Updated `BannerBase` spacing (conditional bottom/right padding and title/description gap) to match Figma; inherited by `BannerAlert` and `Toast` ([#1393](https://github.com/MetaMask/metamask-design-system/pull/1393))
+
+### Fixed
+
+- Fixed `Slider` thumb rewind on rapid taps and fast pans ([#1397](https://github.com/MetaMask/metamask-design-system/pull/1397))
+- Fixed `Content` description stretching the end accessory when the description wraps ([#1404](https://github.com/MetaMask/metamask-design-system/pull/1404))
+
 ## [0.37.0]
 
 ### Changed
@@ -621,7 +649,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - React Native integration with TWRNC preset support
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.37.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.38.1...HEAD
+[0.38.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.38.0...@metamask/design-system-react-native@0.38.1
+[0.38.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.37.0...@metamask/design-system-react-native@0.38.0
 [0.37.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.36.0...@metamask/design-system-react-native@0.37.0
 [0.36.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.35.0...@metamask/design-system-react-native@0.36.0
 [0.35.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.34.0...@metamask/design-system-react-native@0.35.0

package/dist/components/BannerBase/BannerBase.cjs

@@ -18,10 +18,11 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
     const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnPress);
     const isActionButtonLayoutEnd = actionButtonLayout === design_system_shared_1.BannerBaseActionButtonLayout.End;
+    const hasActionButtonBelow = shouldShowActionButton && !isActionButtonLayoutEnd;
     const actionButton = shouldShowActionButton ? (<Button_1.Button size={design_system_shared_1.ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps} variant={design_system_shared_1.ButtonVariant.Secondary}>
       {actionButtonLabel}
     </Button_1.Button>) : null;
-    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={design_system_shared_1.BoxAlignItems.Start} gap={4} backgroundColor={design_system_shared_1.BoxBackgroundColor.BackgroundDefault} paddingVertical={3} paddingHorizontal={4} twClassName={(0, design_system_shared_1.mergeTwClassName)('rounded-xl', twClassName)} {...props}>
+    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={design_system_shared_1.BoxAlignItems.Start} gap={4} backgroundColor={design_system_shared_1.BoxBackgroundColor.BackgroundDefault} paddingTop={3} paddingBottom={hasActionButtonBelow ? 4 : 3} paddingLeft={4} paddingRight={shouldShowCloseButton ? 2 : 4} twClassName={(0, design_system_shared_1.mergeTwClassName)('rounded-xl', twClassName)} {...props}>
       {startAccessory}
 
       <Box_1.Box twClassName="flex-1">
@@ -30,7 +31,7 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
               {title}
             </Text_1.Text>) : (title))}
 
-        {hasContent(description) && (<Box_1.Box>
+        {hasContent(description) && (<Box_1.Box twClassName={hasContent(title) ? 'mt-0.5' : undefined}>
             {isTextContent(description) ? (<Text_1.Text variant={design_system_shared_1.TextVariant.BodySm} {...descriptionProps}>
                 {description}
               </Text_1.Text>) : (description)}
@@ -41,7 +42,7 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
               {children}
             </Text_1.Text>) : (children))}
 
-        {shouldShowActionButton && !isActionButtonLayoutEnd && (<Box_1.Box twClassName="mt-2">{actionButton}</Box_1.Box>)}
+        {hasActionButtonBelow && <Box_1.Box twClassName="mt-2">{actionButton}</Box_1.Box>}
       </Box_1.Box>
 
       {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}

package/dist/components/BannerBase/BannerBase.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BannerBaseActionButtonLayout,\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  ButtonVariant,\n  FontWeight,\n  IconName,\n  mergeTwClassName,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  actionButtonLayout = BannerBaseActionButtonLayout.Below,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n  const isActionButtonLayoutEnd =\n    actionButtonLayout === BannerBaseActionButtonLayout.End;\n\n  const actionButton = shouldShowActionButton ? (\n    <Button\n      size={ButtonSize.Md}\n      onPress={actionButtonOnPress}\n      {...resolvedActionButtonProps}\n      variant={ButtonVariant.Secondary}\n    >\n      {actionButtonLabel}\n    </Button>\n  ) : null;\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={4}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      paddingVertical={3}\n      paddingHorizontal={4}\n      twClassName={mergeTwClassName('rounded-xl', twClassName)}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {shouldShowActionButton && !isActionButtonLayoutEnd && (\n          <Box twClassName=\"mt-2\">{actionButton}</Box>\n        )}\n      </Box>\n\n      {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Md}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={onClose}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}
+{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BannerBaseActionButtonLayout,\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  ButtonVariant,\n  FontWeight,\n  IconName,\n  mergeTwClassName,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  actionButtonLayout = BannerBaseActionButtonLayout.Below,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n  const isActionButtonLayoutEnd =\n    actionButtonLayout === BannerBaseActionButtonLayout.End;\n  const hasActionButtonBelow =\n    shouldShowActionButton && !isActionButtonLayoutEnd;\n\n  const actionButton = shouldShowActionButton ? (\n    <Button\n      size={ButtonSize.Md}\n      onPress={actionButtonOnPress}\n      {...resolvedActionButtonProps}\n      variant={ButtonVariant.Secondary}\n    >\n      {actionButtonLabel}\n    </Button>\n  ) : null;\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={4}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      paddingTop={3}\n      paddingBottom={hasActionButtonBelow ? 4 : 3}\n      paddingLeft={4}\n      paddingRight={shouldShowCloseButton ? 2 : 4}\n      twClassName={mergeTwClassName('rounded-xl', twClassName)}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box twClassName={hasContent(title) ? 'mt-0.5' : undefined}>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {hasActionButtonBelow && <Box twClassName=\"mt-2\">{actionButton}</Box>}\n      </Box>\n\n      {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Md}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={onClose}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}

package/dist/components/BannerBase/BannerBase.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4GhD,CAAC"}
+{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8GhD,CAAC"}

package/dist/components/BannerBase/BannerBase.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4GhD,CAAC"}
+{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8GhD,CAAC"}

package/dist/components/BannerBase/BannerBase.mjs

@@ -19,10 +19,11 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
     const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnPress);
     const isActionButtonLayoutEnd = actionButtonLayout === BannerBaseActionButtonLayout.End;
+    const hasActionButtonBelow = shouldShowActionButton && !isActionButtonLayoutEnd;
     const actionButton = shouldShowActionButton ? (<Button size={ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps} variant={ButtonVariant.Secondary}>
       {actionButtonLabel}
     </Button>) : null;
-    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} gap={4} backgroundColor={BoxBackgroundColor.BackgroundDefault} paddingVertical={3} paddingHorizontal={4} twClassName={mergeTwClassName('rounded-xl', twClassName)} {...props}>
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} gap={4} backgroundColor={BoxBackgroundColor.BackgroundDefault} paddingTop={3} paddingBottom={hasActionButtonBelow ? 4 : 3} paddingLeft={4} paddingRight={shouldShowCloseButton ? 2 : 4} twClassName={mergeTwClassName('rounded-xl', twClassName)} {...props}>
       {startAccessory}
 
       <Box twClassName="flex-1">
@@ -31,7 +32,7 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
               {title}
             </Text>) : (title))}
 
-        {hasContent(description) && (<Box>
+        {hasContent(description) && (<Box twClassName={hasContent(title) ? 'mt-0.5' : undefined}>
             {isTextContent(description) ? (<Text variant={TextVariant.BodySm} {...descriptionProps}>
                 {description}
               </Text>) : (description)}
@@ -42,7 +43,7 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
               {children}
             </Text>) : (children))}
 
-        {shouldShowActionButton && !isActionButtonLayoutEnd && (<Box twClassName="mt-2">{actionButton}</Box>)}
+        {hasActionButtonBelow && <Box twClassName="mt-2">{actionButton}</Box>}
       </Box>
 
       {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}

package/dist/components/BannerBase/BannerBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BannerBaseActionButtonLayout,\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  ButtonVariant,\n  FontWeight,\n  IconName,\n  mergeTwClassName,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  actionButtonLayout = BannerBaseActionButtonLayout.Below,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n  const isActionButtonLayoutEnd =\n    actionButtonLayout === BannerBaseActionButtonLayout.End;\n\n  const actionButton = shouldShowActionButton ? (\n    <Button\n      size={ButtonSize.Md}\n      onPress={actionButtonOnPress}\n      {...resolvedActionButtonProps}\n      variant={ButtonVariant.Secondary}\n    >\n      {actionButtonLabel}\n    </Button>\n  ) : null;\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={4}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      paddingVertical={3}\n      paddingHorizontal={4}\n      twClassName={mergeTwClassName('rounded-xl', twClassName)}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {shouldShowActionButton && !isActionButtonLayoutEnd && (\n          <Box twClassName=\"mt-2\">{actionButton}</Box>\n        )}\n      </Box>\n\n      {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Md}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={onClose}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}
+{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BannerBaseActionButtonLayout,\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  ButtonVariant,\n  FontWeight,\n  IconName,\n  mergeTwClassName,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  actionButtonLayout = BannerBaseActionButtonLayout.Below,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n  const isActionButtonLayoutEnd =\n    actionButtonLayout === BannerBaseActionButtonLayout.End;\n  const hasActionButtonBelow =\n    shouldShowActionButton && !isActionButtonLayoutEnd;\n\n  const actionButton = shouldShowActionButton ? (\n    <Button\n      size={ButtonSize.Md}\n      onPress={actionButtonOnPress}\n      {...resolvedActionButtonProps}\n      variant={ButtonVariant.Secondary}\n    >\n      {actionButtonLabel}\n    </Button>\n  ) : null;\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={4}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      paddingTop={3}\n      paddingBottom={hasActionButtonBelow ? 4 : 3}\n      paddingLeft={4}\n      paddingRight={shouldShowCloseButton ? 2 : 4}\n      twClassName={mergeTwClassName('rounded-xl', twClassName)}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box twClassName={hasContent(title) ? 'mt-0.5' : undefined}>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {hasActionButtonBelow && <Box twClassName=\"mt-2\">{actionButton}</Box>}\n      </Box>\n\n      {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Md}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={onClose}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}

package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs

@@ -189,7 +189,7 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
         ],
     }), []);
     const sheetStyle = (0, react_1.useMemo)(() => [
-        tw.style(isPureBlack ? 'bg-alternative' : 'bg-default', 'rounded-t-3xl overflow-hidden border border-muted', twClassName),
+        tw.style(isPureBlack ? 'bg-alternative' : 'bg-default', 'rounded-t-3xl overflow-hidden border border-muted border-b-0', twClassName),
         {
             maxHeight: maxSheetHeight,
             paddingBottom: react_native_1.Platform.select({

package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  usePureBlack,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { lightTheme, resolveDarkTheme } from '@metamask/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\nimport { scheduleOnRN } from 'react-native-worklets';\n\n// Internal dependencies.\nimport {\n  DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n  DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n  DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n  BottomSheetDialogRef,\n  BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n  BottomSheetDialogRef,\n  BottomSheetDialogProps\n>(\n  (\n    {\n      children,\n      isFullscreen = false,\n      isInteractable = true,\n      keyboardAvoidingViewEnabled = true,\n      onClose,\n      onOpen,\n      style,\n      twClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const currentTheme = useTheme();\n    const isPureBlack = usePureBlack();\n    const shadowLg =\n      currentTheme === Theme.Light\n        ? lightTheme.shadows.size.lg\n        : resolveDarkTheme(isPureBlack).shadows.size.lg;\n\n    const { top: screenTopPadding, bottom: screenBottomPadding } =\n      useSafeAreaInsets();\n    const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n    const maxSheetHeight = screenHeight - screenTopPadding;\n    // X and Y values start on top left of the DIALOG\n    // currentYOffset will be used to animate the Y position of the Dialog\n    const currentYOffset = useSharedValue(screenHeight);\n    const topOfDialogYValue = useSharedValue(0);\n    const bottomOfDialogYValue = useSharedValue(screenHeight);\n    const gestureStartYOffset = useSharedValue(0);\n    const isMounted = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      onOpen?.();\n    }, [onOpen]);\n    const onCloseCB = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    const onCloseDialog = useCallback(\n      (callback?: () => void) => {\n        currentYOffset.value = withTiming(\n          bottomOfDialogYValue.value,\n          { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n          () => {\n            scheduleOnRN(onCloseCB);\n            if (callback) {\n              scheduleOnRN(callback);\n            }\n          },\n        );\n        // Ref values do not affect deps.\n      },\n      [onCloseCB],\n    );\n\n    const gestureHandler = useMemo(() => {\n      // These gesture callbacks need explicit 'worklet' directives because this\n      // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the\n      // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).\n      // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's\n      // why useAnimatedStyle below works), but its gesture auto-detection doesn't\n      // recognize that compiled namespaced form, so without these directives the\n      // callbacks run on the JS thread and slow drags lag behind the finger.\n      const gesture = Gesture.Pan()\n        .enabled(isInteractable)\n        .onStart(() => {\n          'worklet';\n\n          // Starts tracking vertical position of gesture.\n          gestureStartYOffset.value = currentYOffset.value;\n        })\n        .onUpdate((event) => {\n          'worklet';\n\n          const { translationY } = event;\n          currentYOffset.value = gestureStartYOffset.value + translationY;\n          // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n          // which means the gesture is currently below the bottom of the dialog,\n          // sets it to bottom of Dialog Y value\n          if (currentYOffset.value >= bottomOfDialogYValue.value) {\n            currentYOffset.value = bottomOfDialogYValue.value;\n          }\n          // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n          // which means the gesture is currently above the top of the dialog,\n          // sets it to top of Dialog Y value\n          if (currentYOffset.value <= topOfDialogYValue.value) {\n            currentYOffset.value = topOfDialogYValue.value;\n          }\n        })\n        .onEnd((event) => {\n          'worklet';\n\n          const { translationY, velocityY } = event;\n          // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n          let finalYOffset: number;\n          // Measuring dismissing swipe action\n          const latestOffset = gestureStartYOffset.value + translationY;\n          // Check if the swipe distance reach the dismiss offset threshold,\n          // which is currently 60% of sheet height\n          const hasReachedDismissOffset =\n            latestOffset >\n            bottomOfDialogYValue.value *\n              DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n          // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n          const hasReachedSwipeThreshold =\n            Math.abs(velocityY) >\n            DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n          const isQuickDismissing = velocityY > 0;\n\n          // If user is swiping\n          if (hasReachedSwipeThreshold) {\n            // Quick swipe takes priority\n            if (isQuickDismissing) {\n              finalYOffset = bottomOfDialogYValue.value;\n            } else {\n              finalYOffset = topOfDialogYValue.value;\n            }\n          } else if (hasReachedDismissOffset) {\n            finalYOffset = bottomOfDialogYValue.value;\n          } else {\n            finalYOffset = topOfDialogYValue.value;\n          }\n\n          const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n          if (isDismissed) {\n            scheduleOnRN(onCloseDialog);\n          } else {\n            // Only animate dialog to a certain Y position instead\n            currentYOffset.value = withTiming(finalYOffset, {\n              duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n            });\n          }\n        });\n\n      return gesture;\n    }, [\n      isInteractable,\n      currentYOffset,\n      gestureStartYOffset,\n      bottomOfDialogYValue,\n      topOfDialogYValue,\n      onCloseDialog,\n    ]);\n\n    // Animate in sheet on initial render.\n    const onOpenDialog = (callback?: () => void) => {\n      // Starts setting the Y position of the dialog to the bottom of the dialog\n      currentYOffset.value = bottomOfDialogYValue.value;\n      // Animate the Y position to the top of the dialog, then call onOpenCB\n      currentYOffset.value = withTiming(\n        topOfDialogYValue.value,\n        {\n          duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n        },\n        () => {\n          scheduleOnRN(onOpenCB);\n          if (callback) {\n            scheduleOnRN(callback);\n          }\n        },\n      );\n    };\n\n    const onDebouncedCloseDialog = useMemo(\n      // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n      () => debounce(onCloseDialog, 2000, { leading: true }),\n      [onCloseDialog],\n    );\n\n    useEffect(\n      () =>\n        // Automatically handles animation when content changes\n        // Disable for now since network switches causes the screen to hang with this on.\n        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n        onDebouncedCloseDialog.cancel(),\n      [children, onDebouncedCloseDialog],\n    );\n\n    const updateSheetHeight = (e: LayoutChangeEvent) => {\n      const { height } = e.nativeEvent.layout;\n      bottomOfDialogYValue.value = height;\n\n      if (!isMounted.current) {\n        isMounted.current = true;\n        onOpenDialog();\n      }\n    };\n\n    const animatedSheetStyle = useAnimatedStyle(\n      () => ({\n        transform: [\n          {\n            translateY: currentYOffset.value,\n          },\n        ],\n      }),\n      [],\n    );\n\n    const sheetStyle = useMemo(\n      () => [\n        tw.style(\n          isPureBlack ? 'bg-alternative' : 'bg-default',\n          'rounded-t-3xl overflow-hidden border border-muted',\n          twClassName,\n        ),\n        {\n          maxHeight: maxSheetHeight,\n          paddingBottom: Platform.select({\n            ios: screenBottomPadding,\n            macos: screenBottomPadding,\n            default: screenBottomPadding + 16,\n          }),\n          ...(isFullscreen && { height: maxSheetHeight }),\n          ...shadowLg,\n        },\n        style,\n      ],\n\n      [\n        tw,\n        isPureBlack,\n        maxSheetHeight,\n        screenBottomPadding,\n        isFullscreen,\n        shadowLg,\n        style,\n        twClassName,\n      ],\n    );\n\n    const combinedSheetStyle = useMemo(\n      () => [...sheetStyle, animatedSheetStyle],\n\n      [sheetStyle],\n    );\n\n    useImperativeHandle(ref, () => ({\n      onOpenDialog,\n      onCloseDialog,\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        style={tw.style('absolute bottom-0 inset-x-0')}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <GestureDetector gesture={gestureHandler}>\n          <Animated.View\n            onLayout={updateSheetHeight}\n            style={combinedSheetStyle}\n          >\n            {isInteractable && (\n              <View style={tw.style('self-stretch items-center p-1')}>\n                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n              </View>\n            )}\n            {children}\n          </Animated.View>\n        </GestureDetector>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n"]}
+{"version":3,"file":"BottomSheetDialog.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  usePureBlack,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { lightTheme, resolveDarkTheme } from '@metamask/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\nimport { scheduleOnRN } from 'react-native-worklets';\n\n// Internal dependencies.\nimport {\n  DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n  DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n  DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n  BottomSheetDialogRef,\n  BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n  BottomSheetDialogRef,\n  BottomSheetDialogProps\n>(\n  (\n    {\n      children,\n      isFullscreen = false,\n      isInteractable = true,\n      keyboardAvoidingViewEnabled = true,\n      onClose,\n      onOpen,\n      style,\n      twClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const currentTheme = useTheme();\n    const isPureBlack = usePureBlack();\n    const shadowLg =\n      currentTheme === Theme.Light\n        ? lightTheme.shadows.size.lg\n        : resolveDarkTheme(isPureBlack).shadows.size.lg;\n\n    const { top: screenTopPadding, bottom: screenBottomPadding } =\n      useSafeAreaInsets();\n    const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n    const maxSheetHeight = screenHeight - screenTopPadding;\n    // X and Y values start on top left of the DIALOG\n    // currentYOffset will be used to animate the Y position of the Dialog\n    const currentYOffset = useSharedValue(screenHeight);\n    const topOfDialogYValue = useSharedValue(0);\n    const bottomOfDialogYValue = useSharedValue(screenHeight);\n    const gestureStartYOffset = useSharedValue(0);\n    const isMounted = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      onOpen?.();\n    }, [onOpen]);\n    const onCloseCB = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    const onCloseDialog = useCallback(\n      (callback?: () => void) => {\n        currentYOffset.value = withTiming(\n          bottomOfDialogYValue.value,\n          { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n          () => {\n            scheduleOnRN(onCloseCB);\n            if (callback) {\n              scheduleOnRN(callback);\n            }\n          },\n        );\n        // Ref values do not affect deps.\n      },\n      [onCloseCB],\n    );\n\n    const gestureHandler = useMemo(() => {\n      // These gesture callbacks need explicit 'worklet' directives because this\n      // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the\n      // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).\n      // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's\n      // why useAnimatedStyle below works), but its gesture auto-detection doesn't\n      // recognize that compiled namespaced form, so without these directives the\n      // callbacks run on the JS thread and slow drags lag behind the finger.\n      const gesture = Gesture.Pan()\n        .enabled(isInteractable)\n        .onStart(() => {\n          'worklet';\n\n          // Starts tracking vertical position of gesture.\n          gestureStartYOffset.value = currentYOffset.value;\n        })\n        .onUpdate((event) => {\n          'worklet';\n\n          const { translationY } = event;\n          currentYOffset.value = gestureStartYOffset.value + translationY;\n          // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n          // which means the gesture is currently below the bottom of the dialog,\n          // sets it to bottom of Dialog Y value\n          if (currentYOffset.value >= bottomOfDialogYValue.value) {\n            currentYOffset.value = bottomOfDialogYValue.value;\n          }\n          // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n          // which means the gesture is currently above the top of the dialog,\n          // sets it to top of Dialog Y value\n          if (currentYOffset.value <= topOfDialogYValue.value) {\n            currentYOffset.value = topOfDialogYValue.value;\n          }\n        })\n        .onEnd((event) => {\n          'worklet';\n\n          const { translationY, velocityY } = event;\n          // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n          let finalYOffset: number;\n          // Measuring dismissing swipe action\n          const latestOffset = gestureStartYOffset.value + translationY;\n          // Check if the swipe distance reach the dismiss offset threshold,\n          // which is currently 60% of sheet height\n          const hasReachedDismissOffset =\n            latestOffset >\n            bottomOfDialogYValue.value *\n              DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n          // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n          const hasReachedSwipeThreshold =\n            Math.abs(velocityY) >\n            DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n          const isQuickDismissing = velocityY > 0;\n\n          // If user is swiping\n          if (hasReachedSwipeThreshold) {\n            // Quick swipe takes priority\n            if (isQuickDismissing) {\n              finalYOffset = bottomOfDialogYValue.value;\n            } else {\n              finalYOffset = topOfDialogYValue.value;\n            }\n          } else if (hasReachedDismissOffset) {\n            finalYOffset = bottomOfDialogYValue.value;\n          } else {\n            finalYOffset = topOfDialogYValue.value;\n          }\n\n          const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n          if (isDismissed) {\n            scheduleOnRN(onCloseDialog);\n          } else {\n            // Only animate dialog to a certain Y position instead\n            currentYOffset.value = withTiming(finalYOffset, {\n              duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n            });\n          }\n        });\n\n      return gesture;\n    }, [\n      isInteractable,\n      currentYOffset,\n      gestureStartYOffset,\n      bottomOfDialogYValue,\n      topOfDialogYValue,\n      onCloseDialog,\n    ]);\n\n    // Animate in sheet on initial render.\n    const onOpenDialog = (callback?: () => void) => {\n      // Starts setting the Y position of the dialog to the bottom of the dialog\n      currentYOffset.value = bottomOfDialogYValue.value;\n      // Animate the Y position to the top of the dialog, then call onOpenCB\n      currentYOffset.value = withTiming(\n        topOfDialogYValue.value,\n        {\n          duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n        },\n        () => {\n          scheduleOnRN(onOpenCB);\n          if (callback) {\n            scheduleOnRN(callback);\n          }\n        },\n      );\n    };\n\n    const onDebouncedCloseDialog = useMemo(\n      // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n      () => debounce(onCloseDialog, 2000, { leading: true }),\n      [onCloseDialog],\n    );\n\n    useEffect(\n      () =>\n        // Automatically handles animation when content changes\n        // Disable for now since network switches causes the screen to hang with this on.\n        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n        onDebouncedCloseDialog.cancel(),\n      [children, onDebouncedCloseDialog],\n    );\n\n    const updateSheetHeight = (e: LayoutChangeEvent) => {\n      const { height } = e.nativeEvent.layout;\n      bottomOfDialogYValue.value = height;\n\n      if (!isMounted.current) {\n        isMounted.current = true;\n        onOpenDialog();\n      }\n    };\n\n    const animatedSheetStyle = useAnimatedStyle(\n      () => ({\n        transform: [\n          {\n            translateY: currentYOffset.value,\n          },\n        ],\n      }),\n      [],\n    );\n\n    const sheetStyle = useMemo(\n      () => [\n        tw.style(\n          isPureBlack ? 'bg-alternative' : 'bg-default',\n          'rounded-t-3xl overflow-hidden border border-muted border-b-0',\n          twClassName,\n        ),\n        {\n          maxHeight: maxSheetHeight,\n          paddingBottom: Platform.select({\n            ios: screenBottomPadding,\n            macos: screenBottomPadding,\n            default: screenBottomPadding + 16,\n          }),\n          ...(isFullscreen && { height: maxSheetHeight }),\n          ...shadowLg,\n        },\n        style,\n      ],\n\n      [\n        tw,\n        isPureBlack,\n        maxSheetHeight,\n        screenBottomPadding,\n        isFullscreen,\n        shadowLg,\n        style,\n        twClassName,\n      ],\n    );\n\n    const combinedSheetStyle = useMemo(\n      () => [...sheetStyle, animatedSheetStyle],\n\n      [sheetStyle],\n    );\n\n    useImperativeHandle(ref, () => ({\n      onOpenDialog,\n      onCloseDialog,\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        style={tw.style('absolute bottom-0 inset-x-0')}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <GestureDetector gesture={gestureHandler}>\n          <Animated.View\n            onLayout={updateSheetHeight}\n            style={combinedSheetStyle}\n          >\n            {isInteractable && (\n              <View style={tw.style('self-stretch items-center p-1')}>\n                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n              </View>\n            )}\n            {children}\n          </Animated.View>\n        </GestureDetector>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n"]}

package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs

@@ -171,7 +171,7 @@ export const BottomSheetDialog = forwardRef(({ children, isFullscreen = false, i
         ],
     }), []);
     const sheetStyle = useMemo(() => [
-        tw.style(isPureBlack ? 'bg-alternative' : 'bg-default', 'rounded-t-3xl overflow-hidden border border-muted', twClassName),
+        tw.style(isPureBlack ? 'bg-alternative' : 'bg-default', 'rounded-t-3xl overflow-hidden border border-muted border-b-0', twClassName),
         {
             maxHeight: maxSheetHeight,
             paddingBottom: Platform.select({

package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  usePureBlack,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { lightTheme, resolveDarkTheme } from '@metamask/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\nimport { scheduleOnRN } from 'react-native-worklets';\n\n// Internal dependencies.\nimport {\n  DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n  DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n  DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n  BottomSheetDialogRef,\n  BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n  BottomSheetDialogRef,\n  BottomSheetDialogProps\n>(\n  (\n    {\n      children,\n      isFullscreen = false,\n      isInteractable = true,\n      keyboardAvoidingViewEnabled = true,\n      onClose,\n      onOpen,\n      style,\n      twClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const currentTheme = useTheme();\n    const isPureBlack = usePureBlack();\n    const shadowLg =\n      currentTheme === Theme.Light\n        ? lightTheme.shadows.size.lg\n        : resolveDarkTheme(isPureBlack).shadows.size.lg;\n\n    const { top: screenTopPadding, bottom: screenBottomPadding } =\n      useSafeAreaInsets();\n    const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n    const maxSheetHeight = screenHeight - screenTopPadding;\n    // X and Y values start on top left of the DIALOG\n    // currentYOffset will be used to animate the Y position of the Dialog\n    const currentYOffset = useSharedValue(screenHeight);\n    const topOfDialogYValue = useSharedValue(0);\n    const bottomOfDialogYValue = useSharedValue(screenHeight);\n    const gestureStartYOffset = useSharedValue(0);\n    const isMounted = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      onOpen?.();\n    }, [onOpen]);\n    const onCloseCB = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    const onCloseDialog = useCallback(\n      (callback?: () => void) => {\n        currentYOffset.value = withTiming(\n          bottomOfDialogYValue.value,\n          { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n          () => {\n            scheduleOnRN(onCloseCB);\n            if (callback) {\n              scheduleOnRN(callback);\n            }\n          },\n        );\n        // Ref values do not affect deps.\n      },\n      [onCloseCB],\n    );\n\n    const gestureHandler = useMemo(() => {\n      // These gesture callbacks need explicit 'worklet' directives because this\n      // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the\n      // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).\n      // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's\n      // why useAnimatedStyle below works), but its gesture auto-detection doesn't\n      // recognize that compiled namespaced form, so without these directives the\n      // callbacks run on the JS thread and slow drags lag behind the finger.\n      const gesture = Gesture.Pan()\n        .enabled(isInteractable)\n        .onStart(() => {\n          'worklet';\n\n          // Starts tracking vertical position of gesture.\n          gestureStartYOffset.value = currentYOffset.value;\n        })\n        .onUpdate((event) => {\n          'worklet';\n\n          const { translationY } = event;\n          currentYOffset.value = gestureStartYOffset.value + translationY;\n          // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n          // which means the gesture is currently below the bottom of the dialog,\n          // sets it to bottom of Dialog Y value\n          if (currentYOffset.value >= bottomOfDialogYValue.value) {\n            currentYOffset.value = bottomOfDialogYValue.value;\n          }\n          // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n          // which means the gesture is currently above the top of the dialog,\n          // sets it to top of Dialog Y value\n          if (currentYOffset.value <= topOfDialogYValue.value) {\n            currentYOffset.value = topOfDialogYValue.value;\n          }\n        })\n        .onEnd((event) => {\n          'worklet';\n\n          const { translationY, velocityY } = event;\n          // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n          let finalYOffset: number;\n          // Measuring dismissing swipe action\n          const latestOffset = gestureStartYOffset.value + translationY;\n          // Check if the swipe distance reach the dismiss offset threshold,\n          // which is currently 60% of sheet height\n          const hasReachedDismissOffset =\n            latestOffset >\n            bottomOfDialogYValue.value *\n              DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n          // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n          const hasReachedSwipeThreshold =\n            Math.abs(velocityY) >\n            DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n          const isQuickDismissing = velocityY > 0;\n\n          // If user is swiping\n          if (hasReachedSwipeThreshold) {\n            // Quick swipe takes priority\n            if (isQuickDismissing) {\n              finalYOffset = bottomOfDialogYValue.value;\n            } else {\n              finalYOffset = topOfDialogYValue.value;\n            }\n          } else if (hasReachedDismissOffset) {\n            finalYOffset = bottomOfDialogYValue.value;\n          } else {\n            finalYOffset = topOfDialogYValue.value;\n          }\n\n          const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n          if (isDismissed) {\n            scheduleOnRN(onCloseDialog);\n          } else {\n            // Only animate dialog to a certain Y position instead\n            currentYOffset.value = withTiming(finalYOffset, {\n              duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n            });\n          }\n        });\n\n      return gesture;\n    }, [\n      isInteractable,\n      currentYOffset,\n      gestureStartYOffset,\n      bottomOfDialogYValue,\n      topOfDialogYValue,\n      onCloseDialog,\n    ]);\n\n    // Animate in sheet on initial render.\n    const onOpenDialog = (callback?: () => void) => {\n      // Starts setting the Y position of the dialog to the bottom of the dialog\n      currentYOffset.value = bottomOfDialogYValue.value;\n      // Animate the Y position to the top of the dialog, then call onOpenCB\n      currentYOffset.value = withTiming(\n        topOfDialogYValue.value,\n        {\n          duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n        },\n        () => {\n          scheduleOnRN(onOpenCB);\n          if (callback) {\n            scheduleOnRN(callback);\n          }\n        },\n      );\n    };\n\n    const onDebouncedCloseDialog = useMemo(\n      // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n      () => debounce(onCloseDialog, 2000, { leading: true }),\n      [onCloseDialog],\n    );\n\n    useEffect(\n      () =>\n        // Automatically handles animation when content changes\n        // Disable for now since network switches causes the screen to hang with this on.\n        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n        onDebouncedCloseDialog.cancel(),\n      [children, onDebouncedCloseDialog],\n    );\n\n    const updateSheetHeight = (e: LayoutChangeEvent) => {\n      const { height } = e.nativeEvent.layout;\n      bottomOfDialogYValue.value = height;\n\n      if (!isMounted.current) {\n        isMounted.current = true;\n        onOpenDialog();\n      }\n    };\n\n    const animatedSheetStyle = useAnimatedStyle(\n      () => ({\n        transform: [\n          {\n            translateY: currentYOffset.value,\n          },\n        ],\n      }),\n      [],\n    );\n\n    const sheetStyle = useMemo(\n      () => [\n        tw.style(\n          isPureBlack ? 'bg-alternative' : 'bg-default',\n          'rounded-t-3xl overflow-hidden border border-muted',\n          twClassName,\n        ),\n        {\n          maxHeight: maxSheetHeight,\n          paddingBottom: Platform.select({\n            ios: screenBottomPadding,\n            macos: screenBottomPadding,\n            default: screenBottomPadding + 16,\n          }),\n          ...(isFullscreen && { height: maxSheetHeight }),\n          ...shadowLg,\n        },\n        style,\n      ],\n\n      [\n        tw,\n        isPureBlack,\n        maxSheetHeight,\n        screenBottomPadding,\n        isFullscreen,\n        shadowLg,\n        style,\n        twClassName,\n      ],\n    );\n\n    const combinedSheetStyle = useMemo(\n      () => [...sheetStyle, animatedSheetStyle],\n\n      [sheetStyle],\n    );\n\n    useImperativeHandle(ref, () => ({\n      onOpenDialog,\n      onCloseDialog,\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        style={tw.style('absolute bottom-0 inset-x-0')}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <GestureDetector gesture={gestureHandler}>\n          <Animated.View\n            onLayout={updateSheetHeight}\n            style={combinedSheetStyle}\n          >\n            {isInteractable && (\n              <View style={tw.style('self-stretch items-center p-1')}>\n                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n              </View>\n            )}\n            {children}\n          </Animated.View>\n        </GestureDetector>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n"]}
+{"version":3,"file":"BottomSheetDialog.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  usePureBlack,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { lightTheme, resolveDarkTheme } from '@metamask/design-tokens';\nimport { debounce } from 'lodash';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport {\n  LayoutChangeEvent,\n  View,\n  Platform,\n  KeyboardAvoidingView,\n} from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport {\n  useSafeAreaFrame,\n  useSafeAreaInsets,\n} from 'react-native-safe-area-context';\nimport { scheduleOnRN } from 'react-native-worklets';\n\n// Internal dependencies.\nimport {\n  DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n  DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD,\n  DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION,\n} from './BottomSheetDialog.constants';\nimport type {\n  BottomSheetDialogRef,\n  BottomSheetDialogProps,\n} from './BottomSheetDialog.types';\n\nexport const BottomSheetDialog = forwardRef<\n  BottomSheetDialogRef,\n  BottomSheetDialogProps\n>(\n  (\n    {\n      children,\n      isFullscreen = false,\n      isInteractable = true,\n      keyboardAvoidingViewEnabled = true,\n      onClose,\n      onOpen,\n      style,\n      twClassName,\n      ...props\n    },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const currentTheme = useTheme();\n    const isPureBlack = usePureBlack();\n    const shadowLg =\n      currentTheme === Theme.Light\n        ? lightTheme.shadows.size.lg\n        : resolveDarkTheme(isPureBlack).shadows.size.lg;\n\n    const { top: screenTopPadding, bottom: screenBottomPadding } =\n      useSafeAreaInsets();\n    const { y: frameY, height: screenHeight } = useSafeAreaFrame();\n\n    const maxSheetHeight = screenHeight - screenTopPadding;\n    // X and Y values start on top left of the DIALOG\n    // currentYOffset will be used to animate the Y position of the Dialog\n    const currentYOffset = useSharedValue(screenHeight);\n    const topOfDialogYValue = useSharedValue(0);\n    const bottomOfDialogYValue = useSharedValue(screenHeight);\n    const gestureStartYOffset = useSharedValue(0);\n    const isMounted = useRef(false);\n\n    const onOpenCB = useCallback(() => {\n      onOpen?.();\n    }, [onOpen]);\n    const onCloseCB = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    const onCloseDialog = useCallback(\n      (callback?: () => void) => {\n        currentYOffset.value = withTiming(\n          bottomOfDialogYValue.value,\n          { duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION },\n          () => {\n            scheduleOnRN(onCloseCB);\n            if (callback) {\n              scheduleOnRN(callback);\n            }\n          },\n        );\n        // Ref values do not affect deps.\n      },\n      [onCloseCB],\n    );\n\n    const gestureHandler = useMemo(() => {\n      // These gesture callbacks need explicit 'worklet' directives because this\n      // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the\n      // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).\n      // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's\n      // why useAnimatedStyle below works), but its gesture auto-detection doesn't\n      // recognize that compiled namespaced form, so without these directives the\n      // callbacks run on the JS thread and slow drags lag behind the finger.\n      const gesture = Gesture.Pan()\n        .enabled(isInteractable)\n        .onStart(() => {\n          'worklet';\n\n          // Starts tracking vertical position of gesture.\n          gestureStartYOffset.value = currentYOffset.value;\n        })\n        .onUpdate((event) => {\n          'worklet';\n\n          const { translationY } = event;\n          currentYOffset.value = gestureStartYOffset.value + translationY;\n          // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),\n          // which means the gesture is currently below the bottom of the dialog,\n          // sets it to bottom of Dialog Y value\n          if (currentYOffset.value >= bottomOfDialogYValue.value) {\n            currentYOffset.value = bottomOfDialogYValue.value;\n          }\n          // If gesture Y value goes below the top of Dialog Y value(top of dialog),\n          // which means the gesture is currently above the top of the dialog,\n          // sets it to top of Dialog Y value\n          if (currentYOffset.value <= topOfDialogYValue.value) {\n            currentYOffset.value = topOfDialogYValue.value;\n          }\n        })\n        .onEnd((event) => {\n          'worklet';\n\n          const { translationY, velocityY } = event;\n          // finalYOffset is used to animate the Y position of the Dialog after the gesture event\n          let finalYOffset: number;\n          // Measuring dismissing swipe action\n          const latestOffset = gestureStartYOffset.value + translationY;\n          // Check if the swipe distance reach the dismiss offset threshold,\n          // which is currently 60% of sheet height\n          const hasReachedDismissOffset =\n            latestOffset >\n            bottomOfDialogYValue.value *\n              DEFAULT_BOTTOMSHEETDIALOG_DISMISSTHRESHOLD;\n          // Check if the gesture's vertical speed has reached the threshold to determine a swipe action\n          const hasReachedSwipeThreshold =\n            Math.abs(velocityY) >\n            DEFAULT_BOTTOMSHEETDIALOG_SWIPETHRESHOLD_DURATION;\n          const isQuickDismissing = velocityY > 0;\n\n          // If user is swiping\n          if (hasReachedSwipeThreshold) {\n            // Quick swipe takes priority\n            if (isQuickDismissing) {\n              finalYOffset = bottomOfDialogYValue.value;\n            } else {\n              finalYOffset = topOfDialogYValue.value;\n            }\n          } else if (hasReachedDismissOffset) {\n            finalYOffset = bottomOfDialogYValue.value;\n          } else {\n            finalYOffset = topOfDialogYValue.value;\n          }\n\n          const isDismissed = finalYOffset === bottomOfDialogYValue.value;\n\n          if (isDismissed) {\n            scheduleOnRN(onCloseDialog);\n          } else {\n            // Only animate dialog to a certain Y position instead\n            currentYOffset.value = withTiming(finalYOffset, {\n              duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n            });\n          }\n        });\n\n      return gesture;\n    }, [\n      isInteractable,\n      currentYOffset,\n      gestureStartYOffset,\n      bottomOfDialogYValue,\n      topOfDialogYValue,\n      onCloseDialog,\n    ]);\n\n    // Animate in sheet on initial render.\n    const onOpenDialog = (callback?: () => void) => {\n      // Starts setting the Y position of the dialog to the bottom of the dialog\n      currentYOffset.value = bottomOfDialogYValue.value;\n      // Animate the Y position to the top of the dialog, then call onOpenCB\n      currentYOffset.value = withTiming(\n        topOfDialogYValue.value,\n        {\n          duration: DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION,\n        },\n        () => {\n          scheduleOnRN(onOpenCB);\n          if (callback) {\n            scheduleOnRN(callback);\n          }\n        },\n      );\n    };\n\n    const onDebouncedCloseDialog = useMemo(\n      // Prevent hide from being called multiple times. Potentially caused by taps in quick succession.\n      () => debounce(onCloseDialog, 2000, { leading: true }),\n      [onCloseDialog],\n    );\n\n    useEffect(\n      () =>\n        // Automatically handles animation when content changes\n        // Disable for now since network switches causes the screen to hang with this on.\n        // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);\n        onDebouncedCloseDialog.cancel(),\n      [children, onDebouncedCloseDialog],\n    );\n\n    const updateSheetHeight = (e: LayoutChangeEvent) => {\n      const { height } = e.nativeEvent.layout;\n      bottomOfDialogYValue.value = height;\n\n      if (!isMounted.current) {\n        isMounted.current = true;\n        onOpenDialog();\n      }\n    };\n\n    const animatedSheetStyle = useAnimatedStyle(\n      () => ({\n        transform: [\n          {\n            translateY: currentYOffset.value,\n          },\n        ],\n      }),\n      [],\n    );\n\n    const sheetStyle = useMemo(\n      () => [\n        tw.style(\n          isPureBlack ? 'bg-alternative' : 'bg-default',\n          'rounded-t-3xl overflow-hidden border border-muted border-b-0',\n          twClassName,\n        ),\n        {\n          maxHeight: maxSheetHeight,\n          paddingBottom: Platform.select({\n            ios: screenBottomPadding,\n            macos: screenBottomPadding,\n            default: screenBottomPadding + 16,\n          }),\n          ...(isFullscreen && { height: maxSheetHeight }),\n          ...shadowLg,\n        },\n        style,\n      ],\n\n      [\n        tw,\n        isPureBlack,\n        maxSheetHeight,\n        screenBottomPadding,\n        isFullscreen,\n        shadowLg,\n        style,\n        twClassName,\n      ],\n    );\n\n    const combinedSheetStyle = useMemo(\n      () => [...sheetStyle, animatedSheetStyle],\n\n      [sheetStyle],\n    );\n\n    useImperativeHandle(ref, () => ({\n      onOpenDialog,\n      onCloseDialog,\n    }));\n\n    return (\n      <KeyboardAvoidingView\n        style={tw.style('absolute bottom-0 inset-x-0')}\n        behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n        keyboardVerticalOffset={\n          Platform.OS === 'ios' ? -screenBottomPadding : frameY\n        }\n        enabled={keyboardAvoidingViewEnabled}\n        {...props}\n      >\n        <GestureDetector gesture={gestureHandler}>\n          <Animated.View\n            onLayout={updateSheetHeight}\n            style={combinedSheetStyle}\n          >\n            {isInteractable && (\n              <View style={tw.style('self-stretch items-center p-1')}>\n                <View style={tw.style('h-1 w-10 rounded-sm bg-border-muted')} />\n              </View>\n            )}\n            {children}\n          </Animated.View>\n        </GestureDetector>\n      </KeyboardAvoidingView>\n    );\n  },\n);\n"]}

package/dist/components/BoxRow/BoxRow.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxRow.types.cjs","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxRowPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text';\n\n/**\n * BoxRow component props.\n */\nexport type BoxRowProps = BoxRowPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `Text` when `children` is a string.\n     */\n    textProps?: Omit<Partial<TextProps>, 'children'>;\n  };\n"]}
+{"version":3,"file":"BoxRow.types.cjs","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxRowPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { SensitiveTextProps } from '../SensitiveText';\n\n/**\n * BoxRow component props.\n */\nexport type BoxRowProps = BoxRowPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `SensitiveText` when `children` is a string.\n     * Supports Text props plus `isHidden` / `length`.\n     */\n    textProps?: Partial<Omit<SensitiveTextProps, 'children'>>;\n  };\n"]}

package/dist/components/BoxRow/BoxRow.types.d.cts

@@ -1,13 +1,14 @@
 import type { BoxRowPropsShared } from "@metamask/design-system-shared";
 import type { BoxProps } from "../Box/Box.types.cjs";
-import type { TextProps } from "../Text/index.cjs";
+import type { SensitiveTextProps } from "../SensitiveText/index.cjs";
 /**
  * BoxRow component props.
  */
 export type BoxRowProps = BoxRowPropsShared & Omit<BoxProps, 'children' | 'flexDirection'> & {
     /**
-     * Optional props passed to `Text` when `children` is a string.
+     * Optional props passed to `SensitiveText` when `children` is a string.
+     * Supports Text props plus `isHidden` / `length`.
      */
-    textProps?: Omit<Partial<TextProps>, 'children'>;
+    textProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
 };
 //# sourceMappingURL=BoxRow.types.d.cts.map

package/dist/components/BoxRow/BoxRow.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"BoxRow.types.d.cts","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,uCAAuC;AAExE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;CAClD,CAAC"}
+{"version":3,"file":"BoxRow.types.d.cts","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,uCAAuC;AAExE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;CAC3D,CAAC"}

package/dist/components/BoxRow/BoxRow.types.d.mts

@@ -1,13 +1,14 @@
 import type { BoxRowPropsShared } from "@metamask/design-system-shared";
 import type { BoxProps } from "../Box/Box.types.mjs";
-import type { TextProps } from "../Text/index.mjs";
+import type { SensitiveTextProps } from "../SensitiveText/index.mjs";
 /**
  * BoxRow component props.
  */
 export type BoxRowProps = BoxRowPropsShared & Omit<BoxProps, 'children' | 'flexDirection'> & {
     /**
-     * Optional props passed to `Text` when `children` is a string.
+     * Optional props passed to `SensitiveText` when `children` is a string.
+     * Supports Text props plus `isHidden` / `length`.
      */
-    textProps?: Omit<Partial<TextProps>, 'children'>;
+    textProps?: Partial<Omit<SensitiveTextProps, 'children'>>;
 };
 //# sourceMappingURL=BoxRow.types.d.mts.map

package/dist/components/BoxRow/BoxRow.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"BoxRow.types.d.mts","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,uCAAuC;AAExE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;CAClD,CAAC"}
+{"version":3,"file":"BoxRow.types.d.mts","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,uCAAuC;AAExE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;CAC3D,CAAC"}

package/dist/components/BoxRow/BoxRow.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxRow.types.mjs","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxRowPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text';\n\n/**\n * BoxRow component props.\n */\nexport type BoxRowProps = BoxRowPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `Text` when `children` is a string.\n     */\n    textProps?: Omit<Partial<TextProps>, 'children'>;\n  };\n"]}
+{"version":3,"file":"BoxRow.types.mjs","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxRowPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { SensitiveTextProps } from '../SensitiveText';\n\n/**\n * BoxRow component props.\n */\nexport type BoxRowProps = BoxRowPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `SensitiveText` when `children` is a string.\n     * Supports Text props plus `isHidden` / `length`.\n     */\n    textProps?: Partial<Omit<SensitiveTextProps, 'children'>>;\n  };\n"]}

package/dist/components/Content/Content.cjs

@@ -27,7 +27,7 @@ const Content = ({ variant = design_system_shared_1.ContentVariant.TwoLines, ava
     return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={alignItems} gap={4} twClassName={twClassName} {...props}>
       {avatar}
       <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={showDescription ? (<BoxRow_1.BoxRow twClassName="w-full" alignItems={alignItems} startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
-              <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0">
+              <BoxColumn_1.BoxColumn twClassName="min-w-0">
                 <TextOrChildren_1.TextOrChildren textProps={{
                 variant: design_system_shared_1.TextVariant.BodySm,
                 fontWeight: design_system_shared_1.FontWeight.Medium,

package/dist/components/Content/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n  ContentVariant,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  variant = ContentVariant.TwoLines,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  const isOneLine = variant === ContentVariant.OneLine;\n  const isMultiLine = variant === ContentVariant.MultiLine;\n  const showDescription = !isOneLine && description;\n  const showSubvalue = !isOneLine && subvalue;\n  const alignItems = isMultiLine ? BoxAlignItems.Start : BoxAlignItems.Center;\n\n  if (__DEV__) {\n    if (isOneLine && description) {\n      console.warn(\n        'Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.',\n      );\n    }\n    if (isOneLine && subvalue) {\n      console.warn(\n        'Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.',\n      );\n    }\n  }\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={alignItems}\n      gap={4}\n      twClassName={twClassName}\n      {...props}\n    >\n      {avatar}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          showDescription ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              alignItems={alignItems}\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <BoxColumn twClassName=\"flex-1 min-w-0\">\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...descriptionProps,\n                  }}\n                >\n                  {description}\n                </TextOrChildren>\n              </BoxColumn>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {value || showSubvalue ? (\n        <BoxColumn\n          alignItems={BoxAlignItems.End}\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            showSubvalue ? (\n              <BoxRow\n                alignItems={alignItems}\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <BoxColumn twClassName=\"min-w-0\">\n                  <TextOrChildren\n                    textProps={{\n                      variant: TextVariant.BodySm,\n                      fontWeight: FontWeight.Medium,\n                      color: TextColor.TextAlternative,\n                      ...subvalueProps,\n                    }}\n                  >\n                    {subvalue}\n                  </TextOrChildren>\n                </BoxColumn>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </Box>\n  );\n};\n\nContent.displayName = 'Content';\n"]}
+{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n  ContentVariant,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  variant = ContentVariant.TwoLines,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  const isOneLine = variant === ContentVariant.OneLine;\n  const isMultiLine = variant === ContentVariant.MultiLine;\n  const showDescription = !isOneLine && description;\n  const showSubvalue = !isOneLine && subvalue;\n  const alignItems = isMultiLine ? BoxAlignItems.Start : BoxAlignItems.Center;\n\n  if (__DEV__) {\n    if (isOneLine && description) {\n      console.warn(\n        'Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.',\n      );\n    }\n    if (isOneLine && subvalue) {\n      console.warn(\n        'Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.',\n      );\n    }\n  }\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={alignItems}\n      gap={4}\n      twClassName={twClassName}\n      {...props}\n    >\n      {avatar}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          showDescription ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              alignItems={alignItems}\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <BoxColumn twClassName=\"min-w-0\">\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...descriptionProps,\n                  }}\n                >\n                  {description}\n                </TextOrChildren>\n              </BoxColumn>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {value || showSubvalue ? (\n        <BoxColumn\n          alignItems={BoxAlignItems.End}\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            showSubvalue ? (\n              <BoxRow\n                alignItems={alignItems}\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <BoxColumn twClassName=\"min-w-0\">\n                  <TextOrChildren\n                    textProps={{\n                      variant: TextVariant.BodySm,\n                      fontWeight: FontWeight.Medium,\n                      color: TextColor.TextAlternative,\n                      ...subvalueProps,\n                    }}\n                  >\n                    {subvalue}\n                  </TextOrChildren>\n                </BoxColumn>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </Box>\n  );\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/Content.mjs

@@ -28,7 +28,7 @@ export const Content = ({ variant = ContentVariant.TwoLines, avatar, twClassName
     return (<Box flexDirection={BoxFlexDirection.Row} alignItems={alignItems} gap={4} twClassName={twClassName} {...props}>
       {avatar}
       <BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={showDescription ? (<BoxRow twClassName="w-full" alignItems={alignItems} startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
-              <BoxColumn twClassName="flex-1 min-w-0">
+              <BoxColumn twClassName="min-w-0">
                 <TextOrChildren textProps={{
                 variant: TextVariant.BodySm,
                 fontWeight: FontWeight.Medium,

package/dist/components/Content/Content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAInE,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,OAAO,GAAG,cAAc,CAAC,QAAQ,EACjC,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,OAAO,KAAK,cAAc,CAAC,OAAO,CAAC;IACrD,MAAM,WAAW,GAAG,OAAO,KAAK,cAAc,CAAC,SAAS,CAAC;IACzD,MAAM,eAAe,GAAG,CAAC,SAAS,IAAI,WAAW,CAAC;IAClD,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC;IAC5C,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC;IAE5E,IAAI,OAAO,EAAE;QACX,IAAI,SAAS,IAAI,WAAW,EAAE;YAC5B,OAAO,CAAC,IAAI,CACV,+EAA+E,CAChF,CAAC;SACH;QACD,IAAI,SAAS,IAAI,QAAQ,EAAE;YACzB,OAAO,CAAC,IAAI,CACV,4EAA4E,CAC7E,CAAC;SACH;KACF;IAED,OAAO,CACL,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,SAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,eAAe,CAAC,CAAC,CAAC,CAChB,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,SAAS,CAAC,WAAW,CAAC,gBAAgB,CACrC;gBAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;kBAAA,CAAC,WAAW,CACd;gBAAA,EAAE,cAAc,CAClB;cAAA,EAAE,SAAS,CACb;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,cAAc,CAClB;UAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,CACvB,CAAC,SAAS,CACR,UAAU,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAC9B,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,YAAY,CAAC,CAAC,CAAC,CACb,CAAC,MAAM,CACL,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CACnC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;gBAAA,CAAC,SAAS,CAAC,WAAW,CAAC,SAAS,CAC9B;kBAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;oBAChC,GAAG,aAAa;iBACjB,CAAC,CAEF;oBAAA,CAAC,QAAQ,CACX;kBAAA,EAAE,cAAc,CAClB;gBAAA,EAAE,SAAS,CACb;cAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;oBAC5B,GAAG,UAAU;iBACd,CAAC,CAEF;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n  ContentVariant,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  variant = ContentVariant.TwoLines,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  const isOneLine = variant === ContentVariant.OneLine;\n  const isMultiLine = variant === ContentVariant.MultiLine;\n  const showDescription = !isOneLine && description;\n  const showSubvalue = !isOneLine && subvalue;\n  const alignItems = isMultiLine ? BoxAlignItems.Start : BoxAlignItems.Center;\n\n  if (__DEV__) {\n    if (isOneLine && description) {\n      console.warn(\n        'Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.',\n      );\n    }\n    if (isOneLine && subvalue) {\n      console.warn(\n        'Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.',\n      );\n    }\n  }\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={alignItems}\n      gap={4}\n      twClassName={twClassName}\n      {...props}\n    >\n      {avatar}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          showDescription ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              alignItems={alignItems}\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <BoxColumn twClassName=\"flex-1 min-w-0\">\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...descriptionProps,\n                  }}\n                >\n                  {description}\n                </TextOrChildren>\n              </BoxColumn>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {value || showSubvalue ? (\n        <BoxColumn\n          alignItems={BoxAlignItems.End}\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            showSubvalue ? (\n              <BoxRow\n                alignItems={alignItems}\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <BoxColumn twClassName=\"min-w-0\">\n                  <TextOrChildren\n                    textProps={{\n                      variant: TextVariant.BodySm,\n                      fontWeight: FontWeight.Medium,\n                      color: TextColor.TextAlternative,\n                      ...subvalueProps,\n                    }}\n                  >\n                    {subvalue}\n                  </TextOrChildren>\n                </BoxColumn>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </Box>\n  );\n};\n\nContent.displayName = 'Content';\n"]}
+{"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n  ContentVariant,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  variant = ContentVariant.TwoLines,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  const isOneLine = variant === ContentVariant.OneLine;\n  const isMultiLine = variant === ContentVariant.MultiLine;\n  const showDescription = !isOneLine && description;\n  const showSubvalue = !isOneLine && subvalue;\n  const alignItems = isMultiLine ? BoxAlignItems.Start : BoxAlignItems.Center;\n\n  if (__DEV__) {\n    if (isOneLine && description) {\n      console.warn(\n        'Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.',\n      );\n    }\n    if (isOneLine && subvalue) {\n      console.warn(\n        'Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.',\n      );\n    }\n  }\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={alignItems}\n      gap={4}\n      twClassName={twClassName}\n      {...props}\n    >\n      {avatar}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          showDescription ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              alignItems={alignItems}\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <BoxColumn twClassName=\"min-w-0\">\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...descriptionProps,\n                  }}\n                >\n                  {description}\n                </TextOrChildren>\n              </BoxColumn>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {value || showSubvalue ? (\n        <BoxColumn\n          alignItems={BoxAlignItems.End}\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            showSubvalue ? (\n              <BoxRow\n                alignItems={alignItems}\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <BoxColumn twClassName=\"min-w-0\">\n                  <TextOrChildren\n                    textProps={{\n                      variant: TextVariant.BodySm,\n                      fontWeight: FontWeight.Medium,\n                      color: TextColor.TextAlternative,\n                      ...subvalueProps,\n                    }}\n                  >\n                    {subvalue}\n                  </TextOrChildren>\n                </BoxColumn>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </Box>\n  );\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/Content.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.types.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text/Text.types';\n\n/**\n * Content component props.\n *\n * Props-only layout for the inner list row (`title`, `avatar`, inline row accessories, etc.).\n */\nexport type ContentProps = Omit<BoxProps, 'children'> &\n  ContentPropsShared & {\n    /**\n     * Optional props for the title Text when `title` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    titleProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the description Text when `description` is a string.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    descriptionProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the value Text when `value` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    valueProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the subvalue Text when `subvalue` is a string.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    subvalueProps?: Partial<Omit<TextProps, 'children'>>;\n  };\n"]}
+{"version":3,"file":"Content.types.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { SensitiveTextProps } from '../SensitiveText';\nimport type { TextProps } from '../Text/Text.types';\n\n/**\n * Content component props.\n *\n * Props-only layout for the inner list row (`title`, `avatar`, inline row accessories, etc.).\n */\nexport type ContentProps = Omit<BoxProps, 'children'> &\n  ContentPropsShared & {\n    /**\n     * Optional props for the title Text when `title` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    titleProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the description SensitiveText when `description` is a string.\n     * Supports Text props plus `isHidden` / `length`.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    descriptionProps?: Partial<Omit<SensitiveTextProps, 'children'>>;\n    /**\n     * Optional props for the value SensitiveText when `value` is a string.\n     * Supports Text props plus `isHidden` / `length`.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    valueProps?: Partial<Omit<SensitiveTextProps, 'children'>>;\n    /**\n     * Optional props for the subvalue SensitiveText when `subvalue` is a string.\n     * Supports Text props plus `isHidden` / `length`.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    subvalueProps?: Partial<Omit<SensitiveTextProps, 'children'>>;\n  };\n"]}