@metamask-previews/design-system-react-native 0.30.2-preview.688b428f → 0.30.2-preview.9bd8bc3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/dist/components/BannerAlert/BannerAlert.cjs +2 -5
  2. package/dist/components/BannerAlert/BannerAlert.cjs.map +1 -1
  3. package/dist/components/BannerAlert/BannerAlert.constants.cjs +4 -7
  4. package/dist/components/BannerAlert/BannerAlert.constants.cjs.map +1 -1
  5. package/dist/components/BannerAlert/BannerAlert.constants.d.cts +1 -2
  6. package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map +1 -1
  7. package/dist/components/BannerAlert/BannerAlert.constants.d.mts +1 -2
  8. package/dist/components/BannerAlert/BannerAlert.constants.d.mts.map +1 -1
  9. package/dist/components/BannerAlert/BannerAlert.constants.mjs +4 -7
  10. package/dist/components/BannerAlert/BannerAlert.constants.mjs.map +1 -1
  11. package/dist/components/BannerAlert/BannerAlert.d.cts.map +1 -1
  12. package/dist/components/BannerAlert/BannerAlert.d.mts.map +1 -1
  13. package/dist/components/BannerAlert/BannerAlert.mjs +3 -6
  14. package/dist/components/BannerAlert/BannerAlert.mjs.map +1 -1
  15. package/dist/components/BannerBase/BannerBase.cjs +5 -8
  16. package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
  17. package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
  18. package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
  19. package/dist/components/BannerBase/BannerBase.mjs +6 -9
  20. package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
  21. package/dist/components/BottomSheet/BottomSheet.cjs +12 -7
  22. package/dist/components/BottomSheet/BottomSheet.cjs.map +1 -1
  23. package/dist/components/BottomSheet/BottomSheet.d.cts +1 -0
  24. package/dist/components/BottomSheet/BottomSheet.d.cts.map +1 -1
  25. package/dist/components/BottomSheet/BottomSheet.d.mts +1 -0
  26. package/dist/components/BottomSheet/BottomSheet.d.mts.map +1 -1
  27. package/dist/components/BottomSheet/BottomSheet.mjs +12 -7
  28. package/dist/components/BottomSheet/BottomSheet.mjs.map +1 -1
  29. package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs +20 -21
  30. package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs.map +1 -1
  31. package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.cjs +16 -9
  32. package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.cjs.map +1 -1
  33. package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.d.cts +14 -7
  34. package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.d.cts.map +1 -1
  35. package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.d.mts +14 -7
  36. package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.d.mts.map +1 -1
  37. package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.mjs +14 -8
  38. package/dist/components/BottomSheetDialog/BottomSheetDialog.constants.mjs.map +1 -1
  39. package/dist/components/BottomSheetDialog/BottomSheetDialog.d.cts +1 -0
  40. package/dist/components/BottomSheetDialog/BottomSheetDialog.d.cts.map +1 -1
  41. package/dist/components/BottomSheetDialog/BottomSheetDialog.d.mts +1 -0
  42. package/dist/components/BottomSheetDialog/BottomSheetDialog.d.mts.map +1 -1
  43. package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs +24 -25
  44. package/dist/components/BottomSheetDialog/BottomSheetDialog.mjs.map +1 -1
  45. package/dist/components/BottomSheetDialog/BottomSheetDialog.types.cjs.map +1 -1
  46. package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.cts +4 -0
  47. package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.cts.map +1 -1
  48. package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.mts +4 -0
  49. package/dist/components/BottomSheetDialog/BottomSheetDialog.types.d.mts.map +1 -1
  50. package/dist/components/BottomSheetDialog/BottomSheetDialog.types.mjs.map +1 -1
  51. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.cjs +21 -5
  52. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.cjs.map +1 -1
  53. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.cjs +5 -3
  54. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.cjs.map +1 -1
  55. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.d.cts +3 -1
  56. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.d.cts.map +1 -1
  57. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.d.mts +3 -1
  58. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.d.mts.map +1 -1
  59. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.mjs +4 -2
  60. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.mjs.map +1 -1
  61. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.cts +6 -2
  62. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.cts.map +1 -1
  63. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.mts +6 -2
  64. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.mts.map +1 -1
  65. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.mjs +24 -7
  66. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.mjs.map +1 -1
  67. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.cjs.map +1 -1
  68. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.d.cts +13 -0
  69. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.d.cts.map +1 -1
  70. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.d.mts +13 -0
  71. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.d.mts.map +1 -1
  72. package/dist/components/BottomSheetOverlay/BottomSheetOverlay.types.mjs.map +1 -1
  73. package/dist/components/BottomSheetOverlay/index.cjs.map +1 -1
  74. package/dist/components/BottomSheetOverlay/index.d.cts +1 -1
  75. package/dist/components/BottomSheetOverlay/index.d.cts.map +1 -1
  76. package/dist/components/BottomSheetOverlay/index.d.mts +1 -1
  77. package/dist/components/BottomSheetOverlay/index.d.mts.map +1 -1
  78. package/dist/components/BottomSheetOverlay/index.mjs.map +1 -1
  79. package/dist/components/Tag/Tag.constants.cjs +2 -2
  80. package/dist/components/Tag/Tag.constants.cjs.map +1 -1
  81. package/dist/components/Tag/Tag.constants.mjs +2 -2
  82. package/dist/components/Tag/Tag.constants.mjs.map +1 -1
  83. package/dist/components/TitleAlert/TitleAlert.cjs +3 -5
  84. package/dist/components/TitleAlert/TitleAlert.cjs.map +1 -1
  85. package/dist/components/TitleAlert/TitleAlert.d.cts +1 -3
  86. package/dist/components/TitleAlert/TitleAlert.d.cts.map +1 -1
  87. package/dist/components/TitleAlert/TitleAlert.d.mts +1 -3
  88. package/dist/components/TitleAlert/TitleAlert.d.mts.map +1 -1
  89. package/dist/components/TitleAlert/TitleAlert.mjs +3 -5
  90. package/dist/components/TitleAlert/TitleAlert.mjs.map +1 -1
  91. package/dist/components/TitleAlert/TitleAlert.types.cjs.map +1 -1
  92. package/dist/components/TitleAlert/TitleAlert.types.d.cts +2 -2
  93. package/dist/components/TitleAlert/TitleAlert.types.d.mts +2 -2
  94. package/dist/components/TitleAlert/TitleAlert.types.mjs.map +1 -1
  95. package/dist/components/index.cjs.map +1 -1
  96. package/dist/components/index.d.cts +1 -1
  97. package/dist/components/index.d.cts.map +1 -1
  98. package/dist/components/index.d.mts +1 -1
  99. package/dist/components/index.d.mts.map +1 -1
  100. package/dist/components/index.mjs.map +1 -1
  101. package/package.json +5 -5
