@metamask/design-system-react 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -7,6 +7,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.14.0]
+
+### Changed
+
+- **BREAKING:** Updated `AvatarBase` exports to consume shared const-object + string-union types rather than local enums, aligning React with shared cross-platform type contracts ([#1005](https://github.com/MetaMask/metamask-design-system/pull/1005)).
+  - No migration required for typical usage; continue importing from `@metamask/design-system-react` as before.
+  - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
+- Updated `@metamask/utils` peer dependency to `^11.11.0` ([#1033](https://github.com/MetaMask/metamask-design-system/pull/1033)).
+- Expanded `BannerBase` migration documentation to improve upgrade guidance for consumers moving between recent releases ([#1011](https://github.com/MetaMask/metamask-design-system/pull/1011)).
+
+## [0.13.0]
+
+### Changed
+
+- `FontWeight.Bold` and the `Text` component now treat the semantic bold slot as weight 600; Storybook moved to the `Geist-SemiBold` assets and the tokens now emit `--font-weight-bold: 600`, so update any hardcoded `font-weight: 700` references as outlined in 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 with `as const`/string-union typings per ADR-0003 and ADR-0004, so the same values are available to both React and React Native while your import statements continue to reference `@metamask/design-system-react` (or the platform-specific entry point) as before ([#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 MIGRATION.md#from-version-0120-to-0130).
+- Documented the Button migration path that walks through prop, variant, and size mappings for both web and mobile, linking directly to MIGRATION.md#button-component so the release note, changelog, and migration guide share the same reference ([#999](https://github.com/MetaMask/metamask-design-system/pull/999)).
+
+### Fixed
+
+- Restored a visible keyboard focus outline for `Checkbox` keyboard users by making the hidden input a Tailwind `peer` and mirroring its `peer-focus-visible` state onto the visible container so Tab navigation shows a clear indicator ([#1008](https://github.com/MetaMask/metamask-design-system/pull/1008)).
+
 ## [0.12.0]
 
 ### Added
@@ -193,7 +215,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - Tailwind CSS integration with design token support
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.12.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.14.0...HEAD
+[0.14.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.13.0...@metamask/design-system-react@0.14.0
+[0.13.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.12.0...@metamask/design-system-react@0.13.0
 [0.12.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.11.0...@metamask/design-system-react@0.12.0
 [0.11.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.10.0...@metamask/design-system-react@0.11.0
 [0.10.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.9.0...@metamask/design-system-react@0.10.0

package/dist/components/AvatarBase/AvatarBase.cjs

@@ -24,17 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarBase = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_slot_1 = require("@radix-ui/react-slot");
 const react_1 = __importStar(require("react"));
-const types_1 = require("../../types/index.cjs");
 const tw_merge_1 = require("../../utils/tw-merge.cjs");
 const Text_1 = require("../Text/index.cjs");
 const AvatarBase_constants_1 = require("./AvatarBase.constants.cjs");
-exports.AvatarBase = (0, react_1.forwardRef)(({ children, fallbackText, fallbackTextProps, className, size = types_1.AvatarBaseSize.Md, shape = types_1.AvatarBaseShape.Circle, asChild, style, hasBorder = false, ...props }, ref) => {
+exports.AvatarBase = (0, react_1.forwardRef)(({ children, fallbackText, fallbackTextProps, className, size = design_system_shared_1.AvatarBaseSize.Md, shape = design_system_shared_1.AvatarBaseShape.Circle, asChild, style, hasBorder = false, ...props }, ref) => {
     const Component = asChild ? react_slot_1.Slot : 'div';
     const mergedClassName = (0, tw_merge_1.twMerge)(
     // Base styles
-    'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape === types_1.AvatarBaseShape.Circle
+    'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape === design_system_shared_1.AvatarBaseShape.Circle
         ? 'rounded-full'
         : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size], 
     // Size

package/dist/components/AvatarBase/AvatarBase.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAA4C;AAC5C,+CAA0C;AAE1C,iDAA8D;AAC9D,uDAA+C;AAC/C,4CAAmE;AAEnE,qEAKgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,uBAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,sEAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,qEAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,2DAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,wDAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,8BAAC,WAAI,IACH,OAAO,EAAE,kBAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,gBAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,4CAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n  TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n  (\n    {\n      children,\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarBaseSize.Md,\n      shape = AvatarBaseShape.Circle,\n      asChild,\n      style,\n      hasBorder = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'div';\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n      shape === AvatarBaseShape.Circle\n        ? 'rounded-full'\n        : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n      // Size\n      hasBorder\n        ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n        : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n      // Border\n      hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component ref={ref} className={mergedClassName} style={style} {...props}>\n        {fallbackText ? (\n          <Text\n            variant={TextVariant.BodySm}\n            fontWeight={FontWeight.Medium}\n            color={TextColor.TextMuted}\n            asChild\n            className=\"uppercase\"\n            {...fallbackTextProps}\n          >\n            {/* asChild prop renders Text component as a span, it does not create an additional element */}\n            <span>{fallbackText}</span>\n          </Text>\n        ) : (\n          children\n        )}\n      </Component>\n    );\n  },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}
+{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,qDAA4C;AAC5C,+CAA0C;AAE1C,uDAA+C;AAC/C,4CAAmE;AAEnE,qEAKgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,GAAG,sCAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,sCAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,sEAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,qEAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,2DAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,wDAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,8BAAC,WAAI,IACH,OAAO,EAAE,kBAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,gBAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,4CAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n  TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n  (\n    {\n      children,\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarBaseSize.Md,\n      shape = AvatarBaseShape.Circle,\n      asChild,\n      style,\n      hasBorder = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'div';\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n      shape === AvatarBaseShape.Circle\n        ? 'rounded-full'\n        : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n      // Size\n      hasBorder\n        ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n        : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n      // Border\n      hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component ref={ref} className={mergedClassName} style={style} {...props}>\n        {fallbackText ? (\n          <Text\n            variant={TextVariant.BodySm}\n            fontWeight={FontWeight.Medium}\n            color={TextColor.TextMuted}\n            asChild\n            className=\"uppercase\"\n            {...fallbackTextProps}\n          >\n            {/* asChild prop renders Text component as a span, it does not create an additional element */}\n            <span>{fallbackText}</span>\n          </Text>\n        ) : (\n          children\n        )}\n      </Component>\n    );\n  },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}

package/dist/components/AvatarBase/AvatarBase.constants.cjs

@@ -1,33 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TWCLASSMAP_AVATARBASE_SIZE_BORDER = exports.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE = exports.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION = exports.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION = void 0;
-const types_1 = require("../../types/index.cjs");
+const design_system_shared_1 = require("@metamask/design-system-shared");
 exports.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION = {
-    [types_1.AvatarBaseSize.Xs]: 'h-4 w-4',
-    [types_1.AvatarBaseSize.Sm]: 'h-6 w-6',
-    [types_1.AvatarBaseSize.Md]: 'h-8 w-8',
-    [types_1.AvatarBaseSize.Lg]: 'h-10 w-10',
-    [types_1.AvatarBaseSize.Xl]: 'h-12 w-12', // 48px
+    [design_system_shared_1.AvatarBaseSize.Xs]: 'h-4 w-4',
+    [design_system_shared_1.AvatarBaseSize.Sm]: 'h-6 w-6',
+    [design_system_shared_1.AvatarBaseSize.Md]: 'h-8 w-8',
+    [design_system_shared_1.AvatarBaseSize.Lg]: 'h-10 w-10',
+    [design_system_shared_1.AvatarBaseSize.Xl]: 'h-12 w-12', // 48px
 };
 exports.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION = {
-    [types_1.AvatarBaseSize.Xs]: 'h-[18px] w-[18px]',
-    [types_1.AvatarBaseSize.Sm]: 'h-[26px] w-[26px]',
-    [types_1.AvatarBaseSize.Md]: 'h-[34px] w-[34px]',
-    [types_1.AvatarBaseSize.Lg]: 'h-[44px] w-[44px]',
-    [types_1.AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side
+    [design_system_shared_1.AvatarBaseSize.Xs]: 'h-[18px] w-[18px]',
+    [design_system_shared_1.AvatarBaseSize.Sm]: 'h-[26px] w-[26px]',
+    [design_system_shared_1.AvatarBaseSize.Md]: 'h-[34px] w-[34px]',
+    [design_system_shared_1.AvatarBaseSize.Lg]: 'h-[44px] w-[44px]',
+    [design_system_shared_1.AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side
 };
 exports.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE = {
-    [types_1.AvatarBaseSize.Xs]: 'rounded-sm',
-    [types_1.AvatarBaseSize.Sm]: 'rounded-md',
-    [types_1.AvatarBaseSize.Md]: 'rounded-lg',
-    [types_1.AvatarBaseSize.Lg]: 'rounded-[10px]',
-    [types_1.AvatarBaseSize.Xl]: 'rounded-xl', // 12px
+    [design_system_shared_1.AvatarBaseSize.Xs]: 'rounded-sm',
+    [design_system_shared_1.AvatarBaseSize.Sm]: 'rounded-md',
+    [design_system_shared_1.AvatarBaseSize.Md]: 'rounded-lg',
+    [design_system_shared_1.AvatarBaseSize.Lg]: 'rounded-[10px]',
+    [design_system_shared_1.AvatarBaseSize.Xl]: 'rounded-xl', // 12px
 };
 exports.TWCLASSMAP_AVATARBASE_SIZE_BORDER = {
-    [types_1.AvatarBaseSize.Xs]: 'border-background-default border',
-    [types_1.AvatarBaseSize.Sm]: 'border-background-default border',
-    [types_1.AvatarBaseSize.Md]: 'border-background-default border',
-    [types_1.AvatarBaseSize.Lg]: 'border-background-default border-2',
-    [types_1.AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border
+    [design_system_shared_1.AvatarBaseSize.Xs]: 'border-background-default border',
+    [design_system_shared_1.AvatarBaseSize.Sm]: 'border-background-default border',
+    [design_system_shared_1.AvatarBaseSize.Md]: 'border-background-default border',
+    [design_system_shared_1.AvatarBaseSize.Lg]: 'border-background-default border-2',
+    [design_system_shared_1.AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border
 };
 //# sourceMappingURL=AvatarBase.constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA6C;AAEhC,QAAA,oCAAoC,GAG7C;IACF,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,WAAW;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO;CAC1C,CAAC;AAEW,QAAA,8CAA8C,GAGvD;IACF,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB,EAAE,oCAAoC;CAC/E,CAAC;AAEW,QAAA,+CAA+C,GAGxD;IACF,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,gBAAgB;IACrC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO;CAC3C,CAAC;AAEW,QAAA,iCAAiC,GAC5C;IACE,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC;IACzD,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC,EAAE,aAAa;CACzE,CAAC","sourcesContent":["import { AvatarBaseSize } from '../../types';\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'h-4 w-4', // 16px\n  [AvatarBaseSize.Sm]: 'h-6 w-6', // 24px\n  [AvatarBaseSize.Md]: 'h-8 w-8', // 32px\n  [AvatarBaseSize.Lg]: 'h-10 w-10', // 40px\n  [AvatarBaseSize.Xl]: 'h-12 w-12', // 48px\n};\n\nexport const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'h-[18px] w-[18px]', // 16px with 1px border on each side\n  [AvatarBaseSize.Sm]: 'h-[26px] w-[26px]', // 24px with 1px border on each side\n  [AvatarBaseSize.Md]: 'h-[34px] w-[34px]', // 32px with 1px border on each side\n  [AvatarBaseSize.Lg]: 'h-[44px] w-[44px]', // 40px with 2px border on each side\n  [AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'rounded-sm', // 4px\n  [AvatarBaseSize.Sm]: 'rounded-md', // 6px\n  [AvatarBaseSize.Md]: 'rounded-lg', // 8px\n  [AvatarBaseSize.Lg]: 'rounded-[10px]', // 10px (No tailwind class for this)\n  [AvatarBaseSize.Xl]: 'rounded-xl', // 12px\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDER: Record<AvatarBaseSize, string> =\n  {\n    [AvatarBaseSize.Xs]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Sm]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Md]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Lg]: 'border-background-default border-2', // 2px border\n    [AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border\n  };\n"]}
+{"version":3,"file":"AvatarBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":";;;AAAA,yEAAgE;AAEnD,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO;CAC1C,CAAC;AAEW,QAAA,8CAA8C,GAGvD;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB,EAAE,oCAAoC;CAC/E,CAAC;AAEW,QAAA,+CAA+C,GAGxD;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,gBAAgB;IACrC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO;CAC3C,CAAC;AAEW,QAAA,iCAAiC,GAC5C;IACE,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC;IACzD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC,EAAE,aAAa;CACzE,CAAC","sourcesContent":["import { AvatarBaseSize } from '@metamask/design-system-shared';\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'h-4 w-4', // 16px\n  [AvatarBaseSize.Sm]: 'h-6 w-6', // 24px\n  [AvatarBaseSize.Md]: 'h-8 w-8', // 32px\n  [AvatarBaseSize.Lg]: 'h-10 w-10', // 40px\n  [AvatarBaseSize.Xl]: 'h-12 w-12', // 48px\n};\n\nexport const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'h-[18px] w-[18px]', // 16px with 1px border on each side\n  [AvatarBaseSize.Sm]: 'h-[26px] w-[26px]', // 24px with 1px border on each side\n  [AvatarBaseSize.Md]: 'h-[34px] w-[34px]', // 32px with 1px border on each side\n  [AvatarBaseSize.Lg]: 'h-[44px] w-[44px]', // 40px with 2px border on each side\n  [AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'rounded-sm', // 4px\n  [AvatarBaseSize.Sm]: 'rounded-md', // 6px\n  [AvatarBaseSize.Md]: 'rounded-lg', // 8px\n  [AvatarBaseSize.Lg]: 'rounded-[10px]', // 10px (No tailwind class for this)\n  [AvatarBaseSize.Xl]: 'rounded-xl', // 12px\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDER: Record<AvatarBaseSize, string> =\n  {\n    [AvatarBaseSize.Xs]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Sm]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Md]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Lg]: 'border-background-default border-2', // 2px border\n    [AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border\n  };\n"]}

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

@@ -1,4 +1,4 @@
-import { AvatarBaseSize } from "../../types/index.cjs";
+import { AvatarBaseSize } from "@metamask/design-system-shared";
 export declare const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
 export declare const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
 export declare const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<AvatarBaseSize, string>;

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,+CAA+C,EAAE,MAAM,CAClE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAO1E,CAAC"}
+{"version":3,"file":"AvatarBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,+CAA+C,EAAE,MAAM,CAClE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAO1E,CAAC"}

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

@@ -1,4 +1,4 @@
-import { AvatarBaseSize } from "../../types/index.mjs";
+import { AvatarBaseSize } from "@metamask/design-system-shared";
 export declare const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
 export declare const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
 export declare const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<AvatarBaseSize, string>;

package/dist/components/AvatarBase/AvatarBase.constants.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,+CAA+C,EAAE,MAAM,CAClE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAO1E,CAAC"}
+{"version":3,"file":"AvatarBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,+CAA+C,EAAE,MAAM,CAClE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAO1E,CAAC"}

package/dist/components/AvatarBase/AvatarBase.constants.mjs

@@ -1,4 +1,4 @@
-import { AvatarBaseSize } from "../../types/index.mjs";
+import { AvatarBaseSize } from "@metamask/design-system-shared";
 export const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION = {
     [AvatarBaseSize.Xs]: 'h-4 w-4',
     [AvatarBaseSize.Sm]: 'h-6 w-6',

package/dist/components/AvatarBase/AvatarBase.constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,8BAAoB;AAE7C,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,8CAA8C,GAGvD;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB,EAAE,oCAAoC;CAC/E,CAAC;AAEF,MAAM,CAAC,MAAM,+CAA+C,GAGxD;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,gBAAgB;IACrC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAC5C;IACE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC;IACzD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC,EAAE,aAAa;CACzE,CAAC","sourcesContent":["import { AvatarBaseSize } from '../../types';\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'h-4 w-4', // 16px\n  [AvatarBaseSize.Sm]: 'h-6 w-6', // 24px\n  [AvatarBaseSize.Md]: 'h-8 w-8', // 32px\n  [AvatarBaseSize.Lg]: 'h-10 w-10', // 40px\n  [AvatarBaseSize.Xl]: 'h-12 w-12', // 48px\n};\n\nexport const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'h-[18px] w-[18px]', // 16px with 1px border on each side\n  [AvatarBaseSize.Sm]: 'h-[26px] w-[26px]', // 24px with 1px border on each side\n  [AvatarBaseSize.Md]: 'h-[34px] w-[34px]', // 32px with 1px border on each side\n  [AvatarBaseSize.Lg]: 'h-[44px] w-[44px]', // 40px with 2px border on each side\n  [AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'rounded-sm', // 4px\n  [AvatarBaseSize.Sm]: 'rounded-md', // 6px\n  [AvatarBaseSize.Md]: 'rounded-lg', // 8px\n  [AvatarBaseSize.Lg]: 'rounded-[10px]', // 10px (No tailwind class for this)\n  [AvatarBaseSize.Xl]: 'rounded-xl', // 12px\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDER: Record<AvatarBaseSize, string> =\n  {\n    [AvatarBaseSize.Xs]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Sm]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Md]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Lg]: 'border-background-default border-2', // 2px border\n    [AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border\n  };\n"]}
+{"version":3,"file":"AvatarBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,8CAA8C,GAGvD;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB,EAAE,oCAAoC;CAC/E,CAAC;AAEF,MAAM,CAAC,MAAM,+CAA+C,GAGxD;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,gBAAgB;IACrC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAC5C;IACE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC;IACzD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC,EAAE,aAAa;CACzE,CAAC","sourcesContent":["import { AvatarBaseSize } from '@metamask/design-system-shared';\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'h-4 w-4', // 16px\n  [AvatarBaseSize.Sm]: 'h-6 w-6', // 24px\n  [AvatarBaseSize.Md]: 'h-8 w-8', // 32px\n  [AvatarBaseSize.Lg]: 'h-10 w-10', // 40px\n  [AvatarBaseSize.Xl]: 'h-12 w-12', // 48px\n};\n\nexport const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'h-[18px] w-[18px]', // 16px with 1px border on each side\n  [AvatarBaseSize.Sm]: 'h-[26px] w-[26px]', // 24px with 1px border on each side\n  [AvatarBaseSize.Md]: 'h-[34px] w-[34px]', // 32px with 1px border on each side\n  [AvatarBaseSize.Lg]: 'h-[44px] w-[44px]', // 40px with 2px border on each side\n  [AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<\n  AvatarBaseSize,\n  string\n> = {\n  [AvatarBaseSize.Xs]: 'rounded-sm', // 4px\n  [AvatarBaseSize.Sm]: 'rounded-md', // 6px\n  [AvatarBaseSize.Md]: 'rounded-lg', // 8px\n  [AvatarBaseSize.Lg]: 'rounded-[10px]', // 10px (No tailwind class for this)\n  [AvatarBaseSize.Xl]: 'rounded-xl', // 12px\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDER: Record<AvatarBaseSize, string> =\n  {\n    [AvatarBaseSize.Xs]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Sm]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Md]: 'border-background-default border', // 1px border\n    [AvatarBaseSize.Lg]: 'border-background-default border-2', // 2px border\n    [AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border\n  };\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAsDtB,CAAC"}
+{"version":3,"file":"AvatarBase.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAW1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAsDtB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAsDtB,CAAC"}
+{"version":3,"file":"AvatarBase.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAW1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAsDtB,CAAC"}

package/dist/components/AvatarBase/AvatarBase.mjs

@@ -4,10 +4,10 @@ function $importDefault(module) {
     }
     return module;
 }
+import { AvatarBaseSize, AvatarBaseShape } from "@metamask/design-system-shared";
 import { Slot } from "@radix-ui/react-slot";
 import $React, { forwardRef } from "react";
 const React = $importDefault($React);
-import { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
 import { Text, FontWeight, TextVariant, TextColor } from "../Text/index.mjs";
 import { TWCLASSMAP_AVATARBASE_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE, TWCLASSMAP_AVATARBASE_SIZE_BORDER } from "./AvatarBase.constants.mjs";

package/dist/components/AvatarBase/AvatarBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,eAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,+CAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,8CAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,oCAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,iCAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,kCAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n  TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n  (\n    {\n      children,\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarBaseSize.Md,\n      shape = AvatarBaseShape.Circle,\n      asChild,\n      style,\n      hasBorder = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'div';\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n      shape === AvatarBaseShape.Circle\n        ? 'rounded-full'\n        : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n      // Size\n      hasBorder\n        ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n        : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n      // Border\n      hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component ref={ref} className={mergedClassName} style={style} {...props}>\n        {fallbackText ? (\n          <Text\n            variant={TextVariant.BodySm}\n            fontWeight={FontWeight.Medium}\n            color={TextColor.TextMuted}\n            asChild\n            className=\"uppercase\"\n            {...fallbackTextProps}\n          >\n            {/* asChild prop renders Text component as a span, it does not create an additional element */}\n            <span>{fallbackText}</span>\n          </Text>\n        ) : (\n          children\n        )}\n      </Component>\n    );\n  },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}
+{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,uCAAuC;AACxC,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,eAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,+CAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,8CAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,oCAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,iCAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,kCAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n  TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n  (\n    {\n      children,\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarBaseSize.Md,\n      shape = AvatarBaseShape.Circle,\n      asChild,\n      style,\n      hasBorder = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'div';\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n      shape === AvatarBaseShape.Circle\n        ? 'rounded-full'\n        : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n      // Size\n      hasBorder\n        ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n        : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n      // Border\n      hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component ref={ref} className={mergedClassName} style={style} {...props}>\n        {fallbackText ? (\n          <Text\n            variant={TextVariant.BodySm}\n            fontWeight={FontWeight.Medium}\n            color={TextColor.TextMuted}\n            asChild\n            className=\"uppercase\"\n            {...fallbackTextProps}\n          >\n            {/* asChild prop renders Text component as a span, it does not create an additional element */}\n            <span>{fallbackText}</span>\n          </Text>\n        ) : (\n          children\n        )}\n      </Component>\n    );\n  },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> & {\n  /**\n   * Required prop for the content to be rendered within the AvatarBase\n   * Not required if fallbackText is provided\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional text to display when no children are provided\n   */\n  fallbackText?: string;\n  /**\n   * Optional props to be passed to the Text component when rendering fallback text\n   * Only used when fallbackText is provided and no children\n   */\n  fallbackTextProps?: Partial<\n    React.HTMLAttributes<HTMLSpanElement> & TextProps\n  >;\n  /**\n   * Optional prop for additional CSS classes to be applied to the AvatarBase component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the size of the AvatarBase\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: AvatarBaseSize;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a div element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to control the shape of the AvatarBase\n   *\n   * @default AvatarBaseShape.Circle\n   */\n  shape?: AvatarBaseShape;\n  /**\n   * Optional prop to include the border with the Avatar.\n   * For internal use only\n   *\n   * @default false\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"AvatarBase.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBasePropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> &\n  AvatarBasePropsShared & {\n    /**\n     * Optional test id for querying in tests.\n     */\n    'data-testid'?: string;\n    /**\n     * Optional props to be passed to the Text component when rendering fallback text\n     * Only used when fallbackText is provided and no children\n     */\n    fallbackTextProps?: Partial<\n      React.HTMLAttributes<HTMLSpanElement> & TextProps\n    >;\n    /**\n     * Optional boolean that determines if the component should merge its props onto its immediate child\n     * instead of rendering a div element\n     *\n     * @default false\n     */\n    asChild?: boolean;\n  };\n"]}

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

@@ -1,32 +1,16 @@
+import type { AvatarBasePropsShared } from "@metamask/design-system-shared";
 import type { ComponentProps } from "react";
-import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
 import type { TextProps } from "../Text/index.cjs";
-export type AvatarBaseProps = ComponentProps<'div'> & {
+export type AvatarBaseProps = ComponentProps<'div'> & AvatarBasePropsShared & {
     /**
-     * Required prop for the content to be rendered within the AvatarBase
-     * Not required if fallbackText is provided
+     * Optional test id for querying in tests.
      */
-    children?: React.ReactNode;
-    /**
-     * Optional text to display when no children are provided
-     */
-    fallbackText?: string;
+    'data-testid'?: string;
     /**
      * Optional props to be passed to the Text component when rendering fallback text
      * Only used when fallbackText is provided and no children
      */
     fallbackTextProps?: Partial<React.HTMLAttributes<HTMLSpanElement> & TextProps>;
-    /**
-     * Optional prop for additional CSS classes to be applied to the AvatarBase component.
-     * These classes will be merged with the component's default classes using twMerge.
-     */
-    className?: string;
-    /**
-     * Optional prop to control the size of the AvatarBase
-     *
-     * @default AvatarBaseSize.Md
-     */
-    size?: AvatarBaseSize;
     /**
      * Optional boolean that determines if the component should merge its props onto its immediate child
      * instead of rendering a div element
@@ -34,27 +18,5 @@ export type AvatarBaseProps = ComponentProps<'div'> & {
      * @default false
      */
     asChild?: boolean;
-    /**
-     * Optional CSS styles to be applied to the component.
-     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Optional prop to control the shape of the AvatarBase
-     *
-     * @default AvatarBaseShape.Circle
-     */
-    shape?: AvatarBaseShape;
-    /**
-     * Optional prop to include the border with the Avatar.
-     * For internal use only
-     *
-     * @default false
-     */
-    hasBorder?: boolean;
-    /**
-     * Optional prop to add a test id to the icon
-     */
-    'data-testid'?: string;
 };
 //# sourceMappingURL=AvatarBase.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"AvatarBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GACjD,qBAAqB,GAAG;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

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

@@ -1,32 +1,16 @@
+import type { AvatarBasePropsShared } from "@metamask/design-system-shared";
 import type { ComponentProps } from "react";
-import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
 import type { TextProps } from "../Text/index.mjs";
-export type AvatarBaseProps = ComponentProps<'div'> & {
+export type AvatarBaseProps = ComponentProps<'div'> & AvatarBasePropsShared & {
     /**
-     * Required prop for the content to be rendered within the AvatarBase
-     * Not required if fallbackText is provided
+     * Optional test id for querying in tests.
      */
-    children?: React.ReactNode;
-    /**
-     * Optional text to display when no children are provided
-     */
-    fallbackText?: string;
+    'data-testid'?: string;
     /**
      * Optional props to be passed to the Text component when rendering fallback text
      * Only used when fallbackText is provided and no children
      */
     fallbackTextProps?: Partial<React.HTMLAttributes<HTMLSpanElement> & TextProps>;
-    /**
-     * Optional prop for additional CSS classes to be applied to the AvatarBase component.
-     * These classes will be merged with the component's default classes using twMerge.
-     */
-    className?: string;
-    /**
-     * Optional prop to control the size of the AvatarBase
-     *
-     * @default AvatarBaseSize.Md
-     */
-    size?: AvatarBaseSize;
     /**
      * Optional boolean that determines if the component should merge its props onto its immediate child
      * instead of rendering a div element
@@ -34,27 +18,5 @@ export type AvatarBaseProps = ComponentProps<'div'> & {
      * @default false
      */
     asChild?: boolean;
-    /**
-     * Optional CSS styles to be applied to the component.
-     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Optional prop to control the shape of the AvatarBase
-     *
-     * @default AvatarBaseShape.Circle
-     */
-    shape?: AvatarBaseShape;
-    /**
-     * Optional prop to include the border with the Avatar.
-     * For internal use only
-     *
-     * @default false
-     */
-    hasBorder?: boolean;
-    /**
-     * Optional prop to add a test id to the icon
-     */
-    'data-testid'?: string;
 };
 //# sourceMappingURL=AvatarBase.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"AvatarBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GACjD,qBAAqB,GAAG;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> & {\n  /**\n   * Required prop for the content to be rendered within the AvatarBase\n   * Not required if fallbackText is provided\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional text to display when no children are provided\n   */\n  fallbackText?: string;\n  /**\n   * Optional props to be passed to the Text component when rendering fallback text\n   * Only used when fallbackText is provided and no children\n   */\n  fallbackTextProps?: Partial<\n    React.HTMLAttributes<HTMLSpanElement> & TextProps\n  >;\n  /**\n   * Optional prop for additional CSS classes to be applied to the AvatarBase component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the size of the AvatarBase\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: AvatarBaseSize;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a div element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to control the shape of the AvatarBase\n   *\n   * @default AvatarBaseShape.Circle\n   */\n  shape?: AvatarBaseShape;\n  /**\n   * Optional prop to include the border with the Avatar.\n   * For internal use only\n   *\n   * @default false\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"AvatarBase.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBasePropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> &\n  AvatarBasePropsShared & {\n    /**\n     * Optional test id for querying in tests.\n     */\n    'data-testid'?: string;\n    /**\n     * Optional props to be passed to the Text component when rendering fallback text\n     * Only used when fallbackText is provided and no children\n     */\n    fallbackTextProps?: Partial<\n      React.HTMLAttributes<HTMLSpanElement> & TextProps\n    >;\n    /**\n     * Optional boolean that determines if the component should merge its props onto its immediate child\n     * instead of rendering a div element\n     *\n     * @default false\n     */\n    asChild?: boolean;\n  };\n"]}

package/dist/components/AvatarBase/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8D;AAArD,uGAAA,cAAc,OAAA;AAAE,wGAAA,eAAe,OAAA;AACxC,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { AvatarBaseSize, AvatarBaseShape } from '../../types';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":";;;AAAA,uEAGwC;AAFtC,sHAAA,cAAc,OAAA;AACd,uHAAA,eAAe,OAAA;AAEjB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}

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

@@ -1,4 +1,4 @@
-export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
+export { AvatarBaseSize, AvatarBaseShape, } from "@metamask/design-system-shared";
 export { AvatarBase } from "./AvatarBase.cjs";
 export type { AvatarBaseProps } from "./AvatarBase.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,GAChB,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

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

@@ -1,4 +1,4 @@
-export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
+export { AvatarBaseSize, AvatarBaseShape, } from "@metamask/design-system-shared";
 export { AvatarBase } from "./AvatarBase.mjs";
 export type { AvatarBaseProps } from "./AvatarBase.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,GAChB,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/AvatarBase/index.mjs

@@ -1,3 +1,3 @@
-export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
+export { AvatarBaseSize, AvatarBaseShape } from "@metamask/design-system-shared";
 export { AvatarBase } from "./AvatarBase.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { AvatarBaseSize, AvatarBaseShape } from '../../types';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}

package/dist/components/BadgeWrapper/BadgeWrapper.cjs

@@ -24,10 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BadgeWrapper = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importStar(require("react"));
-const types_1 = require("../../types/index.cjs");
 const tw_merge_1 = require("../../utils/tw-merge.cjs");
-exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerProps, badge, badgeContainerProps, position = types_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = types_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
+exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerProps, badge, badgeContainerProps, position = design_system_shared_1.BadgeWrapperPosition.BottomRight, positionAnchorShape = design_system_shared_1.BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
     const [anchorWidth, setAnchorWidth] = (0, react_1.useState)(0);
     const [anchorHeight, setAnchorHeight] = (0, react_1.useState)(0);
     const [badgeWidth, setBadgeWidth] = (0, react_1.useState)(0);
@@ -51,10 +51,10 @@ exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerPro
         if (customPosition) {
             return customPosition;
         }
-        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;
         const badgeCenteringXOffset = badgeWidth / 2;
@@ -62,13 +62,13 @@ exports.BadgeWrapper = (0, react_1.forwardRef)(({ children, childrenContainerPro
         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.TopLeft:
+            case design_system_shared_1.BadgeWrapperPosition.TopLeft:
                 return { top: finalYOffset, left: finalXOffset };
-            case types_1.BadgeWrapperPosition.BottomLeft:
+            case design_system_shared_1.BadgeWrapperPosition.BottomLeft:
                 return { bottom: finalYOffset, left: finalXOffset };
-            case types_1.BadgeWrapperPosition.BottomRight:
+            case design_system_shared_1.BadgeWrapperPosition.BottomRight:
             default:
                 return { bottom: finalYOffset, right: finalXOffset };
         }

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 type { CSSProperties } from 'react';\nimport React, {\n  forwardRef,\n  useState,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport {\n  BadgeWrapperPosition,\n  BadgeWrapperPositionAnchorShape,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n  (\n    {\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      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const [anchorWidth, setAnchorWidth] = useState(0);\n    const [anchorHeight, setAnchorHeight] = useState(0);\n    const [badgeWidth, setBadgeWidth] = useState(0);\n    const [badgeHeight, setBadgeHeight] = useState(0);\n\n    const anchorRef = useRef<HTMLDivElement | null>(null);\n    const badgeRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure both elements once on mount\n    useLayoutEffect(() => {\n      if (anchorRef.current) {\n        const { width, height } = anchorRef.current.getBoundingClientRect();\n        setAnchorWidth(width);\n        setAnchorHeight(height);\n      }\n      if (badgeRef.current) {\n        const { width, height } = badgeRef.current.getBoundingClientRect();\n        setBadgeWidth(width);\n        setBadgeHeight(height);\n      }\n    }, []); // empty deps → run only after first render\n\n    const finalPositions = useMemo<React.CSSProperties>(() => {\n      if (customPosition) {\n        return customPosition as CSSProperties;\n      }\n\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\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\n      switch (position) {\n        case BadgeWrapperPosition.TopRight:\n          return { top: finalYOffset, right: finalXOffset };\n        case BadgeWrapperPosition.TopLeft:\n          return { top: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomLeft:\n          return { bottom: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomRight:\n        default:\n          return { bottom: finalYOffset, right: finalXOffset };\n      }\n    }, [\n      position,\n      positionAnchorShape,\n      anchorWidth,\n      anchorHeight,\n      badgeWidth,\n      badgeHeight,\n      positionXOffset,\n      positionYOffset,\n      customPosition,\n    ]);\n\n    const containerClassName = twMerge(\n      'relative inline-flex self-start',\n      className,\n    );\n\n    return (\n      <div ref={ref} className={containerClassName} style={style} {...props}>\n        <div\n          className=\"inline-flex\"\n          ref={anchorRef}\n          {...childrenContainerProps}\n        >\n          {children}\n        </div>\n\n        <div\n          ref={badgeRef}\n          className=\"absolute\"\n          style={finalPositions}\n          {...badgeContainerProps}\n        >\n          {badge}\n        </div>\n      </div>\n    );\n  },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\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/design-system-shared';\nimport type { CSSProperties } from 'react';\nimport React, {\n  forwardRef,\n  useState,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nexport const BadgeWrapper = forwardRef<HTMLDivElement, BadgeWrapperProps>(\n  (\n    {\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      className = '',\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const [anchorWidth, setAnchorWidth] = useState(0);\n    const [anchorHeight, setAnchorHeight] = useState(0);\n    const [badgeWidth, setBadgeWidth] = useState(0);\n    const [badgeHeight, setBadgeHeight] = useState(0);\n\n    const anchorRef = useRef<HTMLDivElement | null>(null);\n    const badgeRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure both elements once on mount\n    useLayoutEffect(() => {\n      if (anchorRef.current) {\n        const { width, height } = anchorRef.current.getBoundingClientRect();\n        setAnchorWidth(width);\n        setAnchorHeight(height);\n      }\n      if (badgeRef.current) {\n        const { width, height } = badgeRef.current.getBoundingClientRect();\n        setBadgeWidth(width);\n        setBadgeHeight(height);\n      }\n    }, []); // empty deps → run only after first render\n\n    const finalPositions = useMemo<React.CSSProperties>(() => {\n      if (customPosition) {\n        return customPosition as CSSProperties;\n      }\n\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\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\n      switch (position) {\n        case BadgeWrapperPosition.TopRight:\n          return { top: finalYOffset, right: finalXOffset };\n        case BadgeWrapperPosition.TopLeft:\n          return { top: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomLeft:\n          return { bottom: finalYOffset, left: finalXOffset };\n        case BadgeWrapperPosition.BottomRight:\n        default:\n          return { bottom: finalYOffset, right: finalXOffset };\n      }\n    }, [\n      position,\n      positionAnchorShape,\n      anchorWidth,\n      anchorHeight,\n      badgeWidth,\n      badgeHeight,\n      positionXOffset,\n      positionYOffset,\n      customPosition,\n    ]);\n\n    const containerClassName = twMerge(\n      'relative inline-flex self-start',\n      className,\n    );\n\n    return (\n      <div ref={ref} className={containerClassName} style={style} {...props}>\n        <div\n          className=\"inline-flex\"\n          ref={anchorRef}\n          {...childrenContainerProps}\n        >\n          {children}\n        </div>\n\n        <div\n          ref={badgeRef}\n          className=\"absolute\"\n          style={finalPositions}\n          {...badgeContainerProps}\n        >\n          {badge}\n        </div>\n      </div>\n    );\n  },\n);\n\nBadgeWrapper.displayName = 'BadgeWrapper';\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,KAMN,cAAc;AAQf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}
+{"version":3,"file":"BadgeWrapper.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAMN,cAAc;AAIf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,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,KAMN,cAAc;AAQf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}
+{"version":3,"file":"BadgeWrapper.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":"AAKA,OAAO,KAMN,cAAc;AAIf,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAE9D,eAAO,MAAM,YAAY,uGA+GxB,CAAC"}

package/dist/components/BadgeWrapper/BadgeWrapper.mjs

@@ -4,9 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
+import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "@metamask/design-system-shared";
 import $React, { forwardRef, useState, useLayoutEffect, useMemo, useRef } from "react";
 const React = $importDefault($React);
-import { BadgeWrapperPosition, BadgeWrapperPositionAnchorShape } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
 export const BadgeWrapper = forwardRef(({ children, childrenContainerProps, badge, badgeContainerProps, position = BadgeWrapperPosition.BottomRight, positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular, positionXOffset = 0, positionYOffset = 0, customPosition, className = '', style, ...props }, ref) => {
     const [anchorWidth, setAnchorWidth] = useState(0);