@metamask-previews/design-system-react 0.11.0-preview.fa05289 → 0.13.0-preview.8028c20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/CHANGELOG.md +26 -1
  2. package/dist/components/AvatarBase/AvatarBase.cjs +3 -3
  3. package/dist/components/AvatarBase/AvatarBase.cjs.map +1 -1
  4. package/dist/components/AvatarBase/AvatarBase.constants.cjs +21 -21
  5. package/dist/components/AvatarBase/AvatarBase.constants.cjs.map +1 -1
  6. package/dist/components/AvatarBase/AvatarBase.constants.d.cts +1 -1
  7. package/dist/components/AvatarBase/AvatarBase.constants.d.cts.map +1 -1
  8. package/dist/components/AvatarBase/AvatarBase.constants.d.mts +1 -1
  9. package/dist/components/AvatarBase/AvatarBase.constants.d.mts.map +1 -1
  10. package/dist/components/AvatarBase/AvatarBase.constants.mjs +1 -1
  11. package/dist/components/AvatarBase/AvatarBase.constants.mjs.map +1 -1
  12. package/dist/components/AvatarBase/AvatarBase.d.cts.map +1 -1
  13. package/dist/components/AvatarBase/AvatarBase.d.mts.map +1 -1
  14. package/dist/components/AvatarBase/AvatarBase.mjs +1 -1
  15. package/dist/components/AvatarBase/AvatarBase.mjs.map +1 -1
  16. package/dist/components/AvatarBase/AvatarBase.types.cjs.map +1 -1
  17. package/dist/components/AvatarBase/AvatarBase.types.d.cts +4 -42
  18. package/dist/components/AvatarBase/AvatarBase.types.d.cts.map +1 -1
  19. package/dist/components/AvatarBase/AvatarBase.types.d.mts +4 -42
  20. package/dist/components/AvatarBase/AvatarBase.types.d.mts.map +1 -1
  21. package/dist/components/AvatarBase/AvatarBase.types.mjs.map +1 -1
  22. package/dist/components/AvatarBase/index.cjs +3 -3
  23. package/dist/components/AvatarBase/index.cjs.map +1 -1
  24. package/dist/components/AvatarBase/index.d.cts +1 -1
  25. package/dist/components/AvatarBase/index.d.cts.map +1 -1
  26. package/dist/components/AvatarBase/index.d.mts +1 -1
  27. package/dist/components/AvatarBase/index.d.mts.map +1 -1
  28. package/dist/components/AvatarBase/index.mjs +1 -1
  29. package/dist/components/AvatarBase/index.mjs.map +1 -1
  30. package/dist/components/AvatarNetwork/AvatarNetwork.types.cjs.map +1 -1
  31. package/dist/components/AvatarNetwork/AvatarNetwork.types.d.cts +8 -13
  32. package/dist/components/AvatarNetwork/AvatarNetwork.types.d.cts.map +1 -1
  33. package/dist/components/AvatarNetwork/AvatarNetwork.types.d.mts +8 -13
  34. package/dist/components/AvatarNetwork/AvatarNetwork.types.d.mts.map +1 -1
  35. package/dist/components/AvatarNetwork/AvatarNetwork.types.mjs.map +1 -1
  36. package/dist/components/BadgeWrapper/BadgeWrapper.cjs +8 -8
  37. package/dist/components/BadgeWrapper/BadgeWrapper.cjs.map +1 -1
  38. package/dist/components/BadgeWrapper/BadgeWrapper.d.cts.map +1 -1
  39. package/dist/components/BadgeWrapper/BadgeWrapper.d.mts.map +1 -1
  40. package/dist/components/BadgeWrapper/BadgeWrapper.mjs +1 -1
  41. package/dist/components/BadgeWrapper/BadgeWrapper.mjs.map +1 -1
  42. package/dist/components/BadgeWrapper/BadgeWrapper.types.cjs.map +1 -1
  43. package/dist/components/BadgeWrapper/BadgeWrapper.types.d.cts +4 -51
  44. package/dist/components/BadgeWrapper/BadgeWrapper.types.d.cts.map +1 -1
  45. package/dist/components/BadgeWrapper/BadgeWrapper.types.d.mts +4 -51
  46. package/dist/components/BadgeWrapper/BadgeWrapper.types.d.mts.map +1 -1
  47. package/dist/components/BadgeWrapper/BadgeWrapper.types.mjs.map +1 -1
  48. package/dist/components/BadgeWrapper/index.cjs +3 -3
  49. package/dist/components/BadgeWrapper/index.cjs.map +1 -1
  50. package/dist/components/BadgeWrapper/index.d.cts +1 -2
  51. package/dist/components/BadgeWrapper/index.d.cts.map +1 -1
  52. package/dist/components/BadgeWrapper/index.d.mts +1 -2
  53. package/dist/components/BadgeWrapper/index.d.mts.map +1 -1
  54. package/dist/components/BadgeWrapper/index.mjs +1 -1
  55. package/dist/components/BadgeWrapper/index.mjs.map +1 -1
  56. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs +3 -3
  57. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs.map +1 -1
  58. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs +3 -3
  59. package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs.map +1 -1
  60. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs +3 -3
  61. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs.map +1 -1
  62. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs +3 -3
  63. package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs.map +1 -1
  64. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs +3 -3
  65. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map +1 -1
  66. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs +3 -3
  67. package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs.map +1 -1
  68. package/dist/components/ButtonHero/ButtonHero.cjs +1 -1
  69. package/dist/components/ButtonHero/ButtonHero.cjs.map +1 -1
  70. package/dist/components/ButtonHero/ButtonHero.mjs +1 -1
  71. package/dist/components/ButtonHero/ButtonHero.mjs.map +1 -1
  72. package/dist/components/Checkbox/Checkbox.cjs +2 -2
  73. package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
  74. package/dist/components/Checkbox/Checkbox.mjs +2 -2
  75. package/dist/components/Checkbox/Checkbox.mjs.map +1 -1
  76. package/dist/components/Icon/icons/Candlestick.cjs +1 -1
  77. package/dist/components/Icon/icons/Candlestick.cjs.map +1 -1
  78. package/dist/components/Icon/icons/Candlestick.mjs +1 -1
  79. package/dist/components/Icon/icons/Candlestick.mjs.map +1 -1
  80. package/dist/components/Input/Input.cjs +1 -1
  81. package/dist/components/Input/Input.cjs.map +1 -1
  82. package/dist/components/Input/Input.mjs +1 -1
  83. package/dist/components/Input/Input.mjs.map +1 -1
  84. package/dist/components/Text/Text.types.cjs.map +1 -1
  85. package/dist/components/Text/Text.types.d.cts +1 -1
  86. package/dist/components/Text/Text.types.d.mts +1 -1
  87. package/dist/components/Text/Text.types.mjs.map +1 -1
  88. package/dist/components/TextButton/TextButton.cjs +4 -4
  89. package/dist/components/TextButton/TextButton.cjs.map +1 -1
  90. package/dist/components/TextButton/TextButton.mjs +4 -4
  91. package/dist/components/TextButton/TextButton.mjs.map +1 -1
  92. package/dist/types/index.cjs +19 -60
  93. package/dist/types/index.cjs.map +1 -1
  94. package/dist/types/index.d.cts +9 -72
  95. package/dist/types/index.d.cts.map +1 -1
  96. package/dist/types/index.d.mts +9 -72
  97. package/dist/types/index.d.mts.map +1 -1
  98. package/dist/types/index.mjs +9 -67
  99. package/dist/types/index.mjs.map +1 -1
  100. package/package.json +6 -12
