@metamask-previews/design-system-react-native 0.11.0-preview.9c677c4 → 0.13.0-preview.69c659c

package/CHANGELOG.md

@@ -7,6 +7,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.13.0]
+
+### Changed
+
+- `FontWeight.Bold` and the React Native `Text` component now describe bold as weight 600; the Storybook mobile `FontLoader` and `@metamask/design-system-twrnc-preset` now reference the `Geist-SemiBold`/`Geist-SemiBoldItalic` assets, so update any custom font registrations that previously assumed weight 700 as explained in the [migration guide](./MIGRATION.md#from-version-0120-to-0130) ([#1017](https://github.com/MetaMask/metamask-design-system/pull/1017)).
+- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`, `BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now derive from const objects annotated `as const`, producing string-union typings per ADR-0003/ADR-0004; the React Native entry point still exports the same names, so your imports stay on `@metamask/design-system-react-native` while the shared package hosts the canonical definitions ([#1014](https://github.com/MetaMask/metamask-design-system/pull/1014); see https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md and https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md).
+- Documented the Button migration instructions (prop, variant, and size mappings) in [MIGRATION.md#button-component](./MIGRATION.md#button-component) so both web and native developers follow the same before/after story ([#999](https://github.com/MetaMask/metamask-design-system/pull/999)).
+
+## [0.12.0]
+
+### Added
+
+- Added `BannerAlert` component ([#966](https://github.com/MetaMask/metamask-design-system/pull/966))
+- Added `KeyValueRow` component ([#959](https://github.com/MetaMask/metamask-design-system/pull/959))
+
+### Changed
+
+- **BREAKING:** Simplified `TextButton` to a text-only control and removed `size`/`TextButtonSize`, inverse/disabled props, and icon/accessory props ([#1001](https://github.com/MetaMask/metamask-design-system/pull/1001))
+  - See [Migration Guide](./MIGRATION.md#from-version-0110-to-0120)
+- **BREAKING:** Removed `TextFieldSize` and the `size` prop; `TextField` is now a single fixed-height (48px) row ([#1000](https://github.com/MetaMask/metamask-design-system/pull/1000))
+  - See [Migration Guide](./MIGRATION.md#from-version-0110-to-0120)
+- Updated `Candlestick` icon asset with smaller size variant ([#998](https://github.com/MetaMask/metamask-design-system/pull/998))
+
+### Fixed
+
+- Improved `Input` single-line typography alignment (including iOS placeholder behavior) ([#1000](https://github.com/MetaMask/metamask-design-system/pull/1000))
+
 ## [0.11.0]
 
 ### Added
@@ -235,7 +262,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.11.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.13.0...HEAD
+[0.13.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.12.0...@metamask/design-system-react-native@0.13.0
+[0.12.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.11.0...@metamask/design-system-react-native@0.12.0
 [0.11.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.10.0...@metamask/design-system-react-native@0.11.0
 [0.10.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.9.0...@metamask/design-system-react-native@0.10.0
 [0.9.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.8.0...@metamask/design-system-react-native@0.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarNetwork component props.\n */\nexport type AvatarNetworkProps = {\n  /**\n   * Optional prop for the source of the image or SVG.\n   */\n  src?: ImageOrSvgSrc;\n  /**\n   * Optional props for network name, to be used to calculate the fallbackText.\n   */\n  name?: string;\n  /**\n   * Optional prop to pass to the underlying ImageOrSvg element\n   * Useful for overriding the default alt text which is the dapp name\n   */\n  imageOrSvgProps?: Partial<ImageOrSvgProps>;\n} & Omit<AvatarBaseProps, 'children'>;\n"]}
+{"version":3,"file":"AvatarNetwork.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarNetwork component props (React Native platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React Native-specific platform concerns\n */\nexport type AvatarNetworkProps = AvatarNetworkPropsShared &\n  Omit<AvatarBaseProps, 'children'> & {\n    /**\n     * Optional prop for the source of the image or SVG.\n     */\n    src?: ImageOrSvgSrc;\n    /**\n     * Optional prop to pass to the underlying ImageOrSvg element.\n     * Useful for overriding the default alt text which is the network name.\n     */\n    imageOrSvgProps?: Partial<ImageOrSvgProps>;\n  };\n"]}

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

@@ -1,21 +1,19 @@
+import type { AvatarNetworkPropsShared } from "@metamask-previews/design-system-shared";
 import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
 import type { ImageOrSvgProps, ImageOrSvgSrc } from "../temp-components/ImageOrSvg/index.cjs";
 /**
- * AvatarNetwork component props.
+ * AvatarNetwork component props (React Native platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React Native-specific platform concerns
  */
-export type AvatarNetworkProps = {
+export type AvatarNetworkProps = AvatarNetworkPropsShared & Omit<AvatarBaseProps, 'children'> & {
     /**
      * Optional prop for the source of the image or SVG.
      */
     src?: ImageOrSvgSrc;
     /**
-     * Optional props for network name, to be used to calculate the fallbackText.
-     */
-    name?: string;
-    /**
-     * Optional prop to pass to the underlying ImageOrSvg element
-     * Useful for overriding the default alt text which is the dapp name
+     * Optional prop to pass to the underlying ImageOrSvg element.
+     * Useful for overriding the default alt text which is the network name.
      */
     imageOrSvgProps?: Partial<ImageOrSvgProps>;
-} & Omit<AvatarBaseProps, 'children'>;
+};
 //# sourceMappingURL=AvatarNetwork.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"AvatarNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AAExF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,CAAC"}

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

@@ -1,21 +1,19 @@
+import type { AvatarNetworkPropsShared } from "@metamask-previews/design-system-shared";
 import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
 import type { ImageOrSvgProps, ImageOrSvgSrc } from "../temp-components/ImageOrSvg/index.mjs";
 /**
- * AvatarNetwork component props.
+ * AvatarNetwork component props (React Native platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React Native-specific platform concerns
  */
-export type AvatarNetworkProps = {
+export type AvatarNetworkProps = AvatarNetworkPropsShared & Omit<AvatarBaseProps, 'children'> & {
     /**
      * Optional prop for the source of the image or SVG.
      */
     src?: ImageOrSvgSrc;
     /**
-     * Optional props for network name, to be used to calculate the fallbackText.
-     */
-    name?: string;
-    /**
-     * Optional prop to pass to the underlying ImageOrSvg element
-     * Useful for overriding the default alt text which is the dapp name
+     * Optional prop to pass to the underlying ImageOrSvg element.
+     * Useful for overriding the default alt text which is the network name.
      */
     imageOrSvgProps?: Partial<ImageOrSvgProps>;
-} & Omit<AvatarBaseProps, 'children'>;
+};
 //# sourceMappingURL=AvatarNetwork.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"AvatarNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AAExF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GACvD,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarNetwork component props.\n */\nexport type AvatarNetworkProps = {\n  /**\n   * Optional prop for the source of the image or SVG.\n   */\n  src?: ImageOrSvgSrc;\n  /**\n   * Optional props for network name, to be used to calculate the fallbackText.\n   */\n  name?: string;\n  /**\n   * Optional prop to pass to the underlying ImageOrSvg element\n   * Useful for overriding the default alt text which is the dapp name\n   */\n  imageOrSvgProps?: Partial<ImageOrSvgProps>;\n} & Omit<AvatarBaseProps, 'children'>;\n"]}
+{"version":3,"file":"AvatarNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarNetwork component props (React Native platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React Native-specific platform concerns\n */\nexport type AvatarNetworkProps = AvatarNetworkPropsShared &\n  Omit<AvatarBaseProps, 'children'> & {\n    /**\n     * Optional prop for the source of the image or SVG.\n     */\n    src?: ImageOrSvgSrc;\n    /**\n     * Optional prop to pass to the underlying ImageOrSvg element.\n     * Useful for overriding the default alt text which is the network name.\n     */\n    imageOrSvgProps?: Partial<ImageOrSvgProps>;\n  };\n"]}

package/dist/components/BadgeWrapper/BadgeWrapper.cjs

@@ -24,11 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeWrapper = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native/index.js");
-const types_1 = require("../../types/index.cjs");
-const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeContainerProps, position = types_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = types_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, twClassName, style, ...props }) => {
+const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeContainerProps, position = design_system_shared_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = design_system_shared_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, twClassName, style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const [anchorWidth, setAnchorWidth] = (0, react_1.useState)(0);
     const [anchorHeight, setAnchorHeight] = (0, react_1.useState)(0);
@@ -52,10 +52,10 @@ const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeContainerP
         // 0.1464 is a mathematical coeeficient to move
         // from a 0,0 corner of a rectangular shape to the closest "corner"
         // of a circular shape anchor element
-        const anchorShapeXOffset = positionAnchorShape === types_1.BadgeWrapperPositionAnchorShape.Rectangular
+        const anchorShapeXOffset = positionAnchorShape === design_system_shared_1.BadgeWrapperPositionAnchorShape.Rectangular
             ? 0
             : anchorWidth * 0.1464;
-        const anchorShapeYOffset = positionAnchorShape === types_1.BadgeWrapperPositionAnchorShape.Rectangular
+        const anchorShapeYOffset = positionAnchorShape === design_system_shared_1.BadgeWrapperPositionAnchorShape.Rectangular
             ? 0
             : anchorHeight * 0.1464;
         // This is to center the badge in the corner of the anchor element
@@ -64,22 +64,22 @@ const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeContainerP
         const finalXOffset = anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;
         const finalYOffset = anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;
         switch (position) {
-            case types_1.BadgeWrapperPosition.TopRight:
+            case design_system_shared_1.BadgeWrapperPosition.TopRight:
                 return {
                     top: finalYOffset,
                     right: finalXOffset,
                 };
-            case types_1.BadgeWrapperPosition.BottomLeft:
+            case design_system_shared_1.BadgeWrapperPosition.BottomLeft:
                 return {
                     bottom: finalYOffset,
                     left: finalXOffset,
                 };
-            case types_1.BadgeWrapperPosition.TopLeft:
+            case design_system_shared_1.BadgeWrapperPosition.TopLeft:
                 return {
                     top: finalYOffset,
                     left: finalXOffset,
                 };
-            case types_1.BadgeWrapperPosition.BottomRight:
+            case design_system_shared_1.BadgeWrapperPosition.BottomRight:
             default:
                 return {
                     bottom: finalYOffset,

package/dist/components/BadgeWrapper/BadgeWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback, useState, useMemo } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\n\nimport {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = ({\n  children,\n  childrenContainerProps,\n  badge,\n  badgeContainerProps,\n  position = BadgeWrapperPosition.BottomRight,\n  positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n  positionXOffset = 0,\n  positionYOffset = 0,\n  customPosition,\n  twClassName,\n  style,\n  ...props\n}: BadgeWrapperProps) => {\n  const tw = useTailwind();\n  const [anchorWidth, setAnchorWidth] = useState<number>(0);\n  const [anchorHeight, setAnchorHeight] = useState<number>(0);\n  const [badgeWidth, setbadgeWidth] = useState<number>(0);\n  const [badgeHeight, setbadgeHeight] = useState<number>(0);\n\n  // Fetching the dimensions of the anchor and bagde element to properly position the badge\n  const getAnchorSize = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setAnchorWidth(width);\n    setAnchorHeight(height);\n  }, []);\n  const getBadgeSize = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setbadgeWidth(width);\n    setbadgeHeight(height);\n  }, []);\n\n  const finalPositions = useMemo(() => {\n    if (customPosition) {\n      return customPosition;\n    }\n    // 0.1464 is a mathematical coeeficient to move\n    // from a 0,0 corner of a rectangular shape to the closest \"corner\"\n    // of a circular shape anchor element\n    const anchorShapeXOffset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n        ? 0\n        : anchorWidth * 0.1464;\n    const anchorShapeYOffset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n        ? 0\n        : anchorHeight * 0.1464;\n    // This is to center the badge in the corner of the anchor element\n    const badgeCenteringXOffset = badgeWidth / 2;\n    const badgeCenteringYOffset = badgeHeight / 2;\n\n    const finalXOffset =\n      anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;\n    const finalYOffset =\n      anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;\n    switch (position) {\n      case BadgeWrapperPosition.TopRight:\n        return {\n          top: finalYOffset,\n          right: finalXOffset,\n        };\n      case BadgeWrapperPosition.BottomLeft:\n        return {\n          bottom: finalYOffset,\n          left: finalXOffset,\n        };\n      case BadgeWrapperPosition.TopLeft:\n        return {\n          top: finalYOffset,\n          left: finalXOffset,\n        };\n      case BadgeWrapperPosition.BottomRight:\n      default:\n        return {\n          bottom: finalYOffset,\n          right: finalXOffset,\n        };\n    }\n  }, [\n    position,\n    positionAnchorShape,\n    anchorWidth,\n    anchorHeight,\n    badgeWidth,\n    badgeHeight,\n    positionXOffset,\n    positionYOffset,\n    customPosition,\n  ]);\n\n  return (\n    <View\n      {...props}\n      style={[tw.style('relative self-start', twClassName), style]}\n    >\n      <View onLayout={getAnchorSize} {...childrenContainerProps}>\n        {children}\n      </View>\n      <View\n        onLayout={getBadgeSize}\n        style={[tw.style('absolute'), { ...finalPositions }]}\n        {...badgeContainerProps}\n      >\n        {badge}\n      </View>\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"BadgeWrapper.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback, useState, useMemo } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = ({\n  children,\n  childrenContainerProps,\n  badge,\n  badgeContainerProps,\n  position = BadgeWrapperPosition.BottomRight,\n  positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n  positionXOffset = 0,\n  positionYOffset = 0,\n  customPosition,\n  twClassName,\n  style,\n  ...props\n}: BadgeWrapperProps) => {\n  const tw = useTailwind();\n  const [anchorWidth, setAnchorWidth] = useState<number>(0);\n  const [anchorHeight, setAnchorHeight] = useState<number>(0);\n  const [badgeWidth, setbadgeWidth] = useState<number>(0);\n  const [badgeHeight, setbadgeHeight] = useState<number>(0);\n\n  // Fetching the dimensions of the anchor and bagde element to properly position the badge\n  const getAnchorSize = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setAnchorWidth(width);\n    setAnchorHeight(height);\n  }, []);\n  const getBadgeSize = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setbadgeWidth(width);\n    setbadgeHeight(height);\n  }, []);\n\n  const finalPositions = useMemo(() => {\n    if (customPosition) {\n      return customPosition;\n    }\n    // 0.1464 is a mathematical coeeficient to move\n    // from a 0,0 corner of a rectangular shape to the closest \"corner\"\n    // of a circular shape anchor element\n    const anchorShapeXOffset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n        ? 0\n        : anchorWidth * 0.1464;\n    const anchorShapeYOffset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n        ? 0\n        : anchorHeight * 0.1464;\n    // This is to center the badge in the corner of the anchor element\n    const badgeCenteringXOffset = badgeWidth / 2;\n    const badgeCenteringYOffset = badgeHeight / 2;\n\n    const finalXOffset =\n      anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;\n    const finalYOffset =\n      anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;\n    switch (position) {\n      case BadgeWrapperPosition.TopRight:\n        return {\n          top: finalYOffset,\n          right: finalXOffset,\n        };\n      case BadgeWrapperPosition.BottomLeft:\n        return {\n          bottom: finalYOffset,\n          left: finalXOffset,\n        };\n      case BadgeWrapperPosition.TopLeft:\n        return {\n          top: finalYOffset,\n          left: finalXOffset,\n        };\n      case BadgeWrapperPosition.BottomRight:\n      default:\n        return {\n          bottom: finalYOffset,\n          right: finalXOffset,\n        };\n    }\n  }, [\n    position,\n    positionAnchorShape,\n    anchorWidth,\n    anchorHeight,\n    badgeWidth,\n    badgeHeight,\n    positionXOffset,\n    positionYOffset,\n    customPosition,\n  ]);\n\n  return (\n    <View\n      {...props}\n      style={[tw.style('relative self-start', twClassName), style]}\n    >\n      <View onLayout={getAnchorSize} {...childrenContainerProps}>\n        {children}\n      </View>\n      <View\n        onLayout={getBadgeSize}\n        style={[tw.style('absolute'), { ...finalPositions }]}\n        {...badgeContainerProps}\n      >\n        {badge}\n      </View>\n    </View>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,cAAc;AAS9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,oLAatB,iBAAiB,sBA8FnB,CAAC"}
+{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAyC,cAAc;AAI9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,oLAatB,iBAAiB,sBA8FnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,cAAc;AAS9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,oLAatB,iBAAiB,sBA8FnB,CAAC"}
+{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAyC,cAAc;AAI9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,oLAatB,iBAAiB,sBA8FnB,CAAC"}

package/dist/components/BadgeWrapper/BadgeWrapper.mjs

@@ -4,11 +4,11 @@ function $importDefault(module) {
     }
     return module;
 }
+import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React, { useCallback, useState, useMemo } from "react";
 const React = $importDefault($React);
 import { View } from "react-native/index.js";
-import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.mjs";
 export const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeContainerProps, position = BadgeWrapperPosition.BottomRight, positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, twClassName, style, ...props }) => {
     const tw = useTailwind();
     const [anchorWidth, setAnchorWidth] = useState(0);

package/dist/components/BadgeWrapper/BadgeWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback, useState, useMemo } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\n\nimport {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = ({\n  children,\n  childrenContainerProps,\n  badge,\n  badgeContainerProps,\n  position = BadgeWrapperPosition.BottomRight,\n  positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n  positionXOffset = 0,\n  positionYOffset = 0,\n  customPosition,\n  twClassName,\n  style,\n  ...props\n}: BadgeWrapperProps) => {\n  const tw = useTailwind();\n  const [anchorWidth, setAnchorWidth] = useState<number>(0);\n  const [anchorHeight, setAnchorHeight] = useState<number>(0);\n  const [badgeWidth, setbadgeWidth] = useState<number>(0);\n  const [badgeHeight, setbadgeHeight] = useState<number>(0);\n\n  // Fetching the dimensions of the anchor and bagde element to properly position the badge\n  const getAnchorSize = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setAnchorWidth(width);\n    setAnchorHeight(height);\n  }, []);\n  const getBadgeSize = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setbadgeWidth(width);\n    setbadgeHeight(height);\n  }, []);\n\n  const finalPositions = useMemo(() => {\n    if (customPosition) {\n      return customPosition;\n    }\n    // 0.1464 is a mathematical coeeficient to move\n    // from a 0,0 corner of a rectangular shape to the closest \"corner\"\n    // of a circular shape anchor element\n    const anchorShapeXOffset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n        ? 0\n        : anchorWidth * 0.1464;\n    const anchorShapeYOffset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n        ? 0\n        : anchorHeight * 0.1464;\n    // This is to center the badge in the corner of the anchor element\n    const badgeCenteringXOffset = badgeWidth / 2;\n    const badgeCenteringYOffset = badgeHeight / 2;\n\n    const finalXOffset =\n      anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;\n    const finalYOffset =\n      anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;\n    switch (position) {\n      case BadgeWrapperPosition.TopRight:\n        return {\n          top: finalYOffset,\n          right: finalXOffset,\n        };\n      case BadgeWrapperPosition.BottomLeft:\n        return {\n          bottom: finalYOffset,\n          left: finalXOffset,\n        };\n      case BadgeWrapperPosition.TopLeft:\n        return {\n          top: finalYOffset,\n          left: finalXOffset,\n        };\n      case BadgeWrapperPosition.BottomRight:\n      default:\n        return {\n          bottom: finalYOffset,\n          right: finalXOffset,\n        };\n    }\n  }, [\n    position,\n    positionAnchorShape,\n    anchorWidth,\n    anchorHeight,\n    badgeWidth,\n    badgeHeight,\n    positionXOffset,\n    positionYOffset,\n    customPosition,\n  ]);\n\n  return (\n    <View\n      {...props}\n      style={[tw.style('relative self-start', twClassName), style]}\n    >\n      <View onLayout={getAnchorSize} {...childrenContainerProps}>\n        {children}\n      </View>\n      <View\n        onLayout={getBadgeSize}\n        style={[tw.style('absolute'), { ...finalPositions }]}\n        {...badgeContainerProps}\n      >\n        {badge}\n      </View>\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc;;AAE9D,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAIpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,sBAAsB,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,GAAG,oBAAoB,CAAC,WAAW,EAC3C,mBAAmB,GAAG,+BAA+B,CAAC,QAAQ,EAC9D,eAAe,GAAG,CAAC,EACnB,eAAe,GAAG,CAAC,EACnB,cAAc,EACd,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACU,EAAE,EAAE;IACtB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACxD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAE1D,yFAAyF;IACzF,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAwB,EAAE,EAAE;QAC7D,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QACnD,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,eAAe,CAAC,MAAM,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAwB,EAAE,EAAE;QAC5D,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QACnD,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,cAAc,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,cAAc,EAAE;YAClB,OAAO,cAAc,CAAC;SACvB;QACD,+CAA+C;QAC/C,mEAAmE;QACnE,qCAAqC;QACrC,MAAM,kBAAkB,GACtB,mBAAmB,KAAK,+BAA+B,CAAC,WAAW;YACjE,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC;QAC3B,MAAM,kBAAkB,GACtB,mBAAmB,KAAK,+BAA+B,CAAC,WAAW;YACjE,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,YAAY,GAAG,MAAM,CAAC;QAC5B,kEAAkE;QAClE,MAAM,qBAAqB,GAAG,UAAU,GAAG,CAAC,CAAC;QAC7C,MAAM,qBAAqB,GAAG,WAAW,GAAG,CAAC,CAAC;QAE9C,MAAM,YAAY,GAChB,kBAAkB,GAAG,qBAAqB,GAAG,eAAe,CAAC;QAC/D,MAAM,YAAY,GAChB,kBAAkB,GAAG,qBAAqB,GAAG,eAAe,CAAC;QAC/D,QAAQ,QAAQ,EAAE;YAChB,KAAK,oBAAoB,CAAC,QAAQ;gBAChC,OAAO;oBACL,GAAG,EAAE,YAAY;oBACjB,KAAK,EAAE,YAAY;iBACpB,CAAC;YACJ,KAAK,oBAAoB,CAAC,UAAU;gBAClC,OAAO;oBACL,MAAM,EAAE,YAAY;oBACpB,IAAI,EAAE,YAAY;iBACnB,CAAC;YACJ,KAAK,oBAAoB,CAAC,OAAO;gBAC/B,OAAO;oBACL,GAAG,EAAE,YAAY;oBACjB,IAAI,EAAE,YAAY;iBACnB,CAAC;YACJ,KAAK,oBAAoB,CAAC,WAAW,CAAC;YACtC;gBACE,OAAO;oBACL,MAAM,EAAE,YAAY;oBACpB,KAAK,EAAE,YAAY;iBACpB,CAAC;SACL;IACH,CAAC,EAAE;QACD,QAAQ;QACR,mBAAmB;QACnB,WAAW;QACX,YAAY;QACZ,UAAU;QACV,WAAW;QACX,eAAe;QACf,eAAe;QACf,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,qBAAqB,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAE7D;MAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC,IAAI,sBAAsB,CAAC,CACxD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CACH,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,EAAE,GAAG,cAAc,EAAE,CAAC,CAAC,CACrD,IAAI,mBAAmB,CAAC,CAExB;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback, useState, useMemo } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = ({\n  children,\n  childrenContainerProps,\n  badge,\n  badgeContainerProps,\n  position = BadgeWrapperPosition.BottomRight,\n  positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n  positionXOffset = 0,\n  positionYOffset = 0,\n  customPosition,\n  twClassName,\n  style,\n  ...props\n}: BadgeWrapperProps) => {\n  const tw = useTailwind();\n  const [anchorWidth, setAnchorWidth] = useState<number>(0);\n  const [anchorHeight, setAnchorHeight] = useState<number>(0);\n  const [badgeWidth, setbadgeWidth] = useState<number>(0);\n  const [badgeHeight, setbadgeHeight] = useState<number>(0);\n\n  // Fetching the dimensions of the anchor and bagde element to properly position the badge\n  const getAnchorSize = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setAnchorWidth(width);\n    setAnchorHeight(height);\n  }, []);\n  const getBadgeSize = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setbadgeWidth(width);\n    setbadgeHeight(height);\n  }, []);\n\n  const finalPositions = useMemo(() => {\n    if (customPosition) {\n      return customPosition;\n    }\n    // 0.1464 is a mathematical coeeficient to move\n    // from a 0,0 corner of a rectangular shape to the closest \"corner\"\n    // of a circular shape anchor element\n    const anchorShapeXOffset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n        ? 0\n        : anchorWidth * 0.1464;\n    const anchorShapeYOffset =\n      positionAnchorShape === BadgeWrapperPositionAnchorShape.Rectangular\n        ? 0\n        : anchorHeight * 0.1464;\n    // This is to center the badge in the corner of the anchor element\n    const badgeCenteringXOffset = badgeWidth / 2;\n    const badgeCenteringYOffset = badgeHeight / 2;\n\n    const finalXOffset =\n      anchorShapeXOffset - badgeCenteringXOffset + positionXOffset;\n    const finalYOffset =\n      anchorShapeYOffset - badgeCenteringYOffset + positionYOffset;\n    switch (position) {\n      case BadgeWrapperPosition.TopRight:\n        return {\n          top: finalYOffset,\n          right: finalXOffset,\n        };\n      case BadgeWrapperPosition.BottomLeft:\n        return {\n          bottom: finalYOffset,\n          left: finalXOffset,\n        };\n      case BadgeWrapperPosition.TopLeft:\n        return {\n          top: finalYOffset,\n          left: finalXOffset,\n        };\n      case BadgeWrapperPosition.BottomRight:\n      default:\n        return {\n          bottom: finalYOffset,\n          right: finalXOffset,\n        };\n    }\n  }, [\n    position,\n    positionAnchorShape,\n    anchorWidth,\n    anchorHeight,\n    badgeWidth,\n    badgeHeight,\n    positionXOffset,\n    positionYOffset,\n    customPosition,\n  ]);\n\n  return (\n    <View\n      {...props}\n      style={[tw.style('relative self-start', twClassName), style]}\n    >\n      <View onLayout={getAnchorSize} {...childrenContainerProps}>\n        {children}\n      </View>\n      <View\n        onLayout={getBadgeSize}\n        style={[tw.style('absolute'), { ...finalPositions }]}\n        {...badgeContainerProps}\n      >\n        {badge}\n      </View>\n    </View>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type {\n  BadgeWrapperPosition,\n  BadgeWrapperCustomPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\n\n/**\n * Badge component props.\n */\nexport type BadgeWrapperProps = {\n  /**\n   * Optional prop to determine the shape of the anchoring element.\n   * This prop gets used along with position, positionXOffset, and positionYOffset\n   * to determine the final position.\n   * Possible values:\n   * BadgeWrapperPositionAnchorShape.Circular,\n   * - BadgeWrapperPositionAnchorShape.Rectangular,\n   *\n   * @default BadgeWrapperPositionAnchorShape.Circular\n   */\n  positionAnchorShape?: BadgeWrapperPositionAnchorShape;\n  /**\n   * Optional prop to control the preset position of the badge.\n   * This prop gets used along with positionAnchorShape, positionXOffset, and positionYOffset\n   * to determine the final position.\n   *\n   * @default BadgeWrapperPosition.TopRight\n   */\n  position?: BadgeWrapperPosition;\n  /**\n   * Optional prop to move the preset position horizontally.\n   * This prop gets used along with position, positionAnchorShape, and positionYOffset\n   * to determine the final position.\n   *\n   * @default 0\n   */\n  positionXOffset?: number;\n  /**\n   * Optional prop to move the preset position vertically.\n   * This prop gets used along with position, positionAnchorShape, and positionXOffset\n   * to determine the final position.\n   *\n   * @default 0\n   */\n  positionYOffset?: number;\n  /**\n   * Optional prop to customize the position through the position object.\n   * Position object - {top: 0, right: 0, bottom: 0, left: 0}\n   */\n  customPosition?: BadgeWrapperCustomPosition;\n  /**\n   * The element that the badge will attach itself to.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop to pass additional props to the children container\n   */\n  childrenContainerProps?: ViewProps;\n  /**\n   * Any element that will be placed in the position of the badge.\n   */\n  badge: React.ReactNode;\n  /**\n   * Optional prop to pass additional props to the badge container\n   */\n  badgeContainerProps?: ViewProps;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & ViewProps;\n"]}
+{"version":3,"file":"BadgeWrapper.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeWrapperPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\n/**\n * BadgeWrapper component props (React Native platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React Native-specific platform concerns\n */\nexport type BadgeWrapperProps = BadgeWrapperPropsShared & {\n  /**\n   * Optional prop to pass additional props to the children container\n   */\n  childrenContainerProps?: ViewProps;\n  /**\n   * Optional prop to pass additional props to the badge container\n   */\n  badgeContainerProps?: ViewProps;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & ViewProps;\n"]}

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

@@ -1,61 +1,14 @@
+import type { BadgeWrapperPropsShared } from "@metamask-previews/design-system-shared";
 import type { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
-import type { BadgeWrapperPosition, BadgeWrapperCustomPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.cjs";
 /**
- * Badge component props.
+ * BadgeWrapper component props (React Native platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React Native-specific platform concerns
  */
-export type BadgeWrapperProps = {
-    /**
-     * Optional prop to determine the shape of the anchoring element.
-     * This prop gets used along with position, positionXOffset, and positionYOffset
-     * to determine the final position.
-     * Possible values:
-     * BadgeWrapperPositionAnchorShape.Circular,
-     * - BadgeWrapperPositionAnchorShape.Rectangular,
-     *
-     * @default BadgeWrapperPositionAnchorShape.Circular
-     */
-    positionAnchorShape?: BadgeWrapperPositionAnchorShape;
-    /**
-     * Optional prop to control the preset position of the badge.
-     * This prop gets used along with positionAnchorShape, positionXOffset, and positionYOffset
-     * to determine the final position.
-     *
-     * @default BadgeWrapperPosition.TopRight
-     */
-    position?: BadgeWrapperPosition;
-    /**
-     * Optional prop to move the preset position horizontally.
-     * This prop gets used along with position, positionAnchorShape, and positionYOffset
-     * to determine the final position.
-     *
-     * @default 0
-     */
-    positionXOffset?: number;
-    /**
-     * Optional prop to move the preset position vertically.
-     * This prop gets used along with position, positionAnchorShape, and positionXOffset
-     * to determine the final position.
-     *
-     * @default 0
-     */
-    positionYOffset?: number;
-    /**
-     * Optional prop to customize the position through the position object.
-     * Position object - {top: 0, right: 0, bottom: 0, left: 0}
-     */
-    customPosition?: BadgeWrapperCustomPosition;
-    /**
-     * The element that the badge will attach itself to.
-     */
-    children: React.ReactNode;
+export type BadgeWrapperProps = BadgeWrapperPropsShared & {
     /**
      * Optional prop to pass additional props to the children container
      */
     childrenContainerProps?: ViewProps;
-    /**
-     * Any element that will be placed in the position of the badge.
-     */
-    badge: React.ReactNode;
     /**
      * Optional prop to pass additional props to the badge container
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEpE,OAAO,KAAK,EACV,oBAAoB,EACpB,0BAA0B,EAC1B,+BAA+B,EAChC,8BAAoB;AAErB;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,+BAA+B,CAAC;IACtD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,SAAS,CAAC"}
+{"version":3,"file":"BadgeWrapper.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,gDAAgD;AACvF,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEpE;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG;IACxD;;OAEG;IACH,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,SAAS,CAAC"}

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

@@ -1,61 +1,14 @@
+import type { BadgeWrapperPropsShared } from "@metamask-previews/design-system-shared";
 import type { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
-import type { BadgeWrapperPosition, BadgeWrapperCustomPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.mjs";
 /**
- * Badge component props.
+ * BadgeWrapper component props (React Native platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React Native-specific platform concerns
  */
-export type BadgeWrapperProps = {
-    /**
-     * Optional prop to determine the shape of the anchoring element.
-     * This prop gets used along with position, positionXOffset, and positionYOffset
-     * to determine the final position.
-     * Possible values:
-     * BadgeWrapperPositionAnchorShape.Circular,
-     * - BadgeWrapperPositionAnchorShape.Rectangular,
-     *
-     * @default BadgeWrapperPositionAnchorShape.Circular
-     */
-    positionAnchorShape?: BadgeWrapperPositionAnchorShape;
-    /**
-     * Optional prop to control the preset position of the badge.
-     * This prop gets used along with positionAnchorShape, positionXOffset, and positionYOffset
-     * to determine the final position.
-     *
-     * @default BadgeWrapperPosition.TopRight
-     */
-    position?: BadgeWrapperPosition;
-    /**
-     * Optional prop to move the preset position horizontally.
-     * This prop gets used along with position, positionAnchorShape, and positionYOffset
-     * to determine the final position.
-     *
-     * @default 0
-     */
-    positionXOffset?: number;
-    /**
-     * Optional prop to move the preset position vertically.
-     * This prop gets used along with position, positionAnchorShape, and positionXOffset
-     * to determine the final position.
-     *
-     * @default 0
-     */
-    positionYOffset?: number;
-    /**
-     * Optional prop to customize the position through the position object.
-     * Position object - {top: 0, right: 0, bottom: 0, left: 0}
-     */
-    customPosition?: BadgeWrapperCustomPosition;
-    /**
-     * The element that the badge will attach itself to.
-     */
-    children: React.ReactNode;
+export type BadgeWrapperProps = BadgeWrapperPropsShared & {
     /**
      * Optional prop to pass additional props to the children container
      */
     childrenContainerProps?: ViewProps;
-    /**
-     * Any element that will be placed in the position of the badge.
-     */
-    badge: React.ReactNode;
     /**
      * Optional prop to pass additional props to the badge container
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEpE,OAAO,KAAK,EACV,oBAAoB,EACpB,0BAA0B,EAC1B,+BAA+B,EAChC,8BAAoB;AAErB;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,+BAA+B,CAAC;IACtD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,SAAS,CAAC"}
+{"version":3,"file":"BadgeWrapper.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,gDAAgD;AACvF,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEpE;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GAAG;IACxD;;OAEG;IACH,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeWrapper.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type {\n  BadgeWrapperPosition,\n  BadgeWrapperCustomPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\n\n/**\n * Badge component props.\n */\nexport type BadgeWrapperProps = {\n  /**\n   * Optional prop to determine the shape of the anchoring element.\n   * This prop gets used along with position, positionXOffset, and positionYOffset\n   * to determine the final position.\n   * Possible values:\n   * BadgeWrapperPositionAnchorShape.Circular,\n   * - BadgeWrapperPositionAnchorShape.Rectangular,\n   *\n   * @default BadgeWrapperPositionAnchorShape.Circular\n   */\n  positionAnchorShape?: BadgeWrapperPositionAnchorShape;\n  /**\n   * Optional prop to control the preset position of the badge.\n   * This prop gets used along with positionAnchorShape, positionXOffset, and positionYOffset\n   * to determine the final position.\n   *\n   * @default BadgeWrapperPosition.TopRight\n   */\n  position?: BadgeWrapperPosition;\n  /**\n   * Optional prop to move the preset position horizontally.\n   * This prop gets used along with position, positionAnchorShape, and positionYOffset\n   * to determine the final position.\n   *\n   * @default 0\n   */\n  positionXOffset?: number;\n  /**\n   * Optional prop to move the preset position vertically.\n   * This prop gets used along with position, positionAnchorShape, and positionXOffset\n   * to determine the final position.\n   *\n   * @default 0\n   */\n  positionYOffset?: number;\n  /**\n   * Optional prop to customize the position through the position object.\n   * Position object - {top: 0, right: 0, bottom: 0, left: 0}\n   */\n  customPosition?: BadgeWrapperCustomPosition;\n  /**\n   * The element that the badge will attach itself to.\n   */\n  children: React.ReactNode;\n  /**\n   * Optional prop to pass additional props to the children container\n   */\n  childrenContainerProps?: ViewProps;\n  /**\n   * Any element that will be placed in the position of the badge.\n   */\n  badge: React.ReactNode;\n  /**\n   * Optional prop to pass additional props to the badge container\n   */\n  badgeContainerProps?: ViewProps;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & ViewProps;\n"]}
+{"version":3,"file":"BadgeWrapper.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeWrapperPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\n/**\n * BadgeWrapper component props (React Native platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React Native-specific platform concerns\n */\nexport type BadgeWrapperProps = BadgeWrapperPropsShared & {\n  /**\n   * Optional prop to pass additional props to the children container\n   */\n  childrenContainerProps?: ViewProps;\n  /**\n   * Optional prop to pass additional props to the badge container\n   */\n  badgeContainerProps?: ViewProps;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & ViewProps;\n"]}

package/dist/components/BadgeWrapper/index.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeWrapper = exports.BadgeWrapperPositionAnchorShape = exports.BadgeWrapperPosition = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "BadgeWrapperPosition", { enumerable: true, get: function () { return types_1.BadgeWrapperPosition; } });
-Object.defineProperty(exports, "BadgeWrapperPositionAnchorShape", { enumerable: true, get: function () { return types_1.BadgeWrapperPositionAnchorShape; } });
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "BadgeWrapperPosition", { enumerable: true, get: function () { return design_system_shared_1.BadgeWrapperPosition; } });
+Object.defineProperty(exports, "BadgeWrapperPositionAnchorShape", { enumerable: true, get: function () { return design_system_shared_1.BadgeWrapperPositionAnchorShape; } });
 var BadgeWrapper_1 = require("./BadgeWrapper.cjs");
 Object.defineProperty(exports, "BadgeWrapper", { enumerable: true, get: function () { return BadgeWrapper_1.BadgeWrapper; } });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":";;;AAAA,+CAGqB;AAFnB,6GAAA,oBAAoB,OAAA;AACpB,wHAAA,+BAA+B,OAAA;AAGjC,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\nexport type { BadgeWrapperCustomPosition } from '../../types';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":";;;AAAA,gFAIiD;AAH/C,4HAAA,oBAAoB,OAAA;AACpB,uIAAA,+BAA+B,OAAA;AAGjC,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n  type BadgeWrapperCustomPosition,\n} from '@metamask-previews/design-system-shared';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}

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

@@ -1,5 +1,4 @@
-export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, } from "../../types/index.cjs";
-export type { BadgeWrapperCustomPosition } from "../../types/index.cjs";
+export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, type BadgeWrapperCustomPosition, } from "@metamask-previews/design-system-shared";
 export { BadgeWrapper } from "./BadgeWrapper.cjs";
 export type { BadgeWrapperProps } from "./BadgeWrapper.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,GAChC,8BAAoB;AACrB,YAAY,EAAE,0BAA0B,EAAE,8BAAoB;AAC9D,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAC/B,KAAK,0BAA0B,GAChC,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

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

@@ -1,5 +1,4 @@
-export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, } from "../../types/index.mjs";
-export type { BadgeWrapperCustomPosition } from "../../types/index.mjs";
+export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, type BadgeWrapperCustomPosition, } from "@metamask-previews/design-system-shared";
 export { BadgeWrapper } from "./BadgeWrapper.mjs";
 export type { BadgeWrapperProps } from "./BadgeWrapper.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,GAChC,8BAAoB;AACrB,YAAY,EAAE,0BAA0B,EAAE,8BAAoB;AAC9D,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAC/B,KAAK,0BAA0B,GAChC,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

package/dist/components/BadgeWrapper/index.mjs

@@ -1,3 +1,3 @@
-export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.mjs";
+export { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "@metamask-previews/design-system-shared";
 export { BadgeWrapper } from "./BadgeWrapper.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,8BAAoB;AAErB,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\nexport type { BadgeWrapperCustomPosition } from '../../types';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAEhC,gDAAgD;AACjD,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n  type BadgeWrapperCustomPosition,\n} from '@metamask-previews/design-system-shared';\nexport { BadgeWrapper } from './BadgeWrapper';\nexport type { BadgeWrapperProps } from './BadgeWrapper.types';\n"]}

package/dist/components/BannerAlert/BannerAlert.constants.cjs

@@ -16,15 +16,15 @@ exports.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = {
     danger: types_1.IconColor.ErrorDefault,
 };
 exports.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = {
-    info: types_1.BoxBackgroundColor.PrimaryMuted,
-    success: types_1.BoxBackgroundColor.SuccessMuted,
-    warning: types_1.BoxBackgroundColor.WarningMuted,
-    danger: types_1.BoxBackgroundColor.ErrorMuted,
+    info: design_system_shared_1.BoxBackgroundColor.PrimaryMuted,
+    success: design_system_shared_1.BoxBackgroundColor.SuccessMuted,
+    warning: design_system_shared_1.BoxBackgroundColor.WarningMuted,
+    danger: design_system_shared_1.BoxBackgroundColor.ErrorMuted,
 };
 exports.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR = {
-    info: types_1.BoxBorderColor.PrimaryDefault,
-    success: types_1.BoxBorderColor.SuccessDefault,
-    warning: types_1.BoxBorderColor.WarningDefault,
-    danger: types_1.BoxBorderColor.ErrorDefault,
+    info: design_system_shared_1.BoxBorderColor.PrimaryDefault,
+    success: design_system_shared_1.BoxBorderColor.SuccessDefault,
+    warning: design_system_shared_1.BoxBorderColor.WarningDefault,
+    danger: design_system_shared_1.BoxBorderColor.ErrorDefault,
 };
 //# sourceMappingURL=BannerAlert.constants.cjs.map

package/dist/components/BannerAlert/BannerAlert.constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.constants.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":";;;AAAA,kFAA8E;AAE9E,iDAKqB;AAER,QAAA,mCAAmC,GAG5C;IACF,IAAI,EAAE,gBAAQ,CAAC,IAAI;IACnB,OAAO,EAAE,gBAAQ,CAAC,YAAY;IAC9B,OAAO,EAAE,gBAAQ,CAAC,MAAM;IACxB,MAAM,EAAE,gBAAQ,CAAC,MAAM;CACxB,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,IAAI,EAAE,iBAAS,CAAC,cAAc;IAC9B,OAAO,EAAE,iBAAS,CAAC,cAAc;IACjC,OAAO,EAAE,iBAAS,CAAC,cAAc;IACjC,MAAM,EAAE,iBAAS,CAAC,YAAY;CAC/B,CAAC;AAEW,QAAA,0CAA0C,GAGnD;IACF,IAAI,EAAE,0BAAkB,CAAC,YAAY;IACrC,OAAO,EAAE,0BAAkB,CAAC,YAAY;IACxC,OAAO,EAAE,0BAAkB,CAAC,YAAY;IACxC,MAAM,EAAE,0BAAkB,CAAC,UAAU;CACtC,CAAC;AAEW,QAAA,sCAAsC,GAG/C;IACF,IAAI,EAAE,sBAAc,CAAC,cAAc;IACnC,OAAO,EAAE,sBAAc,CAAC,cAAc;IACtC,OAAO,EAAE,sBAAc,CAAC,cAAc;IACtC,MAAM,EAAE,sBAAc,CAAC,YAAY;CACpC,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\n\nimport {\n  BoxBackgroundColor,\n  BoxBorderColor,\n  IconColor,\n  IconName,\n} from '../../types';\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  IconName\n> = {\n  info: IconName.Info,\n  success: IconName.Confirmation,\n  warning: IconName.Danger,\n  danger: IconName.Danger,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  IconColor\n> = {\n  info: IconColor.PrimaryDefault,\n  success: IconColor.SuccessDefault,\n  warning: IconColor.WarningDefault,\n  danger: IconColor.ErrorDefault,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  BoxBackgroundColor\n> = {\n  info: BoxBackgroundColor.PrimaryMuted,\n  success: BoxBackgroundColor.SuccessMuted,\n  warning: BoxBackgroundColor.WarningMuted,\n  danger: BoxBackgroundColor.ErrorMuted,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  BoxBorderColor\n> = {\n  info: BoxBorderColor.PrimaryDefault,\n  success: BoxBorderColor.SuccessDefault,\n  warning: BoxBorderColor.WarningDefault,\n  danger: BoxBorderColor.ErrorDefault,\n};\n"]}
+{"version":3,"file":"BannerAlert.constants.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":";;;AAAA,kFAIiD;AAEjD,iDAAkD;AAErC,QAAA,mCAAmC,GAG5C;IACF,IAAI,EAAE,gBAAQ,CAAC,IAAI;IACnB,OAAO,EAAE,gBAAQ,CAAC,YAAY;IAC9B,OAAO,EAAE,gBAAQ,CAAC,MAAM;IACxB,MAAM,EAAE,gBAAQ,CAAC,MAAM;CACxB,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,IAAI,EAAE,iBAAS,CAAC,cAAc;IAC9B,OAAO,EAAE,iBAAS,CAAC,cAAc;IACjC,OAAO,EAAE,iBAAS,CAAC,cAAc;IACjC,MAAM,EAAE,iBAAS,CAAC,YAAY;CAC/B,CAAC;AAEW,QAAA,0CAA0C,GAGnD;IACF,IAAI,EAAE,yCAAkB,CAAC,YAAY;IACrC,OAAO,EAAE,yCAAkB,CAAC,YAAY;IACxC,OAAO,EAAE,yCAAkB,CAAC,YAAY;IACxC,MAAM,EAAE,yCAAkB,CAAC,UAAU;CACtC,CAAC;AAEW,QAAA,sCAAsC,GAG/C;IACF,IAAI,EAAE,qCAAc,CAAC,cAAc;IACnC,OAAO,EAAE,qCAAc,CAAC,cAAc;IACtC,OAAO,EAAE,qCAAc,CAAC,cAAc;IACtC,MAAM,EAAE,qCAAc,CAAC,YAAY;CACpC,CAAC","sourcesContent":["import {\n  BannerAlertSeverity,\n  BoxBackgroundColor,\n  BoxBorderColor,\n} from '@metamask-previews/design-system-shared';\n\nimport { IconColor, IconName } from '../../types';\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  IconName\n> = {\n  info: IconName.Info,\n  success: IconName.Confirmation,\n  warning: IconName.Danger,\n  danger: IconName.Danger,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  IconColor\n> = {\n  info: IconColor.PrimaryDefault,\n  success: IconColor.SuccessDefault,\n  warning: IconColor.WarningDefault,\n  danger: IconColor.ErrorDefault,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  BoxBackgroundColor\n> = {\n  info: BoxBackgroundColor.PrimaryMuted,\n  success: BoxBackgroundColor.SuccessMuted,\n  warning: BoxBackgroundColor.WarningMuted,\n  danger: BoxBackgroundColor.ErrorMuted,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<\n  (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n  BoxBorderColor\n> = {\n  info: BoxBorderColor.PrimaryDefault,\n  success: BoxBorderColor.SuccessDefault,\n  warning: BoxBorderColor.WarningDefault,\n  danger: BoxBorderColor.ErrorDefault,\n};\n"]}

package/dist/components/BannerAlert/BannerAlert.constants.d.cts

@@ -1,5 +1,5 @@
-import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
-import { BoxBackgroundColor, BoxBorderColor, IconColor, IconName } from "../../types/index.cjs";
+import { BannerAlertSeverity, BoxBackgroundColor, BoxBorderColor } from "@metamask-previews/design-system-shared";
+import { IconColor, IconName } from "../../types/index.cjs";
 export declare const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconName>;
 export declare const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconColor>;
 export declare const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBackgroundColor>;

package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAE9E,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,8BAAoB;AAErB,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,QAAQ,CAMT,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,SAAS,CAMV,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAC7D,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,kBAAkB,CAMnB,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CACzD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,cAAc,CAMf,CAAC"}
+{"version":3,"file":"BannerAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACf,gDAAgD;AAEjD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,QAAQ,CAMT,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,SAAS,CAMV,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAC7D,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,kBAAkB,CAMnB,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CACzD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,cAAc,CAMf,CAAC"}

package/dist/components/BannerAlert/BannerAlert.constants.d.mts

@@ -1,5 +1,5 @@
-import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
-import { BoxBackgroundColor, BoxBorderColor, IconColor, IconName } from "../../types/index.mjs";
+import { BannerAlertSeverity, BoxBackgroundColor, BoxBorderColor } from "@metamask-previews/design-system-shared";
+import { IconColor, IconName } from "../../types/index.mjs";
 export declare const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconName>;
 export declare const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconColor>;
 export declare const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBackgroundColor>;