@metamask-previews/design-system-react 0.28.0-preview.25db973 → 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/ButtonIcon/ButtonIcon.constants.cjs +2 -0
- package/dist/components/ButtonIcon/ButtonIcon.constants.cjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts +2 -0
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts +2 -0
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.mjs +2 -0
- package/dist/components/ButtonIcon/ButtonIcon.constants.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 +3 -3
|
@@ -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"]}
|
|
@@ -3,11 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.MAP_BUTTONICON_SIZE_ICONSIZE = exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = void 0;
|
|
4
4
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
5
|
exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
|
|
6
|
+
[design_system_shared_1.ButtonIconSize.Xs]: 'h-5 w-5',
|
|
6
7
|
[design_system_shared_1.ButtonIconSize.Sm]: 'h-6 w-6',
|
|
7
8
|
[design_system_shared_1.ButtonIconSize.Md]: 'h-8 w-8',
|
|
8
9
|
[design_system_shared_1.ButtonIconSize.Lg]: 'h-10 w-10',
|
|
9
10
|
};
|
|
10
11
|
exports.MAP_BUTTONICON_SIZE_ICONSIZE = {
|
|
12
|
+
[design_system_shared_1.ButtonIconSize.Xs]: design_system_shared_1.IconSize.Sm,
|
|
11
13
|
[design_system_shared_1.ButtonIconSize.Sm]: design_system_shared_1.IconSize.Md,
|
|
12
14
|
[design_system_shared_1.ButtonIconSize.Md]: design_system_shared_1.IconSize.Lg,
|
|
13
15
|
[design_system_shared_1.ButtonIconSize.Lg]: design_system_shared_1.IconSize.Xl,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAmF;AAEtE,QAAA,oCAAoC,GAAG;IAClD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEE,QAAA,4BAA4B,GAAG;IAC1C,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n} as const;\n"]}
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAmF;AAEtE,QAAA,oCAAoC,GAAG;IAClD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEE,QAAA,4BAA4B,GAAG;IAC1C,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Xs]: 'h-5 w-5',\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n [ButtonIconSize.Xs]: IconSize.Sm,\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n} as const;\n"]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
|
|
2
|
+
readonly xs: "h-5 w-5";
|
|
2
3
|
readonly sm: "h-6 w-6";
|
|
3
4
|
readonly md: "h-8 w-8";
|
|
4
5
|
readonly lg: "h-10 w-10";
|
|
5
6
|
};
|
|
6
7
|
export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
|
|
8
|
+
readonly xs: "sm";
|
|
7
9
|
readonly sm: "md";
|
|
8
10
|
readonly md: "lg";
|
|
9
11
|
readonly lg: "xl";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oCAAoC
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oCAAoC;;;;;CAKvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;;CAK/B,CAAC"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
|
|
2
|
+
readonly xs: "h-5 w-5";
|
|
2
3
|
readonly sm: "h-6 w-6";
|
|
3
4
|
readonly md: "h-8 w-8";
|
|
4
5
|
readonly lg: "h-10 w-10";
|
|
5
6
|
};
|
|
6
7
|
export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
|
|
8
|
+
readonly xs: "sm";
|
|
7
9
|
readonly sm: "md";
|
|
8
10
|
readonly md: "lg";
|
|
9
11
|
readonly lg: "xl";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oCAAoC
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oCAAoC;;;;;CAKvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;;CAK/B,CAAC"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { ButtonIconSize, IconSize } from "@metamask-previews/design-system-shared";
|
|
2
2
|
export const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
|
|
3
|
+
[ButtonIconSize.Xs]: 'h-5 w-5',
|
|
3
4
|
[ButtonIconSize.Sm]: 'h-6 w-6',
|
|
4
5
|
[ButtonIconSize.Md]: 'h-8 w-8',
|
|
5
6
|
[ButtonIconSize.Lg]: 'h-10 w-10',
|
|
6
7
|
};
|
|
7
8
|
export const MAP_BUTTONICON_SIZE_ICONSIZE = {
|
|
9
|
+
[ButtonIconSize.Xs]: IconSize.Sm,
|
|
8
10
|
[ButtonIconSize.Sm]: IconSize.Md,
|
|
9
11
|
[ButtonIconSize.Md]: IconSize.Lg,
|
|
10
12
|
[ButtonIconSize.Lg]: IconSize.Xl,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gDAAgD;AAEnF,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEX,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n} as const;\n"]}
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gDAAgD;AAEnF,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACxB,CAAC;AAEX,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACxB,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Xs]: 'h-5 w-5',\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n} as const;\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE = {\n [ButtonIconSize.Xs]: IconSize.Sm,\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n} as const;\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"]}
|