@metamask-previews/design-system-react 0.17.0-preview.9d477a9 → 0.17.1-preview.1679aa9
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/CHANGELOG.md +15 -9
- package/dist/components/BannerAlert/BannerAlert.cjs +2 -1
- package/dist/components/BannerAlert/BannerAlert.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.cjs +8 -8
- package/dist/components/BannerAlert/BannerAlert.constants.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts +2 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts +2 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.mjs +2 -2
- package/dist/components/BannerAlert/BannerAlert.constants.mjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.cts +6 -6
- package/dist/components/BannerAlert/BannerAlert.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.mts +6 -6
- package/dist/components/BannerAlert/BannerAlert.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.mjs +2 -1
- package/dist/components/BannerAlert/BannerAlert.mjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.cjs +1 -1
- package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.cts +1 -2
- package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.mts +1 -2
- package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
- package/dist/components/BannerBase/BannerBase.mjs +2 -2
- package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts +4 -3
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts +4 -3
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts.map +1 -1
- package/dist/components/Icon/Icon.cjs +2 -2
- package/dist/components/Icon/Icon.cjs.map +1 -1
- package/dist/components/Icon/Icon.constants.cjs +6 -6
- package/dist/components/Icon/Icon.constants.cjs.map +1 -1
- package/dist/components/Icon/Icon.constants.d.cts +1 -1
- package/dist/components/Icon/Icon.constants.d.cts.map +1 -1
- package/dist/components/Icon/Icon.constants.d.mts +1 -1
- package/dist/components/Icon/Icon.constants.d.mts.map +1 -1
- package/dist/components/Icon/Icon.constants.mjs +1 -1
- package/dist/components/Icon/Icon.constants.mjs.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 +1 -1
- package/dist/components/Icon/Icon.mjs.map +1 -1
- package/dist/components/Icon/Icon.types.cjs.map +1 -1
- package/dist/components/Icon/Icon.types.d.cts +19 -2
- package/dist/components/Icon/Icon.types.d.cts.map +1 -1
- package/dist/components/Icon/Icon.types.d.mts +19 -2
- package/dist/components/Icon/Icon.types.d.mts.map +1 -1
- package/dist/components/Icon/Icon.types.mjs.map +1 -1
- package/dist/components/Icon/icons/index.cjs +76 -76
- package/dist/components/Icon/icons/index.cjs.map +1 -1
- package/dist/components/Icon/icons/index.d.cts +38 -38
- package/dist/components/Icon/icons/index.d.cts.map +1 -1
- package/dist/components/Icon/icons/index.d.mts +38 -38
- package/dist/components/Icon/icons/index.d.mts.map +1 -1
- package/dist/components/Icon/icons/index.mjs +76 -76
- package/dist/components/Icon/icons/index.mjs.map +1 -1
- package/dist/components/Icon/index.cjs +5 -5
- package/dist/components/Icon/index.cjs.map +1 -1
- package/dist/components/Icon/index.d.cts +1 -1
- package/dist/components/Icon/index.d.cts.map +1 -1
- package/dist/components/Icon/index.d.mts +1 -1
- package/dist/components/Icon/index.d.mts.map +1 -1
- package/dist/components/Icon/index.mjs +1 -1
- package/dist/components/Icon/index.mjs.map +1 -1
- package/dist/types/index.cjs +344 -1
- package/dist/types/index.cjs.map +1 -1
- package/dist/types/index.d.cts +338 -0
- package/dist/types/index.d.cts.map +1 -1
- package/dist/types/index.d.mts +338 -0
- package/dist/types/index.d.mts.map +1 -1
- package/dist/types/index.mjs +343 -0
- package/dist/types/index.mjs.map +1 -1
- package/package.json +10 -7
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.17.1]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Expanded the `react` and `react-dom` peer dependency ranges to support React 19 consumers. ([#1089](https://github.com/MetaMask/metamask-design-system/pull/1089))
|
|
15
|
+
|
|
10
16
|
## [0.17.0]
|
|
11
17
|
|
|
12
18
|
### Changed
|
|
@@ -37,23 +43,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
37
43
|
|
|
38
44
|
### Changed
|
|
39
45
|
|
|
40
|
-
- **BREAKING:** Updated `AvatarBase` exports to consume shared const-object + string-union types rather than local enums, aligning React with shared cross-platform type contracts ([#1005](https://github.com/MetaMask/metamask-design-system/pull/1005))
|
|
46
|
+
- **BREAKING:** Updated `AvatarBase` exports to consume shared const-object + string-union types rather than local enums, aligning React with shared cross-platform type contracts ([#1005](https://github.com/MetaMask/metamask-design-system/pull/1005))
|
|
41
47
|
- No migration required for typical usage; continue importing from `@metamask/design-system-react` as before.
|
|
42
48
|
- Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
|
|
43
|
-
- Updated `@metamask/utils` peer dependency to `^11.11.0` ([#1033](https://github.com/MetaMask/metamask-design-system/pull/1033))
|
|
44
|
-
- Expanded `BannerBase` migration documentation to improve upgrade guidance for consumers moving between recent releases ([#1011](https://github.com/MetaMask/metamask-design-system/pull/1011))
|
|
49
|
+
- Updated `@metamask/utils` peer dependency to `^11.11.0` ([#1033](https://github.com/MetaMask/metamask-design-system/pull/1033))
|
|
50
|
+
- Expanded `BannerBase` migration documentation to improve upgrade guidance for consumers moving between recent releases ([#1011](https://github.com/MetaMask/metamask-design-system/pull/1011))
|
|
45
51
|
|
|
46
52
|
## [0.13.0]
|
|
47
53
|
|
|
48
54
|
### Changed
|
|
49
55
|
|
|
50
|
-
- `FontWeight.Bold` and the `Text` component now treat the semantic bold slot as weight 600; Storybook moved to the `Geist-SemiBold` assets and the tokens now emit `--font-weight-bold: 600`, so update any hardcoded `font-weight: 700` references as outlined in MIGRATION.md#from-version-0120-to-0130 ([#1017](https://github.com/MetaMask/metamask-design-system/pull/1017))
|
|
56
|
+
- `FontWeight.Bold` and the `Text` component now treat the semantic bold slot as weight 600; Storybook moved to the `Geist-SemiBold` assets and the tokens now emit `--font-weight-bold: 600`, so update any hardcoded `font-weight: 700` references as outlined in MIGRATION.md#from-version-0120-to-0130 ([#1017](https://github.com/MetaMask/metamask-design-system/pull/1017))
|
|
51
57
|
- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`, `BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now derive from const objects with `as const`/string-union typings per ADR-0003 and ADR-0004, so the same values are available to both React and React Native while your import statements continue to reference `@metamask/design-system-react` (or the platform-specific entry point) as before ([#1014](https://github.com/MetaMask/metamask-design-system/pull/1014); see https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md and MIGRATION.md#from-version-0120-to-0130).
|
|
52
|
-
- Documented the Button migration path that walks through prop, variant, and size mappings for both web and mobile, linking directly to MIGRATION.md#button-component so the release note, changelog, and migration guide share the same reference ([#999](https://github.com/MetaMask/metamask-design-system/pull/999))
|
|
58
|
+
- Documented the Button migration path that walks through prop, variant, and size mappings for both web and mobile, linking directly to MIGRATION.md#button-component so the release note, changelog, and migration guide share the same reference ([#999](https://github.com/MetaMask/metamask-design-system/pull/999))
|
|
53
59
|
|
|
54
60
|
### Fixed
|
|
55
61
|
|
|
56
|
-
- Restored a visible keyboard focus outline for `Checkbox` keyboard users by making the hidden input a Tailwind `peer` and mirroring its `peer-focus-visible` state onto the visible container so Tab navigation shows a clear indicator ([#1008](https://github.com/MetaMask/metamask-design-system/pull/1008))
|
|
62
|
+
- Restored a visible keyboard focus outline for `Checkbox` keyboard users by making the hidden input a Tailwind `peer` and mirroring its `peer-focus-visible` state onto the visible container so Tab navigation shows a clear indicator ([#1008](https://github.com/MetaMask/metamask-design-system/pull/1008))
|
|
57
63
|
|
|
58
64
|
## [0.12.0]
|
|
59
65
|
|
|
@@ -191,8 +197,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
191
197
|
### Added
|
|
192
198
|
|
|
193
199
|
- New icons (AppleLogo, Backspace, Candlestick, Clear, MetamaskFoxOutline) ([#798](https://github.com/MetaMask/metamask-design-system/pull/798))
|
|
194
|
-
|
|
195
|
-
- Figma code connect files for all components ([#766](https://github.com/MetaMask/metamask-design-system/pull/766)), ([#791](https://github.com/MetaMask/metamask-design-system/pull/791)), ([#795](https://github.com/MetaMask/metamask-design-system/pull/795)), ([#796](https://github.com/MetaMask/metamask-design-system/pull/796)), ([#794](https://github.com/MetaMask/metamask-design-system/pull/794)), ([#792](https://github.com/MetaMask/metamask-design-system/pull/792))
|
|
200
|
+
- Figma code connect files for all components ([#766](https://github.com/MetaMask/metamask-design-system/pull/766), [#791](https://github.com/MetaMask/metamask-design-system/pull/791), [#795](https://github.com/MetaMask/metamask-design-system/pull/795), [#796](https://github.com/MetaMask/metamask-design-system/pull/796), [#794](https://github.com/MetaMask/metamask-design-system/pull/794), [#792](https://github.com/MetaMask/metamask-design-system/pull/792))
|
|
196
201
|
|
|
197
202
|
### Changed
|
|
198
203
|
|
|
@@ -241,7 +246,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
241
246
|
- Full TypeScript support with type definitions and enums
|
|
242
247
|
- Tailwind CSS integration with design token support
|
|
243
248
|
|
|
244
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.
|
|
249
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.1...HEAD
|
|
250
|
+
[0.17.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.0...@metamask/design-system-react@0.17.1
|
|
245
251
|
[0.17.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.16.0...@metamask/design-system-react@0.17.0
|
|
246
252
|
[0.16.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.15.0...@metamask/design-system-react@0.16.0
|
|
247
253
|
[0.15.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.14.0...@metamask/design-system-react@0.15.0
|
|
@@ -26,6 +26,7 @@ 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 types_1 = require("../../types/index.cjs");
|
|
29
30
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
30
31
|
const BannerBase_1 = require("../BannerBase/index.cjs");
|
|
31
32
|
const Icon_1 = require("../Icon/index.cjs");
|
|
@@ -36,7 +37,7 @@ exports.BannerAlert = (0, react_1.forwardRef)(({ severity = design_system_shared
|
|
|
36
37
|
const backgroundColor = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];
|
|
37
38
|
const borderColorClass = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];
|
|
38
39
|
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:
|
|
40
|
+
return (react_1.default.createElement(BannerBase_1.BannerBase, { ref: ref, startAccessory: react_1.default.createElement(Icon_1.Icon, { name: iconName, color: iconColor, size: types_1.IconSize.Lg, ...iconProps }), backgroundColor: backgroundColor, paddingLeft: 2, className: mergedClassName, ...props }));
|
|
40
41
|
});
|
|
41
42
|
exports.BannerAlert.displayName = 'BannerAlert';
|
|
42
43
|
//# sourceMappingURL=BannerAlert.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA8E;AAC9E,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA2C;AAC3C,
|
|
1
|
+
{"version":3,"file":"BannerAlert.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA8E;AAC9E,+CAA0C;AAE1C,iDAAuC;AACvC,uDAA+C;AAC/C,wDAA2C;AAC3C,4CAA+B;AAE/B,uEAKiC;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;IACvD,MAAM,gBAAgB,GAAG,8DAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,IAAA,kBAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE3E,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,cAAc,EACZ,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,gBAAQ,CAAC,EAAE,KACb,SAAS,GACb,EAEJ,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,eAAe,KACtB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { IconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n MAP_BANNER_ALERT_SEVERITY_BORDER_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 const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n const mergedClassName = twMerge('border-l-4', borderColorClass, className);\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 paddingLeft={2}\n className={mergedClassName}\n {...props}\n />\n );\n },\n);\n\nBannerAlert.displayName = 'BannerAlert';\n"]}
|
|
@@ -4,16 +4,16 @@ exports.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR = exports.MAP_BANNER_ALERT_SEVERI
|
|
|
4
4
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
5
|
const types_1 = require("../../types/index.cjs");
|
|
6
6
|
exports.MAP_BANNER_ALERT_SEVERITY_ICON_NAME = {
|
|
7
|
-
info:
|
|
8
|
-
success:
|
|
9
|
-
warning:
|
|
10
|
-
danger:
|
|
7
|
+
info: types_1.IconName.Info,
|
|
8
|
+
success: types_1.IconName.Confirmation,
|
|
9
|
+
warning: types_1.IconName.Danger,
|
|
10
|
+
danger: types_1.IconName.Danger,
|
|
11
11
|
};
|
|
12
12
|
exports.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = {
|
|
13
|
-
info:
|
|
14
|
-
success:
|
|
15
|
-
warning:
|
|
16
|
-
danger:
|
|
13
|
+
info: types_1.IconColor.PrimaryDefault,
|
|
14
|
+
success: types_1.IconColor.SuccessDefault,
|
|
15
|
+
warning: types_1.IconColor.WarningDefault,
|
|
16
|
+
danger: types_1.IconColor.ErrorDefault,
|
|
17
17
|
};
|
|
18
18
|
exports.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = {
|
|
19
19
|
info: types_1.BoxBackgroundColor.PrimaryMuted,
|
|
@@ -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,kFAA8E;AAE9E,iDAKqB;AAER,QAAA,mCAAmC,GAG5C;IACF,IAAI,EAAE,gBAAQ,CAAC,IAAI;IACnB,OAAO,EAAE,gBAAQ,CAAC,YAAY;IAC9B,OAAO,EAAE,gBAAQ,CAAC,MAAM;IACxB,MAAM,EAAE,gBAAQ,CAAC,MAAM;CACxB,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,IAAI,EAAE,iBAAS,CAAC,cAAc;IAC9B,OAAO,EAAE,iBAAS,CAAC,cAAc;IACjC,OAAO,EAAE,iBAAS,CAAC,cAAc;IACjC,MAAM,EAAE,iBAAS,CAAC,YAAY;CAC/B,CAAC;AAEW,QAAA,0CAA0C,GAGnD;IACF,IAAI,EAAE,0BAAkB,CAAC,YAAY;IACrC,OAAO,EAAE,0BAAkB,CAAC,YAAY;IACxC,OAAO,EAAE,0BAAkB,CAAC,YAAY;IACxC,MAAM,EAAE,0BAAkB,CAAC,UAAU;CACtC,CAAC;AAEW,QAAA,sCAAsC,GAG/C;IACF,IAAI,EAAE,sBAAc,CAAC,cAAc;IACnC,OAAO,EAAE,sBAAc,CAAC,cAAc;IACtC,OAAO,EAAE,sBAAc,CAAC,cAAc;IACtC,MAAM,EAAE,sBAAc,CAAC,YAAY;CACpC,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\n\nimport {\n BoxBackgroundColor,\n BoxBorderColor,\n IconColor,\n IconName,\n} from '../../types';\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n IconName\n> = {\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 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 info: BoxBackgroundColor.PrimaryMuted,\n success: BoxBackgroundColor.SuccessMuted,\n warning: BoxBackgroundColor.WarningMuted,\n danger: BoxBackgroundColor.ErrorMuted,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n BoxBorderColor\n> = {\n info: BoxBorderColor.PrimaryDefault,\n success: BoxBorderColor.SuccessDefault,\n warning: BoxBorderColor.WarningDefault,\n danger: BoxBorderColor.ErrorDefault,\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { BannerAlertSeverity
|
|
2
|
-
import { BoxBackgroundColor, BoxBorderColor } from "../../types/index.cjs";
|
|
1
|
+
import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
|
|
2
|
+
import { BoxBackgroundColor, BoxBorderColor, IconColor, IconName } from "../../types/index.cjs";
|
|
3
3
|
export declare const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconName>;
|
|
4
4
|
export declare const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconColor>;
|
|
5
5
|
export declare const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBackgroundColor>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BannerAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAE9E,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,8BAAoB;AAErB,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,QAAQ,CAMT,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,SAAS,CAMV,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAC7D,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,kBAAkB,CAMnB,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CACzD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,cAAc,CAMf,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { BannerAlertSeverity
|
|
2
|
-
import { BoxBackgroundColor, BoxBorderColor } from "../../types/index.mjs";
|
|
1
|
+
import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
|
|
2
|
+
import { BoxBackgroundColor, BoxBorderColor, IconColor, IconName } from "../../types/index.mjs";
|
|
3
3
|
export declare const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconName>;
|
|
4
4
|
export declare const MAP_BANNER_ALERT_SEVERITY_ICON_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], IconColor>;
|
|
5
5
|
export declare const MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR: Record<(typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity], BoxBackgroundColor>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BannerAlert.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAE9E,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,8BAAoB;AAErB,eAAO,MAAM,mCAAmC,EAAE,MAAM,CACtD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,QAAQ,CAMT,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,SAAS,CAMV,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAC7D,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,kBAAkB,CAMnB,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CACzD,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAC9D,cAAc,CAMf,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { BannerAlertSeverity
|
|
2
|
-
import { BoxBackgroundColor, BoxBorderColor } from "../../types/index.mjs";
|
|
1
|
+
import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
|
|
2
|
+
import { BoxBackgroundColor, BoxBorderColor, IconColor, IconName } from "../../types/index.mjs";
|
|
3
3
|
export const MAP_BANNER_ALERT_SEVERITY_ICON_NAME = {
|
|
4
4
|
info: IconName.Info,
|
|
5
5
|
success: IconName.Confirmation,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.constants.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BannerAlert.constants.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAE9E,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,8BAAoB;AAErB,MAAM,CAAC,MAAM,mCAAmC,GAG5C;IACF,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,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,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;AAEF,MAAM,CAAC,MAAM,sCAAsC,GAG/C;IACF,IAAI,EAAE,cAAc,CAAC,cAAc;IACnC,OAAO,EAAE,cAAc,CAAC,cAAc;IACtC,OAAO,EAAE,cAAc,CAAC,cAAc;IACtC,MAAM,EAAE,cAAc,CAAC,YAAY;CACpC,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\n\nimport {\n BoxBackgroundColor,\n BoxBorderColor,\n IconColor,\n IconName,\n} from '../../types';\n\nexport const MAP_BANNER_ALERT_SEVERITY_ICON_NAME: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n IconName\n> = {\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 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 info: BoxBackgroundColor.PrimaryMuted,\n success: BoxBackgroundColor.SuccessMuted,\n warning: BoxBackgroundColor.WarningMuted,\n danger: BoxBackgroundColor.ErrorMuted,\n};\n\nexport const MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR: Record<\n (typeof BannerAlertSeverity)[keyof typeof BannerAlertSeverity],\n BoxBorderColor\n> = {\n info: BoxBorderColor.PrimaryDefault,\n success: BoxBorderColor.SuccessDefault,\n warning: BoxBorderColor.WarningDefault,\n danger: BoxBorderColor.ErrorDefault,\n};\n"]}
|
|
@@ -42,7 +42,7 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
|
|
|
42
42
|
nonce?: string | undefined;
|
|
43
43
|
tabIndex?: number | undefined;
|
|
44
44
|
disabled?: boolean | undefined;
|
|
45
|
-
size?: import("
|
|
45
|
+
size?: import("../../types/index.cjs").ButtonBaseSize | undefined;
|
|
46
46
|
formAction?: string | undefined;
|
|
47
47
|
formEncType?: string | undefined;
|
|
48
48
|
formMethod?: string | undefined;
|
|
@@ -297,10 +297,10 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
|
|
|
297
297
|
isLoading?: boolean | undefined;
|
|
298
298
|
loadingText?: string | undefined;
|
|
299
299
|
loadingTextProps?: Partial<import("../index.cjs").TextProps> | undefined;
|
|
300
|
-
startIconName?: import("
|
|
300
|
+
startIconName?: import("../Icon/index.cjs").IconName | undefined;
|
|
301
301
|
startIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
|
|
302
302
|
startAccessory?: React.ReactNode;
|
|
303
|
-
endIconName?: import("
|
|
303
|
+
endIconName?: import("../Icon/index.cjs").IconName | undefined;
|
|
304
304
|
endIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
|
|
305
305
|
endAccessory?: React.ReactNode;
|
|
306
306
|
isDisabled?: boolean | undefined;
|
|
@@ -352,7 +352,7 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
|
|
|
352
352
|
nonce?: string | undefined;
|
|
353
353
|
tabIndex?: number | undefined;
|
|
354
354
|
disabled?: boolean | undefined;
|
|
355
|
-
size?: import("
|
|
355
|
+
size?: import("../../types/index.cjs").ButtonBaseSize | undefined;
|
|
356
356
|
formAction?: string | undefined;
|
|
357
357
|
formEncType?: string | undefined;
|
|
358
358
|
formMethod?: string | undefined;
|
|
@@ -607,10 +607,10 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
|
|
|
607
607
|
isLoading?: boolean | undefined;
|
|
608
608
|
loadingText?: string | undefined;
|
|
609
609
|
loadingTextProps?: Partial<import("../index.cjs").TextProps> | undefined;
|
|
610
|
-
startIconName?: import("
|
|
610
|
+
startIconName?: import("../Icon/index.cjs").IconName | undefined;
|
|
611
611
|
startIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
|
|
612
612
|
startAccessory?: React.ReactNode;
|
|
613
|
-
endIconName?: import("
|
|
613
|
+
endIconName?: import("../Icon/index.cjs").IconName | undefined;
|
|
614
614
|
endIconProps?: Partial<import("../Icon/index.cjs").IconProps> | undefined;
|
|
615
615
|
endAccessory?: React.ReactNode;
|
|
616
616
|
isDisabled?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;
|
|
1
|
+
{"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}
|
|
@@ -42,7 +42,7 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
|
|
|
42
42
|
nonce?: string | undefined;
|
|
43
43
|
tabIndex?: number | undefined;
|
|
44
44
|
disabled?: boolean | undefined;
|
|
45
|
-
size?: import("
|
|
45
|
+
size?: import("../../types/index.mjs").ButtonBaseSize | undefined;
|
|
46
46
|
formAction?: string | undefined;
|
|
47
47
|
formEncType?: string | undefined;
|
|
48
48
|
formMethod?: string | undefined;
|
|
@@ -297,10 +297,10 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
|
|
|
297
297
|
isLoading?: boolean | undefined;
|
|
298
298
|
loadingText?: string | undefined;
|
|
299
299
|
loadingTextProps?: Partial<import("../index.mjs").TextProps> | undefined;
|
|
300
|
-
startIconName?: import("
|
|
300
|
+
startIconName?: import("../Icon/index.mjs").IconName | undefined;
|
|
301
301
|
startIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
|
|
302
302
|
startAccessory?: React.ReactNode;
|
|
303
|
-
endIconName?: import("
|
|
303
|
+
endIconName?: import("../Icon/index.mjs").IconName | undefined;
|
|
304
304
|
endIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
|
|
305
305
|
endAccessory?: React.ReactNode;
|
|
306
306
|
isDisabled?: boolean | undefined;
|
|
@@ -352,7 +352,7 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
|
|
|
352
352
|
nonce?: string | undefined;
|
|
353
353
|
tabIndex?: number | undefined;
|
|
354
354
|
disabled?: boolean | undefined;
|
|
355
|
-
size?: import("
|
|
355
|
+
size?: import("../../types/index.mjs").ButtonBaseSize | undefined;
|
|
356
356
|
formAction?: string | undefined;
|
|
357
357
|
formEncType?: string | undefined;
|
|
358
358
|
formMethod?: string | undefined;
|
|
@@ -607,10 +607,10 @@ export declare const BannerAlert: React.ForwardRefExoticComponent<(Omit<import("
|
|
|
607
607
|
isLoading?: boolean | undefined;
|
|
608
608
|
loadingText?: string | undefined;
|
|
609
609
|
loadingTextProps?: Partial<import("../index.mjs").TextProps> | undefined;
|
|
610
|
-
startIconName?: import("
|
|
610
|
+
startIconName?: import("../Icon/index.mjs").IconName | undefined;
|
|
611
611
|
startIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
|
|
612
612
|
startAccessory?: React.ReactNode;
|
|
613
|
-
endIconName?: import("
|
|
613
|
+
endIconName?: import("../Icon/index.mjs").IconName | undefined;
|
|
614
614
|
endIconProps?: Partial<import("../Icon/index.mjs").IconProps> | undefined;
|
|
615
615
|
endAccessory?: React.ReactNode;
|
|
616
616
|
isDisabled?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;
|
|
1
|
+
{"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,KAAqB,cAAc;AAe1C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA8BvB,CAAC"}
|
|
@@ -7,9 +7,10 @@ function $importDefault(module) {
|
|
|
7
7
|
import { BannerAlertSeverity } from "@metamask-previews/design-system-shared";
|
|
8
8
|
import $React, { forwardRef } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
|
+
import { IconSize } from "../../types/index.mjs";
|
|
10
11
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
11
12
|
import { BannerBase } from "../BannerBase/index.mjs";
|
|
12
|
-
import { Icon
|
|
13
|
+
import { Icon } from "../Icon/index.mjs";
|
|
13
14
|
import { MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR, MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_NAME } from "./BannerAlert.constants.mjs";
|
|
14
15
|
export const BannerAlert = forwardRef(({ severity = BannerAlertSeverity.Info, iconProps, className, ...props }, ref) => {
|
|
15
16
|
const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerAlert.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"BannerAlert.mjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AACvC,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,0CAA0C,EAC1C,sCAAsC,EACtC,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;IACvD,MAAM,gBAAgB,GAAG,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE3E,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,WAAW,EAAE,CAAC,EACd,SAAS,EAAE,eAAe,KACtB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BannerAlertSeverity } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { IconSize } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { BannerBase } from '../BannerBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR,\n MAP_BANNER_ALERT_SEVERITY_BORDER_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 const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n const mergedClassName = twMerge('border-l-4', borderColorClass, className);\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 paddingLeft={2}\n className={mergedClassName}\n {...props}\n />\n );\n },\n);\n\nBannerAlert.displayName = 'BannerAlert';\n"]}
|
|
@@ -49,7 +49,7 @@ exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description,
|
|
|
49
49
|
(isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
|
|
50
50
|
shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-4" },
|
|
51
51
|
react_1.default.createElement(Button_1.Button, { size: types_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
|
|
52
|
-
shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName:
|
|
52
|
+
shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: types_1.IconName.Close, size: types_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));
|
|
53
53
|
});
|
|
54
54
|
exports.BannerBase.displayName = 'BannerBase';
|
|
55
55
|
//# 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 { FontWeight, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport {\n BoxAlignItems,\n BoxBackgroundColor,\n ButtonIconSize,\n ButtonSize,\n BoxFlexDirection,\n IconName,\n} from '../../types';\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 onClick: closeButtonPropsOnClick,\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n className={twMerge('rounded-sm', 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 className={hasContent(title) ? 'mt-1' : undefined}>\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-4\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('ml-3 self-start', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose ?? closeButtonPropsOnClick}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { IconName } from "@metamask-previews/design-system-shared";
|
|
2
1
|
import React from "react";
|
|
3
|
-
import { ButtonSize } from "../../types/index.cjs";
|
|
2
|
+
import { ButtonSize, IconName } from "../../types/index.cjs";
|
|
4
3
|
export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@metamask-previews/design-system-shared").BannerBasePropsShared & Omit<import("../Box/index.cjs").BoxProps, "children"> & {
|
|
5
4
|
titleProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
|
|
6
5
|
descriptionProps?: Partial<import("../Text/index.cjs").TextProps> | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAEV,QAAQ,EACT,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { IconName } from "@metamask-previews/design-system-shared";
|
|
2
1
|
import React from "react";
|
|
3
|
-
import { ButtonSize } from "../../types/index.mjs";
|
|
2
|
+
import { ButtonSize, IconName } from "../../types/index.mjs";
|
|
4
3
|
export declare const BannerBase: React.ForwardRefExoticComponent<(Omit<import("@metamask-previews/design-system-shared").BannerBasePropsShared & Omit<import("../Box/index.mjs").BoxProps, "children"> & {
|
|
5
4
|
titleProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
|
|
6
5
|
descriptionProps?: Partial<import("../Text/index.mjs").TextProps> | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAEV,QAAQ,EACT,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
|
|
@@ -4,10 +4,10 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import { FontWeight, TextVariant
|
|
7
|
+
import { FontWeight, TextVariant } from "@metamask-previews/design-system-shared";
|
|
8
8
|
import $React, { forwardRef } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
|
-
import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize, BoxFlexDirection } from "../../types/index.mjs";
|
|
10
|
+
import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize, BoxFlexDirection, IconName } from "../../types/index.mjs";
|
|
11
11
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
12
12
|
import { Box } from "../Box/index.mjs";
|
|
13
13
|
import { Button } from "../Button/index.mjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontWeight, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport {\n BoxAlignItems,\n BoxBackgroundColor,\n ButtonIconSize,\n ButtonSize,\n BoxFlexDirection,\n IconName,\n} from '../../types';\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 onClick: closeButtonPropsOnClick,\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n className={twMerge('rounded-sm', 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 className={hasContent(title) ? 'mt-1' : undefined}>\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-4\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('ml-3 self-start', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose ?? closeButtonPropsOnClick}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { IconSize } from "../Icon/index.cjs";
|
|
1
2
|
export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
|
|
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: {
|
|
7
|
-
readonly sm:
|
|
8
|
-
readonly md:
|
|
9
|
-
readonly lg:
|
|
8
|
+
readonly sm: IconSize.Md;
|
|
9
|
+
readonly md: IconSize.Lg;
|
|
10
|
+
readonly lg: IconSize.Xl;
|
|
10
11
|
};
|
|
11
12
|
//# sourceMappingURL=ButtonIcon.constants.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { IconSize } from "../Icon/index.mjs";
|
|
1
2
|
export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
|
|
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: {
|
|
7
|
-
readonly sm:
|
|
8
|
-
readonly md:
|
|
9
|
-
readonly lg:
|
|
8
|
+
readonly sm: IconSize.Md;
|
|
9
|
+
readonly md: IconSize.Lg;
|
|
10
|
+
readonly lg: IconSize.Xl;
|
|
10
11
|
};
|
|
11
12
|
//# sourceMappingURL=ButtonIcon.constants.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}
|
|
@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.Icon = void 0;
|
|
7
|
-
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
8
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const types_1 = require("../../types/index.cjs");
|
|
9
9
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
10
10
|
const Icon_constants_1 = require("./Icon.constants.cjs");
|
|
11
11
|
const icons_1 = require("./icons/index.cjs");
|
|
12
|
-
const Icon = ({ name, size =
|
|
12
|
+
const Icon = ({ name, size = types_1.IconSize.Md, color = types_1.IconColor.IconDefault, className, style, ...props }) => {
|
|
13
13
|
if (!name) {
|
|
14
14
|
console.warn('Icon name is required');
|
|
15
15
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAAkD;AAClD,uDAA+C;AAE/C,yDAAkE;AAElE,6CAAgC;AAEzB,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,gBAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,iBAAS,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,MAAM,aAAa,GAAG,aAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,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;AAlCW,QAAA,IAAI,QAkCf","sourcesContent":["import React from 'react';\n\nimport { IconSize, IconColor } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: 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 const IconComponent = Icons[name];\n\n if (!IconComponent) {\n console.warn(`Icon \"${name}\" not found`);\n return null;\n }\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"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.TWCLASSMAP_ICON_SIZE_DIMENSION = void 0;
|
|
4
|
-
const
|
|
4
|
+
const types_1 = require("../../types/index.cjs");
|
|
5
5
|
exports.TWCLASSMAP_ICON_SIZE_DIMENSION = {
|
|
6
|
-
[
|
|
7
|
-
[
|
|
8
|
-
[
|
|
9
|
-
[
|
|
10
|
-
[
|
|
6
|
+
[types_1.IconSize.Xs]: 'w-3 h-3',
|
|
7
|
+
[types_1.IconSize.Sm]: 'w-4 h-4',
|
|
8
|
+
[types_1.IconSize.Md]: 'w-5 h-5',
|
|
9
|
+
[types_1.IconSize.Lg]: 'w-6 h-6',
|
|
10
|
+
[types_1.IconSize.Xl]: 'w-8 h-8', // 32px
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=Icon.constants.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.constants.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"Icon.constants.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAAuC;AAE1B,QAAA,8BAA8B,GAA6B;IACtE,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,gBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string> = {\n [IconSize.Xs]: 'w-3 h-3', // 12px\n [IconSize.Sm]: 'w-4 h-4', // 16px\n [IconSize.Md]: 'w-5 h-5', // 20px\n [IconSize.Lg]: 'w-6 h-6', // 24px\n [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"Icon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMnE,CAAC"}
|