@metamask-previews/design-system-react 0.28.0-preview.55a2d71 → 0.28.0-preview.ba3ace4e
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.
- package/dist/components/BannerAlert/BannerAlert.cjs +1 -4
- package/dist/components/BannerAlert/BannerAlert.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.cjs +4 -7
- package/dist/components/BannerAlert/BannerAlert.constants.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts +1 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts +1 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.mjs +4 -7
- package/dist/components/BannerAlert/BannerAlert.constants.mjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.mjs +2 -5
- package/dist/components/BannerAlert/BannerAlert.mjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.cjs +5 -5
- package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
- package/dist/components/BannerBase/BannerBase.mjs +6 -6
- package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
- package/dist/components/Icon/Icon.cjs +30 -8
- package/dist/components/Icon/Icon.cjs.map +1 -1
- package/dist/components/Icon/Icon.d.cts.map +1 -1
- package/dist/components/Icon/Icon.d.mts.map +1 -1
- package/dist/components/Icon/Icon.mjs +8 -6
- package/dist/components/Icon/Icon.mjs.map +1 -1
- package/dist/components/Icon/Icon.registry.cjs +74 -0
- package/dist/components/Icon/Icon.registry.cjs.map +1 -0
- package/dist/components/Icon/Icon.registry.d.cts +46 -0
- package/dist/components/Icon/Icon.registry.d.cts.map +1 -0
- package/dist/components/Icon/Icon.registry.d.mts +46 -0
- package/dist/components/Icon/Icon.registry.d.mts.map +1 -0
- package/dist/components/Icon/Icon.registry.mjs +67 -0
- package/dist/components/Icon/Icon.registry.mjs.map +1 -0
- package/dist/components/Icon/icons/index.cjs +303 -587
- package/dist/components/Icon/icons/index.cjs.map +1 -1
- package/dist/components/Icon/icons/index.d.cts +14 -296
- package/dist/components/Icon/icons/index.d.cts.map +1 -1
- package/dist/components/Icon/icons/index.d.mts +14 -296
- package/dist/components/Icon/icons/index.d.mts.map +1 -1
- package/dist/components/Icon/icons/index.mjs +301 -583
- package/dist/components/Icon/icons/index.mjs.map +1 -1
- package/dist/components/Icon/index.cjs +3 -1
- package/dist/components/Icon/index.cjs.map +1 -1
- package/dist/components/Icon/index.d.cts +1 -0
- package/dist/components/Icon/index.d.cts.map +1 -1
- package/dist/components/Icon/index.d.mts +1 -0
- package/dist/components/Icon/index.d.mts.map +1 -1
- package/dist/components/Icon/index.mjs +1 -0
- package/dist/components/Icon/index.mjs.map +1 -1
- package/dist/components/index.cjs +3 -2
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +1 -1
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +1 -1
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +1 -1
- package/dist/components/index.mjs.map +1 -1
- package/package.json +4 -4
|
@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
exports.BannerAlert = 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 tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
30
29
|
const BannerBase_1 = require("../BannerBase/index.cjs");
|
|
31
30
|
const Icon_1 = require("../Icon/index.cjs");
|
|
32
31
|
const BannerAlert_constants_1 = require("./BannerAlert.constants.cjs");
|
|
@@ -34,9 +33,7 @@ exports.BannerAlert = (0, react_1.forwardRef)(({ severity = design_system_shared
|
|
|
34
33
|
const iconName = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];
|
|
35
34
|
const iconColor = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];
|
|
36
35
|
const backgroundColor = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];
|
|
37
|
-
|
|
38
|
-
const mergedClassName = (0, tw_merge_1.twMerge)('border-l-4', borderColorClass, className);
|
|
39
|
-
return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, startAccessory: react_1.default.createElement(Icon_1.Icon, { name: iconName, color: iconColor, size: design_system_shared_1.IconSize.Lg, ...iconProps }), backgroundColor: backgroundColor, paddingLeft: 2, className: mergedClassName, ...props }));
|
|
36
|
+
return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, startAccessory: react_1.default.createElement(Icon_1.Icon, { name: iconName, color: iconColor, size: design_system_shared_1.IconSize.Lg, ...iconProps }), backgroundColor: backgroundColor, className: className, ...props }));
|
|
40
37
|
});
|
|
41
38
|
exports.BannerAlert.displayName = 'BannerAlert';
|
|
42
39
|
//# sourceMappingURL=BannerAlert.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAAwF;AACxF,+CAA0C;AAE1C,
|
|
1
|
+
{"version":3,"file":"BannerAlert.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAAwF;AACxF,+CAA0C;AAE1C,wDAA2C;AAC3C,4CAA+B;AAE/B,uEAIiC;AAGpB,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EAAE,QAAQ,GAAG,0CAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,2DAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,4DAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GACnB,kEAA0C,CAAC,QAAQ,CAAC,CAAC;IAEvD,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,cAAc,EACZ,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,+BAAQ,CAAC,EAAE,KACb,SAAS,GACb,EAEJ,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BannerAlertSeverity, IconSize } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n MAP_BANNER_ALERT_SEVERITY_ICON_COLOR,\n MAP_BANNER_ALERT_SEVERITY_ICON_NAME,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert = forwardRef<HTMLDivElement, BannerAlertProps>(\n (\n { severity = BannerAlertSeverity.Info, iconProps, className, ...props },\n ref,\n ) => {\n const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n const backgroundColor =\n MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n\n return (\n <BannerBase\n ref={ref}\n startAccessory={\n <Icon\n name={iconName}\n color={iconColor}\n size={IconSize.Lg}\n {...iconProps}\n />\n }\n backgroundColor={backgroundColor}\n className={className}\n {...props}\n />\n );\n },\n);\n\nBannerAlert.displayName = 'BannerAlert';\n"]}
|
|
@@ -1,29 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = exports.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = exports.MAP_BANNER_ALERT_SEVERITY_ICON_NAME = void 0;
|
|
4
4
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
5
|
exports.MAP_BANNER_ALERT_SEVERITY_ICON_NAME = {
|
|
6
|
+
neutral: design_system_shared_1.IconName.Info,
|
|
6
7
|
info: design_system_shared_1.IconName.Info,
|
|
7
8
|
success: design_system_shared_1.IconName.Confirmation,
|
|
8
9
|
warning: design_system_shared_1.IconName.Danger,
|
|
9
10
|
danger: design_system_shared_1.IconName.Danger,
|
|
10
11
|
};
|
|
11
12
|
exports.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = {
|
|
13
|
+
neutral: design_system_shared_1.IconColor.IconDefault,
|
|
12
14
|
info: design_system_shared_1.IconColor.PrimaryDefault,
|
|
13
15
|
success: design_system_shared_1.IconColor.SuccessDefault,
|
|
14
16
|
warning: design_system_shared_1.IconColor.WarningDefault,
|
|
15
17
|
danger: design_system_shared_1.IconColor.ErrorDefault,
|
|
16
18
|
};
|
|
17
19
|
exports.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = {
|
|
20
|
+
neutral: design_system_shared_1.BoxBackgroundColor.BackgroundSection,
|
|
18
21
|
info: design_system_shared_1.BoxBackgroundColor.PrimaryMuted,
|
|
19
22
|
success: design_system_shared_1.BoxBackgroundColor.SuccessMuted,
|
|
20
23
|
warning: design_system_shared_1.BoxBackgroundColor.WarningMuted,
|
|
21
24
|
danger: design_system_shared_1.BoxBackgroundColor.ErrorMuted,
|
|
22
25
|
};
|
|
23
|
-
exports.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR = {
|
|
24
|
-
info: design_system_shared_1.BoxBorderColor.PrimaryDefault,
|
|
25
|
-
success: design_system_shared_1.BoxBorderColor.SuccessDefault,
|
|
26
|
-
warning: design_system_shared_1.BoxBorderColor.WarningDefault,
|
|
27
|
-
danger: design_system_shared_1.BoxBorderColor.ErrorDefault,
|
|
28
|
-
};
|
|
29
26
|
//# sourceMappingURL=BannerAlert.constants.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.constants.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"BannerAlert.constants.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":";;;AAAA,kFAKiD;AAEpC,QAAA,mCAAmC,GAG5C;IACF,OAAO,EAAE,+BAAQ,CAAC,IAAI;IACtB,IAAI,EAAE,+BAAQ,CAAC,IAAI;IACnB,OAAO,EAAE,+BAAQ,CAAC,YAAY;IAC9B,OAAO,EAAE,+BAAQ,CAAC,MAAM;IACxB,MAAM,EAAE,+BAAQ,CAAC,MAAM;CACxB,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,OAAO,EAAE,gCAAS,CAAC,WAAW;IAC9B,IAAI,EAAE,gCAAS,CAAC,cAAc;IAC9B,OAAO,EAAE,gCAAS,CAAC,cAAc;IACjC,OAAO,EAAE,gCAAS,CAAC,cAAc;IACjC,MAAM,EAAE,gCAAS,CAAC,YAAY;CAC/B,CAAC;AAEW,QAAA,0CAA0C,GAGnD;IACF,OAAO,EAAE,yCAAkB,CAAC,iBAAiB;IAC7C,IAAI,EAAE,yCAAkB,CAAC,YAAY;IACrC,OAAO,EAAE,yCAAkB,CAAC,YAAY;IACxC,OAAO,EAAE,yCAAkB,CAAC,YAAY;IACxC,MAAM,EAAE,yCAAkB,CAAC,UAAU;CACtC,CAAC","sourcesContent":["import {\n BannerAlertSeverity,\n BoxBackgroundColor,\n IconColor,\n IconName,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n IconName\n> = {\n neutral: IconName.Info,\n info: IconName.Info,\n success: IconName.Confirmation,\n warning: IconName.Danger,\n danger: IconName.Danger,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n IconColor\n> = {\n neutral: IconColor.IconDefault,\n info: IconColor.PrimaryDefault,\n success: IconColor.SuccessDefault,\n warning: IconColor.WarningDefault,\n danger: IconColor.ErrorDefault,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n BoxBackgroundColor\n> = {\n neutral: BoxBackgroundColor.BackgroundSection,\n info: BoxBackgroundColor.PrimaryMuted,\n success: BoxBackgroundColor.SuccessMuted,\n warning: BoxBackgroundColor.WarningMuted,\n danger: BoxBackgroundColor.ErrorMuted,\n};\n"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { BannerAlertSeverity, BoxBackgroundColor,
|
|
1
|
+
import { BannerAlertSeverity, BoxBackgroundColor, IconColor, IconName } from "@metamask-previews/design-system-shared";
|
|
2
2
|
export declare const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconName>;
|
|
3
3
|
export declare const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconColor>;
|
|
4
4
|
export declare const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBackgroundColor>;
|
|
5
|
-
export declare const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBorderColor>;
|
|
6
5
|
//# sourceMappingURL=BannerAlert.constants.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,
|
|
1
|
+
{"version":3,"file":"BannerAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACT,gDAAgD;AAEjD,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,QAAQ,CAOT,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,SAAS,CAOV,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAC7D,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,kBAAkB,CAOnB,CAAC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { BannerAlertSeverity, BoxBackgroundColor,
|
|
1
|
+
import { BannerAlertSeverity, BoxBackgroundColor, IconColor, IconName } from "@metamask-previews/design-system-shared";
|
|
2
2
|
export declare const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconName>;
|
|
3
3
|
export declare const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconColor>;
|
|
4
4
|
export declare const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBackgroundColor>;
|
|
5
|
-
export declare const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBorderColor>;
|
|
6
5
|
//# sourceMappingURL=BannerAlert.constants.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,
|
|
1
|
+
{"version":3,"file":"BannerAlert.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACT,gDAAgD;AAEjD,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,QAAQ,CAOT,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,SAAS,CAOV,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAC7D,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,kBAAkB,CAOnB,CAAC"}
|
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
import { BannerAlertSeverity, BoxBackgroundColor,
|
|
1
|
+
import { BannerAlertSeverity, BoxBackgroundColor, IconColor, IconName } from "@metamask-previews/design-system-shared";
|
|
2
2
|
export const MAP_BANNER_ALERT_SEVERITY_ICON_NAME = {
|
|
3
|
+
neutral: IconName.Info,
|
|
3
4
|
info: IconName.Info,
|
|
4
5
|
success: IconName.Confirmation,
|
|
5
6
|
warning: IconName.Danger,
|
|
6
7
|
danger: IconName.Danger,
|
|
7
8
|
};
|
|
8
9
|
export const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = {
|
|
10
|
+
neutral: IconColor.IconDefault,
|
|
9
11
|
info: IconColor.PrimaryDefault,
|
|
10
12
|
success: IconColor.SuccessDefault,
|
|
11
13
|
warning: IconColor.WarningDefault,
|
|
12
14
|
danger: IconColor.ErrorDefault,
|
|
13
15
|
};
|
|
14
16
|
export const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = {
|
|
17
|
+
neutral: BoxBackgroundColor.BackgroundSection,
|
|
15
18
|
info: BoxBackgroundColor.PrimaryMuted,
|
|
16
19
|
success: BoxBackgroundColor.SuccessMuted,
|
|
17
20
|
warning: BoxBackgroundColor.WarningMuted,
|
|
18
21
|
danger: BoxBackgroundColor.ErrorMuted,
|
|
19
22
|
};
|
|
20
|
-
export const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR = {
|
|
21
|
-
info: BoxBorderColor.PrimaryDefault,
|
|
22
|
-
success: BoxBorderColor.SuccessDefault,
|
|
23
|
-
warning: BoxBorderColor.WarningDefault,
|
|
24
|
-
danger: BoxBorderColor.ErrorDefault,
|
|
25
|
-
};
|
|
26
23
|
//# sourceMappingURL=BannerAlert.constants.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.constants.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,
|
|
1
|
+
{"version":3,"file":"BannerAlert.constants.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACT,gDAAgD;AAEjD,MAAM,CAAC,MAAM,mCAAmC,GAG5C;IACF,OAAO,EAAE,QAAQ,CAAC,IAAI;IACtB,IAAI,EAAE,QAAQ,CAAC,IAAI;IACnB,OAAO,EAAE,QAAQ,CAAC,YAAY;IAC9B,OAAO,EAAE,QAAQ,CAAC,MAAM;IACxB,MAAM,EAAE,QAAQ,CAAC,MAAM;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,OAAO,EAAE,SAAS,CAAC,WAAW;IAC9B,IAAI,EAAE,SAAS,CAAC,cAAc;IAC9B,OAAO,EAAE,SAAS,CAAC,cAAc;IACjC,OAAO,EAAE,SAAS,CAAC,cAAc;IACjC,MAAM,EAAE,SAAS,CAAC,YAAY;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,0CAA0C,GAGnD;IACF,OAAO,EAAE,kBAAkB,CAAC,iBAAiB;IAC7C,IAAI,EAAE,kBAAkB,CAAC,YAAY;IACrC,OAAO,EAAE,kBAAkB,CAAC,YAAY;IACxC,OAAO,EAAE,kBAAkB,CAAC,YAAY;IACxC,MAAM,EAAE,kBAAkB,CAAC,UAAU;CACtC,CAAC","sourcesContent":["import {\n BannerAlertSeverity,\n BoxBackgroundColor,\n IconColor,\n IconName,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n IconName\n> = {\n neutral: IconName.Info,\n info: IconName.Info,\n success: IconName.Confirmation,\n warning: IconName.Danger,\n danger: IconName.Danger,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n IconColor\n> = {\n neutral: IconColor.IconDefault,\n info: IconColor.PrimaryDefault,\n success: IconColor.SuccessDefault,\n warning: IconColor.WarningDefault,\n danger: IconColor.ErrorDefault,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n BoxBackgroundColor\n> = {\n neutral: BoxBackgroundColor.BackgroundSection,\n info: BoxBackgroundColor.PrimaryMuted,\n success: BoxBackgroundColor.SuccessMuted,\n warning: BoxBackgroundColor.WarningMuted,\n danger: BoxBackgroundColor.ErrorMuted,\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAY,gDAAgD;AACxF,OAAO,KAAqB,cAAc;
|
|
1
|
+
{"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAY,gDAAgD;AACxF,OAAO,KAAqB,cAAc;AAY1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA2BvB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAY,gDAAgD;AACxF,OAAO,KAAqB,cAAc;
|
|
1
|
+
{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAY,gDAAgD;AACxF,OAAO,KAAqB,cAAc;AAY1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA2BvB,CAAC"}
|
|
@@ -7,17 +7,14 @@ function $importDefault(module) {
|
|
|
7
7
|
import { BannerAlertSeverity, IconSize } from "@metamask-previews/design-system-shared";
|
|
8
8
|
import $React, { forwardRef } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
|
-
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
11
10
|
import { BannerBase } from "../BannerBase/index.mjs";
|
|
12
11
|
import { Icon } from "../Icon/index.mjs";
|
|
13
|
-
import { MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,
|
|
12
|
+
import { MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_NAME } from "./BannerAlert.constants.mjs";
|
|
14
13
|
export const BannerAlert = forwardRef(({ severity = BannerAlertSeverity.Info, iconProps, className, ...props }, ref) => {
|
|
15
14
|
const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];
|
|
16
15
|
const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];
|
|
17
16
|
const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];
|
|
18
|
-
|
|
19
|
-
const mergedClassName = twMerge('border-l-4', borderColorClass, className);
|
|
20
|
-
return (React.createElement(BannerBase, { ref: ref, startAccessory: React.createElement(Icon, { name: iconName, color: iconColor, size: IconSize.Lg, ...iconProps }), backgroundColor: backgroundColor, paddingLeft: 2, className: mergedClassName, ...props }));
|
|
17
|
+
return (React.createElement(BannerBase, { ref: ref, startAccessory: React.createElement(Icon, { name: iconName, color: iconColor, size: IconSize.Lg, ...iconProps }), backgroundColor: backgroundColor, className: className, ...props }));
|
|
21
18
|
});
|
|
22
19
|
BannerAlert.displayName = 'BannerAlert';
|
|
23
20
|
//# sourceMappingURL=BannerAlert.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,gDAAgD;AACxF,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"BannerAlert.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,gDAAgD;AACxF,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,0CAA0C,EAC1C,oCAAoC,EACpC,mCAAmC,EACpC,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAAE,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,EACH,EAAE;IACF,MAAM,QAAQ,GAAG,mCAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,oCAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GACnB,0CAA0C,CAAC,QAAQ,CAAC,CAAC;IAEvD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,cAAc,EACZ,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,KACb,SAAS,GACb,EAEJ,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BannerAlertSeverity, IconSize } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n MAP_BANNER_ALERT_SEVERITY_ICON_COLOR,\n MAP_BANNER_ALERT_SEVERITY_ICON_NAME,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert = forwardRef<HTMLDivElement, BannerAlertProps>(\n (\n { severity = BannerAlertSeverity.Info, iconProps, className, ...props },\n ref,\n ) => {\n const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n const backgroundColor =\n MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n\n return (\n <BannerBase\n ref={ref}\n startAccessory={\n <Icon\n name={iconName}\n color={iconColor}\n size={IconSize.Lg}\n {...iconProps}\n />\n }\n backgroundColor={backgroundColor}\n className={className}\n {...props}\n />\n );\n },\n);\n\nBannerAlert.displayName = 'BannerAlert';\n"]}
|
|
@@ -38,17 +38,17 @@ exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description,
|
|
|
38
38
|
const { ariaLabel: closeButtonAriaLabel = 'Close banner', className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
|
|
39
39
|
const shouldShowCloseButton = Boolean(onClose);
|
|
40
40
|
const shouldShowActionButton = Boolean(actionButtonOnClick);
|
|
41
|
-
return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Start, gap:
|
|
41
|
+
return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Start, gap: 4, backgroundColor: design_system_shared_1.BoxBackgroundColor.BackgroundDefault, paddingVertical: 3, paddingHorizontal: 4, className: (0, tw_merge_1.twMerge)('rounded-xl', className), ...props },
|
|
42
42
|
startAccessory,
|
|
43
43
|
react_1.default.createElement(Box_1.Box, { className: "min-w-0 flex-1" },
|
|
44
44
|
hasContent(title) &&
|
|
45
45
|
(isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, fontWeight: design_system_shared_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
|
|
46
|
-
hasContent(description) && (react_1.default.createElement(Box_1.Box,
|
|
46
|
+
hasContent(description) && (react_1.default.createElement(Box_1.Box, null, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
|
|
47
47
|
hasContent(children) &&
|
|
48
48
|
(isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
|
|
49
|
-
shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-
|
|
50
|
-
react_1.default.createElement(Button_1.Button, { size: design_system_shared_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
|
|
51
|
-
shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('
|
|
49
|
+
shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-2" },
|
|
50
|
+
react_1.default.createElement(Button_1.Button, { size: design_system_shared_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps, variant: design_system_shared_1.ButtonVariant.Secondary }, actionButtonLabel)))),
|
|
51
|
+
shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('-mt-1', closeButtonClassName), iconName: design_system_shared_1.IconName.Close, size: design_system_shared_1.ButtonIconSize.Md, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
|
|
52
52
|
});
|
|
53
53
|
exports.BannerBase.displayName = 'BannerBase';
|
|
54
54
|
//# sourceMappingURL=BannerBase.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\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 { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingVertical={3}\n paddingHorizontal={4}\n className={twMerge('rounded-xl', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {shouldShowActionButton && (\n <Box className=\"mt-2\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('-mt-1', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,QAAQ,EAET,gDAAgD;AACjD,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA2GtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,QAAQ,EAET,gDAAgD;AACjD,OAAO,KAAqB,cAAc;AAgB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA2GtB,CAAC"}
|
|
@@ -4,7 +4,7 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import { BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, FontWeight, IconName, TextVariant } from "@metamask-previews/design-system-shared";
|
|
7
|
+
import { BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, ButtonVariant, FontWeight, IconName, TextVariant } from "@metamask-previews/design-system-shared";
|
|
8
8
|
import $React, { forwardRef } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
10
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
@@ -19,17 +19,17 @@ export const BannerBase = forwardRef(({ title, titleProps, description, descript
|
|
|
19
19
|
const { ariaLabel: closeButtonAriaLabel = 'Close banner', className: closeButtonClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
|
|
20
20
|
const shouldShowCloseButton = Boolean(onClose);
|
|
21
21
|
const shouldShowActionButton = Boolean(actionButtonOnClick);
|
|
22
|
-
return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Start, gap:
|
|
22
|
+
return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Start, gap: 4, backgroundColor: BoxBackgroundColor.BackgroundDefault, paddingVertical: 3, paddingHorizontal: 4, className: twMerge('rounded-xl', className), ...props },
|
|
23
23
|
startAccessory,
|
|
24
24
|
React.createElement(Box, { className: "min-w-0 flex-1" },
|
|
25
25
|
hasContent(title) &&
|
|
26
26
|
(isTextContent(title) ? (React.createElement(Text, { variant: TextVariant.BodyMd, fontWeight: FontWeight.Medium, ...titleProps }, title)) : (title)),
|
|
27
|
-
hasContent(description) && (React.createElement(Box,
|
|
27
|
+
hasContent(description) && (React.createElement(Box, null, isTextContent(description) ? (React.createElement(Text, { variant: TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
|
|
28
28
|
hasContent(children) &&
|
|
29
29
|
(isTextContent(children) ? (React.createElement(Text, { variant: TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
|
|
30
|
-
shouldShowActionButton && (React.createElement(Box, { className: "mt-
|
|
31
|
-
React.createElement(Button, { size: ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
|
|
32
|
-
shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge('
|
|
30
|
+
shouldShowActionButton && (React.createElement(Box, { className: "mt-2" },
|
|
31
|
+
React.createElement(Button, { size: ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps, variant: ButtonVariant.Secondary }, actionButtonLabel)))),
|
|
32
|
+
shouldShowCloseButton && (React.createElement(ButtonIcon, { className: twMerge('-mt-1', closeButtonClassName), iconName: IconName.Close, size: ButtonIconSize.Md, ariaLabel: closeButtonAriaLabel, onClick: onClose, ...resolvedCloseButtonProps }))));
|
|
33
33
|
});
|
|
34
34
|
BannerBase.displayName = 'BannerBase';
|
|
35
35
|
//# sourceMappingURL=BannerBase.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,QAAQ,EACR,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,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,SAAS,EAAE,oBAAoB,GAAG,cAAc,EAChD,SAAS,EAAE,oBAAoB,EAC/B,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE5D,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,gBAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,aAAa,CAAC,KAAK,EAC/B,GAAG,EAAE,CAAC,EACN,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,
|
|
1
|
+
{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxAlignItems,\n BoxBackgroundColor,\n BoxFlexDirection,\n ButtonIconSize,\n ButtonSize,\n ButtonVariant,\n FontWeight,\n IconName,\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 { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingVertical={3}\n paddingHorizontal={4}\n className={twMerge('rounded-xl', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {shouldShowActionButton && (\n <Box className=\"mt-2\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('-mt-1', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
|
|
@@ -1,26 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
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;
|
|
4
24
|
};
|
|
5
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
26
|
exports.Icon = void 0;
|
|
7
27
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
8
|
-
const react_1 =
|
|
28
|
+
const react_1 = __importStar(require("react"));
|
|
9
29
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
10
30
|
const Icon_constants_1 = require("./Icon.constants.cjs");
|
|
11
|
-
const
|
|
12
|
-
const
|
|
31
|
+
const Icon_registry_1 = require("./Icon.registry.cjs");
|
|
32
|
+
const IconRenderer = ({ name, size = design_system_shared_1.IconSize.Md, color = design_system_shared_1.IconColor.IconDefault, className, style, ...props }) => {
|
|
13
33
|
if (!name) {
|
|
14
34
|
console.warn('Icon name is required');
|
|
15
35
|
return null;
|
|
16
36
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
console.warn(`Icon "${name}" not found`);
|
|
37
|
+
if (!(0, Icon_registry_1.isIconName)(name)) {
|
|
38
|
+
console.warn(`Icon "${String(name)}" not found`);
|
|
20
39
|
return null;
|
|
21
40
|
}
|
|
41
|
+
const IconComponent = (0, Icon_registry_1.getIconComponent)(name);
|
|
22
42
|
const mergedClassName = (0, tw_merge_1.twMerge)('inline-block', Icon_constants_1.TWCLASSMAP_ICON_SIZE_DIMENSION[size], color, className);
|
|
23
43
|
return (react_1.default.createElement(IconComponent, { className: mergedClassName, ...props, style: style }));
|
|
24
44
|
};
|
|
45
|
+
const Icon = (props) => (react_1.default.createElement(react_1.Suspense, { fallback: null },
|
|
46
|
+
react_1.default.createElement(IconRenderer, { ...props })));
|
|
25
47
|
exports.Icon = Icon;
|
|
26
48
|
//# sourceMappingURL=Icon.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA8E;AAC9E,+CAAwC;AAExC,uDAA+C;AAE/C,yDAAkE;AAClE,uDAA+D;AAG/D,MAAM,YAAY,GAAwB,CAAC,EACzC,IAAI,EACJ,IAAI,GAAG,+BAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,gCAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,IAAA,0BAAU,EAAC,IAAI,CAAC,EAAE;QACrB,OAAO,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjD,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,IAAA,gCAAgB,EAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,cAAc,EACd,+CAA8B,CAAC,IAAI,CAAC,EACpC,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,IAAI,GAAwB,CAAC,KAAK,EAAE,EAAE,CAAC,CAClD,8BAAC,gBAAQ,IAAC,QAAQ,EAAE,IAAI;IACtB,8BAAC,YAAY,OAAK,KAAK,GAAI,CAClB,CACZ,CAAC;AAJW,QAAA,IAAI,QAIf","sourcesContent":["import { IconSize, IconColor } from '@metamask-previews/design-system-shared';\nimport React, { Suspense } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport { getIconComponent, isIconName } from './Icon.registry';\nimport type { IconProps } from './Icon.types';\n\nconst IconRenderer: React.FC<IconProps> = ({\n name,\n size = IconSize.Md,\n color = IconColor.IconDefault,\n className,\n style,\n ...props\n}) => {\n if (!name) {\n console.warn('Icon name is required');\n return null;\n }\n\n if (!isIconName(name)) {\n console.warn(`Icon \"${String(name)}\" not found`);\n return null;\n }\n\n const IconComponent = getIconComponent(name);\n\n const mergedClassName = twMerge(\n 'inline-block',\n TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n color,\n className,\n );\n\n return (\n <IconComponent\n className={mergedClassName}\n {...(props as React.SVGProps<SVGSVGElement>)}\n style={style}\n />\n );\n};\n\nexport const Icon: React.FC<IconProps> = (props) => (\n <Suspense fallback={null}>\n <IconRenderer {...props} />\n </Suspense>\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Icon.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAsC9C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Icon.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAsC9C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAIpC,CAAC"}
|
|
@@ -5,22 +5,24 @@ function $importDefault(module) {
|
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
7
|
import { IconSize, IconColor } from "@metamask-previews/design-system-shared";
|
|
8
|
-
import $React from "react";
|
|
8
|
+
import $React, { Suspense } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
10
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
11
11
|
import { TWCLASSMAP_ICON_SIZE_DIMENSION } from "./Icon.constants.mjs";
|
|
12
|
-
import {
|
|
13
|
-
|
|
12
|
+
import { getIconComponent, isIconName } from "./Icon.registry.mjs";
|
|
13
|
+
const IconRenderer = ({ name, size = IconSize.Md, color = IconColor.IconDefault, className, style, ...props }) => {
|
|
14
14
|
if (!name) {
|
|
15
15
|
console.warn('Icon name is required');
|
|
16
16
|
return null;
|
|
17
17
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
console.warn(`Icon "${name}" not found`);
|
|
18
|
+
if (!isIconName(name)) {
|
|
19
|
+
console.warn(`Icon "${String(name)}" not found`);
|
|
21
20
|
return null;
|
|
22
21
|
}
|
|
22
|
+
const IconComponent = getIconComponent(name);
|
|
23
23
|
const mergedClassName = twMerge('inline-block', TWCLASSMAP_ICON_SIZE_DIMENSION[size], color, className);
|
|
24
24
|
return (React.createElement(IconComponent, { className: mergedClassName, ...props, style: style }));
|
|
25
25
|
};
|
|
26
|
+
export const Icon = (props) => (React.createElement(Suspense, { fallback: null },
|
|
27
|
+
React.createElement(IconRenderer, { ...props })));
|
|
26
28
|
//# sourceMappingURL=Icon.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,gDAAgD;AAC9E,OAAO,
|
|
1
|
+
{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,gDAAgD;AAC9E,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAExC,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAE/C,OAAO,EAAE,8BAA8B,EAAE,6BAAyB;AAClE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,4BAAwB;AAG/D,MAAM,YAAY,GAAwB,CAAC,EACzC,IAAI,EACJ,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;QACrB,OAAO,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjD,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE7C,MAAM,eAAe,GAAG,OAAO,CAC7B,cAAc,EACd,8BAA8B,CAAC,IAAI,CAAC,EACpC,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,KAAK,EAAE,EAAE,CAAC,CAClD,oBAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI;IACtB,oBAAC,YAAY,OAAK,KAAK,GAAI,CAClB,CACZ,CAAC","sourcesContent":["import { IconSize, IconColor } from '@metamask-previews/design-system-shared';\nimport React, { Suspense } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport { getIconComponent, isIconName } from './Icon.registry';\nimport type { IconProps } from './Icon.types';\n\nconst IconRenderer: React.FC<IconProps> = ({\n name,\n size = IconSize.Md,\n color = IconColor.IconDefault,\n className,\n style,\n ...props\n}) => {\n if (!name) {\n console.warn('Icon name is required');\n return null;\n }\n\n if (!isIconName(name)) {\n console.warn(`Icon \"${String(name)}\" not found`);\n return null;\n }\n\n const IconComponent = getIconComponent(name);\n\n const mergedClassName = twMerge(\n 'inline-block',\n TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n color,\n className,\n );\n\n return (\n <IconComponent\n className={mergedClassName}\n {...(props as React.SVGProps<SVGSVGElement>)}\n style={style}\n />\n );\n};\n\nexport const Icon: React.FC<IconProps> = (props) => (\n <Suspense fallback={null}>\n <IconRenderer {...props} />\n </Suspense>\n);\n"]}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.isIconName = exports.preloadIcon = exports.getIconComponent = exports.getLazyIcon = exports.preloadIconsForTests = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const icons_1 = require("./icons/index.cjs");
|
|
6
|
+
Object.defineProperty(exports, "isIconName", { enumerable: true, get: function () { return icons_1.isIconName; } });
|
|
7
|
+
const lazyIconCache = new Map();
|
|
8
|
+
const testIconCache = new Map();
|
|
9
|
+
let testPreloadPromise;
|
|
10
|
+
/**
|
|
11
|
+
* Preloads all icon modules for the Jest test environment.
|
|
12
|
+
* Icons are cached as synchronous components so tests can query the DOM
|
|
13
|
+
* immediately without waiting for React.lazy resolution.
|
|
14
|
+
*
|
|
15
|
+
* @returns A promise that resolves when all icons are cached.
|
|
16
|
+
*/
|
|
17
|
+
function preloadIconsForTests() {
|
|
18
|
+
testPreloadPromise ?? (testPreloadPromise = Promise.all(Object.entries(icons_1.iconLoaders).map(async ([name, loader]) => {
|
|
19
|
+
const mod = await loader();
|
|
20
|
+
testIconCache.set(name, mod.default);
|
|
21
|
+
})).then(() => undefined));
|
|
22
|
+
return testPreloadPromise;
|
|
23
|
+
}
|
|
24
|
+
exports.preloadIconsForTests = preloadIconsForTests;
|
|
25
|
+
/**
|
|
26
|
+
* Returns a cached React.lazy wrapper for the given icon name.
|
|
27
|
+
* Each icon is loaded on demand via dynamic import, enabling per-icon
|
|
28
|
+
* code splitting instead of bundling all ~291 icons upfront.
|
|
29
|
+
*
|
|
30
|
+
* @param name - The icon name to resolve.
|
|
31
|
+
* @returns A lazy-loaded icon component.
|
|
32
|
+
*/
|
|
33
|
+
function getLazyIcon(name) {
|
|
34
|
+
let lazyIcon = lazyIconCache.get(name);
|
|
35
|
+
if (!lazyIcon) {
|
|
36
|
+
lazyIcon = (0, react_1.lazy)(icons_1.iconLoaders[name]);
|
|
37
|
+
lazyIconCache.set(name, lazyIcon);
|
|
38
|
+
}
|
|
39
|
+
return lazyIcon;
|
|
40
|
+
}
|
|
41
|
+
exports.getLazyIcon = getLazyIcon;
|
|
42
|
+
/**
|
|
43
|
+
* Resolves an icon component for rendering.
|
|
44
|
+
* Returns a synchronously cached component when present in the test preload
|
|
45
|
+
* cache (populated by preloadIconsForTests()). Otherwise returns a React.lazy
|
|
46
|
+
* wrapper for per-icon code splitting.
|
|
47
|
+
*
|
|
48
|
+
* @param name - The icon name to resolve.
|
|
49
|
+
* @param options - Optional resolver configuration.
|
|
50
|
+
* @param options.useTestCache - When false, skips the test preload cache.
|
|
51
|
+
* @returns The icon component to render.
|
|
52
|
+
*/
|
|
53
|
+
function getIconComponent(name, options) {
|
|
54
|
+
if (options?.useTestCache !== false) {
|
|
55
|
+
const cachedTestIcon = testIconCache.get(name);
|
|
56
|
+
if (cachedTestIcon) {
|
|
57
|
+
return cachedTestIcon;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return getLazyIcon(name);
|
|
61
|
+
}
|
|
62
|
+
exports.getIconComponent = getIconComponent;
|
|
63
|
+
/**
|
|
64
|
+
* Preloads an icon module so it is available synchronously on the next render.
|
|
65
|
+
* Useful for warming commonly used icons before they appear on screen.
|
|
66
|
+
*
|
|
67
|
+
* @param name - The icon name to preload.
|
|
68
|
+
* @returns A promise that resolves when the icon module has loaded.
|
|
69
|
+
*/
|
|
70
|
+
function preloadIcon(name) {
|
|
71
|
+
return icons_1.iconLoaders[name]().then(() => undefined);
|
|
72
|
+
}
|
|
73
|
+
exports.preloadIcon = preloadIcon;
|
|
74
|
+
//# sourceMappingURL=Icon.registry.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Icon.registry.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.registry.ts"],"names":[],"mappings":";;;AAEA,iCAA6B;AAG7B,6CAAkD;AA2FzC,2FA3Fa,kBAAU,OA2Fb;AAzFnB,MAAM,aAAa,GAAG,IAAI,GAAG,EAG1B,CAAC;AAEJ,MAAM,aAAa,GAAG,IAAI,GAAG,EAA+B,CAAC;AAE7D,IAAI,kBAA6C,CAAC;AAElD;;;;;;GAMG;AACH,SAAgB,oBAAoB;IAClC,kBAAkB,KAAlB,kBAAkB,GAAK,OAAO,CAAC,GAAG,CAChC,MAAM,CAAC,OAAO,CAAC,mBAAW,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE;QACvD,MAAM,GAAG,GAAG,MAAM,MAAM,EAAE,CAAC;QAC3B,aAAa,CAAC,GAAG,CAAC,IAAgB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnD,CAAC,CAAC,CACH,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,EAAC;IAExB,OAAO,kBAAkB,CAAC;AAC5B,CAAC;AATD,oDASC;AAED;;;;;;;GAOG;AACH,SAAgB,WAAW,CACzB,IAAc;IAEd,IAAI,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAEvC,IAAI,CAAC,QAAQ,EAAE;QACb,QAAQ,GAAG,IAAA,YAAI,EAAC,mBAAW,CAAC,IAAI,CAAC,CAAC,CAAC;QACnC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACnC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAXD,kCAWC;AAMD;;;;;;;;;;GAUG;AACH,SAAgB,gBAAgB,CAC9B,IAAc,EACd,OAAiC;IAEjC,IAAI,OAAO,EAAE,YAAY,KAAK,KAAK,EAAE;QACnC,MAAM,cAAc,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAE/C,IAAI,cAAc,EAAE;YAClB,OAAO,cAAc,CAAC;SACvB;KACF;IAED,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;AAC3B,CAAC;AAbD,4CAaC;AAED;;;;;;GAMG;AACH,SAAgB,WAAW,CAAC,IAAc;IACxC,OAAO,mBAAW,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AACnD,CAAC;AAFD,kCAEC","sourcesContent":["import type { IconName } from '@metamask-previews/design-system-shared';\nimport type { LazyExoticComponent } from 'react';\nimport { lazy } from 'react';\n\nimport type { IconComponentType } from './icons';\nimport { iconLoaders, isIconName } from './icons';\n\nconst lazyIconCache = new Map<\n IconName,\n LazyExoticComponent<IconComponentType>\n>();\n\nconst testIconCache = new Map<IconName, IconComponentType>();\n\nlet testPreloadPromise: Promise<void> | undefined;\n\n/**\n * Preloads all icon modules for the Jest test environment.\n * Icons are cached as synchronous components so tests can query the DOM\n * immediately without waiting for React.lazy resolution.\n *\n * @returns A promise that resolves when all icons are cached.\n */\nexport function preloadIconsForTests(): Promise<void> {\n testPreloadPromise ??= Promise.all(\n Object.entries(iconLoaders).map(async ([name, loader]) => {\n const mod = await loader();\n testIconCache.set(name as IconName, mod.default);\n }),\n ).then(() => undefined);\n\n return testPreloadPromise;\n}\n\n/**\n * Returns a cached React.lazy wrapper for the given icon name.\n * Each icon is loaded on demand via dynamic import, enabling per-icon\n * code splitting instead of bundling all ~291 icons upfront.\n *\n * @param name - The icon name to resolve.\n * @returns A lazy-loaded icon component.\n */\nexport function getLazyIcon(\n name: IconName,\n): LazyExoticComponent<IconComponentType> {\n let lazyIcon = lazyIconCache.get(name);\n\n if (!lazyIcon) {\n lazyIcon = lazy(iconLoaders[name]);\n lazyIconCache.set(name, lazyIcon);\n }\n\n return lazyIcon;\n}\n\ntype GetIconComponentOptions = {\n useTestCache?: boolean;\n};\n\n/**\n * Resolves an icon component for rendering.\n * Returns a synchronously cached component when present in the test preload\n * cache (populated by preloadIconsForTests()). Otherwise returns a React.lazy\n * wrapper for per-icon code splitting.\n *\n * @param name - The icon name to resolve.\n * @param options - Optional resolver configuration.\n * @param options.useTestCache - When false, skips the test preload cache.\n * @returns The icon component to render.\n */\nexport function getIconComponent(\n name: IconName,\n options?: GetIconComponentOptions,\n): IconComponentType | LazyExoticComponent<IconComponentType> {\n if (options?.useTestCache !== false) {\n const cachedTestIcon = testIconCache.get(name);\n\n if (cachedTestIcon) {\n return cachedTestIcon;\n }\n }\n\n return getLazyIcon(name);\n}\n\n/**\n * Preloads an icon module so it is available synchronously on the next render.\n * Useful for warming commonly used icons before they appear on screen.\n *\n * @param name - The icon name to preload.\n * @returns A promise that resolves when the icon module has loaded.\n */\nexport function preloadIcon(name: IconName): Promise<void> {\n return iconLoaders[name]().then(() => undefined);\n}\n\nexport { isIconName };\n"]}
|