@metamask-previews/design-system-react-native 0.5.1-preview.abc15cd → 0.9.0-preview.694a8ed

package/dist/components/BadgeStatus/BadgeStatus.mjs

@@ -4,20 +4,20 @@ function $importDefault(module) {
     }
     return module;
 }
+import { BadgeStatusSize } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
 import { View } from "react-native/index.js";
-import { BadgeStatusSize } from "../../types/index.mjs";
 import { TWCLASSMAP_BADGESTATUS_STATUS_CIRCLE, TWCLASSMAP_BADGESTATUS_SIZE } from "./BadgeStatus.constants.mjs";
-export const BadgeStatus = ({ status, size = BadgeStatusSize.Md, hasBorder = true, twClassName = '', style, ...props }) => {
+export const BadgeStatus = ({ status, size = BadgeStatusSize.Md, hasBorder = true, twClassName, style, ...props }) => {
     const tw = useTailwind();
-    return (<View style={[
-            tw `self-start rounded-full ${hasBorder ? 'border-2 border-background-default' : ''} ${twClassName}`,
+    return (<View {...props} style={[
+            tw.style('self-start rounded-full', hasBorder && 'border-2 border-background-default', twClassName),
             style,
-        ]} {...props}>
+        ]}>
       <View style={[
-            tw `rounded-full border-2 ${TWCLASSMAP_BADGESTATUS_SIZE[size]} ${TWCLASSMAP_BADGESTATUS_STATUS_CIRCLE[status]} `,
+            tw.style('rounded-full border-2', TWCLASSMAP_BADGESTATUS_SIZE[size], TWCLASSMAP_BADGESTATUS_STATUS_CIRCLE[status]),
         ]}/>
     </View>);
 };

package/dist/components/BadgeStatus/BadgeStatus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAE9C,OAAO,EACL,oCAAoC,EACpC,2BAA2B,EAC5B,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,MAAM,EACN,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,SAAS,GAAG,IAAI,EAChB,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAA,2BAA2B,SAAS,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE,IAAI,WAAW,EAAE;YACnG,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAA,yBAAyB,2BAA2B,CAAC,IAAI,CAAC,IAAI,oCAAoC,CAAC,MAAM,CAAC,GAAG;SAChH,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { BadgeStatusSize } from '../../types';\n\nimport {\n  TWCLASSMAP_BADGESTATUS_STATUS_CIRCLE,\n  TWCLASSMAP_BADGESTATUS_SIZE,\n} from './BadgeStatus.constants';\nimport type { BadgeStatusProps } from './BadgeStatus.types';\n\nexport const BadgeStatus = ({\n  status,\n  size = BadgeStatusSize.Md,\n  hasBorder = true,\n  twClassName = '',\n  style,\n  ...props\n}: BadgeStatusProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      style={[\n        tw`self-start rounded-full ${hasBorder ? 'border-2 border-background-default' : ''} ${twClassName}`,\n        style,\n      ]}\n      {...props}\n    >\n      <View\n        style={[\n          tw`rounded-full border-2 ${TWCLASSMAP_BADGESTATUS_SIZE[size]} ${TWCLASSMAP_BADGESTATUS_STATUS_CIRCLE[status]} `,\n        ]}\n      />\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"BadgeStatus.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,gDAAgD;AAC1E,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EACL,oCAAoC,EACpC,2BAA2B,EAC5B,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,MAAM,EACN,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,SAAS,GAAG,IAAI,EAChB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,yBAAyB,EACzB,SAAS,IAAI,oCAAoC,EACjD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uBAAuB,EACvB,2BAA2B,CAAC,IAAI,CAAC,EACjC,oCAAoC,CAAC,MAAM,CAAC,CAC7C;SACF,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { BadgeStatusSize } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport {\n  TWCLASSMAP_BADGESTATUS_STATUS_CIRCLE,\n  TWCLASSMAP_BADGESTATUS_SIZE,\n} from './BadgeStatus.constants';\nimport type { BadgeStatusProps } from './BadgeStatus.types';\n\nexport const BadgeStatus = ({\n  status,\n  size = BadgeStatusSize.Md,\n  hasBorder = true,\n  twClassName,\n  style,\n  ...props\n}: BadgeStatusProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'self-start rounded-full',\n          hasBorder && 'border-2 border-background-default',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <View\n        style={[\n          tw.style(\n            'rounded-full border-2',\n            TWCLASSMAP_BADGESTATUS_SIZE[size],\n            TWCLASSMAP_BADGESTATUS_STATUS_CIRCLE[status],\n          ),\n        ]}\n      />\n    </View>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { BadgeStatusStatus, BadgeStatusSize } from '../../types';\n\n/**\n * BadgeStatus component props.\n */\nexport type BadgeStatusProps = {\n  /**\n   * Optional prop to control the status of the badge\n   * Possible values:\n   * - BadgeStatusStatus.Active. (Connected)\n   * - BadgeStatusStatus.Inactive. (Connected)\n   * - BadgeStatusStatus.Disconnected.\n   * - BadgeStatusStatus.New.\n   * - BadgeStatusStatus.Attention.\n   */\n  status: BadgeStatusStatus;\n  /**\n   * Optional prop to determine whether the badge should display a border\n   *\n   * @default true\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to control the size of the BadgeStatus\n   * Possible values:\n   * - BadgeStatusSize.Md (8px),\n   * - BadgeStatusSize.Lg (10px),\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: BadgeStatusSize;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}
+{"version":3,"file":"BadgeStatus.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeStatusPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\n/**\n * BadgeStatus 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 BadgeStatusProps = BadgeStatusPropsShared &\n  Omit<ViewProps, 'children'> & {\n    /**\n     * Optional prop to add twrnc overriding classNames.\n     */\n    twClassName?: string;\n  };\n"]}

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

@@ -1,37 +1,13 @@
+import type { BadgeStatusPropsShared } from "@metamask-previews/design-system-shared";
 import type { ViewProps } from "react-native/index.js";
-import type { BadgeStatusStatus, BadgeStatusSize } from "../../types/index.cjs";
 /**
- * BadgeStatus component props.
+ * BadgeStatus component props (React Native platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React Native specific platform concerns
  */
-export type BadgeStatusProps = {
-    /**
-     * Optional prop to control the status of the badge
-     * Possible values:
-     * - BadgeStatusStatus.Active. (Connected)
-     * - BadgeStatusStatus.Inactive. (Connected)
-     * - BadgeStatusStatus.Disconnected.
-     * - BadgeStatusStatus.New.
-     * - BadgeStatusStatus.Attention.
-     */
-    status: BadgeStatusStatus;
-    /**
-     * Optional prop to determine whether the badge should display a border
-     *
-     * @default true
-     */
-    hasBorder?: boolean;
-    /**
-     * Optional prop to control the size of the BadgeStatus
-     * Possible values:
-     * - BadgeStatusSize.Md (8px),
-     * - BadgeStatusSize.Lg (10px),
-     *
-     * @default AvatarBaseSize.Md
-     */
-    size?: BadgeStatusSize;
+export type BadgeStatusProps = BadgeStatusPropsShared & Omit<ViewProps, 'children'> & {
     /**
      * Optional prop to add twrnc overriding classNames.
      */
     twClassName?: string;
-} & Omit<ViewProps, 'children'>;
+};
 //# sourceMappingURL=BadgeStatus.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,8BAAoB;AAEtE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;;OAQG;IACH,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"BadgeStatus.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -1,37 +1,13 @@
+import type { BadgeStatusPropsShared } from "@metamask-previews/design-system-shared";
 import type { ViewProps } from "react-native/index.js";
-import type { BadgeStatusStatus, BadgeStatusSize } from "../../types/index.mjs";
 /**
- * BadgeStatus component props.
+ * BadgeStatus component props (React Native platform-specific)
+ * Extends shared props from @metamask-previews/design-system-shared with React Native specific platform concerns
  */
-export type BadgeStatusProps = {
-    /**
-     * Optional prop to control the status of the badge
-     * Possible values:
-     * - BadgeStatusStatus.Active. (Connected)
-     * - BadgeStatusStatus.Inactive. (Connected)
-     * - BadgeStatusStatus.Disconnected.
-     * - BadgeStatusStatus.New.
-     * - BadgeStatusStatus.Attention.
-     */
-    status: BadgeStatusStatus;
-    /**
-     * Optional prop to determine whether the badge should display a border
-     *
-     * @default true
-     */
-    hasBorder?: boolean;
-    /**
-     * Optional prop to control the size of the BadgeStatus
-     * Possible values:
-     * - BadgeStatusSize.Md (8px),
-     * - BadgeStatusSize.Lg (10px),
-     *
-     * @default AvatarBaseSize.Md
-     */
-    size?: BadgeStatusSize;
+export type BadgeStatusProps = BadgeStatusPropsShared & Omit<ViewProps, 'children'> & {
     /**
      * Optional prop to add twrnc overriding classNames.
      */
     twClassName?: string;
-} & Omit<ViewProps, 'children'>;
+};
 //# sourceMappingURL=BadgeStatus.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,8BAAoB;AAEtE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;;OAQG;IACH,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"BadgeStatus.types.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GACnD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeStatus.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { BadgeStatusStatus, BadgeStatusSize } from '../../types';\n\n/**\n * BadgeStatus component props.\n */\nexport type BadgeStatusProps = {\n  /**\n   * Optional prop to control the status of the badge\n   * Possible values:\n   * - BadgeStatusStatus.Active. (Connected)\n   * - BadgeStatusStatus.Inactive. (Connected)\n   * - BadgeStatusStatus.Disconnected.\n   * - BadgeStatusStatus.New.\n   * - BadgeStatusStatus.Attention.\n   */\n  status: BadgeStatusStatus;\n  /**\n   * Optional prop to determine whether the badge should display a border\n   *\n   * @default true\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to control the size of the BadgeStatus\n   * Possible values:\n   * - BadgeStatusSize.Md (8px),\n   * - BadgeStatusSize.Lg (10px),\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: BadgeStatusSize;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}
+{"version":3,"file":"BadgeStatus.types.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/BadgeStatus.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeStatusPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\n/**\n * BadgeStatus 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 BadgeStatusProps = BadgeStatusPropsShared &\n  Omit<ViewProps, 'children'> & {\n    /**\n     * Optional prop to add twrnc overriding classNames.\n     */\n    twClassName?: string;\n  };\n"]}

package/dist/components/BadgeStatus/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":";;;AAAA,+CAAiE;AAAxD,0GAAA,iBAAiB,OAAA;AAAE,wGAAA,eAAe,OAAA;AAC3C,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { BadgeStatusStatus, BadgeStatusSize } from '../../types';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":";;;AAAA,gFAGiD;AAF/C,uHAAA,eAAe,OAAA;AACf,yHAAA,iBAAiB,OAAA;AAEnB,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export {\n  BadgeStatusSize,\n  BadgeStatusStatus,\n} from '@metamask-previews/design-system-shared';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}

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

