@metamask-previews/design-system-react 0.25.0-preview.1f40f69f → 0.28.0-preview.2222cbb5

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 (140) hide show
  1. package/CHANGELOG.md +42 -1
  2. package/dist/components/AvatarIcon/AvatarIcon.constants.cjs +2 -2
  3. package/dist/components/AvatarIcon/AvatarIcon.constants.cjs.map +1 -1
  4. package/dist/components/AvatarIcon/AvatarIcon.constants.mjs +2 -2
  5. package/dist/components/AvatarIcon/AvatarIcon.constants.mjs.map +1 -1
  6. package/dist/components/AvatarNetwork/AvatarNetwork.cjs +1 -2
  7. package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
  8. package/dist/components/AvatarNetwork/AvatarNetwork.d.cts.map +1 -1
  9. package/dist/components/AvatarNetwork/AvatarNetwork.d.mts.map +1 -1
  10. package/dist/components/AvatarNetwork/AvatarNetwork.mjs +1 -2
  11. package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
  12. package/dist/components/AvatarNetwork/index.cjs +2 -2
  13. package/dist/components/AvatarNetwork/index.cjs.map +1 -1
  14. package/dist/components/AvatarNetwork/index.d.cts +1 -1
  15. package/dist/components/AvatarNetwork/index.d.cts.map +1 -1
  16. package/dist/components/AvatarNetwork/index.d.mts +1 -1
  17. package/dist/components/AvatarNetwork/index.d.mts.map +1 -1
  18. package/dist/components/AvatarNetwork/index.mjs +1 -1
  19. package/dist/components/AvatarNetwork/index.mjs.map +1 -1
  20. package/dist/components/BannerAlert/BannerAlert.cjs +1 -2
  21. package/dist/components/BannerAlert/BannerAlert.cjs.map +1 -1
  22. package/dist/components/BannerAlert/BannerAlert.constants.cjs +8 -9
  23. package/dist/components/BannerAlert/BannerAlert.constants.cjs.map +1 -1
  24. package/dist/components/BannerAlert/BannerAlert.constants.d.cts +1 -2
  25. package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map +1 -1
  26. package/dist/components/BannerAlert/BannerAlert.constants.d.mts +1 -2
  27. package/dist/components/BannerAlert/BannerAlert.constants.d.mts.map +1 -1
  28. package/dist/components/BannerAlert/BannerAlert.constants.mjs +1 -2
  29. package/dist/components/BannerAlert/BannerAlert.constants.mjs.map +1 -1
  30. package/dist/components/BannerAlert/BannerAlert.d.cts.map +1 -1
  31. package/dist/components/BannerAlert/BannerAlert.d.mts.map +1 -1
  32. package/dist/components/BannerAlert/BannerAlert.mjs +1 -2
  33. package/dist/components/BannerAlert/BannerAlert.mjs.map +1 -1
  34. package/dist/components/ButtonIcon/ButtonIcon.constants.cjs +2 -0
  35. package/dist/components/ButtonIcon/ButtonIcon.constants.cjs.map +1 -1
  36. package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts +2 -0
  37. package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts.map +1 -1
  38. package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts +2 -0
  39. package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts.map +1 -1
  40. package/dist/components/ButtonIcon/ButtonIcon.constants.mjs +2 -0
  41. package/dist/components/ButtonIcon/ButtonIcon.constants.mjs.map +1 -1
  42. package/dist/components/Icon/Icon.cjs +2 -2
  43. package/dist/components/Icon/Icon.cjs.map +1 -1
  44. package/dist/components/Icon/Icon.constants.cjs +6 -6
  45. package/dist/components/Icon/Icon.constants.cjs.map +1 -1
  46. package/dist/components/Icon/Icon.constants.d.cts +1 -1
  47. package/dist/components/Icon/Icon.constants.d.cts.map +1 -1
  48. package/dist/components/Icon/Icon.constants.d.mts +1 -1
  49. package/dist/components/Icon/Icon.constants.d.mts.map +1 -1
  50. package/dist/components/Icon/Icon.constants.mjs +1 -1
  51. package/dist/components/Icon/Icon.constants.mjs.map +1 -1
  52. package/dist/components/Icon/Icon.d.cts.map +1 -1
  53. package/dist/components/Icon/Icon.d.mts.map +1 -1
  54. package/dist/components/Icon/Icon.mjs +1 -1
  55. package/dist/components/Icon/Icon.mjs.map +1 -1
  56. package/dist/components/Icon/icons/Trophy.cjs +32 -0
  57. package/dist/components/Icon/icons/Trophy.cjs.map +1 -0
  58. package/dist/components/Icon/icons/Trophy.d.cts +4 -0
  59. package/dist/components/Icon/icons/Trophy.d.cts.map +1 -0
  60. package/dist/components/Icon/icons/Trophy.d.mts +4 -0
  61. package/dist/components/Icon/icons/Trophy.d.mts.map +1 -0
  62. package/dist/components/Icon/icons/Trophy.mjs +7 -0
  63. package/dist/components/Icon/icons/Trophy.mjs.map +1 -0
  64. package/dist/components/Icon/icons/index.cjs +2 -0
  65. package/dist/components/Icon/icons/index.cjs.map +1 -1
  66. package/dist/components/Icon/icons/index.d.cts +1 -0
  67. package/dist/components/Icon/icons/index.d.cts.map +1 -1
  68. package/dist/components/Icon/icons/index.d.mts +1 -0
  69. package/dist/components/Icon/icons/index.d.mts.map +1 -1
  70. package/dist/components/Icon/icons/index.mjs +2 -0
  71. package/dist/components/Icon/icons/index.mjs.map +1 -1
  72. package/dist/components/Icon/index.cjs +4 -4
  73. package/dist/components/Icon/index.cjs.map +1 -1
  74. package/dist/components/Icon/index.d.cts +1 -1
  75. package/dist/components/Icon/index.d.cts.map +1 -1
  76. package/dist/components/Icon/index.d.mts +1 -1
  77. package/dist/components/Icon/index.d.mts.map +1 -1
  78. package/dist/components/Icon/index.mjs +1 -1
  79. package/dist/components/Icon/index.mjs.map +1 -1
  80. package/dist/components/Tag/Tag.cjs +51 -0
  81. package/dist/components/Tag/Tag.cjs.map +1 -0
  82. package/dist/components/Tag/Tag.constants.cjs +26 -0
  83. package/dist/components/Tag/Tag.constants.cjs.map +1 -0
  84. package/dist/components/Tag/Tag.constants.d.cts +5 -0
  85. package/dist/components/Tag/Tag.constants.d.cts.map +1 -0
  86. package/dist/components/Tag/Tag.constants.d.mts +5 -0
  87. package/dist/components/Tag/Tag.constants.d.mts.map +1 -0
  88. package/dist/components/Tag/Tag.constants.mjs +23 -0
  89. package/dist/components/Tag/Tag.constants.mjs.map +1 -0
  90. package/dist/components/Tag/Tag.d.cts +4 -0
  91. package/dist/components/Tag/Tag.d.cts.map +1 -0
  92. package/dist/components/Tag/Tag.d.mts +4 -0
  93. package/dist/components/Tag/Tag.d.mts.map +1 -0
  94. package/dist/components/Tag/Tag.mjs +32 -0
  95. package/dist/components/Tag/Tag.mjs.map +1 -0
  96. package/dist/components/Tag/Tag.types.cjs +3 -0
  97. package/dist/components/Tag/Tag.types.cjs.map +1 -0
  98. package/dist/components/Tag/Tag.types.d.cts +31 -0
  99. package/dist/components/Tag/Tag.types.d.cts.map +1 -0
  100. package/dist/components/Tag/Tag.types.d.mts +31 -0
  101. package/dist/components/Tag/Tag.types.d.mts.map +1 -0
  102. package/dist/components/Tag/Tag.types.mjs +2 -0
  103. package/dist/components/Tag/Tag.types.mjs.map +1 -0
  104. package/dist/components/Tag/index.cjs +8 -0
  105. package/dist/components/Tag/index.cjs.map +1 -0
  106. package/dist/components/Tag/index.d.cts +4 -0
  107. package/dist/components/Tag/index.d.cts.map +1 -0
  108. package/dist/components/Tag/index.d.mts +4 -0
  109. package/dist/components/Tag/index.d.mts.map +1 -0
  110. package/dist/components/Tag/index.mjs +3 -0
  111. package/dist/components/Tag/index.mjs.map +1 -0
  112. package/dist/components/Toast/Toast.cjs +1 -2
  113. package/dist/components/Toast/Toast.cjs.map +1 -1
  114. package/dist/components/Toast/Toast.constants.cjs +6 -7
  115. package/dist/components/Toast/Toast.constants.cjs.map +1 -1
  116. package/dist/components/Toast/Toast.constants.d.cts.map +1 -1
  117. package/dist/components/Toast/Toast.constants.d.mts.map +1 -1
  118. package/dist/components/Toast/Toast.constants.mjs +1 -2
  119. package/dist/components/Toast/Toast.constants.mjs.map +1 -1
  120. package/dist/components/Toast/Toast.d.cts.map +1 -1
  121. package/dist/components/Toast/Toast.d.mts.map +1 -1
  122. package/dist/components/Toast/Toast.mjs +1 -2
  123. package/dist/components/Toast/Toast.mjs.map +1 -1
  124. package/dist/components/index.cjs +5 -2
  125. package/dist/components/index.cjs.map +1 -1
  126. package/dist/components/index.d.cts +2 -0
  127. package/dist/components/index.d.cts.map +1 -1
  128. package/dist/components/index.d.mts +2 -0
  129. package/dist/components/index.d.mts.map +1 -1
  130. package/dist/components/index.mjs +1 -0
  131. package/dist/components/index.mjs.map +1 -1
  132. package/dist/types/index.cjs +2 -13
  133. package/dist/types/index.cjs.map +1 -1
  134. package/dist/types/index.d.cts +1 -5
  135. package/dist/types/index.d.cts.map +1 -1
  136. package/dist/types/index.d.mts +1 -5
  137. package/dist/types/index.d.mts.map +1 -1
  138. package/dist/types/index.mjs +1 -5
  139. package/dist/types/index.mjs.map +1 -1
  140. package/package.json +7 -5
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ exports.Tag = void 0;
27
+ const design_system_shared_1 = require("@metamask-previews/design-system-shared");
28
+ const react_1 = __importStar(require("react"));
29
+ const tw_merge_1 = require("../../utils/tw-merge.cjs");
30
+ const Box_1 = require("../Box/index.cjs");
31
+ const Icon_1 = require("../Icon/index.cjs");
32
+ const Text_1 = require("../Text/index.cjs");
33
+ const Tag_constants_1 = require("./Tag.constants.cjs");
34
+ const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
35
+ exports.Tag = (0, react_1.forwardRef)(({ children, severity = design_system_shared_1.TagSeverity.Neutral, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, className, style, ...props }, ref) => {
36
+ const backgroundColor = Tag_constants_1.MAP_TAG_SEVERITY_BACKGROUND[severity];
37
+ const textColor = Tag_constants_1.MAP_TAG_SEVERITY_TEXT_COLOR[severity];
38
+ const iconColor = Tag_constants_1.MAP_TAG_SEVERITY_ICON_COLOR[severity];
39
+ const finalStartIconName = startIconName ?? startIconProps?.name;
40
+ const finalEndIconName = endIconName ?? endIconProps?.name;
41
+ const resolvedStartAccessory = finalStartIconName ? (react_1.default.createElement(Icon_1.Icon, { name: finalStartIconName, color: iconColor, size: design_system_shared_1.IconSize.Xs, className: "shrink-0", ...startIconProps })) : ((startAccessory ?? null));
42
+ const resolvedEndAccessory = finalEndIconName ? (react_1.default.createElement(Icon_1.Icon, { name: finalEndIconName, color: iconColor, size: design_system_shared_1.IconSize.Xs, className: "shrink-0", ...endIconProps })) : ((endAccessory ?? null));
43
+ const content = isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyXs, color: textColor, fontWeight: design_system_shared_1.FontWeight.Medium }, children)) : (children);
44
+ const mergedClassName = (0, tw_merge_1.twMerge)('inline-flex gap-0.5 self-start rounded-md', finalStartIconName ? 'pl-1' : 'pl-1.5', finalEndIconName ? 'pr-1' : 'pr-1.5', className);
45
+ return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Center, backgroundColor: backgroundColor, className: mergedClassName, style: style, ...props },
46
+ resolvedStartAccessory,
47
+ content,
48
+ resolvedEndAccessory));
49
+ });
50
+ exports.Tag.displayName = 'Tag';
51
+ //# sourceMappingURL=Tag.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAOiD;AACjD,+CAA0C;AAE1C,uDAA+C;AAC/C,0CAA6B;AAC7B,4CAA+B;AAC/B,4CAA+B;AAE/B,uDAIyB;AAGzB,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAEhD,QAAA,GAAG,GAAG,IAAA,kBAAU,EAC3B,CACE,EACE,QAAQ,EACR,QAAQ,GAAG,kCAAW,CAAC,OAAO,EAC9B,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAClD,8BAAC,WAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,+BAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,cAAc,GAClB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,cAAc,IAAI,IAAI,CAAC,CACzB,CAAC;IAEF,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAC9C,8BAAC,WAAI,IACH,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,+BAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,YAAY,GAChB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,YAAY,IAAI,IAAI,CAAC,CACvB,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACxC,8BAAC,WAAI,IACH,OAAO,EAAE,kCAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,SAAS,EAChB,UAAU,EAAE,iCAAU,CAAC,MAAM,IAE5B,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IAEF,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,2CAA2C,EAC3C,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACtC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACpC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,uCAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,oCAAa,CAAC,MAAM,EAChC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,KAAK;QAER,sBAAsB;QACtB,OAAO;QACP,oBAAoB,CACjB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n FontWeight,\n IconSize,\n TagSeverity,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\n\nimport {\n MAP_TAG_SEVERITY_BACKGROUND,\n MAP_TAG_SEVERITY_ICON_COLOR,\n MAP_TAG_SEVERITY_TEXT_COLOR,\n} from './Tag.constants';\nimport type { TagProps } from './Tag.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n severity = TagSeverity.Neutral,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const backgroundColor = MAP_TAG_SEVERITY_BACKGROUND[severity];\n const textColor = MAP_TAG_SEVERITY_TEXT_COLOR[severity];\n const iconColor = MAP_TAG_SEVERITY_ICON_COLOR[severity];\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n const resolvedStartAccessory = finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...startIconProps}\n />\n ) : (\n (startAccessory ?? null)\n );\n\n const resolvedEndAccessory = finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...endIconProps}\n />\n ) : (\n (endAccessory ?? null)\n );\n\n const content = isTextContent(children) ? (\n <Text\n variant={TextVariant.BodyXs}\n color={textColor}\n fontWeight={FontWeight.Medium}\n >\n {children}\n </Text>\n ) : (\n children\n );\n\n const mergedClassName = twMerge(\n 'inline-flex gap-0.5 self-start rounded-md',\n finalStartIconName ? 'pl-1' : 'pl-1.5',\n finalEndIconName ? 'pr-1' : 'pr-1.5',\n className,\n );\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n backgroundColor={backgroundColor}\n className={mergedClassName}\n style={style}\n {...props}\n >\n {resolvedStartAccessory}\n {content}\n {resolvedEndAccessory}\n </Box>\n );\n },\n);\n\nTag.displayName = 'Tag';\n"]}
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.MAP_TAG_SEVERITY_ICON_COLOR = exports.MAP_TAG_SEVERITY_TEXT_COLOR = exports.MAP_TAG_SEVERITY_BACKGROUND = void 0;
4
+ const design_system_shared_1 = require("@metamask-previews/design-system-shared");
5
+ exports.MAP_TAG_SEVERITY_BACKGROUND = {
6
+ [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.BoxBackgroundColor.BackgroundMuted,
7
+ [design_system_shared_1.TagSeverity.Success]: design_system_shared_1.BoxBackgroundColor.SuccessMuted,
8
+ [design_system_shared_1.TagSeverity.Danger]: design_system_shared_1.BoxBackgroundColor.ErrorMuted,
9
+ [design_system_shared_1.TagSeverity.Warning]: design_system_shared_1.BoxBackgroundColor.WarningMuted,
10
+ [design_system_shared_1.TagSeverity.Info]: design_system_shared_1.BoxBackgroundColor.InfoMuted,
11
+ };
12
+ exports.MAP_TAG_SEVERITY_TEXT_COLOR = {
13
+ [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.TextColor.TextDefault,
14
+ [design_system_shared_1.TagSeverity.Success]: design_system_shared_1.TextColor.SuccessDefault,
15
+ [design_system_shared_1.TagSeverity.Danger]: design_system_shared_1.TextColor.ErrorDefault,
16
+ [design_system_shared_1.TagSeverity.Warning]: design_system_shared_1.TextColor.WarningDefault,
17
+ [design_system_shared_1.TagSeverity.Info]: design_system_shared_1.TextColor.InfoDefault,
18
+ };
19
+ exports.MAP_TAG_SEVERITY_ICON_COLOR = {
20
+ [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.IconColor.IconDefault,
21
+ [design_system_shared_1.TagSeverity.Success]: design_system_shared_1.IconColor.SuccessDefault,
22
+ [design_system_shared_1.TagSeverity.Danger]: design_system_shared_1.IconColor.ErrorDefault,
23
+ [design_system_shared_1.TagSeverity.Warning]: design_system_shared_1.IconColor.WarningDefault,
24
+ [design_system_shared_1.TagSeverity.Info]: design_system_shared_1.IconColor.InfoDefault,
25
+ };
26
+ //# sourceMappingURL=Tag.constants.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.constants.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":";;;AAAA,kFAKiD;AAEpC,QAAA,2BAA2B,GAGpC;IACF,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,eAAe;IACzD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,YAAY;IACtD,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,yCAAkB,CAAC,UAAU;IACnD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,YAAY;IACtD,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,yCAAkB,CAAC,SAAS;CACjD,CAAC;AAEW,QAAA,2BAA2B,GAAmC;IACzE,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,WAAW;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,gCAAS,CAAC,YAAY;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;CAC1C,CAAC;AAEW,QAAA,2BAA2B,GAAmC;IACzE,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,WAAW;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,gCAAS,CAAC,YAAY;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n IconColor,\n TagSeverity,\n TextColor,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n TagSeverity,\n BoxBackgroundColor\n> = {\n [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,\n [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n [TagSeverity.Neutral]: TextColor.TextDefault,\n [TagSeverity.Success]: TextColor.SuccessDefault,\n [TagSeverity.Danger]: TextColor.ErrorDefault,\n [TagSeverity.Warning]: TextColor.WarningDefault,\n [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n [TagSeverity.Neutral]: IconColor.IconDefault,\n [TagSeverity.Success]: IconColor.SuccessDefault,\n [TagSeverity.Danger]: IconColor.ErrorDefault,\n [TagSeverity.Warning]: IconColor.WarningDefault,\n [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}
@@ -0,0 +1,5 @@
1
+ import { BoxBackgroundColor, IconColor, TagSeverity, TextColor } from "@metamask-previews/design-system-shared";
2
+ export declare const MAP_TAG_SEVERITY_BACKGROUND: Record<TagSeverity, BoxBackgroundColor>;
3
+ export declare const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor>;
4
+ export declare const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor>;
5
+ //# sourceMappingURL=Tag.constants.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,WAAW,EACX,kBAAkB,CAOnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { BoxBackgroundColor, IconColor, TagSeverity, TextColor } from "@metamask-previews/design-system-shared";
2
+ export declare const MAP_TAG_SEVERITY_BACKGROUND: Record<TagSeverity, BoxBackgroundColor>;
3
+ export declare const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor>;
4
+ export declare const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor>;
5
+ //# sourceMappingURL=Tag.constants.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,WAAW,EACX,kBAAkB,CAOnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC"}
@@ -0,0 +1,23 @@
1
+ import { BoxBackgroundColor, IconColor, TagSeverity, TextColor } from "@metamask-previews/design-system-shared";
2
+ export const MAP_TAG_SEVERITY_BACKGROUND = {
3
+ [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,
4
+ [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,
5
+ [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,
6
+ [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,
7
+ [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,
8
+ };
9
+ export const MAP_TAG_SEVERITY_TEXT_COLOR = {
10
+ [TagSeverity.Neutral]: TextColor.TextDefault,
11
+ [TagSeverity.Success]: TextColor.SuccessDefault,
12
+ [TagSeverity.Danger]: TextColor.ErrorDefault,
13
+ [TagSeverity.Warning]: TextColor.WarningDefault,
14
+ [TagSeverity.Info]: TextColor.InfoDefault,
15
+ };
16
+ export const MAP_TAG_SEVERITY_ICON_COLOR = {
17
+ [TagSeverity.Neutral]: IconColor.IconDefault,
18
+ [TagSeverity.Success]: IconColor.SuccessDefault,
19
+ [TagSeverity.Danger]: IconColor.ErrorDefault,
20
+ [TagSeverity.Warning]: IconColor.WarningDefault,
21
+ [TagSeverity.Info]: IconColor.InfoDefault,
22
+ };
23
+ //# sourceMappingURL=Tag.constants.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.constants.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,MAAM,CAAC,MAAM,2BAA2B,GAGpC;IACF,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,eAAe;IACzD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC,UAAU;IACnD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,SAAS;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n IconColor,\n TagSeverity,\n TextColor,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n TagSeverity,\n BoxBackgroundColor\n> = {\n [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,\n [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n [TagSeverity.Neutral]: TextColor.TextDefault,\n [TagSeverity.Success]: TextColor.SuccessDefault,\n [TagSeverity.Danger]: TextColor.ErrorDefault,\n [TagSeverity.Warning]: TextColor.WarningDefault,\n [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n [TagSeverity.Neutral]: IconColor.IconDefault,\n [TagSeverity.Success]: IconColor.SuccessDefault,\n [TagSeverity.Danger]: IconColor.ErrorDefault,\n [TagSeverity.Warning]: IconColor.WarningDefault,\n [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import type { TagProps } from "./Tag.types.cjs";
3
+ export declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
4
+ //# sourceMappingURL=Tag.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAK5C,eAAO,MAAM,GAAG,8FAmFf,CAAC"}
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import type { TagProps } from "./Tag.types.mjs";
3
+ export declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
4
+ //# sourceMappingURL=Tag.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAK5C,eAAO,MAAM,GAAG,8FAmFf,CAAC"}
@@ -0,0 +1,32 @@
1
+ function $importDefault(module) {
2
+ if (module?.__esModule) {
3
+ return module.default;
4
+ }
5
+ return module;
6
+ }
7
+ import { BoxAlignItems, BoxFlexDirection, FontWeight, IconSize, TagSeverity, TextVariant } from "@metamask-previews/design-system-shared";
8
+ import $React, { forwardRef } from "react";
9
+ const React = $importDefault($React);
10
+ import { twMerge } from "../../utils/tw-merge.mjs";
11
+ import { Box } from "../Box/index.mjs";
12
+ import { Icon } from "../Icon/index.mjs";
13
+ import { Text } from "../Text/index.mjs";
14
+ import { MAP_TAG_SEVERITY_BACKGROUND, MAP_TAG_SEVERITY_ICON_COLOR, MAP_TAG_SEVERITY_TEXT_COLOR } from "./Tag.constants.mjs";
15
+ const isTextContent = (content) => typeof content === 'string' || typeof content === 'number';
16
+ export const Tag = forwardRef(({ children, severity = TagSeverity.Neutral, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, className, style, ...props }, ref) => {
17
+ const backgroundColor = MAP_TAG_SEVERITY_BACKGROUND[severity];
18
+ const textColor = MAP_TAG_SEVERITY_TEXT_COLOR[severity];
19
+ const iconColor = MAP_TAG_SEVERITY_ICON_COLOR[severity];
20
+ const finalStartIconName = startIconName ?? startIconProps?.name;
21
+ const finalEndIconName = endIconName ?? endIconProps?.name;
22
+ const resolvedStartAccessory = finalStartIconName ? (React.createElement(Icon, { name: finalStartIconName, color: iconColor, size: IconSize.Xs, className: "shrink-0", ...startIconProps })) : ((startAccessory ?? null));
23
+ const resolvedEndAccessory = finalEndIconName ? (React.createElement(Icon, { name: finalEndIconName, color: iconColor, size: IconSize.Xs, className: "shrink-0", ...endIconProps })) : ((endAccessory ?? null));
24
+ const content = isTextContent(children) ? (React.createElement(Text, { variant: TextVariant.BodyXs, color: textColor, fontWeight: FontWeight.Medium }, children)) : (children);
25
+ const mergedClassName = twMerge('inline-flex gap-0.5 self-start rounded-md', finalStartIconName ? 'pl-1' : 'pl-1.5', finalEndIconName ? 'pr-1' : 'pr-1.5', className);
26
+ return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Center, backgroundColor: backgroundColor, className: mergedClassName, style: style, ...props },
27
+ resolvedStartAccessory,
28
+ content,
29
+ resolvedEndAccessory));
30
+ });
31
+ Tag.displayName = 'Tag';
32
+ //# sourceMappingURL=Tag.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,WAAW,EACZ,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAC/B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,2BAA2B,EAC5B,4BAAwB;AAGzB,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CACE,EACE,QAAQ,EACR,QAAQ,GAAG,WAAW,CAAC,OAAO,EAC9B,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAClD,oBAAC,IAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,cAAc,GAClB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,cAAc,IAAI,IAAI,CAAC,CACzB,CAAC;IAEF,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAC9C,oBAAC,IAAI,IACH,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,YAAY,GAChB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,YAAY,IAAI,IAAI,CAAC,CACvB,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACxC,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,SAAS,EAChB,UAAU,EAAE,UAAU,CAAC,MAAM,IAE5B,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,2CAA2C,EAC3C,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACtC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACpC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,gBAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,aAAa,CAAC,MAAM,EAChC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,KAAK;QAER,sBAAsB;QACtB,OAAO;QACP,oBAAoB,CACjB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n FontWeight,\n IconSize,\n TagSeverity,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\n\nimport {\n MAP_TAG_SEVERITY_BACKGROUND,\n MAP_TAG_SEVERITY_ICON_COLOR,\n MAP_TAG_SEVERITY_TEXT_COLOR,\n} from './Tag.constants';\nimport type { TagProps } from './Tag.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n severity = TagSeverity.Neutral,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const backgroundColor = MAP_TAG_SEVERITY_BACKGROUND[severity];\n const textColor = MAP_TAG_SEVERITY_TEXT_COLOR[severity];\n const iconColor = MAP_TAG_SEVERITY_ICON_COLOR[severity];\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n const resolvedStartAccessory = finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...startIconProps}\n />\n ) : (\n (startAccessory ?? null)\n );\n\n const resolvedEndAccessory = finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...endIconProps}\n />\n ) : (\n (endAccessory ?? null)\n );\n\n const content = isTextContent(children) ? (\n <Text\n variant={TextVariant.BodyXs}\n color={textColor}\n fontWeight={FontWeight.Medium}\n >\n {children}\n </Text>\n ) : (\n children\n );\n\n const mergedClassName = twMerge(\n 'inline-flex gap-0.5 self-start rounded-md',\n finalStartIconName ? 'pl-1' : 'pl-1.5',\n finalEndIconName ? 'pr-1' : 'pr-1.5',\n className,\n );\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n backgroundColor={backgroundColor}\n className={mergedClassName}\n style={style}\n {...props}\n >\n {resolvedStartAccessory}\n {content}\n {resolvedEndAccessory}\n </Box>\n );\n },\n);\n\nTag.displayName = 'Tag';\n"]}
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=Tag.types.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.types.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TagPropsShared } from '@metamask-previews/design-system-shared';\nimport type { IconName } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\n\n/**\n * Tag component props (React / extension).\n * Extends {@link TagPropsShared} with platform `Icon` passthroughs and `className`.\n */\nexport type TagProps = TagPropsShared &\n Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Optional icon at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).\n */\n startIconName?: IconName;\n /**\n * Optional props for the start icon. You may set `name` here instead of `startIconName`.\n */\n startIconProps?: Partial<IconProps>;\n /**\n * Optional icon at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).\n */\n endIconName?: IconName;\n /**\n * Optional props for the end icon. You may set `name` here instead of `endIconName`.\n */\n endIconProps?: Partial<IconProps>;\n /**\n * Optional CSS classes merged onto the tag container.\n */\n className?: string;\n };\n"]}
@@ -0,0 +1,31 @@
1
+ import type { TagPropsShared } from "@metamask-previews/design-system-shared";
2
+ import type { IconName } from "@metamask-previews/design-system-shared";
3
+ import type { ComponentProps } from "react";
4
+ import type { IconProps } from "../Icon/index.cjs";
5
+ /**
6
+ * Tag component props (React / extension).
7
+ * Extends {@link TagPropsShared} with platform `Icon` passthroughs and `className`.
8
+ */
9
+ export type TagProps = TagPropsShared & Omit<ComponentProps<'div'>, 'children'> & {
10
+ /**
11
+ * Optional icon at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).
12
+ */
13
+ startIconName?: IconName;
14
+ /**
15
+ * Optional props for the start icon. You may set `name` here instead of `startIconName`.
16
+ */
17
+ startIconProps?: Partial<IconProps>;
18
+ /**
19
+ * Optional icon at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).
20
+ */
21
+ endIconName?: IconName;
22
+ /**
23
+ * Optional props for the end icon. You may set `name` here instead of `endIconName`.
24
+ */
25
+ endIconProps?: Partial<IconProps>;
26
+ /**
27
+ * Optional CSS classes merged onto the tag container.
28
+ */
29
+ className?: string;
30
+ };
31
+ //# sourceMappingURL=Tag.types.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.types.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gDAAgD;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,gDAAgD;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,cAAc,GACnC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
@@ -0,0 +1,31 @@
1
+ import type { TagPropsShared } from "@metamask-previews/design-system-shared";
2
+ import type { IconName } from "@metamask-previews/design-system-shared";
3
+ import type { ComponentProps } from "react";
4
+ import type { IconProps } from "../Icon/index.mjs";
5
+ /**
6
+ * Tag component props (React / extension).
7
+ * Extends {@link TagPropsShared} with platform `Icon` passthroughs and `className`.
8
+ */
9
+ export type TagProps = TagPropsShared & Omit<ComponentProps<'div'>, 'children'> & {
10
+ /**
11
+ * Optional icon at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).
12
+ */
13
+ startIconName?: IconName;
14
+ /**
15
+ * Optional props for the start icon. You may set `name` here instead of `startIconName`.
16
+ */
17
+ startIconProps?: Partial<IconProps>;
18
+ /**
19
+ * Optional icon at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).
20
+ */
21
+ endIconName?: IconName;
22
+ /**
23
+ * Optional props for the end icon. You may set `name` here instead of `endIconName`.
24
+ */
25
+ endIconProps?: Partial<IconProps>;
26
+ /**
27
+ * Optional CSS classes merged onto the tag container.
28
+ */
29
+ className?: string;
30
+ };
31
+ //# sourceMappingURL=Tag.types.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.types.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gDAAgD;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,gDAAgD;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,cAAc,GACnC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Tag.types.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tag.types.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TagPropsShared } from '@metamask-previews/design-system-shared';\nimport type { IconName } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\n\n/**\n * Tag component props (React / extension).\n * Extends {@link TagPropsShared} with platform `Icon` passthroughs and `className`.\n */\nexport type TagProps = TagPropsShared &\n Omit<ComponentProps<'div'>, 'children'> & {\n /**\n * Optional icon at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).\n */\n startIconName?: IconName;\n /**\n * Optional props for the start icon. You may set `name` here instead of `startIconName`.\n */\n startIconProps?: Partial<IconProps>;\n /**\n * Optional icon at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).\n */\n endIconName?: IconName;\n /**\n * Optional props for the end icon. You may set `name` here instead of `endIconName`.\n */\n endIconProps?: Partial<IconProps>;\n /**\n * Optional CSS classes merged onto the tag container.\n */\n className?: string;\n };\n"]}
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.TagSeverity = exports.Tag = void 0;
4
+ var Tag_1 = require("./Tag.cjs");
5
+ Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
6
+ var design_system_shared_1 = require("@metamask-previews/design-system-shared");
7
+ Object.defineProperty(exports, "TagSeverity", { enumerable: true, get: function () { return design_system_shared_1.TagSeverity; } });
8
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":";;;AAAA,iCAA4B;AAAnB,0FAAA,GAAG,OAAA;AACZ,gFAAsE;AAA7D,mHAAA,WAAW,OAAA","sourcesContent":["export { Tag } from './Tag';\nexport { TagSeverity } from '@metamask-previews/design-system-shared';\nexport type { TagProps } from './Tag.types';\n"]}
@@ -0,0 +1,4 @@
1
+ export { Tag } from "./Tag.cjs";
2
+ export { TagSeverity } from "@metamask-previews/design-system-shared";
3
+ export type { TagProps } from "./Tag.types.cjs";
4
+ //# sourceMappingURL=index.d.cts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,OAAO,EAAE,WAAW,EAAE,gDAAgD;AACtE,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}
@@ -0,0 +1,4 @@
1
+ export { Tag } from "./Tag.mjs";
2
+ export { TagSeverity } from "@metamask-previews/design-system-shared";
3
+ export type { TagProps } from "./Tag.types.mjs";
4
+ //# sourceMappingURL=index.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,OAAO,EAAE,WAAW,EAAE,gDAAgD;AACtE,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}
@@ -0,0 +1,3 @@
1
+ export { Tag } from "./Tag.mjs";
2
+ export { TagSeverity } from "@metamask-previews/design-system-shared";
3
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,OAAO,EAAE,WAAW,EAAE,gDAAgD","sourcesContent":["export { Tag } from './Tag';\nexport { TagSeverity } from '@metamask-previews/design-system-shared';\nexport type { TagProps } from './Tag.types';\n"]}
@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.Toast = void 0;
27
27
  const design_system_shared_1 = require("@metamask-previews/design-system-shared");
28
28
  const react_1 = __importStar(require("react"));
29
- const types_1 = require("../../types/index.cjs");
30
29
  const tw_merge_1 = require("../../utils/tw-merge.cjs");
31
30
  const BannerBase_1 = require("../BannerBase/index.cjs");
32
31
  const Icon_1 = require("../Icon/index.cjs");
@@ -39,7 +38,7 @@ const renderSeverityAccessory = ({ severity, startAccessory, iconProps, }) => {
39
38
  return undefined;
40
39
  }
41
40
  const { name, color } = Toast_constants_1.TOAST_SEVERITY_ICON_MAP[severity];
42
- return react_1.default.createElement(Icon_1.Icon, { name: name, color: color, size: types_1.IconSize.Lg, ...iconProps });
41
+ return react_1.default.createElement(Icon_1.Icon, { name: name, color: color, size: design_system_shared_1.IconSize.Lg, ...iconProps });
43
42
  };
44
43
  exports.Toast = (0, react_1.forwardRef)(({ actionButtonLabel, actionButtonOnClick, actionButtonProps, className, closeButtonProps, iconProps, onClose, severity = design_system_shared_1.ToastSeverity.Default, startAccessory, ...props }, ref) => {
45
44
  // Only pass action props through when both the label and handler are set so
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAKiD;AACjD,+CAA0C;AAE1C,iDAAuC;AACvC,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,2DAA4D;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,oCAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,gBAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,oCAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,yCAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,qCAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n ToastSeverity,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { IconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n severity,\n startAccessory,\n iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity || severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n className,\n closeButtonProps,\n iconProps,\n onClose,\n severity = ToastSeverity.Default,\n startAccessory,\n ...props\n },\n ref,\n ) => {\n // Only pass action props through when both the label and handler are set so\n // BannerBase can keep its action button contract simple.\n const resolvedActionProps =\n actionButtonLabel && actionButtonOnClick\n ? {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n\n // Derive the close button config from the Toast API, keeping the button\n // visible whenever the consumer provides dismiss behavior or overrides.\n const resolvedCloseButtonProps =\n onClose || closeButtonProps\n ? {\n ariaLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n // Toast reuses BannerBase so the web surface stays aligned with the shared\n // banner layout and the React Native Toast API.\n return (\n <BannerBase\n ref={ref}\n {...resolvedActionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundSection}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n className={twMerge('rounded-xl', className)}\n closeButtonProps={resolvedCloseButtonProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
1
+ {"version":3,"file":"Toast.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAMiD;AACjD,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,2DAA4D;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,oCAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,yCAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,8BAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,+BAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,oCAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,iCAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,yCAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,qCAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,IAAA,kBAAO,EAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n IconSize,\n ToastSeverity,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n severity,\n startAccessory,\n iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity || severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n className,\n closeButtonProps,\n iconProps,\n onClose,\n severity = ToastSeverity.Default,\n startAccessory,\n ...props\n },\n ref,\n ) => {\n // Only pass action props through when both the label and handler are set so\n // BannerBase can keep its action button contract simple.\n const resolvedActionProps =\n actionButtonLabel && actionButtonOnClick\n ? {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n\n // Derive the close button config from the Toast API, keeping the button\n // visible whenever the consumer provides dismiss behavior or overrides.\n const resolvedCloseButtonProps =\n onClose || closeButtonProps\n ? {\n ariaLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n // Toast reuses BannerBase so the web surface stays aligned with the shared\n // banner layout and the React Native Toast API.\n return (\n <BannerBase\n ref={ref}\n {...resolvedActionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundSection}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n className={twMerge('rounded-xl', className)}\n closeButtonProps={resolvedCloseButtonProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
@@ -2,7 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.TOAST_SEVERITY_ICON_MAP = exports.TOAST_VISIBILITY_DURATION = exports.TOAST_ANIMATION_DURATION = void 0;
4
4
  const design_system_shared_1 = require("@metamask-previews/design-system-shared");
5
- const types_1 = require("../../types/index.cjs");
6
5
  var design_system_shared_2 = require("@metamask-previews/design-system-shared");
7
6
  Object.defineProperty(exports, "TOAST_ANIMATION_DURATION", { enumerable: true, get: function () { return design_system_shared_2.TOAST_ANIMATION_DURATION; } });
8
7
  Object.defineProperty(exports, "TOAST_VISIBILITY_DURATION", { enumerable: true, get: function () { return design_system_shared_2.TOAST_VISIBILITY_DURATION; } });
@@ -10,16 +9,16 @@ Object.defineProperty(exports, "TOAST_VISIBILITY_DURATION", { enumerable: true,
10
9
  // alert-icon primitive exists in React.
11
10
  exports.TOAST_SEVERITY_ICON_MAP = {
12
11
  [design_system_shared_1.ToastSeverity.Success]: {
13
- name: types_1.IconName.Confirmation,
14
- color: types_1.IconColor.SuccessDefault,
12
+ name: design_system_shared_1.IconName.Confirmation,
13
+ color: design_system_shared_1.IconColor.SuccessDefault,
15
14
  },
16
15
  [design_system_shared_1.ToastSeverity.Warning]: {
17
- name: types_1.IconName.Danger,
18
- color: types_1.IconColor.WarningDefault,
16
+ name: design_system_shared_1.IconName.Danger,
17
+ color: design_system_shared_1.IconColor.WarningDefault,
19
18
  },
20
19
  [design_system_shared_1.ToastSeverity.Danger]: {
21
- name: types_1.IconName.Danger,
22
- color: types_1.IconColor.ErrorDefault,
20
+ name: design_system_shared_1.IconName.Danger,
21
+ color: design_system_shared_1.IconColor.ErrorDefault,
23
22
  },
24
23
  };
25
24
  //# sourceMappingURL=Toast.constants.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.constants.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAwE;AAExE,iDAAkD;AAElD,gFAGiD;AAF/C,gIAAA,wBAAwB,OAAA;AACxB,iIAAA,yBAAyB,OAAA;AAG3B,wEAAwE;AACxE,wCAAwC;AAC3B,QAAA,uBAAuB,GAAG;IACrC,CAAC,oCAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,gBAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,iBAAS,CAAC,cAAc;KAChC;IACD,CAAC,oCAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,gBAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,iBAAS,CAAC,cAAc;KAChC;IACD,CAAC,oCAAa,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,EAAE,gBAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,iBAAS,CAAC,YAAY;KAC9B;CACO,CAAC","sourcesContent":["import { ToastSeverity } from '@metamask-previews/design-system-shared';\n\nimport { IconColor, IconName } from '../../types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask-previews/design-system-shared';\n\n// TODO: Replace this map with a web IconAlert component once the shared\n// alert-icon primitive exists in React.\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: {\n name: IconName.Confirmation,\n color: IconColor.SuccessDefault,\n },\n [ToastSeverity.Warning]: {\n name: IconName.Danger,\n color: IconColor.WarningDefault,\n },\n [ToastSeverity.Danger]: {\n name: IconName.Danger,\n color: IconColor.ErrorDefault,\n },\n} as const;\n"]}
1
+ {"version":3,"file":"Toast.constants.cjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":";;;AAAA,kFAIiD;AAEjD,gFAGiD;AAF/C,gIAAA,wBAAwB,OAAA;AACxB,iIAAA,yBAAyB,OAAA;AAG3B,wEAAwE;AACxE,wCAAwC;AAC3B,QAAA,uBAAuB,GAAG;IACrC,CAAC,oCAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,+BAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,gCAAS,CAAC,cAAc;KAChC;IACD,CAAC,oCAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,+BAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,gCAAS,CAAC,cAAc;KAChC;IACD,CAAC,oCAAa,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,EAAE,+BAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,gCAAS,CAAC,YAAY;KAC9B;CACO,CAAC","sourcesContent":["import {\n IconColor,\n IconName,\n ToastSeverity,\n} from '@metamask-previews/design-system-shared';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask-previews/design-system-shared';\n\n// TODO: Replace this map with a web IconAlert component once the shared\n// alert-icon primitive exists in React.\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: {\n name: IconName.Confirmation,\n color: IconColor.SuccessDefault,\n },\n [ToastSeverity.Warning]: {\n name: IconName.Danger,\n color: IconColor.WarningDefault,\n },\n [ToastSeverity.Danger]: {\n name: IconName.Danger,\n color: IconColor.ErrorDefault,\n },\n} as const;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,gDAAgD;AAIjD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC"}
1
+ {"version":3,"file":"Toast.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,gDAAgD;AAIjD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,gDAAgD;AAIjD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC"}
1
+ {"version":3,"file":"Toast.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,gDAAgD;AAIjD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC"}
@@ -1,5 +1,4 @@
1
- import { ToastSeverity } from "@metamask-previews/design-system-shared";
2
- import { IconColor, IconName } from "../../types/index.mjs";
1
+ import { IconColor, IconName, ToastSeverity } from "@metamask-previews/design-system-shared";
3
2
  export { TOAST_ANIMATION_DURATION, TOAST_VISIBILITY_DURATION } from "@metamask-previews/design-system-shared";
4
3
  // TODO: Replace this map with a web IconAlert component once the shared
5
4
  // alert-icon primitive exists in React.
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.constants.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gDAAgD;AAExE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EAC1B,gDAAgD;AAEjD,wEAAwE;AACxE,wCAAwC;AACxC,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,QAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,QAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,EAAE,QAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS,CAAC,YAAY;KAC9B;CACO,CAAC","sourcesContent":["import { ToastSeverity } from '@metamask-previews/design-system-shared';\n\nimport { IconColor, IconName } from '../../types';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask-previews/design-system-shared';\n\n// TODO: Replace this map with a web IconAlert component once the shared\n// alert-icon primitive exists in React.\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: {\n name: IconName.Confirmation,\n color: IconColor.SuccessDefault,\n },\n [ToastSeverity.Warning]: {\n name: IconName.Danger,\n color: IconColor.WarningDefault,\n },\n [ToastSeverity.Danger]: {\n name: IconName.Danger,\n color: IconColor.ErrorDefault,\n },\n} as const;\n"]}
1
+ {"version":3,"file":"Toast.constants.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,QAAQ,EACR,aAAa,EACd,gDAAgD;AAEjD,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EAC1B,gDAAgD;AAEjD,wEAAwE;AACxE,wCAAwC;AACxC,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,QAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;QACvB,IAAI,EAAE,QAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,EAAE,QAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS,CAAC,YAAY;KAC9B;CACO,CAAC","sourcesContent":["import {\n IconColor,\n IconName,\n ToastSeverity,\n} from '@metamask-previews/design-system-shared';\n\nexport {\n TOAST_ANIMATION_DURATION,\n TOAST_VISIBILITY_DURATION,\n} from '@metamask-previews/design-system-shared';\n\n// TODO: Replace this map with a web IconAlert component once the shared\n// alert-icon primitive exists in React.\nexport const TOAST_SEVERITY_ICON_MAP = {\n [ToastSeverity.Success]: {\n name: IconName.Confirmation,\n color: IconColor.SuccessDefault,\n },\n [ToastSeverity.Warning]: {\n name: IconName.Danger,\n color: IconColor.WarningDefault,\n },\n [ToastSeverity.Danger]: {\n name: IconName.Danger,\n color: IconColor.ErrorDefault,\n },\n} as const;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAoBhD,eAAO,MAAM,KAAK,gGA6DjB,CAAC"}
1
+ {"version":3,"file":"Toast.d.cts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAoBhD,eAAO,MAAM,KAAK,gGA6DjB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAqB,cAAc;AAQ1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAoBhD,eAAO,MAAM,KAAK,gGA6DjB,CAAC"}
1
+ {"version":3,"file":"Toast.d.mts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAoBhD,eAAO,MAAM,KAAK,gGA6DjB,CAAC"}
@@ -4,10 +4,9 @@ function $importDefault(module) {
4
4
  }
5
5
  return module;
6
6
  }
7
- import { BoxBackgroundColor, BoxBorderColor, ButtonSize, ToastSeverity } from "@metamask-previews/design-system-shared";
7
+ import { BoxBackgroundColor, BoxBorderColor, ButtonSize, IconSize, ToastSeverity } from "@metamask-previews/design-system-shared";
8
8
  import $React, { forwardRef } from "react";
9
9
  const React = $importDefault($React);
10
- import { IconSize } from "../../types/index.mjs";
11
10
  import { twMerge } from "../../utils/tw-merge.mjs";
12
11
  import { BannerBase } from "../BannerBase/index.mjs";
13
12
  import { Icon } from "../Icon/index.mjs";
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,aAAa,EACd,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AACvC,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,8BAA0B;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,aAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,UAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n ToastSeverity,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { IconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n severity,\n startAccessory,\n iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity || severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n className,\n closeButtonProps,\n iconProps,\n onClose,\n severity = ToastSeverity.Default,\n startAccessory,\n ...props\n },\n ref,\n ) => {\n // Only pass action props through when both the label and handler are set so\n // BannerBase can keep its action button contract simple.\n const resolvedActionProps =\n actionButtonLabel && actionButtonOnClick\n ? {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n\n // Derive the close button config from the Toast API, keeping the button\n // visible whenever the consumer provides dismiss behavior or overrides.\n const resolvedCloseButtonProps =\n onClose || closeButtonProps\n ? {\n ariaLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n // Toast reuses BannerBase so the web surface stays aligned with the shared\n // banner layout and the React Native Toast API.\n return (\n <BannerBase\n ref={ref}\n {...resolvedActionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundSection}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n className={twMerge('rounded-xl', className)}\n closeButtonProps={resolvedCloseButtonProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
1
+ {"version":3,"file":"Toast.mjs","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,QAAQ,EACR,aAAa,EACd,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,8BAA0B;AAG5D,MAAM,uBAAuB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,SAAS,GACqD,EAAE,EAAE;IAClE,IAAI,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,SAAS,EAAE;QAC3D,OAAO,cAAc,CAAC;KACvB;IAED,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,aAAa,CAAC,OAAO,EAAE;QACnD,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAE1D,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,KAAM,SAAS,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,aAAa,CAAC,OAAO,EAChC,cAAc,EACd,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,4EAA4E;IAC5E,yDAAyD;IACzD,MAAM,mBAAmB,GACvB,iBAAiB,IAAI,mBAAmB;QACtC,CAAC,CAAC;YACE,iBAAiB;YACjB,mBAAmB;YACnB,iBAAiB,EAAE;gBACjB,IAAI,EAAE,UAAU,CAAC,EAAE;gBACnB,GAAG,iBAAiB;aACrB;SACF;QACH,CAAC,CAAC,EAAE,CAAC;IAET,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,wBAAwB,GAC5B,OAAO,IAAI,gBAAgB;QACzB,CAAC,CAAC;YACE,SAAS,EAAE,aAAa;YACxB,GAAG,gBAAgB;SACpB;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,2EAA2E;IAC3E,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,mBAAmB,KACnB,KAAK,EACT,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,WAAW,EAAE,cAAc,CAAC,WAAW,EACvC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,EAC3C,gBAAgB,EAAE,wBAAwB,EAC1C,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,uBAAuB,CAAC;YACtC,QAAQ;YACR,cAAc;YACd,SAAS;SACV,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import {\n BoxBackgroundColor,\n BoxBorderColor,\n ButtonSize,\n IconSize,\n ToastSeverity,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport { TOAST_SEVERITY_ICON_MAP } from './Toast.constants';\nimport type { ToastProps } from './Toast.types';\n\nconst renderSeverityAccessory = ({\n severity,\n startAccessory,\n iconProps,\n}: Pick<ToastProps, 'severity' | 'startAccessory' | 'iconProps'>) => {\n if (startAccessory !== null && startAccessory !== undefined) {\n return startAccessory;\n }\n\n if (!severity || severity === ToastSeverity.Default) {\n return undefined;\n }\n\n const { name, color } = TOAST_SEVERITY_ICON_MAP[severity];\n\n return <Icon name={name} color={color} size={IconSize.Lg} {...iconProps} />;\n};\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n (\n {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n className,\n closeButtonProps,\n iconProps,\n onClose,\n severity = ToastSeverity.Default,\n startAccessory,\n ...props\n },\n ref,\n ) => {\n // Only pass action props through when both the label and handler are set so\n // BannerBase can keep its action button contract simple.\n const resolvedActionProps =\n actionButtonLabel && actionButtonOnClick\n ? {\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps: {\n size: ButtonSize.Sm,\n ...actionButtonProps,\n },\n }\n : {};\n\n // Derive the close button config from the Toast API, keeping the button\n // visible whenever the consumer provides dismiss behavior or overrides.\n const resolvedCloseButtonProps =\n onClose || closeButtonProps\n ? {\n ariaLabel: 'Close toast',\n ...closeButtonProps,\n }\n : undefined;\n\n // Toast reuses BannerBase so the web surface stays aligned with the shared\n // banner layout and the React Native Toast API.\n return (\n <BannerBase\n ref={ref}\n {...resolvedActionProps}\n {...props}\n backgroundColor={BoxBackgroundColor.BackgroundSection}\n borderColor={BoxBorderColor.BorderMuted}\n borderWidth={1}\n className={twMerge('rounded-xl', className)}\n closeButtonProps={resolvedCloseButtonProps}\n onClose={onClose}\n startAccessory={renderSeverityAccessory({\n severity,\n startAccessory,\n iconProps,\n })}\n />\n );\n },\n);\n\nToast.displayName = 'Toast';\n"]}
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Icon = exports.HelpTextSeverity = exports.HelpText = exports.HeaderBase = exports.Checkbox = exports.ButtonIconVariant = exports.ButtonIconSize = exports.ButtonIcon = exports.ButtonBaseSize = exports.ButtonBase = exports.ButtonVariant = exports.ButtonSize = exports.Button = exports.Box = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.Blockies = exports.BannerBase = exports.BadgeWrapperPositionAnchorShape = exports.BadgeWrapperPosition = exports.BadgeWrapper = exports.BadgeStatusSize = exports.BadgeStatusStatus = exports.BadgeStatus = exports.BadgeNetwork = exports.BadgeIcon = exports.BadgeCountSize = exports.BadgeCount = exports.AvatarTokenSize = exports.AvatarToken = exports.AvatarNetworkSize = exports.AvatarNetwork = exports.AvatarIconSeverity = exports.AvatarIconSize = exports.AvatarIcon = exports.AvatarGroupVariant = exports.AvatarGroupSize = exports.AvatarGroup = exports.AvatarFaviconSize = exports.AvatarFavicon = exports.AvatarBaseShape = exports.AvatarBaseSize = exports.AvatarBase = exports.AvatarAccountVariant = exports.AvatarAccountSize = exports.AvatarAccount = void 0;
4
- exports.Toaster = exports.Toast = exports.ButtonFilter = exports.ButtonHeroSize = exports.ButtonHero = exports.BannerAlertSeverity = exports.BannerAlert = exports.TextFieldSearch = exports.FormTextField = exports.TextFieldType = exports.TextFieldSize = exports.TextField = exports.TextButtonSize = exports.TextButton = exports.TextAreaResize = exports.TextArea = exports.OverflowWrap = exports.TextTransform = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.Text = exports.PopoverRole = exports.PopoverPosition = exports.Popover = exports.PopoverHeader = exports.SensitiveTextLength = exports.SensitiveText = exports.Skeleton = exports.MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR = exports.ModalContentSize = exports.ModalContent = exports.useModalContext = exports.Modal = exports.ModalHeader = exports.ModalFooter = exports.ButtonsAlignment = exports.ModalFocus = exports.ModalBody = exports.ModalOverlay = exports.Maskicon = exports.Label = exports.Jazzicon = exports.Input = exports.IconColor = exports.IconSize = exports.IconName = void 0;
5
- exports.ToastSeverity = exports.toast = void 0;
4
+ exports.ButtonFilter = exports.ButtonHeroSize = exports.ButtonHero = exports.TagSeverity = exports.Tag = exports.BannerAlertSeverity = exports.BannerAlert = exports.TextFieldSearch = exports.FormTextField = exports.TextFieldType = exports.TextFieldSize = exports.TextField = exports.TextButtonSize = exports.TextButton = exports.TextAreaResize = exports.TextArea = exports.OverflowWrap = exports.TextTransform = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.Text = exports.PopoverRole = exports.PopoverPosition = exports.Popover = exports.PopoverHeader = exports.SensitiveTextLength = exports.SensitiveText = exports.Skeleton = exports.MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR = exports.ModalContentSize = exports.ModalContent = exports.useModalContext = exports.Modal = exports.ModalHeader = exports.ModalFooter = exports.ButtonsAlignment = exports.ModalFocus = exports.ModalBody = exports.ModalOverlay = exports.Maskicon = exports.Label = exports.Jazzicon = exports.Input = exports.IconColor = exports.IconSize = exports.IconName = void 0;
5
+ exports.ToastSeverity = exports.toast = exports.Toaster = exports.Toast = void 0;
6
6
  var AvatarAccount_1 = require("./AvatarAccount/index.cjs");
7
7
  Object.defineProperty(exports, "AvatarAccount", { enumerable: true, get: function () { return AvatarAccount_1.AvatarAccount; } });
8
8
  Object.defineProperty(exports, "AvatarAccountSize", { enumerable: true, get: function () { return AvatarAccount_1.AvatarAccountSize; } });
@@ -148,6 +148,9 @@ Object.defineProperty(exports, "TextFieldSearch", { enumerable: true, get: funct
148
148
  var BannerAlert_1 = require("./BannerAlert/index.cjs");
149
149
  Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return BannerAlert_1.BannerAlert; } });
150
150
  Object.defineProperty(exports, "BannerAlertSeverity", { enumerable: true, get: function () { return BannerAlert_1.BannerAlertSeverity; } });
151
+ var Tag_1 = require("./Tag/index.cjs");
152
+ Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
153
+ Object.defineProperty(exports, "TagSeverity", { enumerable: true, get: function () { return Tag_1.TagSeverity; } });
151
154
  var ButtonHero_1 = require("./ButtonHero/index.cjs");
152
155
  Object.defineProperty(exports, "ButtonHero", { enumerable: true, get: function () { return ButtonHero_1.ButtonHero; } });
153
156
  Object.defineProperty(exports, "ButtonHeroSize", { enumerable: true, get: function () { return ButtonHero_1.ButtonHeroSize; } });