@@ -5,18 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.BannerAlert = void 0;
7
7
  const design_system_shared_1 = require("@metamask-previews/design-system-shared");
8
- const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
9
8
  const react_1 = __importDefault(require("react"));
10
9
  const BannerBase_1 = require("../BannerBase/index.cjs");
11
10
  const Icon_1 = require("../Icon/index.cjs");
12
11
  const BannerAlert_constants_1 = require("./BannerAlert.constants.cjs");
13
- const BannerAlert = ({ severity = design_system_shared_1.BannerAlertSeverity.Info, iconProps, style, ...props }) => {
14
- const tw = (0, design_system_twrnc_preset_1.useTailwind)();
12
+ const BannerAlert = ({ severity = design_system_shared_1.BannerAlertSeverity.Info, iconProps, ...props }) => {
15
13
  const iconName = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];
16
14
  const iconColor = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];
17
15
  const backgroundColor = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];
18
- const borderColorClass = BannerAlert_constants_1.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];
19
- return (<BannerBase_1.BannerBase startAccessory={<Icon_1.Icon name={iconName} color={iconColor} size={design_system_shared_1.IconSize.Lg} {...iconProps}/>} backgroundColor={backgroundColor} paddingLeft={2} style={[tw.style(`border-l-4 ${borderColorClass}`), style]} {...props}/>);
16
+ return (<BannerBase_1.BannerBase startAccessory={<Icon_1.Icon name={iconName} color={iconColor} size={design_system_shared_1.IconSize.Lg} {...iconProps}/>} backgroundColor={backgroundColor} {...props}/>);
20
17
  };
21
18
  exports.BannerAlert = BannerAlert;
22
19
  //# sourceMappingURL=BannerAlert.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"BannerAlert.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAAwF;AACxF,8FAA4E;AAC5E,kDAA0B;AAE1B,wDAA2C;AAC3C,4CAA+B;AAE/B,uEAKiC;AAG1B,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,GAAG,0CAAmB,CAAC,IAAI,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,2DAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,4DAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,kEAA0C,CAAC,QAAQ,CAAC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,8DAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,OAAO,CACL,CAAC,uBAAU,CACT,cAAc,CAAC,CACb,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,SAAS,CAAC,EACd,CACH,CACD,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,gBAAgB,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,WAAW,eA2BtB","sourcesContent":["import { BannerAlertSeverity, IconSize } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React 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 MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert: React.FC<BannerAlertProps> = ({\n severity = BannerAlertSeverity.Info,\n iconProps,\n style,\n ...props\n}) => {\n const tw = useTailwind();\n const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n return (\n <BannerBase\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 style={[tw.style(`border-l-4 ${borderColorClass}`), style]}\n {...props}\n />\n );\n};\n"]}
