@metamask/design-system-react-native 0.35.0 → 0.36.0

package/CHANGELOG.md

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.36.0]
+
+### Added
+
+- Added `actionButtonLayout` to `BannerBase` (inherited by `BannerAlert`) with `BannerBaseActionButtonLayout.Below` (default) and `BannerBaseActionButtonLayout.End` to place the action button beside the body, left of close ([#1386](https://github.com/MetaMask/metamask-design-system/pull/1386))
+- Added `SliderMarkColor` for themed `Slider` mark colors that interpolate with the thumb ([#1385](https://github.com/MetaMask/metamask-design-system/pull/1385))
+
+### Changed
+
+- **BREAKING:** Replaced `verticalAlignment` / `ContentVerticalAlignment` / `ListItemVerticalAlignment` on `Content` and `ListItem` with `variant` / `ContentVariant` / `ListItemVariant` (`OneLine`, `TwoLines`, `MultiLine`) for preset row heights, alignment, and secondary-slot gating ([#1384](https://github.com/MetaMask/metamask-design-system/pull/1384))
+  - See [Migration Guide](./MIGRATION.md#content-and-listitem-verticalalignment-replaced-by-variant)
+- **BREAKING:** Consolidated `Slider` mark configuration into a single `marks` prop; removed `rangeLabelSteps`, `formatStepLabel`, `stepToValue`, `tickThresholds`, `DEFAULT_RANGE_LABEL_STEPS`, and `DEFAULT_TICK_THRESHOLDS` ([#1385](https://github.com/MetaMask/metamask-design-system/pull/1385))
+  - See [Migration Guide](./MIGRATION.md#slider-mark-api-consolidation)
+
+### Fixed
+
+- Fixed `Slider` drag jerking when the controlled `value` updates mid-gesture ([#1385](https://github.com/MetaMask/metamask-design-system/pull/1385))
+
 ## [0.35.0]
 
 ### Added
@@ -589,7 +607,8 @@ 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.35.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.36.0...HEAD
+[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
 [0.34.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.33.0...@metamask/design-system-react-native@0.34.0
 [0.33.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.32.0...@metamask/design-system-react-native@0.33.0

package/dist/components/BannerBase/BannerBase.cjs

@@ -12,11 +12,15 @@ const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
 const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
 const hasContent = (content) => content !== null && content !== undefined;
-const BannerBase = ({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnPress, actionButtonProps, startAccessory, onClose, closeButtonProps, twClassName, ...props }) => {
+const BannerBase = ({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnPress, actionButtonProps, actionButtonLayout = design_system_shared_1.BannerBaseActionButtonLayout.Below, startAccessory, onClose, closeButtonProps, twClassName, ...props }) => {
     const resolvedActionButtonProps = actionButtonProps ?? {};
     const { accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner', twClassName: closeButtonTwClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
     const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnPress);
+    const isActionButtonLayoutEnd = actionButtonLayout === design_system_shared_1.BannerBaseActionButtonLayout.End;
+    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}>
       {startAccessory}
 
@@ -37,13 +41,11 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
               {children}
             </Text_1.Text>) : (children))}
 
-        {shouldShowActionButton && (<Box_1.Box twClassName="mt-2">
-            <Button_1.Button size={design_system_shared_1.ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps} variant={design_system_shared_1.ButtonVariant.Secondary}>
-              {actionButtonLabel}
-            </Button_1.Button>
-          </Box_1.Box>)}
+        {shouldShowActionButton && !isActionButtonLayoutEnd && (<Box_1.Box twClassName="mt-2">{actionButton}</Box_1.Box>)}
       </Box_1.Box>
 
+      {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}
+
       {shouldShowCloseButton && (<ButtonIcon_1.ButtonIcon twClassName={(0, design_system_shared_1.mergeTwClassName)('-mt-1', closeButtonTwClassName)} iconName={design_system_shared_1.IconName.Close} size={design_system_shared_1.ButtonIconSize.Md} accessibilityLabel={closeButtonAccessibilityLabel} onPress={onClose} {...resolvedCloseButtonProps}/>)}
     </Box_1.Box>);
 };

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  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  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\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 && (\n          <Box twClassName=\"mt-2\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n              variant={ButtonVariant.Secondary}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\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\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"]}

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":"AAYA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqGhD,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,CA4GhD,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":"AAYA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqGhD,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,CA4GhD,CAAC"}

package/dist/components/BannerBase/BannerBase.mjs

@@ -4,7 +4,7 @@ function $importDefault(module) {
     }
     return module;
 }
-import { BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, ButtonVariant, FontWeight, IconName, mergeTwClassName, TextVariant } from "@metamask/design-system-shared";
+import { BannerBaseActionButtonLayout, BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, ButtonVariant, FontWeight, IconName, mergeTwClassName, TextVariant } from "@metamask/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
 import { Box } from "../Box/index.mjs";
@@ -13,11 +13,15 @@ import { ButtonIcon } from "../ButtonIcon/index.mjs";
 import { Text } from "../Text/index.mjs";
 const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
 const hasContent = (content) => content !== null && content !== undefined;
-export const BannerBase = ({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnPress, actionButtonProps, startAccessory, onClose, closeButtonProps, twClassName, ...props }) => {
+export const BannerBase = ({ title, titleProps, description, descriptionProps, children, childrenWrapperProps, actionButtonLabel, actionButtonOnPress, actionButtonProps, actionButtonLayout = BannerBaseActionButtonLayout.Below, startAccessory, onClose, closeButtonProps, twClassName, ...props }) => {
     const resolvedActionButtonProps = actionButtonProps ?? {};
     const { accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner', twClassName: closeButtonTwClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
     const shouldShowCloseButton = Boolean(onClose);
     const shouldShowActionButton = Boolean(actionButtonOnPress);
+    const isActionButtonLayoutEnd = actionButtonLayout === BannerBaseActionButtonLayout.End;
+    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}>
       {startAccessory}
 
@@ -38,13 +42,11 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
               {children}
             </Text>) : (children))}
 
-        {shouldShowActionButton && (<Box twClassName="mt-2">
-            <Button size={ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps} variant={ButtonVariant.Secondary}>
-              {actionButtonLabel}
-            </Button>
-          </Box>)}
+        {shouldShowActionButton && !isActionButtonLayoutEnd && (<Box twClassName="mt-2">{actionButton}</Box>)}
       </Box>
 
+      {shouldShowActionButton && isActionButtonLayoutEnd && actionButton}
+
       {shouldShowCloseButton && (<ButtonIcon twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)} iconName={IconName.Close} size={ButtonIconSize.Md} accessibilityLabel={closeButtonAccessibilityLabel} onPress={onClose} {...resolvedCloseButtonProps}/>)}
     </Box>);
 };

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  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  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\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 && (\n          <Box twClassName=\"mt-2\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n              variant={ButtonVariant.Secondary}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\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\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"]}

package/dist/components/BannerBase/index.cjs

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BannerBase = void 0;
+exports.BannerBase = exports.BannerBaseActionButtonLayout = void 0;
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "BannerBaseActionButtonLayout", { enumerable: true, get: function () { return design_system_shared_1.BannerBaseActionButtonLayout; } });
 var BannerBase_1 = require("./BannerBase.cjs");
 Object.defineProperty(exports, "BannerBase", { enumerable: true, get: function () { return BannerBase_1.BannerBase; } });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { BannerBase } from './BannerBase';\nexport type { BannerBaseProps } from './BannerBase.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/index.ts"],"names":[],"mappings":";;;AAAA,uEAA8E;AAArE,oIAAA,4BAA4B,OAAA;AAErC,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { BannerBaseActionButtonLayout } from '@metamask/design-system-shared';\n\nexport { BannerBase } from './BannerBase';\nexport type { BannerBaseProps } from './BannerBase.types';\n"]}

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

@@ -1,3 +1,4 @@
+export { BannerBaseActionButtonLayout } from "@metamask/design-system-shared";
 export { BannerBase } from "./BannerBase.cjs";
 export type { BannerBaseProps } from "./BannerBase.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,uCAAuC;AAE9E,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

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

@@ -1,3 +1,4 @@
+export { BannerBaseActionButtonLayout } from "@metamask/design-system-shared";
 export { BannerBase } from "./BannerBase.mjs";
 export type { BannerBaseProps } from "./BannerBase.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,uCAAuC;AAE9E,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/BannerBase/index.mjs

@@ -1,2 +1,3 @@
+export { BannerBaseActionButtonLayout } from "@metamask/design-system-shared";
 export { BannerBase } from "./BannerBase.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { BannerBase } from './BannerBase';\nexport type { BannerBaseProps } from './BannerBase.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,uCAAuC;AAE9E,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { BannerBaseActionButtonLayout } from '@metamask/design-system-shared';\n\nexport { BannerBase } from './BannerBase';\nexport type { BannerBaseProps } from './BannerBase.types';\n"]}