@@ -1,4 +1,4 @@
-export { BadgeStatusStatus, BadgeStatusSize } from "../../types/index.cjs";
+export { BadgeStatusSize, BadgeStatusStatus, } from "@metamask-previews/design-system-shared";
 export { BadgeStatus } from "./BadgeStatus.cjs";
 export type { BadgeStatusProps } from "./BadgeStatus.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,GAClB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

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

@@ -1,4 +1,4 @@
-export { BadgeStatusStatus, BadgeStatusSize } from "../../types/index.mjs";
+export { BadgeStatusSize, BadgeStatusStatus, } from "@metamask-previews/design-system-shared";
 export { BadgeStatus } from "./BadgeStatus.mjs";
 export type { BadgeStatusProps } from "./BadgeStatus.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,GAClB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

package/dist/components/BadgeStatus/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,8BAAoB;AACjE,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export { BadgeStatusStatus, BadgeStatusSize } from '../../types';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BadgeStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export {\n  BadgeStatusSize,\n  BadgeStatusStatus,\n} from '@metamask-previews/design-system-shared';\nexport { BadgeStatus } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus.types';\n"]}

package/dist/components/BadgeWrapper/BadgeWrapper.cjs

@@ -28,7 +28,7 @@ const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-t
 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 = types_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = types_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);