1
+ {"version":3,"file":"BannerAlert.cjs","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAAwF;AACxF,kDAA0B;AAE1B,wDAA2C;AAC3C,4CAA+B;AAE/B,uEAIiC;AAG1B,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,GAAG,0CAAmB,CAAC,IAAI,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,2DAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,4DAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,kEAA0C,CAAC,QAAQ,CAAC,CAAC;IAC7E,OAAO,CACL,CAAC,uBAAU,CACT,cAAc,CAAC,CACb,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,SAAS,CAAC,EACd,CACH,CACD,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,WAAW,eAsBtB","sourcesContent":["import { BannerAlertSeverity, IconSize } from '@metamask-previews/design-system-shared';\nimport React 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: React.FC<BannerAlertProps> = ({\n severity = BannerAlertSeverity.Info,\n iconProps,\n ...props\n}) => {\n const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n return (\n <BannerBase\n startAccessory={\n <Icon\n name={iconName}\n color={iconColor}\n size={IconSize.Lg}\n {...iconProps}\n />\n }\n backgroundColor={backgroundColor}\n {...props}\n />\n );\n};\n"]}
@@ -1,29 +1,26 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR = exports.MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR = exports.MAP_BANNER_ALERT_SEVERITY_ICON_COLOR = exports.MAP_BANNER_ALERT_SEVERITY_ICON_NAME = void 0;
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,kFAMiD;AAEpC,QAAA,mCAAmC,GAG5C;IACF,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,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,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;AAEW,QAAA,sCAAsC,GAG/C;IACF,IAAI,EAAE,qCAAc,CAAC,cAAc;IACnC,OAAO,EAAE,qCAAc,CAAC,cAAc;IACtC,OAAO,EAAE,qCAAc,CAAC,cAAc;IACtC,MAAM,EAAE,qCAAc,CAAC,YAAY;CACpC,CAAC","sourcesContent":["import {\n BannerAlertSeverity,\n BoxBackgroundColor,\n BoxBorderColor,\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 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
+ {"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, BoxBorderColor, IconColor, IconName } from "@metamask-previews/design-system-shared";
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,cAAc,EACd,SAAS,EACT,QAAQ,EACT,gDAAgD;AAEjD,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
+ {"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, BoxBorderColor, IconColor, IconName } from "@metamask-previews/design-system-shared";
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,cAAc,EACd,SAAS,EACT,QAAQ,EACT,gDAAgD;AAEjD,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
+ {"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, BoxBorderColor, IconColor, IconName } from "@metamask-previews/design-system-shared";
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,cAAc,EACd,SAAS,EACT,QAAQ,EACT,gDAAgD;AAEjD,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 {\n BannerAlertSeverity,\n BoxBackgroundColor,\n BoxBorderColor,\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 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
+ {"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":"AAEA,OAAO,KAAK,cAAc;AAW1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2BlD,CAAC"}
1
+ {"version":3,"file":"BannerAlert.d.cts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsBlD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAW1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2BlD,CAAC"}
1
+ {"version":3,"file":"BannerAlert.d.mts","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsBlD,CAAC"}
@@ -5,18 +5,15 @@ function $importDefault(module) {
5
5
  return module;
6
6
  }
7
7
  import { BannerAlertSeverity, IconSize } from "@metamask-previews/design-system-shared";
8
- import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
9
8
  import $React from "react";
10
9
  const React = $importDefault($React);
11
10
  import { BannerBase } from "../BannerBase/index.mjs";
12
11
  import { Icon } from "../Icon/index.mjs";
13
- import { MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_NAME, MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR } from "./BannerAlert.constants.mjs";
14
- export const BannerAlert = ({ severity = BannerAlertSeverity.Info, iconProps, style, ...props }) => {
15
- const tw = useTailwind();
12
+ import { MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_COLOR, MAP_BANNER_ALERT_SEVERITY_ICON_NAME } from "./BannerAlert.constants.mjs";
13
+ export const BannerAlert = ({ severity = BannerAlertSeverity.Info, iconProps, ...props }) => {
16
14
  const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];
17
15
  const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];
18
16
  const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];
19
- const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];
20
- return (<BannerBase startAccessory={<Icon name={iconName} color={iconColor} size={IconSize.Lg} {...iconProps}/>} backgroundColor={backgroundColor} paddingLeft={2} style={[tw.style(`border-l-4 ${borderColorClass}`), style]} {...props}/>);
17
+ return (<BannerBase startAccessory={<Icon name={iconName} color={iconColor} size={IconSize.Lg} {...iconProps}/>} backgroundColor={backgroundColor} {...props}/>);
21
18
  };
22
19
  //# 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,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,0CAA0C,EAC1C,oCAAoC,EACpC,mCAAmC,EACnC,sCAAsC,EACvC,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EACnC,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,mCAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,oCAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,0CAA0C,CAAC,QAAQ,CAAC,CAAC;IAC7E,MAAM,gBAAgB,GAAG,sCAAsC,CAAC,QAAQ,CAAC,CAAC;IAC1E,OAAO,CACL,CAAC,UAAU,CACT,cAAc,CAAC,CACb,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,SAAS,CAAC,EACd,CACH,CACD,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,gBAAgB,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { BannerAlertSeverity, IconSize } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React 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 MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR,\n} from './BannerAlert.constants';\nimport type { BannerAlertProps } from './BannerAlert.types';\n\nexport const BannerAlert: React.FC<BannerAlertProps> = ({\n severity = BannerAlertSeverity.Info,\n iconProps,\n style,\n ...props\n}) => {\n const tw = useTailwind();\n const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n const borderColorClass = MAP_BANNER_ALERT_SEVERITY_BORDER_COLOR[severity];\n return (\n <BannerBase\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 style={[tw.style(`border-l-4 ${borderColorClass}`), style]}\n {...props}\n />\n );\n};\n"]}
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,MAAK,cAAc;;AAE1B,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,GAA+B,CAAC,EACtD,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EACnC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,mCAAmC,CAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,oCAAoC,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,0CAA0C,CAAC,QAAQ,CAAC,CAAC;IAC7E,OAAO,CACL,CAAC,UAAU,CACT,cAAc,CAAC,CACb,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,SAAS,CAAC,EACd,CACH,CACD,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { BannerAlertSeverity, IconSize } from '@metamask-previews/design-system-shared';\nimport React 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: React.FC<BannerAlertProps> = ({\n severity = BannerAlertSeverity.Info,\n iconProps,\n ...props\n}) => {\n const iconName = MAP_BANNER_ALERT_SEVERITY_ICON_NAME[severity];\n const iconColor = MAP_BANNER_ALERT_SEVERITY_ICON_COLOR[severity];\n const backgroundColor = MAP_BANNER_ALERT_SEVERITY_BACKGROUND_COLOR[severity];\n return (\n <BannerBase\n startAccessory={\n <Icon\n name={iconName}\n color={iconColor}\n size={IconSize.Lg}\n {...iconProps}\n />\n }\n backgroundColor={backgroundColor}\n {...props}\n />\n );\n};\n"]}
@@ -17,10 +17,7 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
17
17
  const { accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner', twClassName: closeButtonTwClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
18
18
  const shouldShowCloseButton = Boolean(onClose);
19
19
  const shouldShowActionButton = Boolean(actionButtonOnPress);
20
- const mergedCloseButtonTwClassName = closeButtonTwClassName
21
- ? `ml-3 ${closeButtonTwClassName}`
22
- : 'ml-3';
23
- return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={design_system_shared_1.BoxAlignItems.Start} gap={2} backgroundColor={design_system_shared_1.BoxBackgroundColor.BackgroundDefault} padding={3} twClassName={(0, design_system_shared_1.mergeTwClassName)('rounded-sm', twClassName)} {...props}>
20
+ return (<Box_1.Box 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} twClassName={(0, design_system_shared_1.mergeTwClassName)('rounded-xl', twClassName)} {...props}>
24
21
  {startAccessory}
25
22
 
26
23
  <Box_1.Box twClassName="flex-1">
@@ -29,7 +26,7 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
29
26
  {title}
30
27
  </Text_1.Text>) : (title))}
