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

package/CHANGELOG.md

@@ -7,6 +7,40 @@ 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
+
+- Added `Slider` for controlled range input with pan/tap gestures, optional range dots and labels, and hooks for non-linear scales ([#1372](https://github.com/MetaMask/metamask-design-system/pull/1372))
+
+### Changed
+
+- Updated `FilterButton` to compose from `ButtonPrimary`, `ButtonSecondary`, and `ButtonTertiary` instead of hand-rolled styles, so selected-state text and icon colors stay consistent with button variants ([#1379](https://github.com/MetaMask/metamask-design-system/pull/1379))
+- Updated `ButtonBase` to merge `startIconProps.twClassName` and `endIconProps.twClassName` last, matching the existing `textProps.twClassName` pattern ([#1379](https://github.com/MetaMask/metamask-design-system/pull/1379))
+
+### Fixed
+
+- Fixed `ActionListItem` painting `bg-default` on elevated surfaces in pure-black mode; rows now inherit the parent background and use `bg-pressed` on press ([#1374](https://github.com/MetaMask/metamask-design-system/pull/1374))
+- Fixed `FilterButton` selected-state text appearing invisible (white-on-white) in dark mode ([#1379](https://github.com/MetaMask/metamask-design-system/pull/1379))
+
 ## [0.34.0]
 
 ### Added
@@ -573,7 +607,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.34.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
 [0.32.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.31.0...@metamask/design-system-react-native@0.32.0

package/dist/components/ActionListItem/ActionListItem.cjs

@@ -63,7 +63,7 @@ const ActionListItem = ({ label, description, startAccessory, endAccessory, icon
         return null;
     };
     const getPressableStyle = (0, react_1.useCallback)(({ pressed }) => {
-        const baseStyle = tw.style('bg-default px-4 py-3', pressed && !isDisabled && 'bg-default-pressed', isDisabled && 'opacity-50', twClassName);
+        const baseStyle = tw.style('px-4 py-3', pressed && !isDisabled && 'bg-pressed', isDisabled && 'opacity-50', twClassName);
         return style ? [baseStyle, style] : baseStyle;
     }, [tw, isDisabled, twClassName, style]);
     return (<react_native_1.Pressable onPress={onPress} disabled={isDisabled} style={getPressableStyle} {...pressableProps} {...props}>

package/dist/components/ActionListItem/ActionListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionListItem.cjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAmE;AACnE,+CAA2C;AAC3C,+CAAyC;AAEzC,0CAKgB;AAChB,4CAAyC;AACzC,4CAAuD;AAIhD,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,EACL,WAAW,EACX,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,CACL,CAAC,WAAI,CAAC,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAAC,IAAI,cAAc,CAAC,CACpD;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,WAAI,CAAC,CACR,CAAC;SACH;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,IAAI,CAAC;SACb;QAED,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;YACnC,OAAO,CACL,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,gBAAS,CAAC,eAAe,CAAC,CACjC,IAAI,oBAAoB,CAAC,CAEzB;UAAA,CAAC,WAAW,CACd;QAAA,EAAE,WAAI,CAAC,CACR,CAAC;SACH;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,cAAc,EAAE;YAClB,OAAO,cAAc,CAAC;SACvB;QAED,IAAI,QAAQ,EAAE;YACZ,OAAO,CACL,CAAC,SAAG,CACF,UAAU,CAAC,CAAC,mBAAa,CAAC,MAAM,CAAC,CACjC,cAAc,CAAC,CAAC,uBAAiB,CAAC,MAAM,CAAC,CACzC,WAAW,CAAC,KAAK,CAEjB;UAAA,CAAC,WAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,SAAS,CAAC,EACzD;QAAA,EAAE,SAAG,CAAC,CACP,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACnC,CAAC,EAAE,OAAO,EAAwB,EAAE,EAAE;QACpC,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,sBAAsB,EACtB,OAAO,IAAI,CAAC,UAAU,IAAI,oBAAoB,EAC9C,UAAU,IAAI,YAAY,EAC1B,WAAW,CACZ,CAAC;QAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAChD,CAAC,EACD,CAAC,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,CAAC,CACrC,CAAC;IAEF,OAAO,CACL,CAAC,wBAAS,CACR,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,KAAK,CAAC,CAAC,iBAAiB,CAAC,CACzB,IAAI,cAAc,CAAC,CACnB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,mBAAa,CAAC,MAAM,CAAC,CACjC,cAAc,CAAC,CAAC,uBAAiB,CAAC,OAAO,CAAC,CAC1C,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;QAAA,CAAC,kEAAkE,CACnE;QAAA,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,mBAAa,CAAC,KAAK,CAAC,CAChC,WAAW,CAAC,QAAQ,CACpB,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;UAAA,CAAC,kBAAkB,EAAE,CACrB;UAAA,CAAC,SAAG,CAAC,WAAW,CAAC,QAAQ,CACvB;YAAA,CAAC,WAAW,EAAE,CACd;YAAA,CAAC,iBAAiB,EAAE,CACtB;UAAA,EAAE,SAAG,CACP;QAAA,EAAE,SAAG,CAEL;;QAAA,CAAC,mBAAmB,CACpB;QAAA,CAAC,YAAY,IAAI,CAAC,SAAG,CAAC,CAAC,YAAY,CAAC,EAAE,SAAG,CAAC,CAC5C;MAAA,EAAE,SAAG,CACP;IAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAnHW,QAAA,cAAc,kBAmHzB","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport {\n  Box,\n  BoxAlignItems,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, TextColor, TextVariant } from '../Text';\n\nimport type { ActionListItemProps } from './ActionListItem.types';\n\nexport const ActionListItem: React.FC<ActionListItemProps> = ({\n  label,\n  description,\n  startAccessory,\n  endAccessory,\n  iconName,\n  labelTextProps,\n  descriptionTextProps,\n  iconProps,\n  isDisabled = false,\n  onPress,\n  pressableProps,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const renderLabel = () => {\n    if (typeof label === 'string') {\n      return (\n        <Text variant={TextVariant.BodyMd} {...labelTextProps}>\n          {label}\n        </Text>\n      );\n    }\n    return label;\n  };\n\n  const renderDescription = () => {\n    if (!description) {\n      return null;\n    }\n\n    if (typeof description === 'string') {\n      return (\n        <Text\n          variant={TextVariant.BodySm}\n          color={TextColor.TextAlternative}\n          {...descriptionTextProps}\n        >\n          {description}\n        </Text>\n      );\n    }\n    return description;\n  };\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n\n    if (iconName) {\n      return (\n        <Box\n          alignItems={BoxAlignItems.Center}\n          justifyContent={BoxJustifyContent.Center}\n          twClassName=\"h-6\"\n        >\n          <Icon name={iconName} size={IconSize.Md} {...iconProps} />\n        </Box>\n      );\n    }\n\n    return null;\n  };\n\n  const getPressableStyle = useCallback(\n    ({ pressed }: { pressed: boolean }) => {\n      const baseStyle = tw.style(\n        'bg-default px-4 py-3',\n        pressed && !isDisabled && 'bg-default-pressed',\n        isDisabled && 'opacity-50',\n        twClassName,\n      );\n\n      return style ? [baseStyle, style] : baseStyle;\n    },\n    [tw, isDisabled, twClassName, style],\n  );\n\n  return (\n    <Pressable\n      onPress={onPress}\n      disabled={isDisabled}\n      style={getPressableStyle}\n      {...pressableProps}\n      {...props}\n    >\n      <Box\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Center}\n        justifyContent={BoxJustifyContent.Between}\n        gap={4}\n      >\n        {/* Left side content (start accessory/icon + label/description) */}\n        <Box\n          flexDirection={BoxFlexDirection.Row}\n          alignItems={BoxAlignItems.Start}\n          twClassName=\"flex-1\"\n          gap={4}\n        >\n          {renderStartContent()}\n          <Box twClassName=\"flex-1\">\n            {renderLabel()}\n            {renderDescription()}\n          </Box>\n        </Box>\n\n        {/* End accessory */}\n        {endAccessory && <Box>{endAccessory}</Box>}\n      </Box>\n    </Pressable>\n  );\n};\n"]}
+{"version":3,"file":"ActionListItem.cjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport {\n  Box,\n  BoxAlignItems,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, TextColor, TextVariant } from '../Text';\n\nimport type { ActionListItemProps } from './ActionListItem.types';\n\nexport const ActionListItem: React.FC<ActionListItemProps> = ({\n  label,\n  description,\n  startAccessory,\n  endAccessory,\n  iconName,\n  labelTextProps,\n  descriptionTextProps,\n  iconProps,\n  isDisabled = false,\n  onPress,\n  pressableProps,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const renderLabel = () => {\n    if (typeof label === 'string') {\n      return (\n        <Text variant={TextVariant.BodyMd} {...labelTextProps}>\n          {label}\n        </Text>\n      );\n    }\n    return label;\n  };\n\n  const renderDescription = () => {\n    if (!description) {\n      return null;\n    }\n\n    if (typeof description === 'string') {\n      return (\n        <Text\n          variant={TextVariant.BodySm}\n          color={TextColor.TextAlternative}\n          {...descriptionTextProps}\n        >\n          {description}\n        </Text>\n      );\n    }\n    return description;\n  };\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n\n    if (iconName) {\n      return (\n        <Box\n          alignItems={BoxAlignItems.Center}\n          justifyContent={BoxJustifyContent.Center}\n          twClassName=\"h-6\"\n        >\n          <Icon name={iconName} size={IconSize.Md} {...iconProps} />\n        </Box>\n      );\n    }\n\n    return null;\n  };\n\n  const getPressableStyle = useCallback(\n    ({ pressed }: { pressed: boolean }) => {\n      const baseStyle = tw.style(\n        'px-4 py-3',\n        pressed && !isDisabled && 'bg-pressed',\n        isDisabled && 'opacity-50',\n        twClassName,\n      );\n\n      return style ? [baseStyle, style] : baseStyle;\n    },\n    [tw, isDisabled, twClassName, style],\n  );\n\n  return (\n    <Pressable\n      onPress={onPress}\n      disabled={isDisabled}\n      style={getPressableStyle}\n      {...pressableProps}\n      {...props}\n    >\n      <Box\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Center}\n        justifyContent={BoxJustifyContent.Between}\n        gap={4}\n      >\n        {/* Left side content (start accessory/icon + label/description) */}\n        <Box\n          flexDirection={BoxFlexDirection.Row}\n          alignItems={BoxAlignItems.Start}\n          twClassName=\"flex-1\"\n          gap={4}\n        >\n          {renderStartContent()}\n          <Box twClassName=\"flex-1\">\n            {renderLabel()}\n            {renderDescription()}\n          </Box>\n        </Box>\n\n        {/* End accessory */}\n        {endAccessory && <Box>{endAccessory}</Box>}\n      </Box>\n    </Pressable>\n  );\n};\n"]}

package/dist/components/ActionListItem/ActionListItem.mjs

@@ -44,7 +44,7 @@ export const ActionListItem = ({ label, description, startAccessory, endAccessor
         return null;
     };
     const getPressableStyle = useCallback(({ pressed }) => {
-        const baseStyle = tw.style('bg-default px-4 py-3', pressed && !isDisabled && 'bg-default-pressed', isDisabled && 'opacity-50', twClassName);
+        const baseStyle = tw.style('px-4 py-3', pressed && !isDisabled && 'bg-pressed', isDisabled && 'opacity-50', twClassName);
         return style ? [baseStyle, style] : baseStyle;
     }, [tw, isDisabled, twClassName, style]);
     return (<Pressable onPress={onPress} disabled={isDisabled} style={getPressableStyle} {...pressableProps} {...props}>

package/dist/components/ActionListItem/ActionListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionListItem.mjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport {\n  Box,\n  BoxAlignItems,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, TextColor, TextVariant } from '../Text';\n\nimport type { ActionListItemProps } from './ActionListItem.types';\n\nexport const ActionListItem: React.FC<ActionListItemProps> = ({\n  label,\n  description,\n  startAccessory,\n  endAccessory,\n  iconName,\n  labelTextProps,\n  descriptionTextProps,\n  iconProps,\n  isDisabled = false,\n  onPress,\n  pressableProps,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const renderLabel = () => {\n    if (typeof label === 'string') {\n      return (\n        <Text variant={TextVariant.BodyMd} {...labelTextProps}>\n          {label}\n        </Text>\n      );\n    }\n    return label;\n  };\n\n  const renderDescription = () => {\n    if (!description) {\n      return null;\n    }\n\n    if (typeof description === 'string') {\n      return (\n        <Text\n          variant={TextVariant.BodySm}\n          color={TextColor.TextAlternative}\n          {...descriptionTextProps}\n        >\n          {description}\n        </Text>\n      );\n    }\n    return description;\n  };\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n\n    if (iconName) {\n      return (\n        <Box\n          alignItems={BoxAlignItems.Center}\n          justifyContent={BoxJustifyContent.Center}\n          twClassName=\"h-6\"\n        >\n          <Icon name={iconName} size={IconSize.Md} {...iconProps} />\n        </Box>\n      );\n    }\n\n    return null;\n  };\n\n  const getPressableStyle = useCallback(\n    ({ pressed }: { pressed: boolean }) => {\n      const baseStyle = tw.style(\n        'bg-default px-4 py-3',\n        pressed && !isDisabled && 'bg-default-pressed',\n        isDisabled && 'opacity-50',\n        twClassName,\n      );\n\n      return style ? [baseStyle, style] : baseStyle;\n    },\n    [tw, isDisabled, twClassName, style],\n  );\n\n  return (\n    <Pressable\n      onPress={onPress}\n      disabled={isDisabled}\n      style={getPressableStyle}\n      {...pressableProps}\n      {...props}\n    >\n      <Box\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Center}\n        justifyContent={BoxJustifyContent.Between}\n        gap={4}\n      >\n        {/* Left side content (start accessory/icon + label/description) */}\n        <Box\n          flexDirection={BoxFlexDirection.Row}\n          alignItems={BoxAlignItems.Start}\n          twClassName=\"flex-1\"\n          gap={4}\n        >\n          {renderStartContent()}\n          <Box twClassName=\"flex-1\">\n            {renderLabel()}\n            {renderDescription()}\n          </Box>\n        </Box>\n\n        {/* End accessory */}\n        {endAccessory && <Box>{endAccessory}</Box>}\n      </Box>\n    </Pressable>\n  );\n};\n"]}
+{"version":3,"file":"ActionListItem.mjs","sourceRoot":"","sources":["../../../src/components/ActionListItem/ActionListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport {\n  Box,\n  BoxAlignItems,\n  BoxFlexDirection,\n  BoxJustifyContent,\n} from '../Box';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, TextColor, TextVariant } from '../Text';\n\nimport type { ActionListItemProps } from './ActionListItem.types';\n\nexport const ActionListItem: React.FC<ActionListItemProps> = ({\n  label,\n  description,\n  startAccessory,\n  endAccessory,\n  iconName,\n  labelTextProps,\n  descriptionTextProps,\n  iconProps,\n  isDisabled = false,\n  onPress,\n  pressableProps,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\n\n  const renderLabel = () => {\n    if (typeof label === 'string') {\n      return (\n        <Text variant={TextVariant.BodyMd} {...labelTextProps}>\n          {label}\n        </Text>\n      );\n    }\n    return label;\n  };\n\n  const renderDescription = () => {\n    if (!description) {\n      return null;\n    }\n\n    if (typeof description === 'string') {\n      return (\n        <Text\n          variant={TextVariant.BodySm}\n          color={TextColor.TextAlternative}\n          {...descriptionTextProps}\n        >\n          {description}\n        </Text>\n      );\n    }\n    return description;\n  };\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n\n    if (iconName) {\n      return (\n        <Box\n          alignItems={BoxAlignItems.Center}\n          justifyContent={BoxJustifyContent.Center}\n          twClassName=\"h-6\"\n        >\n          <Icon name={iconName} size={IconSize.Md} {...iconProps} />\n        </Box>\n      );\n    }\n\n    return null;\n  };\n\n  const getPressableStyle = useCallback(\n    ({ pressed }: { pressed: boolean }) => {\n      const baseStyle = tw.style(\n        'px-4 py-3',\n        pressed && !isDisabled && 'bg-pressed',\n        isDisabled && 'opacity-50',\n        twClassName,\n      );\n\n      return style ? [baseStyle, style] : baseStyle;\n    },\n    [tw, isDisabled, twClassName, style],\n  );\n\n  return (\n    <Pressable\n      onPress={onPress}\n      disabled={isDisabled}\n      style={getPressableStyle}\n      {...pressableProps}\n      {...props}\n    >\n      <Box\n        flexDirection={BoxFlexDirection.Row}\n        alignItems={BoxAlignItems.Center}\n        justifyContent={BoxJustifyContent.Between}\n        gap={4}\n      >\n        {/* Left side content (start accessory/icon + label/description) */}\n        <Box\n          flexDirection={BoxFlexDirection.Row}\n          alignItems={BoxAlignItems.Start}\n          twClassName=\"flex-1\"\n          gap={4}\n        >\n          {renderStartContent()}\n          <Box twClassName=\"flex-1\">\n            {renderLabel()}\n            {renderDescription()}\n          </Box>\n        </Box>\n\n        {/* End accessory */}\n        {endAccessory && <Box>{endAccessory}</Box>}\n      </Box>\n    </Pressable>\n  );\n};\n"]}

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":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,kBAAkB,EAAE,6BAA6B,GAAG,cAAc,EAClE,WAAW,EAAE,sBAAsB,EACnC,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE5D,OAAO,CACL,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,eAAe,CAAC,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,CACtD,eAAe,CAAC,CAAC,CAAC,CAAC,CACnB,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACrB,WAAW,CAAC,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CACzD,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,cAAc,CAEf;;MAAA,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CACvB;QAAA,CAAC,UAAU,CAAC,KAAK,CAAC;YAChB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,UAAU,CAAC,CAEf;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC,CAEJ;;QAAA,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,CAAC,GAAG,CACF;YAAA,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC5B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,gBAAgB,CAAC,CACtD;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CACH;UAAA,EAAE,GAAG,CAAC,CACP,CAED;;QAAA,CAAC,UAAU,CAAC,QAAQ,CAAC;YACnB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAC1D;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC,CAEJ;;QAAA,CAAC,sBAAsB,IAAI,CACzB,CAAC,GAAG,CAAC,WAAW,CAAC,MAAM,CACrB;YAAA,CAAC,MAAM,CACL,IAAI,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CACpB,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAC7B,IAAI,yBAAyB,CAAC,CAC9B,OAAO,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAEjC;cAAA,CAAC,iBAAiB,CACpB;YAAA,EAAE,MAAM,CACV;UAAA,EAAE,GAAG,CAAC,CACP,CACH;MAAA,EAAE,GAAG,CAEL;;MAAA,CAAC,qBAAqB,IAAI,CACxB,CAAC,UAAU,CACT,WAAW,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAC/D,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACzB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,kBAAkB,CAAC,CAAC,6BAA6B,CAAC,CAClD,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,wBAAwB,CAAC,EAC7B,CACH,CACH;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC","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/ButtonBase/ButtonBase.cjs

@@ -128,7 +128,7 @@ const ButtonBase = ({ children, textProps, size = design_system_shared_1.ButtonB
 
             <BoxRow_1.BoxRow {...restContentWrapper} twClassName={isLoading
                     ? (0, design_system_shared_1.mergeTwClassName)('opacity-0', contentWrapperTw)
-                    : contentWrapperTw} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={iconSize} twClassName={(0, design_system_shared_1.mergeTwClassName)('shrink-0', iconClassName ? iconClassName(pressed) : undefined)} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={iconSize} twClassName={(0, design_system_shared_1.mergeTwClassName)('shrink-0', iconClassName ? iconClassName(pressed) : undefined)} {...endIconProps}/>) : (endAccessory)} textProps={{
+                    : contentWrapperTw} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={iconSize} {...startIconProps} twClassName={(0, design_system_shared_1.mergeTwClassName)((0, design_system_shared_1.mergeTwClassName)('shrink-0', iconClassName ? iconClassName(pressed) : undefined), startIconProps?.twClassName)}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={iconSize} {...endIconProps} twClassName={(0, design_system_shared_1.mergeTwClassName)((0, design_system_shared_1.mergeTwClassName)('shrink-0', iconClassName ? iconClassName(pressed) : undefined), endIconProps?.twClassName)}/>) : (endAccessory)} textProps={{
                     variant: labelTextVariant,
                     fontWeight: design_system_shared_1.FontWeight.Medium,
                     color: design_system_shared_1.TextColor.TextDefault,

package/dist/components/ButtonBase/ButtonBase.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  mergeTwClassName,\n  TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={mergeTwClassName(\n                  'absolute inset-0 flex items-center justify-center',\n                  loadingWrapperTw,\n                )}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={\n                isLoading\n                  ? mergeTwClassName('opacity-0', contentWrapperTw)\n                  : contentWrapperTw\n              }\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    twClassName={mergeTwClassName(\n                      'shrink-0',\n                      iconClassName ? iconClassName(pressed) : undefined,\n                    )}\n                    {...startIconProps}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    twClassName={mergeTwClassName(\n                      'shrink-0',\n                      iconClassName ? iconClassName(pressed) : undefined,\n                    )}\n                    {...endIconProps}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: mergeTwClassName(\n                  mergeTwClassName(\n                    'shrink grow-0 flex-wrap text-center',\n                    textClassName ? textClassName(pressed) : undefined,\n                  ),\n                  textProps?.twClassName,\n                ),\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  mergeTwClassName,\n  TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={mergeTwClassName(\n                  'absolute inset-0 flex items-center justify-center',\n                  loadingWrapperTw,\n                )}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={\n                isLoading\n                  ? mergeTwClassName('opacity-0', contentWrapperTw)\n                  : contentWrapperTw\n              }\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    {...startIconProps}\n                    twClassName={mergeTwClassName(\n                      mergeTwClassName(\n                        'shrink-0',\n                        iconClassName ? iconClassName(pressed) : undefined,\n                      ),\n                      startIconProps?.twClassName,\n                    )}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    {...endIconProps}\n                    twClassName={mergeTwClassName(\n                      mergeTwClassName(\n                        'shrink-0',\n                        iconClassName ? iconClassName(pressed) : undefined,\n                      ),\n                      endIconProps?.twClassName,\n                    )}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: mergeTwClassName(\n                  mergeTwClassName(\n                    'shrink grow-0 flex-wrap text-center',\n                    textClassName ? textClassName(pressed) : undefined,\n                  ),\n                  textProps?.twClassName,\n                ),\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,cAAc;AAgBvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,sYA2BpB,eAAe,sBAkNjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,cAAc;AAgBvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,sYA2BpB,eAAe,sBAwNjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,cAAc;AAgBvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,sYA2BpB,eAAe,sBAkNjB,CAAC"}
+{"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkB,cAAc;AAgBvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,sYA2BpB,eAAe,sBAwNjB,CAAC"}

package/dist/components/ButtonBase/ButtonBase.mjs

@@ -109,7 +109,7 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
 
             <BoxRow {...restContentWrapper} twClassName={isLoading
                     ? mergeTwClassName('opacity-0', contentWrapperTw)
-                    : contentWrapperTw} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon name={finalStartIconName} size={iconSize} twClassName={mergeTwClassName('shrink-0', iconClassName ? iconClassName(pressed) : undefined)} {...startIconProps}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon name={finalEndIconName} size={iconSize} twClassName={mergeTwClassName('shrink-0', iconClassName ? iconClassName(pressed) : undefined)} {...endIconProps}/>) : (endAccessory)} textProps={{
+                    : contentWrapperTw} gap={hasAccessories ? 1 : 0} startAccessory={finalStartIconName ? (<Icon name={finalStartIconName} size={iconSize} {...startIconProps} twClassName={mergeTwClassName(mergeTwClassName('shrink-0', iconClassName ? iconClassName(pressed) : undefined), startIconProps?.twClassName)}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon name={finalEndIconName} size={iconSize} {...endIconProps} twClassName={mergeTwClassName(mergeTwClassName('shrink-0', iconClassName ? iconClassName(pressed) : undefined), endIconProps?.twClassName)}/>) : (endAccessory)} textProps={{
                     variant: labelTextVariant,
                     fontWeight: FontWeight.Medium,
                     color: TextColor.TextDefault,

package/dist/components/ButtonBase/ButtonBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  mergeTwClassName,\n  TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={mergeTwClassName(\n                  'absolute inset-0 flex items-center justify-center',\n                  loadingWrapperTw,\n                )}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={\n                isLoading\n                  ? mergeTwClassName('opacity-0', contentWrapperTw)\n                  : contentWrapperTw\n              }\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    twClassName={mergeTwClassName(\n                      'shrink-0',\n                      iconClassName ? iconClassName(pressed) : undefined,\n                    )}\n                    {...startIconProps}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    twClassName={mergeTwClassName(\n                      'shrink-0',\n                      iconClassName ? iconClassName(pressed) : undefined,\n                    )}\n                    {...endIconProps}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: mergeTwClassName(\n                  mergeTwClassName(\n                    'shrink grow-0 flex-wrap text-center',\n                    textClassName ? textClassName(pressed) : undefined,\n                  ),\n                  textProps?.twClassName,\n                ),\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}
+{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,SAAS,EACV,uCAAuC;AACxC,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,QAAO,EAAE,OAAO,EAAE,cAAc;;AAGvC,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,0BAAgB;AAC1C,OAAO,EAAE,cAAc,EAAE,oDAA0C;AACnE,OAAO,EAAE,OAAO,EAAE,6CAAmC;AAErD,OAAO,EACL,4BAA4B,EAC5B,gCAAgC,EAChC,gCAAgC,EAChC,uCAAuC,EACvC,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,GAAG,QAAQ,EAC5B,oBAAoB,EACpB,qBAAqB,EACrB,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,QAAQ,GAAG,OAAO,CAAC,kBAAkB,IAAI,cAAc,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,OAAO,CAAC,gBAAgB,IAAI,YAAY,CAAC,CAAC;IACzD,MAAM,cAAc,GAAG,QAAQ,IAAI,MAAM,CAAC;IAE1C,MAAM,QAAQ,GAAG,4BAA4B,CAAC,IAAI,CAAC,CAAC;IACpD,MAAM,gBAAgB,GAAG,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAEhE,+CAA+C;IAC/C,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3C,IAAI,kBAAkB,EAAE;YACtB,OAAO,kBAAkB,CAAC;SAC3B;QAED,6DAA6D;QAC7D,IAAI,SAAS,IAAI,WAAW,EAAE;YAC5B,OAAO,WAAW,CAAC;SACpB;QAED,+CAA+C;QAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,OAAO,QAAQ,CAAC;SACjB;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3D,gEAAgE;IAChE,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,iBAAiB,EAAE;YACrB,OAAO,iBAAiB,CAAC;SAC1B;QAED,IAAI,SAAS,EAAE;YACb,OAAO,0CAA0C,CAAC;SACnD;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnC,2DAA2D;IAC3D,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,MAAM,KAAK,GAA2C,EAAE,CAAC;QAEzD,IAAI,UAAU,IAAI,SAAS,EAAE;YAC3B,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;SACvB;QAED,IAAI,SAAS,EAAE;YACb,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;SACnB;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,cAAc,CACb,QAAQ,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAClC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,kBAAkB,CAAC,CAAC,uBAAuB,CAAC,CAC5C,iBAAiB,CAAC,CAAC,sBAAsB,CAAC,CAC1C,oBAAoB,CAAC,CAAC,oBAAoB,CAAC,CAC3C,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,UAAU,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,+CAA+C;YAC/C,MAAM,eAAe,GACnB,OAAO,WAAW,KAAK,UAAU;gBAC/B,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC;gBACtB,CAAC,CAAC,WAAW,CAAC;YAElB,gCAAgC;YAChC,MAAM,YAAY,GAAG,EAAE,CAAC,KAAK;YAC3B,kDAAkD;YAClD,sCAAsC;YACtC,iBAAiB;YACjB,0BAA0B;YAC1B,yEAAyE;YACzE,gCAAgC,CAAC,IAAI,CAAC,EACtC,uCAAuC,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC/D,OAAO;YACP,oCAAoC,CAAC,IAAI,CAAC;YAC1C,sBAAsB;YACtB,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;YACzC,mEAAmE;YACnE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;YACrC,iBAAiB;YACjB,eAAe,CAChB,CAAC;YAEF,2CAA2C;YAC3C,MAAM,aAAa,GAA2B,CAAC,YAAY,CAAC,CAAC;YAE7D,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,IAAI,eAAe,EAAE;gBACnB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aACrC;YAED,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACf,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,GAC5D,mBAAmB,IAAI,EAAE,CAAC;YAC5B,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE,GAC5D,mBAAmB,IAAI,EAAE,CAAC;YAE5B,OAAO,CACL,EACE;YAAA,CAAC,6BAA6B,CAC9B;YAAA,CAAC,SAAS,IAAI,CACZ,CAAC,GAAG,CACF,IAAI,kBAAkB,CAAC,CACvB,WAAW,CAAC,CAAC,gBAAgB,CAC3B,mDAAmD,EACnD,gBAAgB,CACjB,CAAC,CAEF;gBAAA,CAAC,OAAO,CACN,KAAK,CAAC,CACJ,aAAa;wBACX,CAAC,CAAE,aAAa,CAAC,OAAO,CAAe;wBACvC,CAAC,CAAC,SAAS,CAAC,WAAW,CAC1B,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,YAAY,CAAC,CACjB,gBAAgB,CAAC,CAAC;wBAChB,IAAI,EAAE,QAAQ;wBACd,GAAG,YAAY,EAAE,gBAAgB;qBAClC,CAAC,CACF,gBAAgB,CAAC,CAAC;wBAChB,aAAa,EAAE,CAAC;wBAChB,OAAO,EAAE,gBAAgB;wBACzB,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;wBACxD,GAAG,YAAY,EAAE,gBAAgB;qBAClC,CAAC,EAEN;cAAA,EAAE,GAAG,CAAC,CACP,CAED;;YAAA,CAAC,MAAM,CACL,IAAI,kBAAkB,CAAC,CACvB,WAAW,CAAC,CACV,SAAS;oBACP,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,CAAC;oBACjD,CAAC,CAAC,gBAAgB,CACrB,CACD,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5B,cAAc,CAAC,CACb,kBAAkB,CAAC,CAAC,CAAC,CACnB,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,kBAAkB,CAAC,CACzB,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,cAAc,CAAC,CACnB,WAAW,CAAC,CAAC,gBAAgB,CAC3B,gBAAgB,CACd,UAAU,EACV,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CACnD,EACD,cAAc,EAAE,WAAW,CAC5B,CAAC,EACF,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CACF,CACD,YAAY,CAAC,CACX,gBAAgB,CAAC,CAAC,CAAC,CACjB,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,gBAAgB,CAAC,CACvB,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,YAAY,CAAC,CACjB,WAAW,CAAC,CAAC,gBAAgB,CAC3B,gBAAgB,CACd,UAAU,EACV,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CACnD,EACD,YAAY,EAAE,WAAW,CAC1B,CAAC,EACF,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACF,CACD,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,gBAAgB;oBACzB,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;oBAC5B,aAAa,EAAE,CAAC;oBAChB,aAAa,EAAE,MAAM;oBACrB,GAAG,SAAS;oBACZ,WAAW,EAAE,gBAAgB,CAC3B,gBAAgB,CACd,qCAAqC,EACrC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CACnD,EACD,SAAS,EAAE,WAAW,CACvB;iBACF,CAAC,CAEF;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,MAAM,CACV;UAAA,GAAG,CACJ,CAAC;QACJ,CAAC,CACH;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  ButtonBaseSize,\n  FontWeight,\n  mergeTwClassName,\n  TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n  MAP_BUTTONBASE_SIZE_ICONSIZE,\n  MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n  getButtonBaseBorderRadiusTwClass,\n  getButtonBaseHorizontalPaddingTwClasses,\n  TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n  children,\n  textProps,\n  size = ButtonBaseSize.Lg,\n  isLoading,\n  loadingText,\n  spinnerProps,\n  loadingWrapperProps,\n  contentWrapperProps,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  isDisabled,\n  isFullWidth,\n  twClassName,\n  textClassName,\n  iconClassName,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  accessibilityRole = 'button',\n  accessibilityActions,\n  onAccessibilityAction,\n  ...props\n}: ButtonBaseProps) => {\n  const tw = useTailwind();\n\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  const hasStart = Boolean(finalStartIconName || startAccessory);\n  const hasEnd = Boolean(finalEndIconName || endAccessory);\n  const hasAccessories = hasStart || hasEnd;\n\n  const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n  const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\n\n  // Generate accessibility label if not provided\n  const finalAccessibilityLabel = useMemo(() => {\n    if (accessibilityLabel) {\n      return accessibilityLabel;\n    }\n\n    // For loading state with loadingText, prioritize loadingText\n    if (isLoading && loadingText) {\n      return loadingText;\n    }\n\n    // If children is a string, use it as the label\n    if (typeof children === 'string') {\n      return children;\n    }\n\n    return undefined;\n  }, [accessibilityLabel, children, isLoading, loadingText]);\n\n  // Generate accessibility hint for loading state if not provided\n  const finalAccessibilityHint = useMemo(() => {\n    if (accessibilityHint) {\n      return accessibilityHint;\n    }\n\n    if (isLoading) {\n      return 'Button is currently loading, please wait';\n    }\n\n    return undefined;\n  }, [accessibilityHint, isLoading]);\n\n  // Create accessibilityState object with only truthy values\n  const accessibilityState = useMemo(() => {\n    const state: { disabled?: boolean; busy?: boolean } = {};\n\n    if (isDisabled || isLoading) {\n      state.disabled = true;\n    }\n\n    if (isLoading) {\n      state.busy = true;\n    }\n\n    return state;\n  }, [isDisabled, isLoading]);\n\n  return (\n    <ButtonAnimated\n      disabled={isDisabled || isLoading}\n      accessibilityRole={accessibilityRole}\n      accessibilityLabel={finalAccessibilityLabel}\n      accessibilityHint={finalAccessibilityHint}\n      accessibilityActions={accessibilityActions}\n      onAccessibilityAction={onAccessibilityAction}\n      accessibilityState={accessibilityState}\n      accessible\n      style={({ pressed }) => {\n        // Evaluate custom className if it's a function\n        const customClassName =\n          typeof twClassName === 'function'\n            ? twClassName(pressed)\n            : twClassName;\n\n        // Build button container styles\n        const buttonStyles = tw.style(\n          // Base layout - flex container for button content\n          'flex-row items-center justify-center',\n          // Visual styling\n          'bg-muted overflow-hidden',\n          // Conditional Border Radius and Horizontal Spacing based on requirements\n          getButtonBaseBorderRadiusTwClass(size),\n          getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\n          // Size\n          TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n          // State-based opacity\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          // Width - use self-start to prevent stretching when not full width\n          isFullWidth ? 'w-full' : 'self-start',\n          // Custom classes\n          customClassName,\n        );\n\n        // Merge with additional styles if provided\n        const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n        const additionalStyle =\n          typeof style === 'function' ? style({ pressed }) : style;\n\n        if (additionalStyle) {\n          computedStyle.push(additionalStyle);\n        }\n\n        return computedStyle;\n      }}\n      {...props}\n    >\n      {({ pressed }) => {\n        const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n          loadingWrapperProps ?? {};\n        const { twClassName: contentWrapperTw, ...restContentWrapper } =\n          contentWrapperProps ?? {};\n\n        return (\n          <>\n            {/* Loading spinner overlay */}\n            {isLoading && (\n              <Box\n                {...restLoadingWrapper}\n                twClassName={mergeTwClassName(\n                  'absolute inset-0 flex items-center justify-center',\n                  loadingWrapperTw,\n                )}\n              >\n                <Spinner\n                  color={\n                    textClassName\n                      ? (textClassName(pressed) as IconColor)\n                      : IconColor.IconDefault\n                  }\n                  loadingText={loadingText}\n                  {...spinnerProps}\n                  spinnerIconProps={{\n                    size: iconSize,\n                    ...spinnerProps?.spinnerIconProps,\n                  }}\n                  loadingTextProps={{\n                    numberOfLines: 1,\n                    variant: labelTextVariant,\n                    twClassName: textClassName ? textClassName(pressed) : '',\n                    ...spinnerProps?.loadingTextProps,\n                  }}\n                />\n              </Box>\n            )}\n\n            <BoxRow\n              {...restContentWrapper}\n              twClassName={\n                isLoading\n                  ? mergeTwClassName('opacity-0', contentWrapperTw)\n                  : contentWrapperTw\n              }\n              gap={hasAccessories ? 1 : 0}\n              startAccessory={\n                finalStartIconName ? (\n                  <Icon\n                    name={finalStartIconName}\n                    size={iconSize}\n                    {...startIconProps}\n                    twClassName={mergeTwClassName(\n                      mergeTwClassName(\n                        'shrink-0',\n                        iconClassName ? iconClassName(pressed) : undefined,\n                      ),\n                      startIconProps?.twClassName,\n                    )}\n                  />\n                ) : (\n                  startAccessory\n                )\n              }\n              endAccessory={\n                finalEndIconName ? (\n                  <Icon\n                    name={finalEndIconName}\n                    size={iconSize}\n                    {...endIconProps}\n                    twClassName={mergeTwClassName(\n                      mergeTwClassName(\n                        'shrink-0',\n                        iconClassName ? iconClassName(pressed) : undefined,\n                      ),\n                      endIconProps?.twClassName,\n                    )}\n                  />\n                ) : (\n                  endAccessory\n                )\n              }\n              textProps={{\n                variant: labelTextVariant,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                numberOfLines: 1,\n                ellipsizeMode: 'clip',\n                ...textProps,\n                twClassName: mergeTwClassName(\n                  mergeTwClassName(\n                    'shrink grow-0 flex-wrap text-center',\n                    textClassName ? textClassName(pressed) : undefined,\n                  ),\n                  textProps?.twClassName,\n                ),\n              }}\n            >\n              {children}\n            </BoxRow>\n          </>\n        );\n      }}\n    </ButtonAnimated>\n  );\n};\n"]}