@@ -97,11 +97,11 @@ const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeContainerP
         positionYOffset,
         customPosition,
     ]);
-    return (<react_native_1.View style={[tw `relative self-start ${twClassName}`, style]} {...props}>
+    return (<react_native_1.View {...props} style={[tw.style('relative self-start', twClassName), style]}>
       <react_native_1.View onLayout={getAnchorSize} {...childrenContainerProps}>
         {children}
       </react_native_1.View>
-      <react_native_1.View onLayout={getBadgeSize} style={[tw `absolute`, { ...finalPositions }]} {...badgeContainerProps}>
+      <react_native_1.View onLayout={getBadgeSize} style={[tw.style('absolute'), { ...finalPositions }]} {...badgeContainerProps}>
         {badge}
       </react_native_1.View>
     </react_native_1.View>);

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 style={[tw`relative self-start ${twClassName}`, style]} {...props}>\n      <View onLayout={getAnchorSize} {...childrenContainerProps}>\n        {children}\n      </View>\n      <View\n        onLayout={getBadgeSize}\n        style={[tw`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 { 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"]}

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,sBA2FnB,CAAC"}
+{"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"}

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,sBA2FnB,CAAC"}
+{"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"}

package/dist/components/BadgeWrapper/BadgeWrapper.mjs

@@ -9,7 +9,7 @@ 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 }) => {
+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);
     const [anchorHeight, setAnchorHeight] = useState(0);
@@ -78,11 +78,11 @@ export const BadgeWrapper = ({ children, childrenContainerProps, badge, badgeCon
         positionYOffset,
         customPosition,
     ]);
-    return (<View style={[tw `relative self-start ${twClassName}`, style]} {...props}>
+    return (<View {...props} style={[tw.style('relative self-start', twClassName), style]}>
       <View onLayout={getAnchorSize} {...childrenContainerProps}>
         {children}
       </View>
-      <View onLayout={getBadgeSize} style={[tw `absolute`, { ...finalPositions }]} {...badgeContainerProps}>
+      <View onLayout={getBadgeSize} style={[tw.style('absolute'), { ...finalPositions }]} {...badgeContainerProps}>
         {badge}
       </View>
     </View>);

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 style={[tw`relative self-start ${twClassName}`, style]} {...props}>\n      <View onLayout={getAnchorSize} {...childrenContainerProps}>\n        {children}\n      </View>\n      <View\n        onLayout={getBadgeSize}\n        style={[tw`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":"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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"]}

package/dist/components/BannerBase/BannerBase.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerBase = void 0;
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../../types/index.cjs");
+const Box_1 = require("../Box/index.cjs");
+const Button_1 = require("../Button/index.cjs");
+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 resolvedActionButtonProps = actionButtonProps ?? {};
+    const { accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner', onPress: closeButtonPropsOnPress, twClassName: closeButtonTwClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
+    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);
+    const shouldShowActionButton = Boolean(actionButtonOnPress);
+    const handleClosePress = onClose || closeButtonPropsOnPress
+        ? (event) => {
+            if (onClose) {
+                onClose();
+                return;
+            }
+            closeButtonPropsOnPress?.(event);
+        }
+        : undefined;
+    const mergedCloseButtonTwClassName = closeButtonTwClassName
+        ? `ml-3 ${closeButtonTwClassName}`
+        : 'ml-3';
+    return (<Box_1.Box flexDirection={types_1.BoxFlexDirection.Row} alignItems={types_1.BoxAlignItems.Start} gap={2} backgroundColor={types_1.BoxBackgroundColor.BackgroundDefault} padding={3} twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'} {...props}>
+      {startAccessory}
+
+      <Box_1.Box twClassName="flex-1">
+        {hasContent(title) &&
+            (isTextContent(title) ? (<Text_1.Text variant={types_1.TextVariant.BodyMd} fontWeight={types_1.FontWeight.Medium} {...titleProps}>
+              {title}
+            </Text_1.Text>) : (title))}
+
+        {hasContent(description) && (<Box_1.Box twClassName={hasContent(title) ? 'mt-1' : undefined}>
+            {isTextContent(description) ? (<Text_1.Text variant={types_1.TextVariant.BodySm} {...descriptionProps}>
+                {description}
+              </Text_1.Text>) : (description)}
+          </Box_1.Box>)}
+
+        {hasContent(children) &&
+            (isTextContent(children) ? (<Text_1.Text variant={types_1.TextVariant.BodyMd} {...childrenWrapperProps}>
+              {children}
+            </Text_1.Text>) : (children))}
+
+        {shouldShowActionButton && (<Box_1.Box twClassName="mt-4">
+            <Button_1.Button size={types_1.ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps}>
+              {actionButtonLabel}
+            </Button_1.Button>
+          </Box_1.Box>)}
+      </Box_1.Box>
+
+      {shouldShowCloseButton && (<ButtonIcon_1.ButtonIcon testID="banner-base-close-button" twClassName={mergedCloseButtonTwClassName} iconName={types_1.IconName.Close} size={types_1.ButtonIconSize.Sm} accessibilityLabel={closeButtonAccessibilityLabel} onPress={handleClosePress} {...resolvedCloseButtonProps}/>)}
+    </Box_1.Box>);
+};
+exports.BannerBase = BannerBase;
+//# sourceMappingURL=BannerBase.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { GestureResponderEvent } from 'react-native';\n\nimport {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  BoxFlexDirection,\n  IconName,\n  TextVariant,\n} from '../../types';\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    onPress: closeButtonPropsOnPress,\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n  const handleClosePress =\n    onClose || closeButtonPropsOnPress\n      ? (event: GestureResponderEvent) => {\n          if (onClose) {\n            onClose();\n            return;\n          }\n          closeButtonPropsOnPress?.(event);\n        }\n      : undefined;\n\n  const mergedCloseButtonTwClassName = closeButtonTwClassName\n    ? `ml-3 ${closeButtonTwClassName}`\n    : 'ml-3';\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={2}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      padding={3}\n      twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box twClassName={hasContent(title) ? 'mt-1' : undefined}>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {shouldShowActionButton && (\n          <Box twClassName=\"mt-4\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          testID=\"banner-base-close-button\"\n          twClassName={mergedCloseButtonTwClassName}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Sm}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={handleClosePress}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BannerBaseProps } from "./BannerBase.types.cjs";
+export declare const BannerBase: React.FC<BannerBaseProps>;
+//# sourceMappingURL=BannerBase.d.cts.map

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BannerBaseProps } from "./BannerBase.types.mjs";
+export declare const BannerBase: React.FC<BannerBaseProps>;
+//# sourceMappingURL=BannerBase.d.mts.map

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

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

package/dist/components/BannerBase/BannerBase.mjs

@@ -0,0 +1,63 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize, FontWeight, BoxFlexDirection, IconName, TextVariant } from "../../types/index.mjs";
+import { Box } from "../Box/index.mjs";
+import { Button } from "../Button/index.mjs";
+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 }) => {
+    const resolvedActionButtonProps = actionButtonProps ?? {};
+    const { accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner', onPress: closeButtonPropsOnPress, twClassName: closeButtonTwClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
+    const shouldShowCloseButton = Boolean(onClose || closeButtonProps);
+    const shouldShowActionButton = Boolean(actionButtonOnPress);
+    const handleClosePress = onClose || closeButtonPropsOnPress
+        ? (event) => {
+            if (onClose) {
+                onClose();
+                return;
+            }
+            closeButtonPropsOnPress?.(event);
+        }
+        : undefined;
+    const mergedCloseButtonTwClassName = closeButtonTwClassName
+        ? `ml-3 ${closeButtonTwClassName}`
+        : 'ml-3';
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} gap={2} backgroundColor={BoxBackgroundColor.BackgroundDefault} padding={3} twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'} {...props}>
+      {startAccessory}
+
+      <Box twClassName="flex-1">
+        {hasContent(title) &&
+            (isTextContent(title) ? (<Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium} {...titleProps}>
+              {title}
+            </Text>) : (title))}
+
+        {hasContent(description) && (<Box twClassName={hasContent(title) ? 'mt-1' : undefined}>
+            {isTextContent(description) ? (<Text variant={TextVariant.BodySm} {...descriptionProps}>
+                {description}
+              </Text>) : (description)}
+          </Box>)}
+
+        {hasContent(children) &&
+            (isTextContent(children) ? (<Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>
+              {children}
+            </Text>) : (children))}
+
+        {shouldShowActionButton && (<Box twClassName="mt-4">
+            <Button size={ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps}>
+              {actionButtonLabel}
+            </Button>
+          </Box>)}
+      </Box>
+
+      {shouldShowCloseButton && (<ButtonIcon testID="banner-base-close-button" twClassName={mergedCloseButtonTwClassName} iconName={IconName.Close} size={ButtonIconSize.Sm} accessibilityLabel={closeButtonAccessibilityLabel} onPress={handleClosePress} {...resolvedCloseButtonProps}/>)}
+    </Box>);
+};
+//# sourceMappingURL=BannerBase.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { GestureResponderEvent } from 'react-native';\n\nimport {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  BoxFlexDirection,\n  IconName,\n  TextVariant,\n} from '../../types';\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    onPress: closeButtonPropsOnPress,\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n  const handleClosePress =\n    onClose || closeButtonPropsOnPress\n      ? (event: GestureResponderEvent) => {\n          if (onClose) {\n            onClose();\n            return;\n          }\n          closeButtonPropsOnPress?.(event);\n        }\n      : undefined;\n\n  const mergedCloseButtonTwClassName = closeButtonTwClassName\n    ? `ml-3 ${closeButtonTwClassName}`\n    : 'ml-3';\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={2}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      padding={3}\n      twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box twClassName={hasContent(title) ? 'mt-1' : undefined}>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {shouldShowActionButton && (\n          <Box twClassName=\"mt-4\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          testID=\"banner-base-close-button\"\n          twClassName={mergedCloseButtonTwClassName}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Sm}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={handleClosePress}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}