31
28
 
32
- {hasContent(description) && (<Box_1.Box twClassName={hasContent(title) ? 'mt-1' : undefined}>
29
+ {hasContent(description) && (<Box_1.Box>
33
30
  {isTextContent(description) ? (<Text_1.Text variant={design_system_shared_1.TextVariant.BodySm} {...descriptionProps}>
34
31
  {description}
35
32
  </Text_1.Text>) : (description)}
@@ -40,14 +37,14 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
40
37
  {children}
41
38
  </Text_1.Text>) : (children))}
42
39
 
43
- {shouldShowActionButton && (<Box_1.Box twClassName="mt-4">
44
- <Button_1.Button size={design_system_shared_1.ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps}>
40
+ {shouldShowActionButton && (<Box_1.Box twClassName="mt-2">
41
+ <Button_1.Button size={design_system_shared_1.ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps} variant={design_system_shared_1.ButtonVariant.Secondary}>
45
42
  {actionButtonLabel}
46
43
  </Button_1.Button>
47
44
  </Box_1.Box>)}
48
45
  </Box_1.Box>
49
46
 
50
- {shouldShowCloseButton && (<ButtonIcon_1.ButtonIcon twClassName={mergedCloseButtonTwClassName} iconName={design_system_shared_1.IconName.Close} size={design_system_shared_1.ButtonIconSize.Sm} accessibilityLabel={closeButtonAccessibilityLabel} onPress={onClose} {...resolvedCloseButtonProps}/>)}
47
+ {shouldShowCloseButton && (<ButtonIcon_1.ButtonIcon twClassName={(0, design_system_shared_1.mergeTwClassName)('-mt-1', closeButtonTwClassName)} iconName={design_system_shared_1.IconName.Close} size={design_system_shared_1.ButtonIconSize.Md} accessibilityLabel={closeButtonAccessibilityLabel} onPress={onClose} {...resolvedCloseButtonProps}/>)}
51
48
  </Box_1.Box>);
52
49
  };
53
50
  exports.BannerBase = BannerBase;
@@ -1 +1 @@
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 FontWeight,\n IconName,\n mergeTwClassName,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\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: React.FC<BannerBaseProps> = ({\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n twClassName,\n ...props\n}) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n twClassName: closeButtonTwClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n const mergedCloseButtonTwClassName = closeButtonTwClassName\n ? `ml-3 ${closeButtonTwClassName}`\n : 'ml-3';\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n twClassName={mergeTwClassName('rounded-sm', twClassName)}\n {...props}\n >\n {startAccessory}\n\n <Box twClassName=\"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 twClassName={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 twClassName=\"mt-4\">\n <Button\n size={ButtonSize.Md}\n onPress={actionButtonOnPress}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n twClassName={mergedCloseButtonTwClassName}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n accessibilityLabel={closeButtonAccessibilityLabel}\n onPress={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n};\n"]}
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 mergeTwClassName,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\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: React.FC<BannerBaseProps> = ({\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n twClassName,\n ...props\n}) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n twClassName: closeButtonTwClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingVertical={3}\n paddingHorizontal={4}\n twClassName={mergeTwClassName('rounded-xl', twClassName)}\n {...props}\n >\n {startAccessory}\n\n <Box twClassName=\"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 twClassName=\"mt-2\">\n <Button\n size={ButtonSize.Md}\n onPress={actionButtonOnPress}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n accessibilityLabel={closeButtonAccessibilityLabel}\n onPress={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuGhD,CAAC"}
1
+ {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqGhD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuGhD,CAAC"}
1
+ {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqGhD,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, mergeTwClassName, TextVariant } from "@metamask-previews/design-system-shared";
7
+ import { BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, ButtonVariant, FontWeight, IconName, mergeTwClassName, TextVariant } from "@metamask-previews/design-system-shared";
8
8
  import $React from "react";
9
9
  const React = $importDefault($React);
10
10
  import { Box } from "../Box/index.mjs";
@@ -18,10 +18,7 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
18
18
  const { accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner', twClassName: closeButtonTwClassName, ...resolvedCloseButtonProps } = closeButtonProps ?? {};
19
19
  const shouldShowCloseButton = Boolean(onClose);
20
20
  const shouldShowActionButton = Boolean(actionButtonOnPress);
21
- const mergedCloseButtonTwClassName = closeButtonTwClassName
22
- ? `ml-3 ${closeButtonTwClassName}`
23
- : 'ml-3';
24
- return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} gap={2} backgroundColor={BoxBackgroundColor.BackgroundDefault} padding={3} twClassName={mergeTwClassName('rounded-sm', twClassName)} {...props}>
21
+ return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} gap={4} backgroundColor={BoxBackgroundColor.BackgroundDefault} paddingVertical={3} paddingHorizontal={4} twClassName={mergeTwClassName('rounded-xl', twClassName)} {...props}>
25
22
  {startAccessory}