package/dist/components/Content/Content.cjs

@@ -10,20 +10,33 @@ const Box_1 = require("../Box/index.cjs");
 const BoxColumn_1 = require("../BoxColumn/index.cjs");
 const BoxRow_1 = require("../BoxRow/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
-const Content_constants_1 = require("./Content.constants.cjs");
-const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
-    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={(0, design_system_shared_1.mergeTwClassName)('min-h-[46px]', twClassName)} {...props}>
+const Content = ({ variant = design_system_shared_1.ContentVariant.TwoLines, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    const isOneLine = variant === design_system_shared_1.ContentVariant.OneLine;
+    const isMultiLine = variant === design_system_shared_1.ContentVariant.MultiLine;
+    const showDescription = !isOneLine && description;
+    const showSubvalue = !isOneLine && subvalue;
+    const alignItems = isMultiLine ? design_system_shared_1.BoxAlignItems.Start : design_system_shared_1.BoxAlignItems.Center;
+    if (__DEV__) {
+        if (isOneLine && description) {
+            console.warn('Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.');
+        }
+        if (isOneLine && subvalue) {
+            console.warn('Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.');
+        }
+    }
+    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={alignItems} gap={4} twClassName={twClassName} {...props}>
       {avatar}
-      {/* Title and description Column */}
-      <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
-              <TextOrChildren_1.TextOrChildren textProps={{
+      <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">
+                <TextOrChildren_1.TextOrChildren textProps={{
                 variant: design_system_shared_1.TextVariant.BodySm,
                 fontWeight: design_system_shared_1.FontWeight.Medium,
                 color: design_system_shared_1.TextColor.TextAlternative,
                 ...descriptionProps,
             }}>
-                {description}
-              </TextOrChildren_1.TextOrChildren>
+                  {description}
+                </TextOrChildren_1.TextOrChildren>
+              </BoxColumn_1.BoxColumn>
             </BoxRow_1.BoxRow>) : null}>
         {title ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} gap={1}>
             <TextOrChildren_1.TextOrChildren textProps={{
@@ -36,16 +49,17 @@ const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAli
             </TextOrChildren_1.TextOrChildren>
           </BoxRow_1.BoxRow>) : null}
       </BoxColumn_1.BoxColumn>
-      {/* Value and subvalue Column */}
-      {value || subvalue ? (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
-                <TextOrChildren_1.TextOrChildren textProps={{
+      {value || showSubvalue ? (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={showSubvalue ? (<BoxRow_1.BoxRow alignItems={alignItems} startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+                <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,
                     color: design_system_shared_1.TextColor.TextAlternative,
                     ...subvalueProps,
                 }}>
-                  {subvalue}
-                </TextOrChildren_1.TextOrChildren>
+                    {subvalue}
+                  </TextOrChildren_1.TextOrChildren>
+                </BoxColumn_1.BoxColumn>
               </BoxRow_1.BoxRow>) : null}>
           {value ? (<BoxRow_1.BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
               <TextOrChildren_1.TextOrChildren textProps={{

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  ContentVerticalAlignment,\n  FontWeight,\n  mergeTwClassName,\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 { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  verticalAlignment = ContentVerticalAlignment.Center,\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  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      gap={4}\n      twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n      {...props}\n    >\n      {avatar}\n      {/* Title and description Column */}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          description ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\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            </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 and subvalue Column */}\n      {value || subvalue ? (\n        <BoxColumn\n          alignItems={BoxAlignItems.End}\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            subvalue ? (\n              <BoxRow\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\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              </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=\"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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4H1C,CAAC"}
+{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmJ1C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4H1C,CAAC"}
+{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmJ1C,CAAC"}

package/dist/components/Content/Content.mjs

@@ -4,27 +4,40 @@ function $importDefault(module) {
     }
     return module;
 }
-import { BoxAlignItems, BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask/design-system-shared";
+import { BoxAlignItems, BoxFlexDirection, ContentVariant, FontWeight, TextColor, TextVariant } from "@metamask/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
 import { Box } from "../Box/index.mjs";
 import { BoxColumn } from "../BoxColumn/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
-import { VERTICAL_ALIGNMENT_MAP } from "./Content.constants.mjs";
-export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
-    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={mergeTwClassName('min-h-[46px]', twClassName)} {...props}>
+export const Content = ({ variant = ContentVariant.TwoLines, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    const isOneLine = variant === ContentVariant.OneLine;
+    const isMultiLine = variant === ContentVariant.MultiLine;
+    const showDescription = !isOneLine && description;
+    const showSubvalue = !isOneLine && subvalue;
+    const alignItems = isMultiLine ? BoxAlignItems.Start : BoxAlignItems.Center;
+    if (__DEV__) {
+        if (isOneLine && description) {
+            console.warn('Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.');
+        }
+        if (isOneLine && subvalue) {
+            console.warn('Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.');
+        }
+    }
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={alignItems} gap={4} twClassName={twClassName} {...props}>
       {avatar}
-      {/* Title and description Column */}
-      <BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
-              <TextOrChildren textProps={{
+      <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">
+                <TextOrChildren textProps={{
                 variant: TextVariant.BodySm,
                 fontWeight: FontWeight.Medium,
                 color: TextColor.TextAlternative,
                 ...descriptionProps,
             }}>
-                {description}
-              </TextOrChildren>
+                  {description}
+                </TextOrChildren>
+              </BoxColumn>
             </BoxRow>) : null}>
         {title ? (<BoxRow twClassName="w-full" startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} gap={1}>
             <TextOrChildren textProps={{
@@ -37,16 +50,17 @@ export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, a
             </TextOrChildren>
           </BoxRow>) : null}
       </BoxColumn>
-      {/* Value and subvalue Column */}
-      {value || subvalue ? (<BoxColumn alignItems={BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
-                <TextOrChildren textProps={{
+      {value || showSubvalue ? (<BoxColumn alignItems={BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={showSubvalue ? (<BoxRow alignItems={alignItems} startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+                <BoxColumn twClassName="min-w-0">
+                  <TextOrChildren textProps={{
                     variant: TextVariant.BodySm,
                     fontWeight: FontWeight.Medium,
                     color: TextColor.TextAlternative,
                     ...subvalueProps,
                 }}>
-                  {subvalue}
-                </TextOrChildren>
+                    {subvalue}
+                  </TextOrChildren>
+                </BoxColumn>
               </BoxRow>) : null}>
           {value ? (<BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
               <TextOrChildren textProps={{

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

@@ -1 +1 @@
-{"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  ContentVerticalAlignment,\n  FontWeight,\n  mergeTwClassName,\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 { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  verticalAlignment = ContentVerticalAlignment.Center,\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  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      gap={4}\n      twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n      {...props}\n    >\n      {avatar}\n      {/* Title and description Column */}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          description ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\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            </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 and subvalue Column */}\n      {value || subvalue ? (\n        <BoxColumn\n          alignItems={BoxAlignItems.End}\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            subvalue ? (\n              <BoxRow\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\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              </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=\"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"]}

package/dist/components/Content/index.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = exports.ContentVerticalAlignment = void 0;
-var design_system_shared_1 = require("@metamask/design-system-shared");
-Object.defineProperty(exports, "ContentVerticalAlignment", { enumerable: true, get: function () { return design_system_shared_1.ContentVerticalAlignment; } });
+exports.ContentVariant = exports.Content = void 0;
 var Content_1 = require("./Content.cjs");
 Object.defineProperty(exports, "Content", { enumerable: true, get: function () { return Content_1.Content; } });
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "ContentVariant", { enumerable: true, get: function () { return design_system_shared_1.ContentVariant; } });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":";;;AAAA,uEAA0E;AAAjE,gIAAA,wBAAwB,OAAA;AACjC,yCAAoC;AAA3B,kGAAA,OAAO,OAAA","sourcesContent":["export { ContentVerticalAlignment } from '@metamask/design-system-shared';\nexport { Content } from './Content';\nexport type { ContentProps } from './Content.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":";;;AAAA,yCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,uEAAgE;AAAvD,sHAAA,cAAc,OAAA","sourcesContent":["export { Content } from './Content';\nexport { ContentVariant } from '@metamask/design-system-shared';\nexport type { ContentProps } from './Content.types';\n"]}

package/dist/components/Content/index.d.cts

@@ -1,4 +1,4 @@
-export { ContentVerticalAlignment } from "@metamask/design-system-shared";
 export { Content } from "./Content.cjs";
+export { ContentVariant } from "@metamask/design-system-shared";
 export type { ContentProps } from "./Content.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/Content/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,uCAAuC;AAC1E,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,YAAY,EAAE,YAAY,EAAE,4BAAwB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAChE,YAAY,EAAE,YAAY,EAAE,4BAAwB"}

package/dist/components/Content/index.d.mts

@@ -1,4 +1,4 @@
-export { ContentVerticalAlignment } from "@metamask/design-system-shared";
 export { Content } from "./Content.mjs";
+export { ContentVariant } from "@metamask/design-system-shared";
 export type { ContentProps } from "./Content.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/Content/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,uCAAuC;AAC1E,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,YAAY,EAAE,YAAY,EAAE,4BAAwB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAChE,YAAY,EAAE,YAAY,EAAE,4BAAwB"}

package/dist/components/Content/index.mjs

@@ -1,3 +1,3 @@
-export { ContentVerticalAlignment } from "@metamask/design-system-shared";
 export { Content } from "./Content.mjs";
+export { ContentVariant } from "@metamask/design-system-shared";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,uCAAuC;AAC1E,OAAO,EAAE,OAAO,EAAE,sBAAkB","sourcesContent":["export { ContentVerticalAlignment } from '@metamask/design-system-shared';\nexport { Content } from './Content';\nexport type { ContentProps } from './Content.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,OAAO,EAAE,cAAc,EAAE,uCAAuC","sourcesContent":["export { Content } from './Content';\nexport { ContentVariant } from '@metamask/design-system-shared';\nexport type { ContentProps } from './Content.types';\n"]}