package/dist/components/BannerBase/BannerBase.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=BannerBase.types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerBase.types.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BannerBasePropsShared } from '@metamask-previews/design-system-shared';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\ntype BannerBaseActionButtonProps = Omit<\n  Partial<ButtonProps>,\n  'children' | 'onPress' | 'variant'\n>;\n\ntype BannerBaseCloseButtonProps = Omit<\n  Partial<ButtonIconProps>,\n  'iconName' | 'onPress'\n> & {\n  /**\n   * Optional press handler for the close button.\n   */\n  onPress?: (event: GestureResponderEvent) => void;\n};\n\ntype BannerBasePropsBase = BannerBasePropsShared &\n  Omit<BoxProps, 'children'> & {\n    /**\n     * Optional props for the title `Text` when title is a string.\n     */\n    titleProps?: Omit<Partial<TextProps>, 'children'>;\n    /**\n     * Optional props for the description `Text` when description is a string.\n     */\n    descriptionProps?: Omit<Partial<TextProps>, 'children'>;\n    /**\n     * Optional props for the children wrapper `Text` when children is a string.\n     */\n    childrenWrapperProps?: Omit<Partial<TextProps>, 'children'>;\n    /**\n     * Optional callback for the close button.\n     * If provided, a close button is shown.\n     */\n    onClose?: () => void;\n    /**\n     * Optional props for the close `ButtonIcon`.\n     * Providing this also shows a close button.\n     */\n    closeButtonProps?: BannerBaseCloseButtonProps;\n  };\n\ntype BannerBaseActionPropsWithHandler = {\n  actionButtonOnPress: (event: GestureResponderEvent) => void;\n  actionButtonLabel: string;\n  actionButtonProps?: BannerBaseActionButtonProps;\n};\n\ntype BannerBaseActionPropsWithoutHandler = {\n  actionButtonOnPress?: undefined;\n  actionButtonLabel?: string;\n  actionButtonProps?: BannerBaseActionButtonProps;\n};\n\n/**\n * BannerBase component props.\n */\nexport type BannerBaseProps = BannerBasePropsBase &\n  (BannerBaseActionPropsWithHandler | BannerBaseActionPropsWithoutHandler);\n"]}