26
23
 
27
24
  <Box twClassName="flex-1">
@@ -30,7 +27,7 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
30
27
  {title}
31
28
  </Text>) : (title))}
32
29
 
33
- {hasContent(description) && (<Box twClassName={hasContent(title) ? 'mt-1' : undefined}>
30
+ {hasContent(description) && (<Box>
34
31
  {isTextContent(description) ? (<Text variant={TextVariant.BodySm} {...descriptionProps}>
35
32
  {description}
36
33
  </Text>) : (description)}
@@ -41,14 +38,14 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
41
38
  {children}
42
39
  </Text>) : (children))}
43
40
 
44
- {shouldShowActionButton && (<Box twClassName="mt-4">
45
- <Button size={ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps}>
41
+ {shouldShowActionButton && (<Box twClassName="mt-2">
42
+ <Button size={ButtonSize.Md} onPress={actionButtonOnPress} {...resolvedActionButtonProps} variant={ButtonVariant.Secondary}>
46
43
  {actionButtonLabel}
47
44
  </Button>
48
45
  </Box>)}
49
46
  </Box>
50
47
 
51
- {shouldShowCloseButton && (<ButtonIcon twClassName={mergedCloseButtonTwClassName} iconName={IconName.Close} size={ButtonIconSize.Sm} accessibilityLabel={closeButtonAccessibilityLabel} onPress={onClose} {...resolvedCloseButtonProps}/>)}
48
+ {shouldShowCloseButton && (<ButtonIcon twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)} iconName={IconName.Close} size={ButtonIconSize.Md} accessibilityLabel={closeButtonAccessibilityLabel} onPress={onClose} {...resolvedCloseButtonProps}/>)}
52
49
  </Box>);
53
50
  };
54
51
  //# sourceMappingURL=BannerBase.mjs.map
@@ -1 +1 @@
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 FontWeight,\n IconName,\n mergeTwClassName,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\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: React.FC<BannerBaseProps> = ({\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n twClassName,\n ...props\n}) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n twClassName: closeButtonTwClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n const mergedCloseButtonTwClassName = closeButtonTwClassName\n ? `ml-3 ${closeButtonTwClassName}`\n : 'ml-3';\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n twClassName={mergeTwClassName('rounded-sm', twClassName)}\n {...props}\n >\n {startAccessory}\n\n <Box twClassName=\"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 twClassName={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 twClassName=\"mt-4\">\n <Button\n size={ButtonSize.Md}\n onPress={actionButtonOnPress}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n twClassName={mergedCloseButtonTwClassName}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n accessibilityLabel={closeButtonAccessibilityLabel}\n onPress={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n};\n"]}
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 mergeTwClassName,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\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: React.FC<BannerBaseProps> = ({\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnPress,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n twClassName,\n ...props\n}) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n twClassName: closeButtonTwClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose);\n const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={4}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n paddingVertical={3}\n paddingHorizontal={4}\n twClassName={mergeTwClassName('rounded-xl', twClassName)}\n {...props}\n >\n {startAccessory}\n\n <Box twClassName=\"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 twClassName=\"mt-2\">\n <Button\n size={ButtonSize.Md}\n onPress={actionButtonOnPress}\n {...resolvedActionButtonProps}\n variant={ButtonVariant.Secondary}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n twClassName={mergeTwClassName('-mt-1', closeButtonTwClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Md}\n accessibilityLabel={closeButtonAccessibilityLabel}\n onPress={onClose}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n};\n"]}
@@ -36,6 +36,7 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ children, onClose, onOpen, goBa
36
36
  const { y: frameY } = (0, react_native_safe_area_context_1.useSafeAreaFrame)();
37
37
  const postCallback = (0, react_1.useRef)(undefined);
38
38
  const bottomSheetDialogRef = (0, react_1.useRef)(null);
39
+ const bottomSheetOverlayRef = (0, react_1.useRef)(null);
39
40
  const didNavigateBackRef = (0, react_1.useRef)(false);
40
41
  const closeRequestedRef = (0, react_1.useRef)(false);
41
42
  const didRunPostCallbackRef = (0, react_1.useRef)(false);
@@ -63,6 +64,12 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ children, onClose, onOpen, goBa
63
64
  callback?.();
64
65
  }
65
66
  }, [goBack, onClose]);
67
+ const onDismissStart = (0, react_1.useCallback)(() => {
68
+ bottomSheetOverlayRef.current?.fadeOut();
69
+ }, []);
70
+ const dismissSheet = (0, react_1.useCallback)((callback) => {
71
+ bottomSheetDialogRef.current?.onCloseDialog(callback);
72
+ }, []);
66
73
  // Dismiss the sheet when Android back button is pressed.