package/CHANGELOG.md CHANGED
@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [0.13.0]
11
+
12
+ ### Changed
13
+
14
+ - `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)).
15
+ - `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).
16
+ - 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)).
17
+
18
+ ### Fixed
19
+
20
+ - 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)).
21
+
22
+ ## [0.12.0]
23
+
24
+ ### Added
25
+
26
+ - Added `BannerAlert` component ([#975](https://github.com/MetaMask/metamask-design-system/pull/975))
27
+
28
+ ### Changed
29
+
30
+ - Updated `TextButton` hover/pressed styles to be text-only (no background fill) ([#1001](https://github.com/MetaMask/metamask-design-system/pull/1001))
31
+ - Updated `Candlestick` icon asset with smaller size variant ([#998](https://github.com/MetaMask/metamask-design-system/pull/998))
32
+
10
33
  ## [0.11.0]
11
34
 
12
35
  ### Added
@@ -182,7 +205,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
182
205
  - Full TypeScript support with type definitions and enums
183
206
  - Tailwind CSS integration with design token support
184
207
 
185
- [Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.11.0...HEAD
208
+ [Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.13.0...HEAD
209
+ [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
210
+ [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
186
211
  [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
187
212
  [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
188
213
  [0.9.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.8.0...@metamask/design-system-react@0.9.0
@@ -24,17 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.AvatarBase = void 0;
27
+ const design_system_shared_1 = require("@metamask-previews/design-system-shared");
27
28
  const react_slot_1 = require("@radix-ui/react-slot");
28
29
  const react_1 = __importStar(require("react"));
29
- const types_1 = require("../../types/index.cjs");
30
30
  const tw_merge_1 = require("../../utils/tw-merge.cjs");
31
31
  const Text_1 = require("../Text/index.cjs");
32
32
  const AvatarBase_constants_1 = require("./AvatarBase.constants.cjs");
33
- 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) => {
33
+ 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) => {
34
34
  const Component = asChild ? react_slot_1.Slot : 'div';
35
35
  const mergedClassName = (0, tw_merge_1.twMerge)(
36
36
  // Base styles
37
- 'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape === types_1.AvatarBaseShape.Circle
37
+ 'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape === design_system_shared_1.AvatarBaseShape.Circle
38
38
  ? 'rounded-full'
39
39
  : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],
40
40
  // Size
@@ -1 +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"]}
1
+ {"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,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-previews/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"]}
@@ -1,33 +1,33 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.TWCLASSMAP_AVATARBASE_SIZE_BORDER = exports.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE = exports.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION = exports.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION = void 0;
4
- const types_1 = require("../../types/index.cjs");
4
+ const design_system_shared_1 = require("@metamask-previews/design-system-shared");
5
5
  exports.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION = {
6
- [types_1.AvatarBaseSize.Xs]: 'h-4 w-4',
7
- [types_1.AvatarBaseSize.Sm]: 'h-6 w-6',
8
- [types_1.AvatarBaseSize.Md]: 'h-8 w-8',
9
- [types_1.AvatarBaseSize.Lg]: 'h-10 w-10',
10
- [types_1.AvatarBaseSize.Xl]: 'h-12 w-12', // 48px
6
+ [design_system_shared_1.AvatarBaseSize.Xs]: 'h-4 w-4',
7
+ [design_system_shared_1.AvatarBaseSize.Sm]: 'h-6 w-6',
8
+ [design_system_shared_1.AvatarBaseSize.Md]: 'h-8 w-8',
9
+ [design_system_shared_1.AvatarBaseSize.Lg]: 'h-10 w-10',
10
+ [design_system_shared_1.AvatarBaseSize.Xl]: 'h-12 w-12', // 48px
11
11
  };
12
12
  exports.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION = {
13
- [types_1.AvatarBaseSize.Xs]: 'h-[18px] w-[18px]',
14
- [types_1.AvatarBaseSize.Sm]: 'h-[26px] w-[26px]',
15
- [types_1.AvatarBaseSize.Md]: 'h-[34px] w-[34px]',
16
- [types_1.AvatarBaseSize.Lg]: 'h-[44px] w-[44px]',
17
- [types_1.AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side
13
+ [design_system_shared_1.AvatarBaseSize.Xs]: 'h-[18px] w-[18px]',
14
+ [design_system_shared_1.AvatarBaseSize.Sm]: 'h-[26px] w-[26px]',
15
+ [design_system_shared_1.AvatarBaseSize.Md]: 'h-[34px] w-[34px]',
16
+ [design_system_shared_1.AvatarBaseSize.Lg]: 'h-[44px] w-[44px]',
17
+ [design_system_shared_1.AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side
18
18
  };
19
19
  exports.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE = {
20
- [types_1.AvatarBaseSize.Xs]: 'rounded-sm',
21
- [types_1.AvatarBaseSize.Sm]: 'rounded-md',
22
- [types_1.AvatarBaseSize.Md]: 'rounded-lg',
23
- [types_1.AvatarBaseSize.Lg]: 'rounded-[10px]',
24
- [types_1.AvatarBaseSize.Xl]: 'rounded-xl', // 12px
20
+ [design_system_shared_1.AvatarBaseSize.Xs]: 'rounded-sm',
21
+ [design_system_shared_1.AvatarBaseSize.Sm]: 'rounded-md',
22
+ [design_system_shared_1.AvatarBaseSize.Md]: 'rounded-lg',
23
+ [design_system_shared_1.AvatarBaseSize.Lg]: 'rounded-[10px]',
24
+ [design_system_shared_1.AvatarBaseSize.Xl]: 'rounded-xl', // 12px
25
25
  };
26
26
  exports.TWCLASSMAP_AVATARBASE_SIZE_BORDER = {
27
- [types_1.AvatarBaseSize.Xs]: 'border-background-default border',
28
- [types_1.AvatarBaseSize.Sm]: 'border-background-default border',
29
- [types_1.AvatarBaseSize.Md]: 'border-background-default border',
30
- [types_1.AvatarBaseSize.Lg]: 'border-background-default border-2',
31
- [types_1.AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border
27
+ [design_system_shared_1.AvatarBaseSize.Xs]: 'border-background-default border',
28
+ [design_system_shared_1.AvatarBaseSize.Sm]: 'border-background-default border',
29
+ [design_system_shared_1.AvatarBaseSize.Md]: 'border-background-default border',
30
+ [design_system_shared_1.AvatarBaseSize.Lg]: 'border-background-default border-2',
31
+ [design_system_shared_1.AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border
32
32
  };
33
33
  //# sourceMappingURL=AvatarBase.constants.cjs.map
@@ -1 +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"]}
1
+ {"version":3,"file":"AvatarBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAyE;AAE5D,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-previews/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"]}
@@ -1,4 +1,4 @@
1
- import { AvatarBaseSize } from "../../types/index.cjs";
1
+ import { AvatarBaseSize } from "@metamask-previews/design-system-shared";
2
2
  export declare const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
3
3
  export declare const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
4
4
  export declare const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<AvatarBaseSize, string>;
@@ -1 +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"}
1
+ {"version":3,"file":"AvatarBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,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"}
@@ -1,4 +1,4 @@
1
- import { AvatarBaseSize } from "../../types/index.mjs";
1
+ import { AvatarBaseSize } from "@metamask-previews/design-system-shared";
2
2
  export declare const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
3
3
  export declare const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
4
4
  export declare const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<AvatarBaseSize, string>;
@@ -1 +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"}
1
+ {"version":3,"file":"AvatarBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,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"}
@@ -1,4 +1,4 @@
1
- import { AvatarBaseSize } from "../../types/index.mjs";
1
+ import { AvatarBaseSize } from "@metamask-previews/design-system-shared";
2
2
  export const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION = {
3
3
  [AvatarBaseSize.Xs]: 'h-4 w-4',
4
4
  [AvatarBaseSize.Sm]: 'h-6 w-6',
@@ -1 +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"]}
1
+ {"version":3,"file":"AvatarBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AAEzE,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-previews/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"]}
@@ -1 +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"}
1
+ {"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"}
@@ -1 +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"}
1
+ {"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"}
@@ -4,10 +4,10 @@ function $importDefault(module) {
4
4
  }
5
5
  return module;
6
6
  }
7
+ import { AvatarBaseSize, AvatarBaseShape } from "@metamask-previews/design-system-shared";
7
8
  import { Slot } from "@radix-ui/react-slot";
8
9
  import $React, { forwardRef } from "react";
9
10
  const React = $importDefault($React);
10
- import { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
11
11
  import { twMerge } from "../../utils/tw-merge.mjs";
12
12
  import { Text, FontWeight, TextVariant, TextColor } from "../Text/index.mjs";
13
13
  import { TWCLASSMAP_AVATARBASE_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE, TWCLASSMAP_AVATARBASE_SIZE_BORDER } from "./AvatarBase.constants.mjs";
@@ -1 +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"]}
1
+ {"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,gDAAgD;AACjD,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-previews/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"]}
@@ -1 +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"]}
1
+ {"version":3,"file":"AvatarBase.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBasePropsShared } from '@metamask-previews/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"]}
@@ -1,32 +1,16 @@
1
+ import type { AvatarBasePropsShared } from "@metamask-previews/design-system-shared";
1
2
  import type { ComponentProps } from "react";
2
- import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
3
3
  import type { TextProps } from "../Text/index.cjs";
4
- export type AvatarBaseProps = ComponentProps<'div'> & {
4
+ export type AvatarBaseProps = ComponentProps<'div'> & AvatarBasePropsShared & {
5
5
  /**
6
- * Required prop for the content to be rendered within the AvatarBase
7
- * Not required if fallbackText is provided
6
+ * Optional test id for querying in tests.
8
7
  */
9
- children?: React.ReactNode;
10
- /**
11
- * Optional text to display when no children are provided
12
- */
13
- fallbackText?: string;
8
+ 'data-testid'?: string;
14
9
  /**
15
10
  * Optional props to be passed to the Text component when rendering fallback text
16
11
  * Only used when fallbackText is provided and no children
17
12
  */
18
13
  fallbackTextProps?: Partial<React.HTMLAttributes<HTMLSpanElement> & TextProps>;
19
- /**
20
- * Optional prop for additional CSS classes to be applied to the AvatarBase component.
21
- * These classes will be merged with the component's default classes using twMerge.
22
- */
23
- className?: string;
24
- /**
25
- * Optional prop to control the size of the AvatarBase
26
- *
27
- * @default AvatarBaseSize.Md
28
- */
29
- size?: AvatarBaseSize;
30
14
  /**
31
15
  * Optional boolean that determines if the component should merge its props onto its immediate child
32
16
  * instead of rendering a div element
@@ -34,27 +18,5 @@ export type AvatarBaseProps = ComponentProps<'div'> & {
34
18
  * @default false
35
19
  */
36
20
  asChild?: boolean;
37
- /**
38
- * Optional CSS styles to be applied to the component.
39
- * Should be used sparingly and only for dynamic styles that can't be achieved with className.
40
- */
41
- style?: React.CSSProperties;
42
- /**
43
- * Optional prop to control the shape of the AvatarBase
44
- *
45
- * @default AvatarBaseShape.Circle
46
- */
47
- shape?: AvatarBaseShape;
48
- /**
49
- * Optional prop to include the border with the Avatar.
50
- * For internal use only
51
- *
52
- * @default false
53
- */
54
- hasBorder?: boolean;
55
- /**
56
- * Optional prop to add a test id to the icon
57
- */
58
- 'data-testid'?: string;
59
21
  };
60
22
  //# sourceMappingURL=AvatarBase.types.d.cts.map
@@ -1 +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"}
1
+ {"version":3,"file":"AvatarBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,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"}
@@ -1,32 +1,16 @@
1
+ import type { AvatarBasePropsShared } from "@metamask-previews/design-system-shared";
1
2
  import type { ComponentProps } from "react";
2
- import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
3
3
  import type { TextProps } from "../Text/index.mjs";
4
- export type AvatarBaseProps = ComponentProps<'div'> & {
4
+ export type AvatarBaseProps = ComponentProps<'div'> & AvatarBasePropsShared & {
5
5
  /**
6
- * Required prop for the content to be rendered within the AvatarBase
7
- * Not required if fallbackText is provided
6
+ * Optional test id for querying in tests.
8
7
  */
9
- children?: React.ReactNode;
10
- /**
11
- * Optional text to display when no children are provided
12
- */
13
- fallbackText?: string;
8
+ 'data-testid'?: string;
14
9
  /**
15
10
  * Optional props to be passed to the Text component when rendering fallback text
16
11
  * Only used when fallbackText is provided and no children
17
12
  */
18
13
  fallbackTextProps?: Partial<React.HTMLAttributes<HTMLSpanElement> & TextProps>;
19
- /**
20
- * Optional prop for additional CSS classes to be applied to the AvatarBase component.
21
- * These classes will be merged with the component's default classes using twMerge.
22
- */
23
- className?: string;
24
- /**
25
- * Optional prop to control the size of the AvatarBase
26
- *
27
- * @default AvatarBaseSize.Md
28
- */
29
- size?: AvatarBaseSize;
30
14
  /**
31
15
  * Optional boolean that determines if the component should merge its props onto its immediate child
32
16
  * instead of rendering a div element
@@ -34,27 +18,5 @@ export type AvatarBaseProps = ComponentProps<'div'> & {
34
18
  * @default false
35
19
  */
36
20
  asChild?: boolean;
37
- /**
38
- * Optional CSS styles to be applied to the component.
39
- * Should be used sparingly and only for dynamic styles that can't be achieved with className.
40
- */
41
- style?: React.CSSProperties;
42
- /**
43
- * Optional prop to control the shape of the AvatarBase
44
- *
45
- * @default AvatarBaseShape.Circle
46
- */
47
- shape?: AvatarBaseShape;
48
- /**
49
- * Optional prop to include the border with the Avatar.
50
- * For internal use only
51
- *
52
- * @default false
53
- */
54
- hasBorder?: boolean;
55
- /**
56
- * Optional prop to add a test id to the icon
57
- */
58
- 'data-testid'?: string;
59
21
  };
60
22
  //# sourceMappingURL=AvatarBase.types.d.mts.map
@@ -1 +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"}
1
+ {"version":3,"file":"AvatarBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AACrF,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"}
@@ -1 +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"]}
1
+ {"version":3,"file":"AvatarBase.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBasePropsShared } from '@metamask-previews/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"]}
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.AvatarBase = exports.AvatarBaseShape = exports.AvatarBaseSize = void 0;
4
- var types_1 = require("../../types/index.cjs");
5
- Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return types_1.AvatarBaseSize; } });
6
- Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return types_1.AvatarBaseShape; } });
4
+ var design_system_shared_1 = require("@metamask-previews/design-system-shared");
5
+ Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseSize; } });
6
+ Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseShape; } });
7
7
  var AvatarBase_1 = require("./AvatarBase.cjs");
8
8
  Object.defineProperty(exports, "AvatarBase", { enumerable: true, get: function () { return AvatarBase_1.AvatarBase; } });
9
9
  //# sourceMappingURL=index.cjs.map
@@ -1 +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"]}
1
+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":";;;AAAA,gFAGiD;AAF/C,sHAAA,cAAc,OAAA;AACd,uHAAA,eAAe,OAAA;AAEjB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask-previews/design-system-shared';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
@@ -1,4 +1,4 @@
1
- export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
1
+ export { AvatarBaseSize, AvatarBaseShape, } from "@metamask-previews/design-system-shared";
2
2
  export { AvatarBase } from "./AvatarBase.cjs";
3
3
  export type { AvatarBaseProps } from "./AvatarBase.types.cjs";
4
4
  //# sourceMappingURL=index.d.cts.map
@@ -1 +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"}
1
+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,GAChB,gDAAgD;AACjD,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
@@ -1,4 +1,4 @@
1
- export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
1
+ export { AvatarBaseSize, AvatarBaseShape, } from "@metamask-previews/design-system-shared";
2
2
  export { AvatarBase } from "./AvatarBase.mjs";
3
3
  export type { AvatarBaseProps } from "./AvatarBase.types.mjs";
4
4
  //# sourceMappingURL=index.d.mts.map
@@ -1 +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"}
1
+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,GAChB,gDAAgD;AACjD,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
@@ -1,3 +1,3 @@
1
- export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
1
+ export { AvatarBaseSize, AvatarBaseShape } from "@metamask-previews/design-system-shared";
2
2
  export { AvatarBase } from "./AvatarBase.mjs";
3
3
  //# sourceMappingURL=index.mjs.map
@@ -1 +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"]}
1
+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,gDAAgD;AACjD,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask-previews/design-system-shared';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarNetwork.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarNetworkProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> & {\n /**\n * Optional name of the network\n * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n */\n name?: string;\n /**\n * Optional URL for the network image\n * When provided, displays the image instead of fallback text\n */\n src?: string;\n /**\n * Optional prop to pass to the underlying img element\n * Useful for overriding the default alt text which is the network name\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
1
+ {"version":3,"file":"AvatarNetwork.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarNetwork component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type AvatarNetworkProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> &\n AvatarNetworkPropsShared & {\n /**\n * Optional prop to pass to the underlying img element.\n * Useful for overriding the default alt text which is the network name.\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
@@ -1,19 +1,14 @@
1
+ import type { AvatarNetworkPropsShared } from "@metamask-previews/design-system-shared";
1
2
  import type { ComponentProps } from "react";
2
3
  import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
3
- export type AvatarNetworkProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & {
4
+ /**
5
+ * AvatarNetwork component props (React platform-specific)
6
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
7
+ */
8
+ export type AvatarNetworkProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarNetworkPropsShared & {
4
9
  /**
5
- * Optional name of the network
6
- * Used as alt text for image and first letter is used as fallback if no fallbackText provided
7
- */
8
- name?: string;
9
- /**
10
- * Optional URL for the network image
11
- * When provided, displays the image instead of fallback text
12
- */
13
- src?: string;
14
- /**
15
- * Optional prop to pass to the underlying img element
16
- * Useful for overriding the default alt text which is the network name
10
+ * Optional prop to pass to the underlying img element.
11
+ * Useful for overriding the default alt text which is the network name.
17
12
  */
18
13
  imageProps?: ComponentProps<'img'> & {
19
14
  'data-testid'?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
1
+ {"version":3,"file":"AvatarNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,wBAAwB,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
@@ -1,19 +1,14 @@
1
+ import type { AvatarNetworkPropsShared } from "@metamask-previews/design-system-shared";
1
2
  import type { ComponentProps } from "react";
2
3
  import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
3
- export type AvatarNetworkProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & {
4
+ /**
5
+ * AvatarNetwork component props (React platform-specific)
6
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
7
+ */
8
+ export type AvatarNetworkProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarNetworkPropsShared & {
4
9
  /**
5
- * Optional name of the network
6
- * Used as alt text for image and first letter is used as fallback if no fallbackText provided
7
- */
8
- name?: string;
9
- /**
10
- * Optional URL for the network image
11
- * When provided, displays the image instead of fallback text
12
- */
13
- src?: string;
14
- /**
15
- * Optional prop to pass to the underlying img element
16
- * Useful for overriding the default alt text which is the network name
10
+ * Optional prop to pass to the underlying img element.
11
+ * Useful for overriding the default alt text which is the network name.
17
12
  */
18
13
  imageProps?: ComponentProps<'img'> & {
19
14
  'data-testid'?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
1
+ {"version":3,"file":"AvatarNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,wBAAwB,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarNetworkProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> & {\n /**\n * Optional name of the network\n * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n */\n name?: string;\n /**\n * Optional URL for the network image\n * When provided, displays the image instead of fallback text\n */\n src?: string;\n /**\n * Optional prop to pass to the underlying img element\n * Useful for overriding the default alt text which is the network name\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
1
+ {"version":3,"file":"AvatarNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarNetwork component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type AvatarNetworkProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> &\n AvatarNetworkPropsShared & {\n /**\n * Optional prop to pass to the underlying img element.\n * Useful for overriding the default alt text which is the network name.\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}