67
74
  (0, react_1.useEffect)(() => {
68
75
  if (react_native_1.Platform.OS !== 'android') {
@@ -70,7 +77,7 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ children, onClose, onOpen, goBa
70
77
  }
71
78
  const hardwareBackPress = () => {
72
79
  if (isInteractable) {
73
- bottomSheetDialogRef.current?.onCloseDialog();
80
+ dismissSheet();
74
81
  }
75
82
  return true;
76
83
  };
@@ -78,7 +85,7 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ children, onClose, onOpen, goBa
78
85
  return () => {
79
86
  subscription.remove();
80
87
  };
81
- }, [isInteractable]);
88
+ }, [dismissSheet, isInteractable]);
82
89
  (0, react_1.useImperativeHandle)(ref, () => ({
83
90
  onCloseBottomSheet: (callback) => {
84
91
  if (closeRequestedRef.current) {
@@ -86,7 +93,7 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ children, onClose, onOpen, goBa
86
93
  }
87
94
  closeRequestedRef.current = true;
88
95
  postCallback.current = callback;
89
- bottomSheetDialogRef.current?.onCloseDialog();
96
+ dismissSheet();
90
97
  },
91
98
  onOpenBottomSheet: (callback) => {
92
99
  didNavigateBackRef.current = false;
@@ -97,10 +104,8 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ children, onClose, onOpen, goBa
97
104
  },
98
105
  }));
99
106
  return (<react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={react_native_1.Platform.OS === 'ios' ? -screenBottomPadding : frameY} style={[tw.style('absolute inset-0 justify-end'), style]} enabled={keyboardAvoidingViewEnabled} {...props}>
100
- <BottomSheetOverlay_1.BottomSheetOverlay onPress={isInteractable
101
- ? () => bottomSheetDialogRef.current?.onCloseDialog()
102
- : undefined}/>
103
- <BottomSheetDialog_1.BottomSheetDialog isInteractable={isInteractable} onClose={onCloseCB} onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} twClassName={twClassName} keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}>
107
+ <BottomSheetOverlay_1.BottomSheetOverlay ref={bottomSheetOverlayRef} onPress={isInteractable ? () => dismissSheet() : undefined}/>
108
+ <BottomSheetDialog_1.BottomSheetDialog isInteractable={isInteractable} onDismissStart={onDismissStart} onClose={onCloseCB} onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} twClassName={twClassName} keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}>
104
109
  {children}
105
110
  </BottomSheetDialog_1.BottomSheetDialog>
106
111
  </react_native_1.KeyboardAvoidingView>);
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport { BackHandler, KeyboardAvoidingView, Platform } from 'react-native';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nimport { BottomSheetDialog } from '../BottomSheetDialog';\nimport type { BottomSheetDialogRef } from '../BottomSheetDialog';\nimport { BottomSheetOverlay } from '../BottomSheetOverlay/BottomSheetOverlay';\n\nimport type {\n BottomSheetPostCallback,\n BottomSheetProps,\n BottomSheetRef,\n} from './BottomSheet.types';\n\nexport const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(\n (\n {\n children,\n onClose,\n onOpen,\n goBack,\n style,\n twClassName,\n isInteractable = true,\n isFullscreen = false,\n keyboardAvoidingViewEnabled = true,\n ...props\n },\n ref,\n ) => {\n const tw = useTailwind();\n const { bottom: screenBottomPadding } = useSafeAreaInsets();\n const { y: frameY } = useSafeAreaFrame();\n const postCallback = useRef<BottomSheetPostCallback | undefined>(undefined);\n const bottomSheetDialogRef = useRef<BottomSheetDialogRef>(null);\n const didNavigateBackRef = useRef(false);\n const closeRequestedRef = useRef(false);\n const didRunPostCallbackRef = useRef(false);\n\n const onOpenCB = useCallback(() => {\n // Reset when the sheet is opened again.\n didNavigateBackRef.current = false;\n closeRequestedRef.current = false;\n didRunPostCallbackRef.current = false;\n\n onOpen?.(Boolean(postCallback.current));\n const callback = postCallback.current;\n postCallback.current = undefined;\n callback?.();\n }, [onOpen]);\n\n const onCloseCB = useCallback(() => {\n if (goBack && !didNavigateBackRef.current) {\n didNavigateBackRef.current = true;\n goBack?.();\n }\n\n const callback = postCallback.current;\n const hasCallback = Boolean(callback);\n\n onClose?.(hasCallback);\n\n if (!didRunPostCallbackRef.current && hasCallback) {\n didRunPostCallbackRef.current = true;\n postCallback.current = undefined;\n callback?.();\n }\n }, [goBack, onClose]);\n\n // Dismiss the sheet when Android back button is pressed.\n useEffect(() => {\n if (Platform.OS !== 'android') {\n return undefined;\n }\n\n const hardwareBackPress = () => {\n if (isInteractable) {\n bottomSheetDialogRef.current?.onCloseDialog();\n }\n return true;\n };\n const subscription = BackHandler.addEventListener(\n 'hardwareBackPress',\n hardwareBackPress,\n );\n return () => {\n subscription.remove();\n };\n }, [isInteractable]);\n\n useImperativeHandle(ref, () => ({\n onCloseBottomSheet: (callback) => {\n if (closeRequestedRef.current) {\n return;\n }\n closeRequestedRef.current = true;\n postCallback.current = callback;\n bottomSheetDialogRef.current?.onCloseDialog();\n },\n onOpenBottomSheet: (callback) => {\n didNavigateBackRef.current = false;\n closeRequestedRef.current = false;\n didRunPostCallbackRef.current = false;\n postCallback.current = callback;\n bottomSheetDialogRef.current?.onOpenDialog();\n },\n }));\n\n return (\n <KeyboardAvoidingView\n behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n keyboardVerticalOffset={\n Platform.OS === 'ios' ? -screenBottomPadding : frameY\n }\n style={[tw.style('absolute inset-0 justify-end'), style]}\n enabled={keyboardAvoidingViewEnabled}\n {...props}\n >\n <BottomSheetOverlay\n onPress={\n isInteractable\n ? () => bottomSheetDialogRef.current?.onCloseDialog()\n : undefined\n }\n />\n <BottomSheetDialog\n isInteractable={isInteractable}\n onClose={onCloseCB}\n onOpen={onOpenCB}\n ref={bottomSheetDialogRef}\n isFullscreen={isFullscreen}\n twClassName={twClassName}\n keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}\n >\n {children}\n </BottomSheetDialog>\n </KeyboardAvoidingView>\n );\n },\n);\n\nBottomSheet.displayName = 'BottomSheet';\n"]}
1
+ {"version":3,"file":"BottomSheet.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport { BackHandler, KeyboardAvoidingView, Platform } from 'react-native';\nimport {\n useSafeAreaFrame,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nimport { BottomSheetDialog } from '../BottomSheetDialog';\nimport type { BottomSheetDialogRef } from '../BottomSheetDialog';\nimport { BottomSheetOverlay } from '../BottomSheetOverlay/BottomSheetOverlay';\nimport type { BottomSheetOverlayRef } from '../BottomSheetOverlay/BottomSheetOverlay.types';\n\nimport type {\n BottomSheetPostCallback,\n BottomSheetProps,\n BottomSheetRef,\n} from './BottomSheet.types';\n\nexport const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(\n (\n {\n children,\n onClose,\n onOpen,\n goBack,\n style,\n twClassName,\n isInteractable = true,\n isFullscreen = false,\n keyboardAvoidingViewEnabled = true,\n ...props\n },\n ref,\n ) => {\n const tw = useTailwind();\n const { bottom: screenBottomPadding } = useSafeAreaInsets();\n const { y: frameY } = useSafeAreaFrame();\n const postCallback = useRef<BottomSheetPostCallback | undefined>(undefined);\n const bottomSheetDialogRef = useRef<BottomSheetDialogRef>(null);\n const bottomSheetOverlayRef = useRef<BottomSheetOverlayRef>(null);\n const didNavigateBackRef = useRef(false);\n const closeRequestedRef = useRef(false);\n const didRunPostCallbackRef = useRef(false);\n\n const onOpenCB = useCallback(() => {\n // Reset when the sheet is opened again.\n didNavigateBackRef.current = false;\n closeRequestedRef.current = false;\n didRunPostCallbackRef.current = false;\n\n onOpen?.(Boolean(postCallback.current));\n const callback = postCallback.current;\n postCallback.current = undefined;\n callback?.();\n }, [onOpen]);\n\n const onCloseCB = useCallback(() => {\n if (goBack && !didNavigateBackRef.current) {\n didNavigateBackRef.current = true;\n goBack?.();\n }\n\n const callback = postCallback.current;\n const hasCallback = Boolean(callback);\n\n onClose?.(hasCallback);\n\n if (!didRunPostCallbackRef.current && hasCallback) {\n didRunPostCallbackRef.current = true;\n postCallback.current = undefined;\n callback?.();\n }\n }, [goBack, onClose]);\n\n const onDismissStart = useCallback(() => {\n bottomSheetOverlayRef.current?.fadeOut();\n }, []);\n\n const dismissSheet = useCallback((callback?: () => void) => {\n bottomSheetDialogRef.current?.onCloseDialog(callback);\n }, []);\n\n // Dismiss the sheet when Android back button is pressed.\n useEffect(() => {\n if (Platform.OS !== 'android') {\n return undefined;\n }\n\n const hardwareBackPress = () => {\n if (isInteractable) {\n dismissSheet();\n }\n return true;\n };\n const subscription = BackHandler.addEventListener(\n 'hardwareBackPress',\n hardwareBackPress,\n );\n return () => {\n subscription.remove();\n };\n }, [dismissSheet, isInteractable]);\n\n useImperativeHandle(ref, () => ({\n onCloseBottomSheet: (callback) => {\n if (closeRequestedRef.current) {\n return;\n }\n closeRequestedRef.current = true;\n postCallback.current = callback;\n dismissSheet();\n },\n onOpenBottomSheet: (callback) => {\n didNavigateBackRef.current = false;\n closeRequestedRef.current = false;\n didRunPostCallbackRef.current = false;\n postCallback.current = callback;\n bottomSheetDialogRef.current?.onOpenDialog();\n },\n }));\n\n return (\n <KeyboardAvoidingView\n behavior={Platform.OS === 'ios' ? 'padding' : undefined}\n keyboardVerticalOffset={\n Platform.OS === 'ios' ? -screenBottomPadding : frameY\n }\n style={[tw.style('absolute inset-0 justify-end'), style]}\n enabled={keyboardAvoidingViewEnabled}\n {...props}\n >\n <BottomSheetOverlay\n ref={bottomSheetOverlayRef}\n onPress={isInteractable ? () => dismissSheet() : undefined}\n />\n <BottomSheetDialog\n isInteractable={isInteractable}\n onDismissStart={onDismissStart}\n onClose={onCloseCB}\n onOpen={onOpenCB}\n ref={bottomSheetDialogRef}\n isFullscreen={isFullscreen}\n twClassName={twClassName}\n keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}\n >\n {children}\n </BottomSheetDialog>\n </KeyboardAvoidingView>\n );\n },\n);\n\nBottomSheet.displayName = 'BottomSheet';\n"]}
@@ -8,6 +8,7 @@ export declare const BottomSheet: React.ForwardRefExoticComponent<{
8
8
  isFullscreen?: boolean | undefined;
9
9
  isInteractable?: boolean | undefined;
10
10
  keyboardAvoidingViewEnabled?: boolean | undefined;
11
+ onDismissStart?: (() => void) | undefined;
11
12
  onClose?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
12
13
  onOpen?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
13
14
  twClassName?: string | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAWf,OAAO,KAAK,EAGV,cAAc,EACf,gCAA4B;AAE7B,eAAO,MAAM,WAAW;;;;;;;;;;;2EA6HvB,CAAC"}
1
+ {"version":3,"file":"BottomSheet.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAYf,OAAO,KAAK,EAGV,cAAc,EACf,gCAA4B;AAE7B,eAAO,MAAM,WAAW;;;;;;;;;;;;2EAoIvB,CAAC"}
@@ -8,6 +8,7 @@ export declare const BottomSheet: React.ForwardRefExoticComponent<{
8
8
  isFullscreen?: boolean | undefined;
9
9
  isInteractable?: boolean | undefined;
10
10
  keyboardAvoidingViewEnabled?: boolean | undefined;
11
+ onDismissStart?: (() => void) | undefined;
11
12
  onClose?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
12
13
  onOpen?: ((hasPendingAction?: boolean | undefined) => void) | undefined;
13
14
  twClassName?: string | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"BottomSheet.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAWf,OAAO,KAAK,EAGV,cAAc,EACf,gCAA4B;AAE7B,eAAO,MAAM,WAAW;;;;;;;;;;;2EA6HvB,CAAC"}
1
+ {"version":3,"file":"BottomSheet.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAYf,OAAO,KAAK,EAGV,cAAc,EACf,gCAA4B;AAE7B,eAAO,MAAM,WAAW;;;;;;;;;;;;2EAoIvB,CAAC"}
@@ -17,6 +17,7 @@ export const BottomSheet = forwardRef(({ children, onClose, onOpen, goBack, styl
17
17
  const { y: frameY } = useSafeAreaFrame();
18
18
  const postCallback = useRef(undefined);
19
19
  const bottomSheetDialogRef = useRef(null);
20
+ const bottomSheetOverlayRef = useRef(null);
20
21
  const didNavigateBackRef = useRef(false);
21
22
  const closeRequestedRef = useRef(false);
22
23
  const didRunPostCallbackRef = useRef(false);
@@ -44,6 +45,12 @@ export const BottomSheet = forwardRef(({ children, onClose, onOpen, goBack, styl
44
45
  callback?.();
45
46
  }
46
47
  }, [goBack, onClose]);
48
+ const onDismissStart = useCallback(() => {
49
+ bottomSheetOverlayRef.current?.fadeOut();
50
+ }, []);
51
+ const dismissSheet = useCallback((callback) => {
52
+ bottomSheetDialogRef.current?.onCloseDialog(callback);
53
+ }, []);
47
54
  // Dismiss the sheet when Android back button is pressed.
48
55
  useEffect(() => {
49
56
  if (Platform.OS !== 'android') {
@@ -51,7 +58,7 @@ export const BottomSheet = forwardRef(({ children, onClose, onOpen, goBack, styl
51
58
  }
52
59
  const hardwareBackPress = () => {
53
60
  if (isInteractable) {
54
- bottomSheetDialogRef.current?.onCloseDialog();
61
+ dismissSheet();
55
62
  }
56
63
  return true;
57
64
  };
@@ -59,7 +66,7 @@ export const BottomSheet = forwardRef(({ children, onClose, onOpen, goBack, styl
59
66
  return () => {
60
67
  subscription.remove();
61
68
  };
62
- }, [isInteractable]);
69
+ }, [dismissSheet, isInteractable]);
63
70
  useImperativeHandle(ref, () => ({
64
71
  onCloseBottomSheet: (callback) => {
65
72
  if (closeRequestedRef.current) {
@@ -67,7 +74,7 @@ export const BottomSheet = forwardRef(({ children, onClose, onOpen, goBack, styl
67
74
  }
68
75
  closeRequestedRef.current = true;
69
76
  postCallback.current = callback;
70
- bottomSheetDialogRef.current?.onCloseDialog();
77
+ dismissSheet();
71
78
  },
72
79
  onOpenBottomSheet: (callback) => {
73
80
  didNavigateBackRef.current = false;
@@ -78,10 +85,8 @@ export const BottomSheet = forwardRef(({ children, onClose, onOpen, goBack, styl
78
85
  },
79
86
  }));
80
87
  return (<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} keyboardVerticalOffset={Platform.OS === 'ios' ? -screenBottomPadding : frameY} style={[tw.style('absolute inset-0 justify-end'), style]} enabled={keyboardAvoidingViewEnabled} {...props}>
81
- <BottomSheetOverlay onPress={isInteractable
82
- ? () => bottomSheetDialogRef.current?.onCloseDialog()
83
- : undefined}/>
84
- <BottomSheetDialog isInteractable={isInteractable} onClose={onCloseCB} onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} twClassName={twClassName} keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}>
88
+ <BottomSheetOverlay ref={bottomSheetOverlayRef} onPress={isInteractable ? () => dismissSheet() : undefined}/>
89
+ <BottomSheetDialog isInteractable={isInteractable} onDismissStart={onDismissStart} onClose={onCloseCB} onOpen={onOpenCB} ref={bottomSheetDialogRef} isFullscreen={isFullscreen} twClassName={twClassName} keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}>
85
90
  {children}
86
91
  </BottomSheetDialog>
87
92
  </KeyboardAvoidingView>);